dw制作css
CSS 基础语法
CSS（层叠样式表）由选择器和声明块组成。选择器指定样式应用的HTML元素，声明块包含一组用分号分隔的样式规则，每条规则由属性和值构成。
选择器 {
属性1: 值1;
属性2: 值2;
}常用选择器类型
- 元素选择器：直接使用HTML标签名（如
p、div）。 - 类选择器：以点开头（如
.header），匹配HTML中class="header"的元素。 - ID选择器：以井号开头（如
#main），匹配id="main"的唯一元素。 - 后代选择器：通过空格嵌套（如
div p），选择div内的所有p元素。
盒模型
CSS盒模型由四部分组成：
- 内容区（content）：元素的实际内容。
- 内边距（padding）：内容与边框之间的空白。
- 边框（border）：围绕内容和内边距的线。
- 外边距（margin）：元素与其他元素之间的间距。
通过 box-sizing 属性可控制盒模型计算方式：
content-box（默认）：宽度仅包含内容。border-box：宽度包含内容、内边距和边框。
布局技术
Flexbox
弹性布局适合一维排列（行或列），通过 display: flex 启用：
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid
网格布局适合二维设计，通过 display: grid 定义行列：
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 两列，比例1:2 */
gap: 10px; /* 行列间距 */
}响应式设计
使用媒体查询（@media）适配不同屏幕尺寸：
@media (max-width: 768px) {
.sidebar {
display: none; /* 小屏幕隐藏侧边栏 */
}
}动画与过渡
过渡（Transition）
平滑改变属性值，需指定属性和时长：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: blue;
}关键帧动画（Animation）
通过 @keyframes 定义复杂动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}实用技巧
- 变量：使用
:root定义全局CSS变量：:root { --primary-color: #3498db; } .button { background-color: var(--primary-color); } - 伪类与伪元素：
:hover鼠标悬停样式。::before在元素前插入内容。
调试工具
浏览器开发者工具（F12）可实时编辑CSS，查看盒模型和布局结构，帮助快速定位问题。
