css样式制作
CSS样式制作基础
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下是核心方法和示例：
选择器与属性 通过选择器定位HTML元素并设置样式属性：
p {
color: blue;
font-size: 16px;
}
#header {
background-color: #f0f0f0;
}
.button:hover {
opacity: 0.8;
}盒模型控制 调整元素的外边距、边框、内边距和内容区域：
.box {
width: 200px;
padding: 20px;
margin: 10px auto;
border: 1px solid #ddd;
}布局技术
Flexbox布局 实现弹性容器内的项目排列：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}Grid布局 创建二维网格系统：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}响应式设计
媒体查询 根据不同屏幕尺寸应用样式：
@media (max-width: 768px) {
.menu {
display: none;
}
}视口单位 使用相对单位适应不同设备：
.banner {
height: 50vh;
font-size: 4vw;
}动画与过渡
关键帧动画 创建自定义动画序列：
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slide 0.5s ease-out;
}过渡效果 实现属性变化的平滑过渡：
.button {
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}预处理技术
Sass/Less 使用变量和嵌套语法：
$primary-color: #3498db;
.header {
background: $primary-color;
.logo {
width: 120px;
}
}性能优化
CSS压缩 减少文件大小：
/* 压缩前 */
.header { margin: 10px; padding: 5px; }
/* 压缩后 */
.header{margin:10px;padding:5px}关键CSS 优先加载首屏样式：
<style>
/* 内联关键CSS */
.hero { font-size: 2rem; }
</style>现代CSS特性
CSS变量 定义可复用的值：
:root {
--main-bg: #fff;
}
body {
background: var(--main-bg);
}滤镜效果 应用视觉滤镜：
.image {
filter: blur(2px) brightness(120%);
}
