【第四章】CSS——文本外观属性与复合选择器前言一、CSS 文本外观属性概述二、color文本颜色1. 基本作用2. 基本语法3. 颜色表示方式1预定义颜色名2十六进制表示法3RGB 表示法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;}常见颜色名有redbluegreenblackwhitegrayyellow2十六进制表示法p{color:#ff0000;}说明#ff0000表示红色#00ff00表示绿色#0000ff表示蓝色#000000表示黑色#ffffff表示白色简写形式p{color:#f00;}3RGB 表示法p{color:rgb(255,0,0);}含义第一个值表示红色分量第二个值表示绿色分量第三个值表示蓝色分量取值范围一般是0~2554. 示例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;}这种方法常用于导航栏文字垂直居中按钮文字居中显示单行标题居中显示七、文本属性综合示例下面给出一个综合示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title文本外观属性示例/titlestyleh1{color:#1e90ff;text-align:center;text-decoration:underline;}p{color:#333;text-indent:2em;line-height:28px;}a{text-decoration:none;color:green;}/style/headbodyh1CSS 文本外观属性/h1pCSS 可以设置文本颜色、对齐方式、缩进、装饰和行高等效果 使网页内容更加美观、规范。/pahref#这是一个链接/a/body/html八、复合选择器概述1. 什么是复合选择器在前面的学习中我们接触过基础选择器如标签选择器类选择器id 选择器通配符选择器但在实际开发中仅使用基础选择器往往不够灵活。为了更加准确地选中元素CSS 提供了复合选择器。复合选择器就是由两个或多个基础选择器组合形成的选择器用于更精确地控制样式。2. 复合选择器的常见分类常见复合选择器包括后代选择器子选择器并集选择器伪类选择器九、后代选择器1. 定义后代选择器用于选择某个元素内部的所有指定后代元素。2. 语法格式父元素 后代元素{样式声明;}注意父元素与后代元素之间用空格分隔。3. 示例ul li{color:red;}表示选中ul中的所有li元素。4. HTML 示例ulli列表项1/lili列表项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的直接子元素p5. 示例说明divp这是儿子/pspanp这是孙子/p/span/divdiv 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. 常见应用输入框高亮显示改变边框颜色提高表单交互体验十五、复合选择器综合示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title复合选择器示例/titlestyle.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/headbodydivclassnavulliahref#首页/a/liliahref#新闻/a/liliahref#联系我们/a/li/ul/divh1欢迎学习 CSS/h1h2复合选择器很重要/h2inputtypetextplaceholder请输入内容/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