制作网站css
CSS 基础结构
CSS（层叠样式表）用于控制网页的样式和布局。一个基本的CSS文件包含选择器和声明块，声明块由属性和值组成。
/* 注释：选择器 { 属性: 值; } */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}常用选择器类型
- 元素选择器：直接使用HTML标签名（如
p、div）。 - 类选择器：以点开头（如
.header），对应HTML中的class属性。 - ID选择器：以井号开头（如
#navbar），对应HTML中的id属性。 - 伪类选择器：用于元素状态（如
:hover、:active）。
/* 元素选择器 */
h1 {
color: #333;
}
/* 类选择器 */
.button {
background-color: #4CAF50;
}
/* ID选择器 */
#footer {
text-align: center;
}
/* 伪类选择器 */
a:hover {
text-decoration: underline;
}盒模型与布局
CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
.box {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 10px auto;
box-sizing: border-box; /* 包含padding和border在内的总宽度 */
}Flexbox 布局
Flexbox是一种现代的布局方式，适合响应式设计。
.container {
display: flex;
justify-content: space-between; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}
.item {
flex: 1; /* 等分剩余空间 */
}Grid 布局
CSS Grid适合复杂的二维布局。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
gap: 10px; /* 间距 */
}
.grid-item {
background-color: #fff;
padding: 20px;
}响应式设计
使用媒体查询（Media Queries）适配不同设备。
/* 移动设备优先 */
.main {
width: 100%;
}
/* 桌面设备 */
@media (min-width: 768px) {
.main {
width: 70%;
margin: 0 auto;
}
}动画与过渡
通过transition和@keyframes实现动态效果。
/* 过渡效果 */
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #45a049;
}
/* 关键帧动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s forwards;
}变量与自定义属性
CSS变量提高代码复用性。
:root {
--primary-color: #3498db;
--spacing: 10px;
}
.header {
background-color: var(--primary-color);
padding: var(--spacing);
}预处理器（Sass/Less）
预处理器提供嵌套、变量、混合等功能。
// Sass示例
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}性能优化建议
- 减少冗余代码，合并重复样式。
- 使用CSS压缩工具（如PostCSS）。
- 避免过度嵌套（尤其在预处理器中）。
- 优先使用Flexbox/Grid替代浮动布局。
