css站点制作
CSS 站点制作基础
CSS（层叠样式表）用于控制网页的样式和布局。以下是制作 CSS 站点的核心要点：
选择器与样式规则 CSS 通过选择器匹配 HTML 元素并应用样式。例如：
/* 元素选择器 */
p {
color: blue;
}
/* 类选择器 */
.header {
font-size: 24px;
}
/* ID 选择器 */
#main-content {
margin: 20px;
}盒模型 每个元素被视为一个矩形盒子，包含内容、内边距（padding）、边框（border）和外边距（margin）：
.box {
width: 200px;
padding: 15px;
border: 2px solid black;
margin: 10px;
}布局技术
Flexbox 弹性布局适合一维排列（行或列）：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}Grid 网格布局适合二维排列：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
.item {
grid-column: 2;
}响应式设计
媒体查询 根据屏幕尺寸调整样式：
@media (max-width: 768px) {
.sidebar {
display: none;
}
}视口单位 使用相对单位适应不同设备：
.container {
width: 90vw; /* 视口宽度的90% */
font-size: calc(1rem + 0.5vw);
}动画与过渡
关键帧动画 创建复杂动画效果：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}过渡效果 平滑状态变化：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #f0f0f0;
}性能优化
减少重绘 避免频繁修改样式：
/* 不佳 */
element.style.width = '100px';
/* 更佳 */
.element {
width: 100px;
}硬件加速 使用 GPU 加速动画：
.animate {
transform: translateZ(0);
}预处理工具
Sass/SCSS 提供变量、嵌套等功能：
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}浏览器兼容性
前缀处理 确保跨浏览器支持：
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}特性检测
使用 @supports 检查 CSS 支持：
@supports (display: grid) {
.container {
display: grid;
}
}
