css制作说明
CSS 基础语法
CSS 规则由选择器和声明块组成。选择器指定样式应用的 HTML 元素，声明块包含属性和值，用花括号 {} 包裹。
选择器 {
属性: 值;
属性: 值;
}示例：将段落文字颜色设置为红色
p {
color: red;
}选择器类型
元素选择器：直接使用 HTML 标签名（如 p、h1）。
类选择器：以 . 开头（如 .container），通过 HTML 的 class 属性调用。
ID 选择器：以 # 开头（如 #header），通过 id 属性调用。
后代选择器：用空格分隔（如 div p 选择 div 内的所有 p）。
常用样式属性
- 文本：
color（颜色）、font-size（字号）、text-align（对齐）。 - 盒子模型：
width/height（宽高）、padding（内边距）、margin（外边距）、border（边框）。 - 背景：
background-color（背景色）、background-image（背景图）。
布局技术
Flexbox：通过 display: flex 启用弹性布局，常用属性包括 justify-content（水平对齐）和 align-items（垂直对齐）。
.container {
display: flex;
justify-content: center;
}Grid：使用 display: grid 定义网格布局，配合 grid-template-columns 划分列。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}响应式设计
通过媒体查询（@media）适配不同屏幕尺寸。
@media (max-width: 600px) {
body {
font-size: 14px;
}
}动画与过渡
过渡：使用 transition 平滑变化属性值。
.button {
transition: background-color 0.3s;
}动画：通过 @keyframes 定义关键帧。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}注意事项
- 避免过度使用
!important，优先通过选择器优先级控制样式。 - 使用 CSS 预处理器（如 Sass）提升代码可维护性。
- 通过浏览器开发者工具调试样式问题。
