静态网页制作 css
静态网页制作中的CSS基础
CSS（层叠样式表）用于控制网页的样式和布局。静态网页通常由HTML和CSS构成，无需服务器端处理。以下是关键要点：
文件结构
将CSS代码保存在独立文件中（如style.css），通过HTML的<link>标签引入：
<link rel="stylesheet" href="style.css">选择器与样式 通过选择器指定HTML元素并定义样式：
/* 标签选择器 */
h1 {
color: blue;
font-size: 2em;
}
/* 类选择器 */
.header {
background-color: #f0f0f0;
}
/* ID选择器 */
#main-content {
padding: 20px;
}布局技术
盒模型 每个元素被视为矩形盒子，包含内容、内边距、边框和外边距：
.box {
width: 300px;
padding: 15px;
border: 1px solid #ddd;
margin: 10px auto;
}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;
}
}视口单位 使用相对单位适应不同屏幕：
.header {
height: 10vh; /* 视口高度的10% */
font-size: 4vw; /* 视口宽度的4% */
}视觉效果
过渡与动画 添加交互效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #45a049;
}
@keyframes slidein {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-element {
animation: slidein 1s forwards;
}自定义属性 定义可复用的样式变量：
:root {
--primary-color: #3498db;
--spacing-unit: 8px;
}
.element {
color: var(--primary-color);
margin: var(--spacing-unit);
}性能优化
代码组织
- 使用注释分组相关样式
- 遵循BEM等命名约定
- 避免过度嵌套选择器
资源加载
- 压缩CSS文件
- 使用
preload预加载关键CSS - 减少@import使用
通过合理应用这些技术，可以创建结构清晰、视觉美观且响应迅速的静态网页。
