网页制作css
CSS基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过将样式与HTML结构分离，提升代码可维护性。
引入CSS的方式
内联样式：直接在HTML标签中使用style属性
<p style="color: red;">文本内容</p>内部样式表：在HTML的<head>内通过<style>标签定义
<style>
p { color: blue; }
</style>外部样式表：通过.css文件引入（推荐方式）
<link rel="stylesheet" href="styles.css">常用选择器类型
元素选择器：按标签名匹配
p { font-size: 16px; }类选择器：通过class属性匹配
.highlight { background-color: yellow; }ID选择器：通过id属性匹配
#header { height: 80px; }属性选择器：按属性匹配
input[type="text"] { border: 1px solid #ccc; }盒模型
每个HTML元素被视为一个矩形盒子，包含：
content：实际内容区域padding：内容与边框间距border：盒子边界margin：盒子与其他元素间距
通过box-sizing属性控制计算方式：
* {
box-sizing: border-box; /* 宽度包含padding和border */
}常用布局技术
浮动布局：传统布局方式
.float-left { float: left; width: 50%; }Flexbox：一维布局解决方案
.container {
display: flex;
justify-content: space-between;
}Grid：二维布局系统
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}响应式设计
媒体查询实现不同屏幕尺寸适配
@media (max-width: 768px) {
.menu { display: none; }
}使用相对单位：
vw/vh：视窗宽高百分比rem：基于根元素字体大小%：相对于父元素
动画与过渡
CSS过渡实现平滑效果
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #f0f0f0;
}关键帧动画
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slide 0.5s forwards;
}性能优化建议
- 避免过度使用通配符选择器
* - 减少重排和重绘操作
- 使用
will-change提示浏览器优化 - 合并多个CSS文件减少HTTP请求
- 压缩CSS文件大小
现代CSS特性
CSS变量（自定义属性）
:root {
--primary-color: #4285f4;
}
.button {
background-color: var(--primary-color);
}CSS函数
.container {
width: min(100%, 1200px);
height: calc(100vh - 80px);
}
