1.11设置段落格式（课件）-高二《网页设计与制作》同步教学（劳动版）
2023-07-31
|
44页
|
164人阅读
|
3人下载
普通
内容正文：
使用CSS3设置网页格式
第二阶段
能够使用CSS的多种选择器选择需设置的页面格式。
能够使用合适的字体样式代码设置文字样式。
能够使用合适的文本样式代码设置D清单页面的段落样式。
任务目标
任务11 设置段落格式
本次任务要求在任务10基础上，根据D清单页面效果图，设置网页各内容的段落文本样式，包括字体、风格、颜色等，并统一网页中的首行缩进、行高等格式样式。完成后的效果图如2-2所示。
任务描述
图2-2完成后的效果图
任务11 设置段落格式
要为D清单页面中特定内容设置文本和段落格式，需要：
学习CSS的选择器的使用方法；
分析D清单页面中的格式样式，正确使用字体样式及文本样式代码设置文字及段落样式。
D清单页面格式样式分析如图2-2-1所示。
任务分析
图2-2-1 D清单页面格式样式分析图
任务11 设置段落格式
知识与技能准备
选择器（Selector）也称为选择符，HTML5中所有标记都是通过不同的CSS3选择器进行控制的。选择器不只是HTML5文档中的元素标记，它还可以是类、ID或是元素的某种状态。下面介绍几种常用的CSS3选择器。
1.1 标签选择器
也称类型选择器(Type Selector)。
1、CSS3的常用选择器
知识与技能准备
1.2 类选择器
类选择器用来为一系列标记定义相同的呈现方式。
其中classValue是类选择器的名称，具体名称由CSS编写者自己命名，但注意不能使用数字开头，class中的多个选择符名称使用空格隔开。示例：
1、CSS3的常用选择器
语法：.classValue { property: value }
1
2
3
4
5
6
7
8
9
10
11
12 <head>
<style>
.a1{color:green;} /*作用于第9行*/
.a2{color:blue;} /*作用于第10行*/
.a3{color:yellow;} /*作用于第11行*/
</style>
</head>
<body>
<p class="a1">这是绿色字体</p>
<p class="a2">这是蓝色字体</p>
<p class="a3">这是黄色字体</p>
</body>
知识与技能准备
1.3 ID选择器
ID选择器定义的是某一个特定的HTML元素，一个网页文件中只能有一个元素使用某一ID的属性值。
其中，idValue是ID选择器的名称，可以由CSS编者自己命名。示例如下：
1、CSS3的常用选择器
语法：#idValue { property: value }
1
2
3
4
5
6
7
8
9
10
11
12 <head>
<style>
#a1{color:green;} /*作用于第9行*/
#a2{color:blue;} /*作用于第10行*/
#a3{color:yellow;} /*作用于第11行*/
</style>
</head>
<body>
<p id="a1">这是绿色字体</p>
<p id="a2">这是蓝色字体</p>
<p id="a3">这是黄色字体</p>
</body>
知识与技能准备
1.4全局选择器
也称通配选择符，如果想让一个页面中的所有HTML标记使用同一种样式，可以使用全局选择器。
其中“*”表示对所有元素起作用。使用示例如下：
以上4种选择器可以统称为元素选择器。
1、CSS3的常用选择器
语法：* { property: value }
1 * { color:red; font-size:30px }
知识与技能准备
1.5包含选择器
通过标签层次结构选择目标，如果希望只对p中的span应用样式，可以这样写“p span{ }”，注意两个名称间要用空格隔开。
使用包含选择器的示例如下：
1、CSS3的常用选择器
1
2
3
4
5
6
7
8
9
10
11
12 <head>
<style>
p span{color:red} /*作用于第9、10行*/
</style>
</head>
<body>
<h1 class="aa">这是标题</h1>
<p>
<span>文字一</span>
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。