CSS定义
- CSS = Cascading Style Sheets（层叠样式表）
- 作用：控制网页的外观（颜色、大小、位置、背景等）
引入方式
| 方式 | 写法 | 使用场景 | 优缺点 |
|---|
| 行内样式 | <h1 style="color:red;"> | 极少单独修改某元素 | 不推荐，结构和样式混在一起 |
| 内部样式 | <style> 标签放在<head>里 | 单页面小案例 | 基础常用 |
| 外部样式 | <link rel="stylesheet" href="style.css"> | 正式网站（多页面共用） | 最推荐，维护方便 |
基本语法
选择器 {
属性: 值;
属性2: 值2;
}
选择器
元素选择器（标签选择器）
- 选中页面中所有该标签
- 示例：
p { font-size: 16px; } → 所有段落文字16像素
类选择器
- 写法：
.类名 { }
- 需要在HTML标签上添加
class="类名"
- 优势：同一类样式可复用
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<p class="highlight">重要内容</p>
ID选择器
- 写法：
#id名 { }
- 唯一性：一个页面中同一个ID只能出现一次
- 示例：
#nav { background: black; }
通配符选择器
- 写法：
* { }
- 选中页面上所有元素（通常用于重置内外边距）
- 示例：
* { margin: 0; padding: 0; }
选择器列表（分组）
- 一次选中多个选择器，用逗号隔开
- 示例：
h1, h2, .title { color: green; }
文字文本样式
1. 字体样式（font家族）
| 属性 | 作用 | 常用值 |
|---|
font-family | 字体类型 | "微软雅黑", Arial, sans-serif（备选字体） |
font-size | 字体大小 | 16px, 1.2em, 1.2rem（先掌握px和em） |
font-weight | 粗细 | normal, bold, 100~900 |
font-style | 倾斜 | normal, italic |
2. 颜色（color）
- 三种写法：
- 英文名：
red, blue, lightgray
- 十六进制：
#ff6600（橙色）
- rgb函数：
rgb(100, 150, 200)
3. 文本对齐（text-align）
- 值：
left, center, right, justify
4. 行高（line-height）
- 控制行间距，常用
1.5（无单位，表示字体大小的1.5倍）
5. 文字装饰（text-decoration）
- 常用值：
underline（下划线）、overline（上划线）、line-through（删除线）、none（无装饰）
- 重点应用：去掉链接默认的下划线
a { text-decoration: none; }
a:hover {
color: #d35400;
text-decoration: underline;
} /* 鼠标移动到链接上时，更改颜色并显示下划线 */