网页制作css笔记
CSS 基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过选择器（Selector）和声明块（{}）定义样式规则。
选择器 {
属性: 值;
}常用选择器类型
元素选择器：直接匹配 HTML 标签名。
p {
color: blue;
}类选择器：以 . 开头，匹配 class 属性。
.highlight {
background-color: yellow;
}ID 选择器：以 # 开头，匹配 id 属性（唯一性）。
#header {
font-size: 24px;
}后代选择器：通过空格嵌套匹配。
div p {
margin: 10px;
}盒模型
每个元素被视为一个矩形盒子，包含：
- 内容区（Content）：显示实际内容。
- 内边距（Padding）：内容与边框之间的空白。
- 边框（Border）：盒子的边界线。
- 外边距（Margin）：盒子与其他元素的距离。
.box {
width: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}布局技术
Flexbox：弹性布局，适合一维排列。
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid：网格布局，适合二维结构。
.grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 间隙 */
}响应式设计
使用媒体查询（Media Queries）适配不同屏幕尺寸。
@media (max-width: 768px) {
body {
font-size: 14px;
}
}常见样式属性
文本样式
.text {
font-family: Arial;
font-size: 16px;
line-height: 1.5;
text-align: center;
}背景与边框
.element {
background-color: #f0f0f0;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}动画与过渡
过渡效果：平滑改变属性值。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ddd;
}关键帧动画：自定义动画序列。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s;
}实用技巧
- 重置默认样式：使用
* { margin: 0; padding: 0; }清除浏览器默认值。 - 变量定义：通过
:root定义全局 CSS 变量。:root { --main-color: #3498db; } .element { color: var(--main-color); }
调试工具
浏览器开发者工具（F12）可实时检查元素样式，修改 CSS 并预览效果。
