网页制作 css样式
CSS样式基础语法
CSS（层叠样式表）通过选择器和声明块定义样式。基本语法结构如下：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定需要样式化的HTML元素（如
p、.class、#id）。 - 声明块：包含一组属性-值对，用花括号
{}包裹。
常用选择器类型
元素选择器：直接匹配HTML标签。
p {
color: blue;
}类选择器：通过 .class 匹配元素。
.text-red {
color: red;
}ID选择器：通过 #id 匹配唯一元素。
#header {
font-size: 24px;
}组合选择器：
- 后代选择器（空格分隔）：
div p - 子元素选择器（
>）：ul > li - 相邻兄弟选择器（
+）：h1 + p
盒模型
每个HTML元素视为一个盒子，包含：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
示例：
.box {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}布局方式
Flexbox：弹性布局，适合一维排列。
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid：网格布局，适合二维布局。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 间距 */
}响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}动画与过渡
过渡（transition）：平滑变化属性值。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #f00;
}关键帧动画（animation）：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}实用技巧
- 重置默认样式：使用
* { margin: 0; padding: 0; }清除浏览器默认值。 - 变量（CSS Custom Properties）：定义可复用值。
:root { --primary-color: #3498db; } .button { background-color: var(--primary-color); }
调试工具
- 浏览器开发者工具（F12）检查元素样式。
- 使用
border: 1px solid red;临时高亮元素边界。
通过系统学习以上内容，可快速掌握CSS的核心功能与最佳实践。
