任务1：修饰文字排版WEB3.1 任务1：修饰文字排版【任务描述】通过学习本任务，主要是让学习者了解 CSS层叠样式表的概念，掌握 CSS各
种样式的定义和使用，如内部样式表、外部样式表、行内样式定义。在本任务中，重点学习使用 CSS修饰文本、字体、段落排版等基本的样式修
饰。修饰文字排版CSS概述引入CSS的方法CSS选择器CSS特性字体修饰文本修饰CSS通常称为CSS样式或样式表，主要用于设置HT
ML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS概述CSS
的发展历史CSS的发展历史 CSS1 CS
S2 CSS2.1
CSS3CSS浏览器支持情况定位属性布局属性元素宽高属性由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明
确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。CSS浏览器支持情况引入CSS的方法请问：引入
CSS样式常用的三种方法？语法格式：任务1. 行内式引入CSS修饰页面任务要求：模仿练习：给段落设置样式;强化练习：把标题设置成蓝
色<标记名 style="属性1:属性值1; 属性2:属性值2"> 内容 语法格式：任务要求：模仿练习：使用内部嵌入
式给段落设置样式;强化练习：把标题设置成蓝色任务2. 内嵌式引入CSS修饰页面语法格式：任务要求：模仿练习：使用外部样式
表设置段落样式;强化练习：把标题设置成蓝色任务3. 外部样式表引入CSS修饰页面 径" type="text/css“ rel="stylesheet" />CSS选择器标记选择器是指用HTML标记
名作为选择器，按标记名分类，为页面中某一类标记指定统一的CSS样式，也称为标签选择器或元素选择器。其基本语法格式为：标记名{
属性1：属性值1; 属性2：属性值2; 属性3：属性值3; …..}1：标记选择器CSS选择器标记选择器按标记名分类，优点是能
快速为页面中同类型的标记统一设置样式。缺点是不能设计差异化样式，只能选择全部的所有当前标记。类选择器，对想要设置成一类型样式的一个
标记或者多个标记，命名为同一个类名，即指定class属性的属性值相同，然后在CSS样式定义中，通过类选择器选择出来，统一修饰。在C
SS中类选择器的定义，使用英文“.”为前缀，后面紧跟类名。2：类选择器CSS选择器3：多类名的应用。一个HTML标记可以同时指定多
个类名，从而达到更多的选择目的。在标记class属性中写多个类名时，多个类名之间必须用空格分开。CSS选择器4：id选择器的应用。
id选择器是通过对HTML标记的id属性的值进行选择。网页中任何HTML标记都可以有id属性，但是其id属性的值必须是唯一的。在C
SS中id选择器以“#”来定义。CSS选择器5：通配符选择器的应用。在CSS中，通配符选择器使用“”定义，表示选取页面中所有标记
。CSS选择器6：交集选择器的应用。交集选择器，也称为标记指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为clas
s选择器或id选择器，两个选择器之间不能有空格。CSS选择器7：并集选择器的应用。并集选择器是各个选择器通过逗号连接而成的，任何形
式的选择器（如标记选择器、类选择器、id选择器等）都可以作为并集选择器的一部分。CSS选择器8：后代选择器的应用。后代选择器也称为
包含选择器，用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。空格代表后代关系。CSS选
择器9：伪类选择器的应用。伪类选择器，它描述了某一类，这一类并不是我们通常定义的某个类选择器，但是通过伪类选择器可以选定网页元素的
某一类状态，例如hover鼠标悬浮在元素上的状态，focus当元素获得焦点时的状态等等。对伪类选择器的定义，使用“:”冒号和伪类名
。CSS选择器10：伪元素选择器的应用。CSS伪元素选择器，可以选取元素的一部分或者创建HTML标记无法生成的虚拟元素，或者在特定
元素之前、之后添加HTML内容、装饰HTML内容，而不需要更改HTML的结构，这个伪元素在文档中并不真实存在，所以称之为“伪元素”
。CSS选择器11：属性选择器的应用。CSS属性选择器，通过带有某个相同属性或设置特定属性值来选取HTML元素的方式。1. 层叠性
所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义标记字号大小为12像素，链入式定义 标记颜色为红色
，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。CSS特性任务要求：模仿练习：多类名的应用，定义red类，font类和
green类，第1，3段应用red和font类；第2，4段应用green和font类；其中font中定义文本蓝色强化练习：变换类的
定义顺序，和在一个标记中引用多个类的顺序；观察，总结。任务要求：模仿练习：对外层盒子设置文本颜色，倾斜效果；强化练习：设置字号，粗
体，观察，总结。CSS特性2. 继承性所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。并不是所有
的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框属性外边距属性内边距属性背景属性CSS特性定位属性布局属性元素宽高属性
任务要求：模仿练习：灵活使用各种选择器，设置如图页面效果。强化练习：总结归纳优先级。CSS特性3. 优先级定义CSS样式时，经常出
现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。
font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表
所示。字体修饰font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将
网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一
个字体，则会尝试下一个，直到找到合适的字体。例如：p{font-family:"微软雅黑";}body{font-family:"
华文彩云","宋体","黑体";}字体修饰各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不
需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的
单引号或双引号，例如font-family: "Times New Roman";。尽量使用系统默认字体，保证在任何用户的浏览器中
都能正确显示。使用font-family设置字体时，需要注意以下几点：字体修饰font-weight:字体粗细font-weigh
t属性用于定义字体的粗细，其可用属性值如下表所示。字体修饰font-style:字体风格font-style属性用于定义字体风格，
如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字
体样式。oblique：浏览器会显示倾斜的字体样式。其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别
，但实际工作中常使用italic。字体修饰font:综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法格式如下：使
用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高，在后面将具体介绍。例如
：等价于选择器{font: font-style font-variant font-weight /line-height fo
nt-family;}p{ font-family:Arial,"宋体"; font-size:30px; font-style:
italic; font-weight:bold; font-variant:small-caps; line-height:40
px;}p{ font:italic small-caps bold 30px/40px Arial,"宋体" ;}字体修饰col
or:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。十六进制，
如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rg
b(255,0,0)或rgb(100%,0%,0%)。文体修饰text-align:水平对齐方式text-align属性用于设置文
本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。cente
r：居中对齐。例如：h2{ text-align:center;}文体修饰text-decoration:文本装饰text-dec
oration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。unde
rline：下划线。overline：上划线。line-through：删除线。文体修饰text-indent:首行缩进text-
indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用
负值，建议使用em作为设置单位。文体修饰文体修饰12：line-height的应用。line-height:行间距line-hei
ght属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。项目实训任务描述：使用CSS样式，对新闻详页“最美逆行者”中标题、段落、图像等修饰样式。任务要求：团队讨论，分析出解决方案；独立应用技术，完成项目；提交到平台讨论区，展示、讨论任务1-修饰文字排版了解CSS的发展史及语法规范；理解引入CSS样式的方法；掌握CSS基本选择器的使用；掌握文字的字体修饰和文本修饰；课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务 |
