css样式表制作
CSS样式表制作基础
CSS（层叠样式表）用于控制网页的视觉呈现。通过CSS可以定义字体、颜色、布局等样式属性。
内联样式
直接在HTML标签中使用style属性定义样式：
<p style="color: blue; font-size: 16px;">示例文本</p>内部样式表
在HTML文档的<head>部分通过<style>标签定义：
<style>
p {
color: red;
margin: 10px;
}
</style>外部样式表
创建独立的.css文件（如styles.css），通过<link>引入：
<link rel="stylesheet" href="styles.css">常用CSS选择器
元素选择器
通过HTML标签名匹配元素：
h1 {
font-weight: bold;
}类选择器
使用.前缀匹配class属性：
.highlight {
background-color: yellow;
}ID选择器
使用#前缀匹配id属性：
#header {
height: 80px;
}盒模型与布局
盒模型属性
控制元素尺寸和间距：
.box {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}Flexbox布局
实现弹性容器布局：
.container {
display: flex;
justify-content: center;
}响应式设计
媒体查询
根据屏幕尺寸应用不同样式：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}相对单位
使用vw、%等单位实现自适应：
.container {
width: 90%;
max-width: 1200px;
}动画与过渡效果
过渡效果
平滑改变属性值：
.button {
transition: background-color 0.3s ease;
}关键帧动画
定义复杂动画序列：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}CSS预处理器示例（Sass）
变量定义
提升代码可维护性：
$primary-color: #3498db;
.button {
background: $primary-color;
}嵌套语法
简化选择器书写：
nav {
ul {
margin: 0;
li { display: inline-block; }
}
}
