css样式制作
CSS样式制作基础
CSS（层叠样式表）用于控制网页的视觉呈现。通过选择器和属性声明，可以精确控制HTML元素的布局、颜色、字体等样式。
选择器与属性
/* 标签选择器 */
p {
color: blue;
font-size: 16px;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
padding: 20px;
}盒模型 每个元素被视为一个矩形盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）：
width/height：内容区尺寸padding: 10px;：内边距border: 1px solid black;：边框margin: auto;：外边距
布局技术
Flexbox布局 弹性盒子模型适合一维布局（行或列）：
.container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
}
.item {
flex: 1; /* 弹性比例 */
}Grid布局 网格布局适合二维复杂布局：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 列宽比例 */
gap: 10px; /* 网格间隙 */
}
.grid-item {
grid-column: span 2;
}响应式设计
媒体查询 根据设备特性应用不同样式：
@media (max-width: 768px) {
.sidebar {
display: none;
}
.content {
width: 100%;
}
}视口单位 使用相对单位适应不同屏幕：
vw（视口宽度百分比）vh（视口高度百分比）vmin/vmax（最小/最大视口尺寸百分比）
动画与过渡
关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}过渡效果
.button {
transition: background-color 0.3s;
}
.button:hover {
background-color: #3498db;
}预处理与模块化
Sass/Less CSS预处理器提供变量、嵌套等功能：
$primary-color: #333;
.container {
.item {
color: $primary-color;
}
}CSS模块 组件化样式避免冲突：
/* styles.module.css */
.title {
font-weight: bold;
}import styles from './styles.module.css';
<h1 className={styles.title}>标题</h1>性能优化
选择器优化
- 避免深层嵌套（如
.nav ul li a） - 优先使用类选择器而非标签选择器
代码压缩 使用工具如PostCSS自动删除空白字符和冗余代码
关键CSS 将首屏必要样式内联，延迟加载非关键样式
现代CSS特性
CSS变量
:root {
--main-color: #06c;
}
.element {
color: var(--main-color);
}伪元素
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
}滤镜与混合模式
.image {
filter: blur(2px);
mix-blend-mode: multiply;
}
