1、模块5：HTML+CSS网页样式 学 习 导 入,本模块简单介绍HTML语言，着重介绍了CSS控制网页的方式，CSS文字样式、图片样式、背景样式、伪类别样式及CSS设置表格及表单的方法,熟练使用这些方法对制作网页起着至关重要的作用。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 学 习 目 标,技能目标：1.能用HTML语言制作出简单的网页2.使用不同的浏览器测试网页 知识目标：1.了解HMTL语言2.了解CSS样式的概念，区分不同CSS选择器的结构3.掌握CSS设置文字样
2、式、图片样式、背景样式、伪类别样式的方法4.掌握CSS设置表格及表单的方法,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,任务1 我的第一张网页任务描述 张芸已经能够设计网页了，但她想把自己的网页发布到网上去,怎么样做网页呢?任务目标利用记事本编写简单的HTML代码，效果如图5-1所示 图5-1任务分析 编写简单的HTML语言的结构，在标签内输入相应的文字。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务
3、10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,任务1、我的第一张网页1.我的第一张网页步骤（1）点击“开始”“程序” “记事本”打开记事本。（2）在记事本中录入以下HTML代码，如图5-4所示。 图5-4 图5-5（3）将该文档保存为01.html，则该文档保存为网页形式，如图5-5所示。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,任务评价,学习任务名称：我的第一张网页,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5
4、,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,任务总结 本任务详细讲解使用HTML语言制作一张简单的网页过程，熟练掌握HTML语言的结构。在制作过程中，理解每个标签所起的作用，结合制作分析，明确这些步骤的制作目的。必备知识1.网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。网址：用于定位某个网站某个页面的一串字符，如：http:/ 举例：(搜狐网) (百度网) (优酷网)等等。2.浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐
5、Firefox、360安全浏览器、遨游、腾讯TT等等。3.网页的组成元素如下图5-2所示。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,4. HTML语言及编写方法HTML（Hyper Text Markup Language 超文本标识语言），是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。 编写HTML语言可以用手工直接编写记事本等，存成.htm .html格式；使用可视化HTML编 辑 器Frontpage、Dreamwe
6、aver等由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。,图5-2,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,5.HTML文件结构。 文件的正文 标签：是HTML语言的基本部分。标签总是成对出现，每一对标签一般都有一个开始的标记（如），也有一个结束的标记（如）。标签的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。标签：每一个html文档都是从开始，结束于 。标签：与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有
7、特殊重要的意义。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务1,标签：定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。标签：表明是HTML文档的主体部分。在与之间，通常都会有很多其它标签；这些标签和标签属性构成HTML文档的主体部分6.网页文件命名规则文件后缀名为*.htm或*.html；无空格；无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字；区分大小写；首页文件名默认为：index.htm 或 index.html；用拼音、英文
8、、数字命名，莫用中文命名。 图5-3 HTML文档结构 图5-3,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务2,任务2 一则寓言故事的页面任务描述 有一则寓言故事，请你把它发布到网页上，并将版面排版好。任务目标 利用记事本编写简单的HTML代码，使用简单的HTML标签，效果如图5-8所示任务分析在记事本中写出HTML标签的结构，在标题标签处写上宽容，在body标签处写上文章的内容，使用标题标签、段落标记、回车换行标记做出效果。,图5-8,学 习 导 入,学 习 目
9、标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务2,任务实施二、制作一则寓言故事的页面1.制作一则寓言故事的页面步骤（1）点击“开始”“程序” “记事本”打开记事本。（2）在记事本中录入以下HTML代码，如图5-9所示。 图5-9（3）将该文档保存为04.htm，则该文档保存为网页形式，如图5-9所示。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务2,任务评价学习任务名称：
10、一则寓言故事的页面,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务2,任务总结本任务详细讲解了HTML常见的标签，将一些标签的应用融入到实例中，如H1标签、P标签、br标签。在制作过程中，理解这些标签在网页中的作用，并能灵活应用。 必备知识常用的标签H1H6标题标签（H1最大，H6最小） 段落标签 回车换行标签，单独出现 网页标题标签 水平线，单独出现 图像标签 超链接标签,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,
11、任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务3,任务3 Dreamweaver CS5界面的认识任务描述 小花学习了一段时间的HTML语言，发现代码很难记，希望能够学习一种可视化的网页开发工具减少她学习的难度。 任务目标 了解Dreamweaver CS5界面的构成，能在Dreamweaver CS5中输入一些简单的代码效果如图5-10所示。,图5-10,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务3,任务分析 启动Dreamweave
12、rCS5软件，能够切换代码、拆分、设计视图，在拆分视图环境中在相应的位置输入代码，触发语法提示功能输入代码。任务实施Dreamweaver CS5界面的认识步骤（1）点击“开始”“程序” “Adobe” “Adobe Dreamweaver CS5”或直接双击桌面的 图标。 （2）启动后界面，如图5-11所示。（3）点击“新建” “HTML”，进入DreamweaverCS5编辑环境,如图5-12所示。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务3,图5-11,图5
13、-12,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务3,（4）在DreamweaverCS5编辑环境的代码视图中输入如下图所示的代码，并将文件保存为07.htm。 从图5-13中看到，对于CSS代码默认情况下都采用粉红色进行语法用进行语法着色，而HTML代码中的标记是蓝色色，正文内容在默认情况下是黑色。而且对于每一行代码，前面都有行号进行标记，方便对代码的整体规划。 在编写具体的CSS代码时，按回车键或空格键都可以触发语法提示。例如在例5-14中，当光标移动到“col
14、or:red; ”一句的末尾时，按空格或者回画键，都可以触发语法提示的功能。,图5-13,图5-14,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务3,任务评价学习任务名称：Dreamweaver CS5界面的认识,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务3,任务总结 本任务详细讲解了dreamweaverCS5启动的方法及如何在拆分视图中
15、输入代码，在输入代码的过程中能够触发语法提示功能，提高编写代码的速度。必备知识 Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。 早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具。2005年Macromedia公司被Adobe公司
16、收购。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,任务4 使用CSS样式控制页面 任务描述 小花对CSS有了大致的了解，想使用CSS对网页进行全方位的控制，不知如何下手。 任务目标 学会使用CSS样式控制页面的三种方式：内嵌式、链接式和导入式，效果如图5-15所示。,图5-15控制页面的三种方式,(a)内嵌式、链接式,(b)导入式,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12
17、,模块5：HTML+CSS网页样式 任务4,任务分析 掌握内嵌式、链接式、导入式三种不同的写法，用不同的写法，可以制作出同样的网页效果，但是链接式是当前使用频率最高，也是最为实用的方法。任务实施 1.使用CSS样式控制页面步骤 (1). 内嵌式：在Dreamweaver的代码模式下输入以下代码，文件名保存为10.htm。 页面标题 h1color:#F00;pcolor:#60C; text-decoration:underline;font-size:24px; css标题1紫色、下划线、24px的效果1css标题2紫色、下划线、24px的效果2 ,学 习 导 入,学 习 目 标,任务1,任
18、务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,(2)链接式：在Dreamweaver的代码模式下输入以下代码，文件名保存为11.htm。页面标题css标题1紫色、下划线、24px的效果1css标题2紫色、下划线、24px的效果2创建文件1.css，输入以下代码。h1color:#F00;p color:#60C; text-decoration:underline; font-size:24px; ,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务
19、10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,从上面的例子可以看出，文件1.css将所有的CSS代码从HTML文件11.htm中分离出来,然后在文件11.htm的标记之间加上“”语句，将CSS文件链接到页面中，对其中的标记进行样式控制。(3)导入式：在Dreamweaver的代码模式下输入以下代码，文件名保存为12.htm。 页面标题 CSS标题1 紫色、下划线、24px的效果1 CSS标题2 紫色、下划线、24px的效果2 CSS标题3 紫色、下划线、24px的效果3 ,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务
20、9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,该例子在链接式例子的基础上进行了修改，加入了标题，前两行的效果与例11.htm的效果是一样的。由于新引入的标记由于没有设置样式，因此保持着默认的风格。如图5-16所示。,图5-16导入式，未对修改,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,HTML文件导入很多的样式表，以例12.htm为基础进行修改，创建文件2.css，同时使用两个import 语句将1.css和2.css同时导入到HT
21、ML中，具体如下。页面标题 CSS标题1 紫色、下划线、24px的效果1 CSS标题2 紫色、下划线、24px的效果2 CSS标题3 紫色、下划线、24px的效果3,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,然后创建文件2.css，将设置为斜体，颜色为青色，大小为36px。最终效果如图5-15(b)所示 。 h2color:#3CF; font-style:italic; font-size:36px; 由图5-15（b）所示新导入的2.css中设置的风格样式也
22、被运用到了页面效果中，而原有的1.css效果保持不变。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,任务评价学习任务名称：使用CSS样式控制页面,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,任务总结 本任务详细讲解了CSS控制页面的三种方法：内嵌式、链接式和导入式，通过三种例子分别介绍它们的控制页面的方法。重点掌握链接式的写法，这种方
23、法在网页制作过程使用较多,在学习过程中，多写多练则能达到熟能生巧的目的。必备知识必备知识1、什么是CSS CSS(Cascading Style Sheet),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单地说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。CSS语言是一种标记语言，因此不需要编译以，可以直接由浏览器执行（属于浏览器解释语言）。CSS文件是一个文本文件，它包含了一些CSS标记，CSS文件必须使用CSS为文件名后缀。CSS对大小写不敏感，CSS与css是一样。 2
24、、内嵌式 内嵌式样式表就是将CSS写在 与之间，并且用和标记进行声明。3、链接式 链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务4,4、导入式 导入样式表与链接样式表的功能基本相同，只是语法和运作方式上略有区别。采用im
25、port方式导入的样式表，在HTML文件初使化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式导入。在HTML文件导入样式表，常用的有如下几种import语句，可以选择任意一种放在与标记之间。import url(sheet1.css);import url(sheet1.css );import url(sheet1.css );import url sheet1.css ;import url sheet1.css;import url sheet1.css ;,学 习 导 入,学 习 目 标,任务1,任务2,任务
26、3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,任务5 使用不同的选择器控制网页任务描述 HTML语言有很多的标记，CSS是如何控制页面中的各种标记的。任务目标 能够区分、使用不同的CSS选择器控制页面中的各种标记。,使用标签选择器、类别选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器7种不同类型的选择器控制网页的标记。区分这7种选择的编写方式及使用方法。,任务分析,任务实施,1.使用标签选择器控制页面在Dreamweaver的代码模式下输入以下代码，文件名为15.htm，效果如图5-21所示。标签选
27、择器pcolor:#060; font-size:20px;h1color:#00F; font-size:24px;,图5-21,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5, 这是P标签 这是h1标签 P 是段落标签，h1是标题标签，这两个标签已有自身的样式，但也可以通过声明改变它们的样式风格。,2.使用类别选择器控制页面步骤在Dreamweaver的代码模式下输入以下代码，文件名保存为16.htm。效果如图5-17 类别选择器所示。class选择器 ,学 习
28、导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,class选择器1class选择器2class选择器3h3同样适用,图5-22 类别选择器,3个标签分别呈现出了不同的颜色以及字体大小。而且任何一个class选择器都适用于所有HTML标签，只需要用HTML标签的class属性声明即可。最后一行的标记显示效果为粗体字，而也使用了.two选择器的第2个标签却没有变成粗体。这是因为在.two类别中没有定义字体的粗细属性，因此各个HTML标签都采用了其自身默认的显示方式，默认为正常粗细
29、，而默认为粗体字。,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,3、使用ID选择器控制页面在Dreamweaver的代码模式下输入以下代码，文件名保存为17.htm,效果如图5-23 所示。ID选择器 ID选择器1ID选择器2ID选择器3ID选择器3,图5-23 ID选择器,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,4、使用全局选择
30、器控制页面 在Dreamweaver的代码模式下输入以下代码，文件名保存为18.htm,效果如图5-24 所示。全局声明 全局声明h1全局声明h2全局声明h3全局声明h4全局声明h5全局声明p1全局声明p2全局声明p3,对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望逐个来加入群组选择器列表。这时可以利用全局声明符号“*”,图5-24,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,5、使
31、用群组选择器控页面在Dreamweaver的代码模式下输入以下代码，文件名保存为19.htm，如图5-25 群组选择器选择器所示。群组选择器使用 ,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,群组选择器h1群组选择器h2群组选择器h3群组选择器h4群组选择器h5群组选择器p1群组选择器方法p2群组选择器p3群组选择器h1群组选择器h2群组选择器h3群组选择器h4群组选择器h5群组选择器p1群组选择器方法p2群组选择器p3,图5-20群组选择器,学 习 导 入,学
32、习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,6、使用后代选择器控制页面的步骤 在Dreamweaver的代码模式下输入以下代码，文件名保存为20.htm,效果如图5-26所示。后代选择器 嵌套使用CSS标记的方法嵌套之外的标记不生效 通过将b选择器嵌套在P选择器中进行声明，显示效果只适用于和之间的标记，而其外的标记并不产生任何效果。如图5-26后代选择器所示，只有第1行的粗体字变成深红色并加上了下划线，而第2行除了文字变成了粗体，其他地方没有任何变化。,图5-26,学 习 导 入,学
33、 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,7.使用伪类选择器控制页面 在Dreamweaver的代码模式下输入以下两段代码，文件名分别为21.html，22.hmtl，效果如图5-27所示。使用CSS属性修改文本链接颜色acolor:#900;text-decoration:none;a:visitedcolor:#0C0;text-decoration:none;a:hovercolor:#300; text-decoration:none;使用CSS属性修改文本链接颜色注意颜
34、色前后变化,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,后退 acolor:#F0F; text-decoration:none;a:visitedcolor:#C03; text-decoration:none;a:hovercolor:#00F; text-decoration:none; 前进页面 后退页面,图5-27 伪类选择器,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务
35、12,模块5：HTML+CSS网页样式 任务5,任务评价学习任务名称：使用不同的选择器控制网页,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,本任务详细讲解CSS的7种选择器，能区分这7种选择器，在制作过程中，理解这些选择器的作用，结合实际，使用不同的选择器控制网页样式。必备知识,任务总结,1.什么是选择器每一条css样式定义由两部分组成，形式如下： code 选择器样式 /code 在之前的部分就是“选择器”。 “选择器”指明了中的“样式”的作用对象，也就是“样式
36、”作用于网页中的哪些元素2.选择器的分类 标签选择器(如：body,div,p,ul,li) 类别选择器(如：class=head，class=head_logo) ID选择器(如：id=name，id=name_txt) 全局选择器(如：*号) 群组选择器（如：p,td,li line-height:20px; color:#c00; 后代选择器(如：div p,注意两个选择器用空格键分开) 伪类选择器(就是链接样式,a元素的伪类,4种不同的状态，link、visited、active、hover。) 3.标签选择器： 标签选择器是直接将HTML标签作为CSS选择器，可以是p、h1、dl、s
37、trong等HTML标签。如： pfont:12px; emcolor:blue; dlfloat:left;margin-top:10px;,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,一个HTML页面由很多不同的标签组成，而CSS标签选择器就是声明哪些标签采用哪种CSS样式。例如P选择器，就是用于声明页面中所有的标记的样式风格。同样可以通过h1选择器来声明页面中所有的标记的CSS风格，如下所示：,以上这段CSS代码声明了HTML页面中所有的标记，文字的颜色都采
38、用红色，大小都为25字。每个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格,如图5-17所示。,图5-17,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,4.类别选择器： 在标记选择器中一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明标记为红色时，页面中所有的标记都将显示为红色。如果希望其中的某一个标记不是红色，而是蓝色，这时仅依靠标记选择器是不够的，还需要引入类别(class)选择器。类别选择
39、器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，如图5-18所示。 类别名称 声明 声明,类别选择器 属性 值 属性 值 图5-18,学 习 导 入,学 习 目 标,任务1,任务2,任务3,任务4,任务5,任务6,任务7,任务8,任务9,任务10,任务11,任务12,模块5：HTML+CSS网页样式 任务5,5.ID选择器： ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的选择器，其格式如图5-19所示。 声明 声明,ID选择器 属性 值 属性 值 图5-19,
