CSS 基础概念

CSS 基础概念

CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器和属性组合，将样式应用到 HTML 元素。

/* 示例：修改段落文本颜色和字体 */
p {color: blue;font-family: Arial;
}

常用选择器

• 元素选择器：直接针对 HTML 标签（如 p、div）。
• 类选择器：通过 .classname 定义，可重复使用。
• ID 选择器：通过 #idname 定义，具有唯一性。
• 伪类选择器：如 :hover、:active 定义交互状态。

.button {background-color: #4CAF50;
}
#header {font-size: 24px;
}
a:hover {text-decoration: underline;
}

盒模型

每个 HTML 元素被视为一个盒子，包含 content、padding、border 和 margin。

• 标准盒模型：width 和 height 仅指内容区域。
• 替代盒模型：box-sizing: border-box 包含边框和内边距。

.box {width: 200px;padding: 20px;border: 5px solid black;margin: 10px;box-sizing: border-box; /* 启用替代盒模型 */
}

布局技术

• Flexbox：一维布局，适合动态排列项目。
• Grid：二维布局，支持复杂网格结构。
• 浮动（Float）：传统布局方式，现多用于图文环绕。

/* Flexbox 示例 */
.container {display: flex;justify-content: space-between;
}/* Grid 示例 */
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;
}

响应式设计

使用媒体查询（@media）适配不同设备屏幕尺寸。

@media (max-width: 600px) {.container {flex-direction: column;}
}

动画与过渡

通过 transition 和 @keyframes 实现动态效果。

/* 过渡效果 */
.button {transition: background-color 0.3s ease;
}
.button:hover {background-color: red;
}/* 关键帧动画 */
@keyframes slide {from { transform: translateX(0); }to { transform: translateX(100px); }
}
.slide-element {animation: slide 2s infinite;
}

预处理器（如 Sass）

扩展 CSS 功能，支持变量、嵌套和混合。

$primary-color: #333;
.button {background-color: $primary-color;&:hover {opacity: 0.8;}
}

性能优化

• 减少选择器复杂性。
• 使用 will-change 提示浏览器优化渲染。
• 压缩 CSS 文件以减少加载时间。

.element {will-change: transform; /* 提前告知浏览器变化属性 */
}