【第四章】CSS——文本外观属性与复合选择器
【第四章】CSS——文本外观属性与复合选择器
- 前言
- 一、CSS 文本外观属性概述
- 二、color：文本颜色
- 1. 基本作用
- 2. 基本语法
- 3. 颜色表示方式
- （1）预定义颜色名
- （2）十六进制表示法
- （3）RGB 表示法
- 4. 示例
- 三、text-align：文本对齐方式
- 1. 基本作用
- 2. 语法格式
- 3. 常用取值
- 4. 示例
- 5. 应用场景
- 四、text-decoration：文本装饰
- 1. 基本作用
- 2. 常用取值
- 3. 示例
- 4. 实际意义
- 五、text-indent：文本首行缩进
- 1. 基本作用
- 2. 常用单位
- 3. 示例
- 4. 应用场景
- 六、line-height：行高
- 1. 基本作用
- 2. 语法格式
- 3. 示例
- 4. 作用说明
- 5. 单行文本垂直居中
- 七、文本属性综合示例
- 八、复合选择器概述
- 1. 什么是复合选择器
- 2. 复合选择器的常见分类
- 九、后代选择器
- 1. 定义
- 2. 语法格式
- 3. 示例
- 4. HTML 示例
- 5. 特点
- 十、子选择器
- 1. 定义
- 2. 语法格式
- 3. 示例
- 4. 与后代选择器的区别
- 后代选择器
- 子选择器
- 5. 示例说明
- 十一、并集选择器
- 1. 定义
- 2. 语法格式
- 3. 示例
- 4. 应用场景
- 十二、伪类选择器
- 1. 定义
- 2. 链接伪类
- 常用四种状态
- 3. 示例
- 4. 使用顺序
- 十三、:hover 伪类选择器
- 1. 基本作用
- 2. 示例
- 3. 应用场景
- 十四、:focus 伪类选择器
- 1. 基本作用
- 2. 示例
- 3. 常见应用
- 十五、复合选择器综合示例
- 十六、文本外观属性与复合选择器的结合使用
- 十七、开发中常见注意事项
- 1. 选择器之间不要混淆
- 2. 超链接默认样式常需重置
- 3. `text-indent` 常用于段落，不适合所有元素
- 4. `line-height` 不宜过大或过小
- 5. `:hover` 在网页交互中非常常见
- 十八、本章知识总结
- 1. 文本外观属性
- 2. 复合选择器
- 3. 重点内容
- 十九、结语
- 二十、附：常见语法速查表
- 文本属性速查
- 复合选择器速查
- 超链接伪类顺序
前言
在网页设计中，CSS 不仅可以控制页面布局，还可以美化网页中的文字内容，并通过不同类型的选择器精准选中元素进行样式设置。
本章主要介绍CSS 中常见的文本外观属性和复合选择器。
其中，文本外观属性用于设置文字的颜色、对齐方式、装饰效果、缩进、行高等；复合选择器则可以帮助我们更灵活、更准确地选中页面元素。
通过本章学习，可以掌握：
- 常见文本样式属性的使用方法
- 文本属性在网页排版中的实际作用
- 复合选择器的分类与语法
- 伪类选择器在超链接和表单中的应用
- 如何综合运用文本属性和复合选择器美化网页
一、CSS 文本外观属性概述
文本外观属性主要用于设置网页中文字的显示效果。
在实际开发中，合理设置文本样式，可以使网页更加美观、清晰，也能提升用户阅读体验。
常见的文本外观属性包括：
color：文本颜色text-align：文本对齐方式text-decoration：文本装饰text-indent：文本首行缩进line-height：行高
这些属性通常与字体属性配合使用，共同完成文字样式设计。
二、color：文本颜色
1. 基本作用
color属性用于设置文本内容的颜色，是最常用的文本样式属性之一。
2. 基本语法
选择器{color:属性值;}3. 颜色表示方式
（1）预定义颜色名
p{color:red;}常见颜色名有：
redbluegreenblackwhitegrayyellow
（2）十六进制表示法
p{color:#ff0000;}说明：
#ff0000表示红色#00ff00表示绿色#0000ff表示蓝色#000000表示黑色#ffffff表示白色
简写形式：
p{color:#f00;}（3）RGB 表示法
p{color:rgb(255,0,0);}含义：
- 第一个值表示红色分量
- 第二个值表示绿色分量
- 第三个值表示蓝色分量
取值范围一般是0~255
4. 示例
h1{color:blue;}p{color:#333333;}三、text-align：文本对齐方式
1. 基本作用
text-align属性用于设置文本内容在元素中的水平对齐方式。
2. 语法格式
选择器{text-align:属性值;}3. 常用取值
left：左对齐center：居中对齐right：右对齐
4. 示例
h1{text-align:center;}p{text-align:left;}5. 应用场景
- 标题通常设置为居中对齐
- 正文一般默认左对齐
- 某些提示文字或说明信息可以设置为右对齐
四、text-decoration：文本装饰
1. 基本作用
text-decoration属性用于设置文本的装饰效果，常见于超链接样式设置。
2. 常用取值
none：无装饰underline：下划线overline：上划线line-through：删除线
3. 示例
a{text-decoration:none;}h2{text-decoration:underline;}.old-price{text-decoration:line-through;}4. 实际意义
- 超链接默认有下划线，可以通过
none去除 - 删除线常用于表示原价
- 下划线可用于强调文字内容
五、text-indent：文本首行缩进
1. 基本作用
text-indent属性用于设置文本首行缩进，常用于段落排版。
2. 常用单位
pxem
其中，em是相对单位，1em通常表示当前一个文字的大小。
3. 示例
p{text-indent:2em;}含义：
段落首行缩进两个字符的位置。
4. 应用场景
在文章正文中，常常通过text-indent: 2em;实现中文排版中常见的首行缩进效果。
六、line-height：行高
1. 基本作用
line-height属性用于控制行与行之间的距离，即文字的行高。
2. 语法格式
选择器{line-height:属性值;}3. 示例
p{line-height:30px;}4. 作用说明
适当增大行高可以提高文字的可读性，使页面显得更加舒适、整洁。
5. 单行文本垂直居中
当元素高度和行高相等时，可以实现单行文本的垂直居中。
div{height:40px;line-height:40px;}这种方法常用于：
- 导航栏文字垂直居中
- 按钮文字居中显示
- 单行标题居中显示
七、文本属性综合示例
下面给出一个综合示例：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>文本外观属性示例</title><style>h1{color:#1e90ff;text-align:center;text-decoration:underline;}p{color:#333;text-indent:2em;line-height:28px;}a{text-decoration:none;color:green;}</style></head><body><h1>CSS 文本外观属性</h1><p>CSS 可以设置文本颜色、对齐方式、缩进、装饰和行高等效果， 使网页内容更加美观、规范。</p><ahref="#">这是一个链接</a></body></html>八、复合选择器概述
1. 什么是复合选择器
在前面的学习中，我们接触过基础选择器，如：
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
但在实际开发中，仅使用基础选择器往往不够灵活。
为了更加准确地选中元素，CSS 提供了复合选择器。
复合选择器就是由两个或多个基础选择器组合形成的选择器，用于更精确地控制样式。
2. 复合选择器的常见分类
常见复合选择器包括：
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
九、后代选择器
1. 定义
后代选择器用于选择某个元素内部的所有指定后代元素。
2. 语法格式
父元素 后代元素{样式声明;}注意：
父元素与后代元素之间用空格分隔。
3. 示例
ul li{color:red;}表示选中ul中的所有li元素。
4. HTML 示例
<ul><li>列表项1</li><li>列表项2</li></ul>对应样式：
ul li{color:blue;}5. 特点
- 可以嵌套多层
- 只要是指定元素的后代都能选中
- 适用范围较广
例如：
.nav ul li a{text-decoration:none;}表示选中.nav中ul中li中的a元素。
十、子选择器
1. 定义
子选择器只能选中某元素的亲儿子元素，不能选中孙子元素或更深层后代元素。
2. 语法格式
父元素 > 子元素{样式声明;}3. 示例
div > p{color:green;}表示只选中div的直接子元素p。
4. 与后代选择器的区别
后代选择器
div p表示选中div内所有层级的p
子选择器
div > p表示只选中div的直接子元素p
5. 示例说明
<div><p>这是儿子</p><span><p>这是孙子</p></span></div>div > p{color:red;}结果：
- 第一个
p被选中 - 第二个
p不会被选中
十一、并集选择器
1. 定义
并集选择器用于同时选择多个元素，并为它们设置相同的样式。
2. 语法格式
选择器1, 选择器2, 选择器3{样式声明;}多个选择器之间用逗号分隔。
3. 示例
h1, h2, h3{color:purple;}表示同时为h1、h2、h3设置相同颜色。
4. 应用场景
当多个元素样式相同时，使用并集选择器可以减少重复代码，提高代码简洁性。
例如：
div, p, span{font-size:16px;}十二、伪类选择器
1. 定义
伪类选择器用于给某些元素的特殊状态设置样式。
最常见的是超链接相关伪类选择器。
2. 链接伪类
常用四种状态
a:link：未访问的链接a:visited：已访问的链接a:hover：鼠标悬停时a:active：鼠标按下未弹起时
3. 示例
a:link{color:blue;}a:visited{color:purple;}a:hover{color:red;}a:active{color:orange;}4. 使用顺序
链接伪类通常按以下顺序书写：
a:linka:visiteda:hovera:active可以理解为：
lvha
这是为了避免样式覆盖问题。
十三、:hover 伪类选择器
1. 基本作用
:hover表示鼠标悬停在元素上时的状态。
它不仅可以用于超链接，也可以用于其他元素。
2. 示例
div:hover{color:white;background-color:blue;}当鼠标移入div时，文字变白，背景变蓝。
3. 应用场景
- 导航栏悬停效果
- 按钮鼠标经过效果
- 图片悬停高亮效果
- 卡片悬停动画提示
十四、:focus 伪类选择器
1. 基本作用
:focus用于选中获得焦点的表单元素。
2. 示例
input:focus{background-color:#f0f8ff;color:#333;}当输入框被点击并处于输入状态时，就会应用该样式。
3. 常见应用
- 输入框高亮显示
- 改变边框颜色
- 提高表单交互体验
十五、复合选择器综合示例
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>复合选择器示例</title><style>.nav ul li{list-style:none;}.nav > ul > li{display:inline-block;margin-right:20px;}h1, h2, h3{color:darkblue;}a{text-decoration:none;}a:hover{color:red;}input:focus{background-color:#e6f7ff;}</style></head><body><divclass="nav"><ul><li><ahref="#">首页</a></li><li><ahref="#">新闻</a></li><li><ahref="#">联系我们</a></li></ul></div><h1>欢迎学习 CSS</h1><h2>复合选择器很重要</h2><inputtype="text"placeholder="请输入内容"></body></html>十六、文本外观属性与复合选择器的结合使用
在实际网页开发中，文本外观属性通常不会单独使用，而是会与复合选择器结合起来，对特定区域中的文字进行样式控制。
例如：
.news p{color:#444;text-indent:2em;line-height:30px;}说明：
- 选中
.news区域中的所有段落 - 设置段落字体颜色
- 设置首行缩进
- 设置行高
再例如：
.nav ul li a{text-decoration:none;color:#333;}.nav ul li a:hover{color:#1e90ff;}说明：
- 设置导航栏超链接默认样式
- 鼠标悬停时改变颜色
这就是 CSS 在真实页面中的典型应用方式。
十七、开发中常见注意事项
1. 选择器之间不要混淆
- 后代选择器是空格
- 子选择器是
> - 并集选择器是
,
三者语法不同，作用也不同，必须区分清楚。
2. 超链接默认样式常需重置
浏览器会给a标签默认下划线和颜色，开发中通常需要重新设置：
a{text-decoration:none;color:#333;}3.text-indent常用于段落，不适合所有元素
首行缩进更适合长文本段落，不适合按钮、标题等元素。
4.line-height不宜过大或过小
- 过小：文字拥挤，阅读困难
- 过大：段落松散，影响版面
5.:hover在网页交互中非常常见
它是实现“鼠标经过效果”的关键语法，必须熟练掌握。
十八、本章知识总结
本章主要学习了 CSS 中的文本外观属性和复合选择器。
1. 文本外观属性
常见文本属性包括：
color：设置文字颜色text-align：设置文字对齐方式text-decoration：设置文字装饰text-indent：设置首行缩进line-height：设置行高
这些属性可以使网页文字更加美观，也能提升页面可读性。
2. 复合选择器
常见复合选择器包括：
- 后代选择器：用空格连接
- 子选择器：用
>连接 - 并集选择器：用
,连接 - 伪类选择器：表示元素的特殊状态
3. 重点内容
本章学习的重点有：
- 熟练掌握常见文本属性的含义和写法
- 区分后代选择器和子选择器
- 掌握并集选择器的书写方式
- 重点理解
a:hover和input:focus的应用
十九、结语
CSS 的文本外观属性和复合选择器是网页设计中的基础内容，也是后续学习盒子模型、布局、定位和页面美化的重要前提。
只有把文字样式设置好，把元素精准选中，才能进一步写出结构清晰、外观美观的网页。
因此，在学习本章时，不仅要记住每个属性和选择器的语法，更要理解它们在实际网页开发中的用途。
只有不断练习，才能真正熟练掌握 CSS。
二十、附：常见语法速查表
文本属性速查
color:red;text-align:center;text-decoration:none;text-indent:2em;line-height:28px;复合选择器速查
div p{}/* 后代选择器 */div > p{}/* 子选择器 */h1, h2, h3{}/* 并集选择器 */a:hover{}/* 伪类选择器 */input:focus{}/* 焦点伪类 */超链接伪类顺序
a:linka:visiteda:hovera:active