制作css
CSS基础语法
CSS规则由选择器和声明块组成。选择器指向需要设置样式的HTML元素，声明块包含一个或多个用分号分隔的声明。每个声明由属性和值组成，用冒号分隔。
选择器 {
属性: 值;
属性: 值;
}常用选择器类型
元素选择器直接使用HTML标签名称作为选择器，类选择器以点（.）开头，ID选择器以井号（#）开头。后代选择器用于选择特定元素内的元素，伪类选择器用于定义特殊状态。
p {
color: blue;
}
.className {
font-size: 16px;
}
#idName {
background: yellow;
}
nav a {
text-decoration: none;
}
a:hover {
color: red;
}盒模型概念
每个HTML元素都可以看作一个盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。标准盒模型的总宽度计算公式为：
width = margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}布局技术
浮动布局通过float属性实现元素横向排列，Flex布局提供更灵活的排列方式，Grid布局创建二维网格系统。定位属性position允许精确定义元素位置。
.float-box {
float: left;
width: 50%;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
}响应式设计
媒体查询@media允许根据设备特性应用不同样式，视口单位vw/vh基于视口尺寸，rem基于根元素字体大小。这些技术共同实现响应式布局。
@media (max-width: 768px) {
.menu {
display: none;
}
}
.responsive-box {
width: 80vw;
font-size: 2rem;
}动画与过渡
transition属性在状态改变时创建平滑过渡效果，@keyframes规则定义复杂动画序列。transform属性实现旋转、缩放等变换效果。
.button {
transition: background 0.3s ease;
}
.button:hover {
background: #ff0000;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slider {
animation: slide 2s infinite;
}预处理器特性
Sass和Less等预处理器支持变量、嵌套规则、混合宏和函数等高级功能，提高CSS的可维护性。这些代码需要编译为标准CSS才能使用。
$primary-color: #333;
@mixin border-radius($radius) {
border-radius: $radius;
}
.box {
@include border-radius(10px);
color: $primary-color;
}
