课程进度 12% · 第3/20章第3/20章 · 标签 1/3
— 1 —
CSS简介
CSS（层叠样式表）用于美化和布局网页，是前端三大核心技术之一。
css
1
<style>
2
p { color: blue; }
3
</style>
4
<p>这是一段蓝色文字</p>
选择器
- 元素选择器：p { }
- 类选择器：.class { }
- ID选择器：#id { }
- 通配选择器：* { }
- 属性选择器：[type="text"]
- 伪类：:hover、:first-child
- 组合选择器：div > p、div p
css
1
/* 各种选择器示例 */
2
p { color: red; }
3
.highlight { background: yellow; }
4
#header { font-size: 24px; }
5
* { margin: 0; padding: 0; }
6
a:hover { text-decoration: underline; }
7
div > p { margin: 10px 0; }
— 2 —
颜色与单位
- 颜色：hex (#ff0000)、rgb()、rgba()、hsl()
- 单位：px、em、rem、%、vw、vh
- em：相对于父元素字体大小
- rem：相对于根元素字体大小
文本与字体
- font-size、font-weight、font-family
- text-align、text-decoration、line-height
- color、text-shadow
css
1
/* 文本样式 */
2
body { font-family: "Microsoft YaHei", sans-serif; }
3
h1 { font-size: 2rem; font-weight: bold; }
4
p { font-size: 16px; line-height: 1.6; color: #333; }
5
.text-center { text-align: center; }
选择器颜色字体单位CSS