css语言制作
CSS 基础语法
CSS（层叠样式表）用于描述 HTML 文档的样式。基本语法由选择器和声明块组成：
selector {
property: value;
}selector选择 HTML 元素（如p、.class、#id）。property指定样式属性（如color、font-size）。value定义属性的具体值（如red、16px）。
常用样式属性
文本样式
p {
color: #333; /* 文字颜色 */
font-family: Arial; /* 字体 */
font-size: 14px; /* 字号 */
text-align: center; /* 对齐方式 */
}盒模型
div {
width: 200px;
height: 100px;
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid #000; /* 边框 */
}背景与渐变
body {
background-color: #f0f0f0;
background-image: linear-gradient(to right, red, yellow);
}选择器类型
基础选择器
- 元素选择器：
p { ... } - 类选择器：
.class { ... } - ID 选择器：
#id { ... }
组合选择器
- 后代选择器：
div p { ... }（匹配div内的所有p） - 子选择器：
div > p { ... }（仅匹配直接子元素）
伪类与伪元素
a:hover { color: blue; } /* 鼠标悬停 */
p::first-line { font-weight: bold; } /* 首行样式 */布局技术
Flexbox
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid
.grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 间距 */
}响应式设计
@media (max-width: 600px) {
body { font-size: 12px; } /* 小屏幕调整 */
}动画与过渡
过渡效果
button {
transition: background-color 0.3s ease;
}
button:hover { background-color: #ddd; }关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: fadeIn 2s; }预处理器（Sass/SCSS）
变量与嵌套
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover { background: darken($primary-color, 10%); }
}混合宏（Mixin）
@mixin flex-center {
display: flex;
justify-content: center;
}
.box { @include flex-center; }实用建议
- 使用
reset.css或normalize.css统一浏览器默认样式。 - 遵循 BEM 命名规范（如
.block__element--modifier）提高可维护性。 - 通过 Chrome DevTools 实时调试 CSS 属性。
