css网页制作样式表
CSS 基础语法
CSS（层叠样式表）通过选择器和声明块定义样式。
选择器 {
属性: 值;
}- 选择器：指定HTML元素（如
p、.class、#id）。 - 声明块：包含属性和值（如
color: red;）。
常用样式属性
文本与字体
font-family: Arial, sans-serif; /* 字体 */
font-size: 16px; /* 字号 */
color: #333; /* 文字颜色 */
text-align: center; /* 对齐 */ 盒模型
width: 200px; /* 宽度 */
padding: 10px; /* 内边距 */
margin: 20px auto; /* 外边距 */
border: 1px solid #ddd; /* 边框 */ 背景与渐变
background-color: #f5f5f5; /* 背景色 */
background-image: url("image.jpg"); /* 背景图 */
background: linear-gradient(to right, #ff0000, #00ff00); /* 渐变 */ 布局技术
Flexbox
.container {
display: flex;
justify-content: space-between; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
} Grid布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
gap: 10px; /* 间距 */
} 响应式设计
@media (max-width: 768px) {
.menu { display: none; } /* 小屏幕隐藏菜单 */
} 动画与过渡
过渡效果
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
} 关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
} 最佳实践
- 模块化：使用预处理器（如Sass）拆分样式文件。
- 命名规范：遵循BEM（如
.block__element--modifier）。 - 性能优化：减少冗余代码，压缩CSS文件。
通过合理组合以上技术，可高效实现现代网页的视觉与交互需求。
