第3章 CSS网页样式基础 【目标任务】 学习目标1． 掌握CSS基本概念和作用 2． 掌握Dreamweaver设置CSS样式的方法 3． 掌握引入CSS样式表的方法 4． 掌握CSS样式的语法规则 5． 掌握CSS基础选择器的类型及优先级 6． 掌握CSS文本样式的设置 7． 掌握CSS复合选择器的应用 8． 掌握CSS的继承特性 9． 掌握CSS的优先级 10． 掌握CSS的层叠性 重点知识1． 外部、内部和行内CSS样式表的运用 2． CSS基础选择器与复合选择器 3． CSS样式语法规则 4． CSS文本样式的设置 5． CSS的层叠特性 6． CSS的继承特性 7． CSS的优先级的判断方法 项目实战项目 31百度搜索结果网页局部样式设置 项目32端午节习俗新闻页面 实训作业实训任务31Web前端试学班广告页局部样式设置 实训任务32“商品推荐”页局部样式设置 【知识技能】 3．1什么是CSS样式 什么是CSS样式呢？在本书第2章中曾经提到，直接给 ﹤ body﹥ 、 ﹤ p﹥ 、 ﹤ img﹥ 、 ﹤ ul﹥ 等HTML标签设置属性的方式使网页代码变得臃肿、维护不方便，并不符合Web标准的理念，在实际项目开发时，常用CSS的方式来格式化网页文档。 CSS于1994年由哈坤·利(Hakon Wium Lie)提出，当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS，以解决HTML为了满足页面设计者的需求，增加了多种显示功能属性，使得HTML网页代码变得越来越杂乱、越来越臃肿的难题。 CSS是Cascading Style Sheets的缩写，译作层叠样式表。CSS是一组样式设置规则，用于控制Web页面内容的外观，也是一种表示HTML或XML等文件样式的计算机语言，它的定义是由W3C来维护。 关于网页样式的代码通常存储在样式表文件中，与控制网页结构和内容的HTML代码分别存放在不同的位置，解决内容与表现分离的问题，符合Web标准的要求。 如图31所示，HTML标签设置了网页的结构， ﹤ p﹥ 标签内设置了网页的内容。应用内部CSS样式表控制页面的外观，如字体、颜色、对齐、文字间距和行间距、去掉链接下画线等文字样式; 设置列表样式; 设置图像阴影和透明度; 设置段落或页面的背景颜色、背景图像; 控制网页的布局等。 图31HTML结构与CSS样式 CSS样式的优点有以下几点。 1． 表达效果丰富,更易于控制页面外观 CSS支持文字、图像的精确定位，三维层技术以及交互操作等,应用CSS样式可以更好地控制页面的外观，如字体、颜色、尺寸、调整文字间距和行间距、去掉链接下画线、设置列表样式、设置图像阴影和透明度，控制网页的布局等。 2． 内容和表现形式分离，代码简练、修改方便，更方便控制页面外观 如果说HTML是用于构建网页骨架，那么CSS就是为网页装修外观。CSS可以将页面的内容和表现形式分离，页面内容即HTML代码放在HTML文件中，用于定义代码表现形式的CSS规则，放在另一个文件(外部样式表)或HTML文档的另一部分(通常放在文件头部分)。当需要给这些网页定义样式时，只要将样式文件链接至各个网页即可，而不必再把烦琐的样式编写在每个文档结构中，这样使得HTML文档的代码更为简练，缩短浏览器的加载时间，同时也方便修改和更新，只改变CSS文件中的某一行，整个站点的网页随之改变，无须对每个页面上的每个属性都进行更新。 3． 文档体积小，节约带宽，提高传输速度 相同标签的内容有相同的样式表现，使用传统的方法需要为每个标签分别定义显示格式，造成大量重复定义，使网页代码臃肿。使用CSS，对同一类标签只需进行一次格式定义即可，大大缩小文件体积，提高传输速度，节约带宽。 4． 便于信息检索 样式与内容、结构分离，显示细节的描述并不会影响文档中数据的内在结构，搜索引擎对文档进行检索时，更容易检索到有用信息。 5． 可读性好 CSS文件内，对各种标签的显示集中定义，且定义方式直观易读，使得易学、易用、可读性、可维护性提高。而且，结构化的数据也相对简洁、清晰，突出对内容本身的描述。 6． 极大地提高了工作效率 样式通常保存在外部的 ．css 文件中，站点中的所有页面的相同的样式，建立一个样式表，多个页面都可以链接此样式表。通过编辑一个简单的 CSS 文档，外部样式表可同时改变站点中所有页面的布局和外观，使得HTML文档的代码更为简练，缩短浏览器的加载时间。同一页面中，样式表可以控制所有相同属性的标签、类、ID，同样，通过修改style样式，控制整个页面的外观。 3．2Dreamweaver CC中创建样式表并设置CSS样式的方法 3．2．1认识【CSS样式】面板 在Dreamweaver CC中，可以通过【CSS样式】面板来新建、删除、编辑和应用CSS样式，以及附加外部样式表等。单击【窗口】→【CSS样式】(【Shift+F11】)菜单，打开【CSS样式】面板，如图32所示。在【CSS样式】面板中，可以直观地查看整个文档中定义的所有样式，也可以直接快速更改当前所选样式的属性。 图32【CSS样式】面板 【CSS样式】面板的【全部】选项卡包含两个窗格。其中，上半部分的【所有规则】窗格显示了当前文档中定义的样式和链接到当前文档的样式文件中定义 的样式; 下半部分的【属性】窗格可以快速编辑【所有规则】窗格中所选CSS样式的属性。 图33【CSS样式】面板的 【当前】选项卡 通过单击面板左下角的3个按钮，可控制属性的显示方式。其中，【类别】视图表示按类别分组显示属性(如“字体”“背景”“区块”“边框”等)，并且已设置的属性位于每个类别的顶部; 【列表】视图表示按字母顺序显示属性，并且已设置的属性排在顶部。此外，在类别视图和列表视图模式下，已设置的属性将以蓝色显示。要修改属性，可直接单击选择属性，进行修改。 单击【当前】选项卡按钮，【CSS样式】面板将显示3个窗格(如图33所示)，上部是当前所选内容的CSS属性摘要，中部显示了所选属性位于哪个样式中，下部显示了CSS样式属性。 3．2．2创建并编辑CCS样式的过程 在Dreamweaver CC中，可按照以下方法来创建CSS样式。 Step01.在【CSS样式】面板中单击【新建CSS规则】按钮，弹出【新建CSS规则】对话框，如图34所示。 Step02.在【选择器类型】下拉列表中选择要创建的选择器类型，如图35所示。输入选择器名称，标签选择器不用定义选择器名称，在下拉列表中进行选择即可。在Dreamweaver CC中，【选择器类型】主要共有4种，具体内容将在本书后续章节详细讲解。 图34【新建CSS规则】对话框 图35选择器类型 Step03.在【规则定义】选项组中指定保存样式的位置，如图36所示。 图36引入样式表的方式 图37创建外部样式表 选择“新建样式表文件”，弹出【将样式表另存为】对话框，如图37所示，创建一个扩展名为．css的外部样式表文件。 在代码视图中会产生链接外部样式表的代码，如图38所示。 图38外部样式表 若在图36中选择“仅限该文档”，将新建样式保存在指定目录中，并在代码视图生成内部样式表代码，如图39所示。 图39内部样式表 Step04.单击【确定】按钮，弹出【CSS规则定义】对话框，如图310所示。在【body的CSS规则定义】对话框左侧的【分类】列表区选择不同分类，可设置样式的不同属性。单击【确定】按钮。 图310【CSS规则定义】对话框 3．3引入CSS样式表的方法 在HTML中，引入CSS样式有3种方式: 外部样式表、内部样式表和行内样式。 3．3．1外部样式表 外部样式表是将所有的样式放在一个或多个以．css为扩展名的外部样式表文件中，在HTML文件的 ﹤ head﹥ 标签中，通过 ﹤ link / ﹥ 标签将外部样式表文件(扩展名为．css的样式表文件)链接到HTML文档中，其基本语法格式如下。 ﹤ head﹥ ﹤ link href="CSS文件的路径" type="text/css" rel="stylesheet" /﹥ ﹤/head﹥ 该语法中， ﹤ link / ﹥ 标签需要放在 ﹤ head﹥ 头部标签中，并且必须指定 ﹤ link / ﹥ 标签的3个属性，具体如下。  href: 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。  type: 定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。  rel: 定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 【例31】外部样式表的应用(案例文件: chapter03\\example\\exp3_1．html) HTML文档exp3_1．html代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 外部样式表 ﹤/title﹥ ﹤ link href="css/style1．css"rel="stylesheet" type="text/css" /﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ exp01标题2 ﹤/h2﹥ ﹤ p﹥ exp01段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 外部CSS样式表文件style1．css代码如下。 @charset "utf8"; /* CSS Document */ h2{color: red; } p{color: blue; } 第一行代码声明该CSS文件使用utf8编码，当文件保存为utf8编码时，其中的中文字体可以正确显示为中文，中文注释文字也能正常显示，否则中文注释显示为乱码。第二行代码是CSS样式表的注释，表明这是一个CSS样式。 同HTML的注释一样，注释起解释说明的作用，浏览器不会解释CSS注释，也不会被显示，只有用户打开CSS文件才会看见注释与注释内容。CSS注释的开始使用/*,结束使用*/，基本语法格式如下。 /* 注释内容 */ 示例代码如下。 h2{color: red; }/* 设置 ﹤h2﹥ 标签的文字颜色为红色 */ p{color: blue; }/*设置 ﹤p﹥ 标签的文字颜色为蓝色*/ 为了节省篇幅，在本书后续章节中省略这两行代码，只书写关键的CSS代码，完整的代码请看随书附带的CSS代码。 【例32】一个外部样式表被多个HTML文档调用(案例文件: chapter03\\example\\exp3_2．html) 外部样式表最大的优点是同一个CSS样式表可以被不同的HTML页面链接使用，如例31中HTML文档exp3_1．html和本例中的HTML文档exp3_2．html都调用了外部样式表style1．css，省去了对每一个HTML网页都要进行样式设置的麻烦。 HTML文档exp3_2．html代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 外部样式表 ﹤/title﹥ ﹤ link href="css/style1．css"rel="stylesheet" type="text/css" /﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ exp02标题2 ﹤/h2﹥ ﹤ p﹥ exp02段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 【例33】一个HTML文档调用多个外部样式表(案例文件: chapter03\\example\\exp3_3．html) 一个HTML页面也可以通过多个 ﹤ link / ﹥ 标签链接多个CSS外部样式表。 HTML文档exp3_3．html代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en"﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 外部样式表 ﹤/title﹥ ﹤ link href="css/style1．css"rel="stylesheet" type="text/css" /﹥ ﹤ link href="css/style2．css"rel="stylesheet" type="text/css" /﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ exp03标题2 ﹤/h2﹥ ﹤ p﹥ exp03段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 外部CSS样式表style1．css代码如下。 h2{color: red; }/* 设置 ﹤h2﹥ 标签的文字颜色为红色 */ p{color: blue; }/*设置 ﹤p﹥ 标签的文字颜色为蓝色*/ 外部CSS样式表style2．css代码如下。 h2{fontsize: 48px}/* 设置 ﹤h2﹥ 标签的文字字号为48像素 */ p{fontsize: 24px; }/* 设置 ﹤p﹥ 标签的文字字号为24像素 */ 两个外部样式表共同控制HTML标签的样式， ﹤ h2﹥ 标签的文字颜色为红色，字号为48像素，﹤ p﹥ 标签的文字颜色为蓝色，字号为24像素。 3．3．2内部样式表 内部样式表是将CSS代码集中写在HTML文档的 ﹤ head﹥ 头部标签中，并且用 ﹤ style﹥ 标签定义，其基本语法格式如下。 ﹤ head﹥ ﹤ title﹥ 标题 ﹤/title﹥ ﹤ style type="text/css" ﹥ 选择器 {属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; … } ﹤/style﹥ ﹤/head﹥ ﹤ style﹥ 标签一般位于 ﹤ head﹥ 标签中 ﹤ title﹥ 标签之后。 ﹤ style﹥ 标签的type属性是必需的，取值是唯一的，取值为“text/css”。表示style标签对之间的文本内容要作为层叠样式表 (css)来解析。 【例34】内部样式表的应用(案例文件: chapter03\\example\\exp3_4．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 内部样式表 ﹤/title﹥ ﹤ style type="text/css" ﹥ h2{textalign: center; } p{ fontsize: 16px; color: red; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ 标题2 ﹤/h2﹥ ﹤ p﹥ 段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 内部样式只对其所在的HTML页面有效，因此，当单个文档需要特殊的样式时，使用内嵌式是个不错的选择。如果是一个网站，内部样式表不能充分发挥CSS代码的重用优势。有关网站统一样式建议使用外部样式表，可被多个网页调用； 有关当前网页自身独特的样式，可以使用内部样式表。 3．3．3行内样式 行内样式又称内联样式，是通过HTML标签的style属性来控制标签的样式，任何HTML标签都拥有style属性，用来设置行内式。其基本语法格式如下。 ﹤ 标签名 style="属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; … " ﹥ 内容 ﹤/标签名﹥ 【例35】行内样式表的应用(案例文件: chapter03\\example\\exp3_5．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 行内样式 ﹤/title﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ 标题2 ﹤/h2﹥ ﹤ p﹥ 段落1 ﹤/p﹥ ﹤ p style="color: red; " ﹥ 段落2， 只有段落2的文字变为 ﹤ span﹥ 红色 ﹤/span﹥ ﹤/p﹥ ﹤ p﹥ 段落3 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 在浏览器中运行，可以看到，只有段落2的文字颜色变为红色，可见，行内样式只对其所在的标签及嵌套在其中的子标签起作用。行内样式以标签属性的方式存在，并没有做到结构与表现的分离，代码臃肿，一般很少使用。只有在样式规则较少且只在该元素上使用一次，或者临时修改某个样式规则时使用。 3．3．4CSS样式表的混合使用 行内样式表、内部样式表、外部样式表各有优势，实际项目开发中常常需要混合使用。有关整个网站统一风格的样式代码，放置在独立的外部样式文件*．css中，可以 图311“最近优先”原则 被各个HTML文档调用。某些样式独特的页面，除了链接外部样式文件，还需定义内部样式表，只控制当前页面的样式。某张网页内，需要临时修改样式规则，可暂时采用行内样式。 对于某个HTML标签，如果既设置了外部样式，又设置了内部样式和行内样式，如果规定的样式没有冲突，则样式叠加; 如果有冲突，则依据“最近优先”原则，如图311所示。最先考虑行内样式表显示，再考虑内部样式显示，最后采用外部样式显示，没有设置的按照HTML的默认样式显示。 【例36】CSS样式表的混合应用(案例文件: chapter03\\example\\exp3_6．html) HTML文档代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 样式表的优先级 ﹤/title﹥ ﹤ link href="css/style1．css"rel="stylesheet" type="text/css" /﹥ ﹤ link href="css/style2．css"rel="stylesheet" type="text/css" /﹥ ﹤ style type="text/css" ﹥ h2{textalign: center; } p{ fontsize: 16px; color: green; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ 标题2 ﹤/h2﹥ ﹤ p﹥ 段落1 ﹤/p﹥ ﹤ p style="color: red; " ﹥ 段落2， 只有段落2的文字变为 ﹤ span﹥ 红色 ﹤/span﹥ ﹤/p﹥ ﹤ p﹥ 段落3 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 外部CSS样式表style1．css代码如下。 h2{color: red; }/* 设置 ﹤h2﹥ 标签的文字颜色为红色 */ p{color: blue; }/*设置 ﹤p﹥ 标签的文字颜色为蓝色*/ 外部CSS样式表style2．css代码如下。 h2{fontsize: 48px}/* 设置 ﹤h2﹥ 标签的文字字号为48像素 */ p{fontsize: 24px; }/* 设置 ﹤p﹥ 标签的文字字号为24像素 */ 对于标题2，style1．css、style2．css和内部样式表中设置的样式没有冲突，所以，样式叠加显示; 对于段落1和段落3，外部样式表和内部样式表中都设置了color和 fontsize，产生冲突，按照内部样式表设置的样式显示; 对于段落2，fontsize按照内部样式表的设置显示，color按照行内样式表的设置显示。 3．4CSS样式的语法规则 使用HTML时，需要遵从一定的规范。CSS亦是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。CSS样式具体格式如下。 选择器{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } 在以上的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，称为一个“声明”，属性是对指定的对象设置的样式属性，如字体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区分。 以下代码的作用是将 p元素内的文字颜色定义为红色，同时将字体大小设置为20 像素。p是选择器，color 和 fontsize 是属性，red 和20px 是属性值。 p {color: red; fontsize: 20px; } 以上代码的结构如图312所示。 图312CSS语法规则 书写CSS样式时，除了要遵循CSS样式规则，还必须注意以下几个问题。 1． 选择器区分大小写 CSS样式中的选择器，除标签选择器外，其他选择器严格区分大小写，标签选择器最好使用小写。 2． 属性和值不区分大小写 属性和值不区分大小写，按照书写习惯，最好采用小写方式。 3． 属性名值对分号隔开 多个声明之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略。有经验的网页设计人员会在每条声明的末尾都加上分号，从现有的规则中增加声明时，尽可能地减少出错的可能性。示例代码如下。 p {textalign: center; color: red; } 4． 属性值中的双引号 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的双引号。示例代码如下。 p{fontfamily: "Times New Roman"; } 5． CSS注释 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。注释是用以解释代码，便于开发人员查看，浏览器不会解析它。CSS注释以 “/*” 开始, 以 “*/” 结束。示例代码如下。 p { textalign: center; /*文本居中对齐*/ color: black; /*文字颜色为黑色*/ fontsize: 24px; /*文字字号为24像素*/ } 6． CSS代码缩进 CSS代码的排版最好在每行只描述一个属性，并且注意缩进，这样可以增强样式定义的可读性，建议初学者形成良好的CSS书写规范。 3．5CSS样式基础选择器 若将CSS样式应用于特定的HTML元素，需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。 3．5．1标签选择器 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。基本语法格式如下。 标签名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; … } 所有HTML标签名都可以作为标签选择器，例如body、h1~h6、p、span、a、img等HTML标签。用标签选择器定义的样式对页面中该类型的所有标签都有效。在创建或更改一个HTML标签的CSS样式后，所有使用该标签的文本的样式将得到更新。示例代码如下。 p{ fontsize: 12px; color: #666; fontfamily: "宋体"; } 以上CSS样式代码用于设置HTML页面中所有的段落文本的字号大小为12像素、颜色为#666、字体为宋体。 【例37】标签选择器(案例文件: chapter03\\example\\exp3_7．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 标签选择器 ﹤/title﹥ ﹤ style type="text/css" ﹥ h1{color: blue; } p{color: #333; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h1﹥ 第1个标题 ﹤/h1﹥ ﹤ p﹥ 第1个段落 ﹤/p﹥ ﹤ p﹥ 第2个段落 ﹤/p﹥ ﹤ h1﹥ 第2个标题 ﹤/h1﹥ ﹤ p﹥ 第3个段落 ﹤/p﹥ ﹤ p﹥ 第4个段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 为标签 ﹤ h1﹥ 设置文本颜色为蓝色，所有的 ﹤ h1﹥ 标签内的文本都变成蓝色; 为标签 ﹤ p﹥ 设置文本颜色为#333，所有的段落文本颜色都是#333。 标签选择器最大的优点是能快速为页面中同类型的标签统一样式，但这也是它的缺点，不能设计差异化样式。如果使用标签选择器定义了 ﹤ p﹥ 标签的样式，则网页中所有 ﹤ p﹥ 标签的内容都变成定义的样式。若有一个 ﹤ p﹥ 标签内容要求不按照预先定义的标签样式显示，就需要用到类选择器。 3．5．2类选择器 类选择器又称自定义CSS样式，类选择器主要用于定义一些特殊的样式，可以多次被相同的标签调用，也可以被多种不同的标签调用，一个标签还可以同时调用多个类。类选择器名称必须以英文的句点(．)开头，类名使用字母、数字、下画线，第一个字符不能是数字，严格区分大小写。基本语法格式如下。 ．类名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; … } 类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。在HTML文档中，通过标签的class属性调用类。注意，在HTML标签中调用类时，不用加英文句点。基本语法格式如下。 ﹤ 开始标签class="类名" ﹥ 内容… ﹤/结束标签 ﹥ ﹤ 开始标签class="类名1类名2" ﹥ 内容…﹤/结束标签 ﹥ 【例38】类选择器(案例文件: chapter03\\example\\exp3_8．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 类选择器 ﹤/title﹥ ﹤ style type="text/css" ﹥ h1{color: blue; } p{color: #333; } ．special_1{color: red; } ．special_2{fontsize: 24px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h1 class="special_1" ﹥ 第1个标题 ﹤/h1﹥ ﹤ p﹥ 第1个段落 ﹤/p﹥ ﹤ p class="special_1" ﹥ 第2个段落 ﹤/p﹥ ﹤ p class="special_1" ﹥ 第3个段落 ﹤/p﹥ ﹤ p class="special_1 special_2" ﹥ 第4个段落 ﹤/p﹥ ﹤ h1﹥ 第2个标题 ﹤/h1﹥ ﹤ p﹥ 第5个段落 ﹤/p﹥ ﹤ p﹥ 第6个段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 定义类名为．special_1和．special_2的类选择器并设置了CSS样式，．special_1多次被 ﹤ p﹥ 标签调用，也被多种标签( ﹤ h1﹥ 和 ﹤ p﹥ 标签)调用，第四个段落 ﹤ p﹥ 标签同时调用了两个类，两个类名之间要用空格隔开。以下写法是错误的。 ﹤ p class="special_1" class="special_2" ﹥ 内容… ﹤/p﹥ 3．5．3ID选择器 ID选择器的使用方法和类选择器基本相同，不同之处在于网页中的ID值是唯一的，同一个页面不能出现相同的ID名。因此，ID选择器只能在HTML中使用一次，只用来对单一元素定义单独的样式。通常情况下,对页面中比较唯一、固定且不会在同一个页面内重复出现的对象使用ID来标志，如布局中的logo、导航、主体包含块、版权等。基本语法格式如下。 #id名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; … } ID选择器使用“#”进行标识，后面紧跟id名。id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，id的命名使用字母、数字、下画线，第一个字符不能是数字，严格区分大小写。 在HTML文档中，通过标签的id属性调用id选择器，注意，在HTML标签中调用类时，不用加#。基本语法格式如下。 ﹤ 开始标签id="id名" ﹥ 内容… ﹤/结束标签 ﹥ 【例39】ID选择器(案例文件: chapter03\\example\\exp3_9．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ ID选择器 ﹤/title﹥ ﹤ style type="text/css" ﹥ p {fontsize: 20px; color: black; textalign: center; } div{width: 960px; border: 1px solid red; }/*设置所有div标签的宽度和边框*/ #nav{height: 50px; }/*设置高度*/ #banner{height: 80px; } #main{height: 200px; } #footer{height: 50px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ div id="nav" ﹥ ﹤ p﹥ 导航区 ﹤/p﹥ ﹤/div﹥ ﹤ div id="banner" ﹥ ﹤ p﹥ banner区 ﹤/p﹥ ﹤/div﹥ ﹤ div id="main" ﹥ ﹤ p﹥ 主内容区 ﹤/p﹥ ﹤/div﹥ ﹤ div id="footer" ﹥ ﹤ p﹥ 页脚区 ﹤/p﹥ ﹤/div﹥ ﹤/body﹥ ﹤/html﹥ 例39的运行效果如图313所示。 图313ID选择器 不同于类选择器的多次调用，一个标签应用多个id是错误的。以下写法是错误的。 ﹤ p id="logonav" ﹥ 这种用法是错误的 ﹤/p﹥ 注意，在很多浏览器中，同一个id应用于多个标签，浏览器并不报错，但这种做法是不合理的。id不能多次使用，而class类选择器却可以重复使用，因为id的优先级高于class，所以id应该按需使用，而不能滥用。 3．5．4通配符选择器 通配符选择器使用“*”号表示，它是所有选择器中作用范围最为广泛的，能匹配页面中所有的元素。通配符选择器经常用于CSS样式重置(reset)，清除浏览器的默认样式。基本语法格式如下。 *{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } 使用通配符选择器定义CSS样式，清除所有HTML标签的默认边距。示例代码如下。 * { margin: 0; /* 定义所有标签的外边距*/ padding: 0; /* 定义所有标签的内边距*/ } 通配符选择器在CSS中的优先级是最低的。实际项目开发中，不建议使用通配符选择器，因为它设置的样式对所有的HTML标签都生效，这样反而降低了代码的执行速度，比较耗费资源。常连接一个外部的reset．css文件，针对不同的标签进行相关的清零设置，请参考本书附带的文件chapter03\\example\\css\\reset．css。 3．6常用CSS文本样式 学习HTML时，可以使用标签的属性简单控制文本的显示样式，但是这种方式烦琐且不利于代码的共享和移植，不符合Web标准的要求，因此，CSS提供了相应的文本样式属性，使用CSS可以更轻松方便地控制文本样式。常用的文本样式属性有以下几种。 3．6．1fontstyle（字体风格） fontstyle属性用于定义字体风格，如设置斜体、倾斜或正常字体，可用属性值如表31所示。 表31fontstyle属性 属性值描述 normal默认值，浏览器会显示标准的字体样式 italic浏览器会显示文字斜体的字体样式 oblique浏览器会将文字倾斜，包括无斜体属性的文字 【例310】fontstyle(案例文件: chapter03\\example\\exp3_10．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ fontstyle ﹤/title﹥ ﹤ style type="text/css" ﹥ p {fontsize: 20px; } ．it{fontstyle: italic; } ．ob{fontstyle: oblique; } ．normal{fontstyle: normal; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ p标签的默认值 ﹤/p﹥ ﹤ p class="it" ﹥ italic样式 ﹤/p﹥ ﹤ p class="ob" ﹥ oblique样式 ﹤/p﹥ ﹤ i﹥ i标签的默认值 ﹤/i﹥ ﹤ br﹥ ﹤ br﹥ ﹤ i class="normal" ﹥ 利用"fontstyle: normal"取消i标签的默认斜体样式 ﹤/i﹥ ﹤/body﹥ ﹤/html﹥ 例310的运行效果如图314所示。 图314fontstyle效果图 由图314可见，italic与oblique显示效果几乎一样，实际项目开发中，常用italic。使用CSS的 fontstyle: normal可以取消 ﹤i﹥ 标签的斜体样式。 3．6．2fontvariant（变体） fontvariant属性一般用于使英文字符表现为小型大写字母，仅对英文字符有效。可用属性值如表32所示。 表32fontvariant属性 属性值描述 normal默认值，浏览器会显示标准的字体 smallcaps浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小 【例311】fontvariant(案例文件: chapter03\\example\\exp3_11．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ fontvariant ﹤/title﹥ ﹤ style type="text/css" ﹥ ．var{fontvariant: smallcaps; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 小写www．http://hsnc．edu．com ﹤/p﹥ ﹤ p class="var" ﹥ 小写变小型大写www．http://hsnc．edu．com ﹤/p﹥ ﹤ p﹥ 大写WWW．HTTP: //HSNC．EDU．COM ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例311的运行效果如图315所示。 图315fontvariant效果图 由图315可见，“fontvariant: smallcaps”的效果大小跟小写字母一样，但样式是大写的。 3．6．3fontweight（字体粗细） fontweight属性用于设置文本的粗细，可用属性值如表33所示。 表33fontweight属性 属性值描述 normal默认值。定义标准的字符 bold定义粗体字符 bolder定义更粗的字符 lighter定义更细的字符 100~900(100的整数倍)定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗 【例312】fontweight(案例文件: chapter03\\example\\exp3_12．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ fontweight ﹤/title﹥ ﹤ style type="text/css" ﹥ p{fontsize: 24px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 默认值: 文字粗细 ﹤/p﹥ ﹤ p style="fontweight: 400; " ﹥ 400: 文字粗细 ﹤/p﹥ ﹤ p style="fontweight: bold; " ﹥ bold: 文字粗细 ﹤/p﹥ ﹤ p style="fontweight: 700; " ﹥ 700: 文字粗细 ﹤/p﹥ ﹤ p style="fontweight: 700; " ﹥ 900: 文字粗细 ﹤/p﹥ ﹤ p style="fontweight: bolder; " ﹥ bolder: 文字粗细 ﹤/p﹥ ﹤ p style="fontweight: lighter; " ﹥ lighter: 文字粗细 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例312的运行效果如图316所示。 图316fontweight效果图 由图316可见，数字值 400 相当于关键字 normal，也就是默认的样式，数值700相当于关键字bold，即加粗样式。 3．6．4fontsize（字号大小） fontsize属性用于设置字号大小，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如表34所示。 表34fontsize属性 相对长度单位描述 em相对于父元素文本字号的倍数，默认1em=16px rem相对于HTML根元素文本字号的倍数,CSS3新增 px像素 绝对长度单位描述 in英寸 cm厘米 mm毫米 pt点 相对长度单位比较常用，绝对长度单位较少使用。px表示像素，各种浏览器的默认字号都是16px,默认1em=16px。rem是CSS3新增的字号单位，其相对的是Html根元素。fontsize也可以设置为基于父元素的百分比值。 【例313】fontsize(案例文件: chapter03\\example\\exp3_13．html) ﹤!DOCTYPE html﹥ ﹤ html ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ fontsize ﹤/title﹥ ﹤ style type="text/css" ﹥ p{fontsize: 24px; } span{fontsize: 2em; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ p标签设置的文本字号 ﹤ span﹥ span标签内的文本 ﹤/span﹥ ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例313的运行效果如图317所示。 图317fontsize效果图 由图317可见， ﹤ span﹥ 标签设置字号大小是2em，是相对于其父元素 ﹤ p﹥ 标签字号大小来计算的。 3．6．5lineheight（行高） lineheight称为行高，lineheight属性用于设置行与行之间的距离，即字符的垂直间距，行间距、行高与文字字号之间的关系如图318所示。lineheight常用单位有3种，分别为像素px、相对值em和百分比%。初学者使用较多的是像素px，em是相对于当前文字字号大小来计算的。 图318行间距、行高与文字字号之间的关系 lineheight 与 fontsize 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。因此，把lineheight设置为与包含框相同的大小可以实现单行文字的垂直居中。 【例314】lineheight(案例文件: chapter03\\example\\exp3_14．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ lineheight ﹤/title﹥ ﹤ style type="text/css" ﹥ p{fontsize: 24px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 第1段: Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成: 结构、表现和行为。 ﹤/p﹥ ﹤ p style="lineheight: 48px; " ﹥ 第2段: Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成: 结构、表现和行为。 ﹤/p﹥ ﹤ p style="lineheight: 2em; " ﹥ 第3段: Web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成: 结构、表现和行为。 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例314的运行效果如图319所示。 图319lineheight效果图 “lineheight: 48px;”与“lineheight: 2em;”效果相同。lineheight属性值不能使用负值，为了网页的效果美观，lineheight的值是fontsize值的1．2~1．5倍。 3．6．6fontfamily（字体） fontfamily属性用于设置元素的字体，前提条件是用户计算机必须安装相应的字体，才能正确显示。fontfamily 可以同时指定多个字体，中间以逗号隔开，如果用户浏览器不支持第一个字体，则会尝试下一个字体，若所有字体用户浏览器都不支持，则采用浏览器默认的字体显示，示例代码如下。 p{ fontfamily: "宋体"; } h1{fontfamily: "黑体","微软雅黑"; } 以上的代码将网页中所有段落文本的字体设置为宋体，一级标题首选黑体，如果用户计算机中没有安装该字体则选择微软雅黑，当指定的字体都没有安装时，则使用浏览器默认字体。 使用fontfamily设置字体时，需要注意以下几点。  各种字体之间必须使用英文状态下的逗号隔开。  中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。示例代码如下。 h1{fontfamily: "宋体"; } p{fontfamily: Arial, "宋体"; }  如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，示例代码如下。 p{fontfamily: "Times New Roman"; }  尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 3．6．7font（综合设置字体样式） font属性属于复合属性，在一个声明中设置3．6．1~3．6．6节中所有字体属性，基本语法格式如下。 选择器{font: fontstylefontvariantfontweightfontsize/lineheightfontfamily; } 使用font属性时，必须按以上语法格式中的顺序书写，各个属性以空格隔开, fontsize与lineheight之间采用“/”分割。示例代码如下。 p{ font: italicsmallcapsbold18px/45px "微软雅黑","宋体" ; } 以上代码等价于以下代码。 p{ fontstyle: italic; fontvariant: smallcaps; fontweight: bold; fontsize: 18px; lineheight: 45px; fontfamily: "微软雅黑","宋体"; } 其中，fontsize和fontfamily的值是必须的，其他不需要设置的属性可以省略(省略则取默认值)。例如，下面代码中表示为h1标签设置加粗、18像素字号、字体为黑体。 h1{ font: bold18px"黑体"; } 3．6．8color（文本颜色） color属性用于设置文本的颜色，取值方式有如下几种。 1． 预定义颜色值 英文单词 pink，red，green，blue等。 p{ color: red; } 2． 十六进制的颜色值 十六进制的颜色值以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝3种颜色的强度。实际工作中，十六进制是最为常用的方式。 p{ color: #ff0000; } 3． 十六进制颜色的缩写 当十六进制的颜色值的3组数中两两相等时,可以进行缩写。示例如下。 #ff0000缩写为#f00 #cc3366缩写为#c36 4． RGB颜色值 RGB 颜色值的语法是rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，取值是介于 0~255 的整数，或者是百分比值(0%~100%)。注意，即使百分比值为0，百分号也不能省略。 p{ color: rgb(255,0,0); } p{ color: rgb(100%,0%,0%); } 一些典型颜色对应关系如表35所示。 表35典型颜色对应关系 预定义颜色十六进制十六进制缩写RGB red#ff0000#f00rgb(255,0,0) green#00ff00#0f0rgb(0,255, 0) blue#0000ff#00frgb(0,0,255) white#ffffff#fffrgb(255,255,255) black#000000#000rgb(0,0,0) 5． RGBA透明色 RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道，它规定了颜色的不透明度。RGBA 颜色值的语法如下。 rgba(red, green, blue, alpha) alpha 参数是介于 0．0(完全透明)至 1．0(完全不透明)的数字。red, green, blue取值是0~255的整数。RGBA透明色需要浏览器版本为IE 9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。示例代码如下。 p{ color: rgba(100%,0%,0%,．5); } p{ color: rgba(255,0,0,．5); } 3．6．9textdecoration（文本装饰） textdecoration属性用于设置文本的装饰效果，如下画线、上画线和删除线等装饰效果，常使用textdecoration: none于取消超链接默认的下画线样式。可用属性值如表36所示。 表36textdecoration属性 属性值描述 none默认值，没有装饰(正常文本) underline下画线 overline上画线 linethrough删除线 【例315】textdecoration(案例文件: chapter03\\example\\exp3_15．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ textdecoration ﹤/title﹥ ﹤ style type="text/css" ﹥ p{fontsize: 20px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ span﹥ 正常 ﹤/span﹥ ﹤ span style="textdecoration: underline; " ﹥ 下画线 ﹤/span﹥ ﹤ span style="textdecoration: overline; " ﹥ 上画线 ﹤/span﹥ ﹤ a href="#" ﹥ 默认超链接 ﹤/a﹥ ﹤ a href="#" style="textdecoration: none; " ﹥ 去掉超链接下画线 ﹤/a﹥ ﹤/body﹥ ﹤/html﹥ 例315的运行效果如图320所示。 图320textdecoration效果图 3．6．10textalign（水平对齐方式） textalign属性用于设置文本内容的水平对齐方式，相当于HTML标签属性中的align对齐属性，可用属性值如表37所示。 表37textalign属性值 属性值描述 left默认值，左对齐 right右对齐 续表 属性值描述 center居中对齐 justify两端对齐 【例316】textalign(案例文件: chapter03\\example\\exp3_16．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ textalign ﹤/title﹥ ﹤ style type="text/css" ﹥ h1{textalign: center; } h3{textalign: right; } p{textalign: right; } span{textalign: center; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h1﹥ h1标签居中对齐 ﹤/h1﹥ ﹤ h2﹥ h2标签默认左对齐 ﹤/h2﹥ ﹤ h3﹥ h3标签右对齐 ﹤/h3﹥ ﹤ p﹥ p标签段落右对齐 ﹤ span﹥ span标签 ﹤/span﹥ ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例316的运行效果如图321所示。 图321textalign效果图 textalign可以对h1~h6、 ﹤ p﹥ 标签设置水平对齐样式，但对 ﹤ span﹥ 标签设置对齐样式无效，因为textalign只能为块级元素设置水平对齐样式，不可以对行内元素设置，关于块级元素和行内元素的知识将在本书第4章讲解。 3．6．11textindent（首行缩进） 在浏览网页中的文章时，文本格式中最重要的效果之一是段落的首行缩进。若使用空格的方式实现首行缩进，因为不同的浏览器对空格的解析不一致，则会导致效果不理想。使每个段落首行开头文字缩进，如缩进2个文字距离样式，用textindent属性效果非常好。其属性值可以是px、em等, px表示首行缩进多少像素值，是一个固定的值; em表示缩进值是当前文字字号的多少倍，实际项目开发时，建议使用em作为设置单位。 【例317】textindent(案例文件: chapter03\\example\\exp3_17．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ textindent ﹤/title﹥ ﹤ style type="text/css" ﹥ p{fontsize: 16px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥         段落1: 在浏览网页上的文章时，文本格式中最重要的效果之一就是段落的首行缩进。若用空格的方式实现，不同的浏览器对空格的解析不一致，导致效果不理想。让每个段落首行开头文字缩进，如缩进2个文字距离样式，用textindent属性效果非常好。 ﹤/p﹥ ﹤ p style="textindent: 32px; " ﹥ 段落2: 在浏览网页上的文章时，文本格式中最重要的效果之一就是段落的首行缩进。若用空格的方式实现，不同的浏览器对空格的解析不一致，导致效果不理想。让每个段落首行开头文字缩进，如缩进2个文字距离样式，用textindent属性效果非常好。 ﹤/p﹥ ﹤ p style="fontsize: 24px; textindent: 48px; " ﹥ 段落3: 在浏览网页上的文章时，文本格式中最重要的效果之一就是段落的首行缩进。若用空格的方式实现，不同的浏览器对空格的解析不一致，导致效果不理想。让每个段落首行开头文字缩进，如缩进2个文字距离样式，用textindent属性效果非常好。 ﹤/p﹥ ﹤ p style="textindent: 2em; " ﹥ 段落4: 在浏览网页上的文章时，文本格式中最重要的效果之一就是段落的首行缩进。若用空格的方式实现，不同的浏览器对空格的解析不一致，导致效果不理想。让每个段落首行开头文字缩进，如缩进2个文字距离样式，用textindent属性效果非常好。 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例317的运行效果如图322所示。 图322textindent效果图 段落1采用在HTML代码中添加空格代码“ ”的方式实现首行缩进，代码较为臃肿。段落2、段落3和段落4采用CSS样式textindent设置段落缩进，若修改为内部样式表或外部样式表，代码较为简洁; 段落2和段落3的textindent采用像素为单位，需要计算当前文本的字号乘2。段落4采用em做单位，缩进值是当前文本字号的2倍。 3．7CSS控制列表样式 定义无序或有序列表时，可以通过HTML标签的属性控制列表的项目符号，但是这种方式并不符合Web标准的理念。CSS中有一系列的列表样式属性，可以控制列表的项目符号等样式。 liststyletype属性可以设置无序和有序列表的项目符号或编号，liststyletype属性值如表38所示，基本语法格式如下。 选择器{liststyletype: 属性值; } 表38liststyletype属性值 属性值描述 无序列表(ul) none不显示任何符号 disc显示“●” circle显示“” square显示“■” 有序列表(ol) none不显示任何编号 decimal阿拉伯数字1,2,3，… upperalpha大写英文字母A,B,C，… loweralpha小写英文字母a,b,c，… upperroman大写罗马数字Ⅰ,Ⅱ,Ⅲ，… lowerroman小写罗马数字ⅰ,ⅱ,ⅲ，… liststyleimage属性可以为各个列表项设置项目图像，属性值通过url的方式指定列表项目的图像路径，基本语法格式如下。 选择器{liststyleimage: url(图像路径); } liststyleposition属性可以控制列表项目符号的位置，属性值默认为outside，表示列表项目符号位于列表文本以外。属性值还可以设置为inside，表示列表项目符号位于列表文本以内，代码如下。 选择器{liststyleposition: inside; } 【例318】CSS控制列表样式(案例文件: chapter03\\example\\exp3_18．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ CSS控制列表样式 ﹤/title﹥ ﹤ style type="text/css" ﹥ li{border: 1px solid red; } #test1{liststyletype: circle; } #test2{liststyleimage: url(images/heart．png); } #test3{liststyleposition: inside; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ ul id="test1" ﹥ ﹤ li﹥ 首页 ﹤/li﹥ ﹤ li﹥ HTML ﹤/li﹥ ﹤ li﹥ CSS ﹤/li﹥ ﹤/ul﹥ ﹤ ul id="test2" ﹥ ﹤ li﹥ 首页 ﹤/li﹥ ﹤ li﹥ HTML ﹤/li﹥ ﹤ li﹥ CSS ﹤/li﹥ ﹤/ul﹥ ﹤ ul id="test3" ﹥ ﹤ li﹥ 首页 ﹤/li﹥ ﹤ li﹥ HTML ﹤/li﹥ ﹤ li﹥ CSS ﹤/li﹥ ﹤/ul﹥ ﹤/body﹥ ﹤/html﹥ liststyle是一个复合属性，可以综合设置列表的liststyletype、liststyleposition和liststyleimage属性，基本语法格式如下。 liststyle: liststyletypeliststylepositionliststyleimage 示例代码如下。 ul{ liststyle: circleinside; } 使用复合属性liststyle时，通常按以上语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。 由于各个浏览器对liststyletype属性的解析不一致，仅靠liststyletype无法实现列表项目符号大小的控制，因此在实际网页制作过程中不推荐使用liststyletype属性来控制项目符号。 实际项目开发中，使用较多的是通过“liststyle: none;”取消列表默认的项目符号或项目编号，再使用盒子模型的原理来设计列表的样式，有关盒子模型的知识将在本书第4章讲解。 取消列表的项目符号或项目编号的代码如下。 ul{liststyletype: none; } 或者使用liststyle复合属性，代码如下。 ul{liststyle: none; } 3．8CSS复合选择器 3．5节中讲解了常用的标签选择器、类选择器class选择器、ID选择器，使用这些基础选择器基本可以选中目标元素，但是在实际网页制作时，一个网页中有很多标签，好多标签存在嵌套关系，如果仅使用CSS的基础选择器，不能很好地组织页面样式。 CSS复合选择器也称为派生选择器，是通过依据元素在其位置的上下文关系来定义样式，由两个或多个基础选择器，通过不同的方式组合而成，可以使标签更加简洁。对HTML标签也实现了更强、更方便的选择功能。 3．8．1群组选择器 在声明CSS选择器时，若某些选择器的CSS声明是相同的，这时可以使用群组选择器(又称并集选择器)，利用集体声明的方法，把相同属性和值的选择器组合同时声明。标签选择器、class类选择器和ID选择器等都可以作为并集选择器的一部分，各个选择器之间通过英文状态下的逗号连接。基本语法格式如下。 p,h1,．special,#nav{ color: red; } 以上代码声明了段落、标题1标签内的文字，以及设置了class属性值为special和id属性值为nav的标签内的文字颜色为red。群组选择器实际上是对CSS的一种简化写法，减少样式重复定义，使代码更加简洁。它的作用与单独声明每一个标签的CSS样式是一样的。以下代码与群组选择器声明效果是一样的,代码如下。 p{ color: red; } h1{color: red; } ．special {color: red; } #nav {color: red; } 【例319】群组选择器(案例文件: chapter03\\example\\exp3_19．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 群组选择器 ﹤/title﹥ ﹤ style type="text/css" ﹥ span,．special,#tit{color: red; textdecoration: underline; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h1id="tit" ﹥ 网页设计与制作 ﹤/h1﹥ ﹤ h2﹥ 专题1 网页设计基础 ﹤/h2﹥ ﹤ h3﹥ 第一节: Web标准 ﹤/h3﹥ ﹤ p class="special" ﹥ Web标准不是某一个标准，而是一系列标准的集合。 ﹤/p﹥ ﹤ p﹥ Web标准主要由三部分组成: ﹤ span﹥ 结构化标准语言 ﹤/span﹥ 主要包括HTML，XHTML和XML; ﹤ span﹥ 表现标准语言 ﹤/span﹥ 主要包括CSS; ﹤ span﹥ 行为标准 ﹤/span﹥ 主要包括W3C DOM、ECMAScript等。 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 设置了 ﹤ span﹥ 标签内的文本； 设置了class属性且属性值为special的标签内的文本; 设置了id属性且属性值为tit的标签内的文本被设置了红色、下画线。例319的运行效果如图323所示。 图323群组选择器 3．8．2标签指定选择器 标签指定选择器又称交集选择器，是由两个选择器直接连接构成。第一个选择器为标签选择器，第二个选择器为class选择器或ID选择器，两个选择器之间不能有空格，必须连续书写。其结果是选中二者各自元素范围的交集，如p．special，选择所有“class=special”的段落，即指定设置了 ﹤ p﹥ 段落那些class属性值或者id属性值为指定值的标签。 例320的HTML网页代码中，网页正文中有很多 ﹤ p﹥ 段落，有的 ﹤ p﹥ 段落设置了class=“special”，即设置了此段落的class类属性的值为“special”，其他标签如 ﹤ h1﹥ 标签也设置了class=“special”属性。若需要选中设置了class=“special”的段落，而不选择设置了class=“special”的 ﹤ h1﹥ 标签，基础选择器就无法实现这一要求，必须使用标签指定式选择器。 【例320】标签指定选择器(案例文件: chapter03\\example\\exp3_20．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 标签指定选择器 ﹤/title﹥ ﹤ style type="text/css" ﹥ p． spe{color: red; textdecoration: underline; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h1 class="spe" ﹥ 网页设计与制作 ﹤/h1﹥ ﹤ h2﹥ 专题1 网页设计基础 ﹤/h2﹥ ﹤ h3﹥ 第一节: Web标准 ﹤/h3﹥ ﹤ p class="spe" ﹥ Web标准不是某一个标准，是一系列标准的集合。 ﹤/p﹥ ﹤ p﹥ Web标准主要由三部分组成: ﹤ span class="spe" ﹥ 结构化标准语言 ﹤/span﹥ 包括HTML，XHTML和XML， ﹤ span class="spe" ﹥ 表现标准语言 ﹤/span﹥ 主要包括CSS， ﹤ span class="spe" ﹥ 行为标准 ﹤/span﹥ 包括W3C DOM、ECMAScript等。 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 图324标签指定选择器 p．special仅选择了所有class类属性值为“special”的段落，而没有选中class=“special”的 ﹤ h1﹥ 标签和 ﹤ span﹥ 标签。例320的运行效果如图324所示。 3．8．3后代选择器 当标签发生嵌套时，内层元素就成为外层元素的后代。网页中的导航栏会将导航栏中的各个超链接 ﹤ a﹥ 标签，放在 ﹤ ul﹥ 无序列表中的 ﹤ li﹥ 标签内嵌套。如例321的网页HTML代码中， ﹤ li﹥ 标签就有 ﹤ a﹥ 标签，但是 ﹤ a href=“#” ﹥ 专题学习 ﹤ /a﹥ 位于 ﹤ ul﹥ 列表之外，若想选中 ﹤ ul﹥ 标签下的所有 ﹤ a﹥ 标签，而不选择其他位置的 ﹤ a﹥ 标签，基础选择器就无法实现这一要求。后代选择器又称包含选择器，用来选择元素的后代元素，其写法是把父元素写在前面，后代元素写在后面，中间用空格分隔。 【例321】后代选择器(案例文件: chapter03\\example\\exp3_21．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 后代选择器 ﹤/title﹥ ﹤ style type="text/css" ﹥ ul a{color: red; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ ul class="nav" ﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 首页 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 课程概要 ﹤/a﹥ ﹤ ul﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 课程简介 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 教学大纲 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 授课计划 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 考核方案 ﹤/a﹥ ﹤/li﹥ ﹤/ul﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 学习资源 ﹤/a﹥ ﹤ ul﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 项目案例 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 技术拓展 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 教程下载 ﹤/a﹥ ﹤/li﹥ ﹤/ul﹥ ﹤/li﹥ ﹤/ul﹥ ﹤ a href="#" ﹥ 专题学习 ﹤/a﹥ ﹤/body﹥ ﹤/html﹥ 定义 ﹤ ul﹥ 标签中的所有后代标签 ﹤ a﹥ 标签文字为红色，但处在网页中其他位置的 ﹤ a﹥ 标签(如本例中的“专题学习”)不受影响。 在后代选择器中，“ul a”选择器就是“ul标签中的 a标签”，可以解释为“作为 ul 元素后代的所有 a 元素”。使用后代选择器，直接对所需要的元素进行设置，可以避免过多地为标签设置id和class属性，代码更为简洁。后代选择器还可以多级包含，示例代码如下。 ulliulli a {color: red; } ulullia {color: red; } 3．8．4子选择器 后代选择器能选择标签的所有后代元素，而子选择器只能选择作为某元素子元素的元素，如在例321的HTML代码中，若只想选中 ﹤ ul﹥ 标签下的一级导航 ﹤ li﹥ 标签，不想选中二级导航里的 ﹤ li﹥ 标签，使用后代选择器就不合适了。子选择器使用大于号(子结合符)将父元素和子元素连接起来，表示只选择某个元素的子元素。 【例322】子选择器(案例文件: chapter03\\example\\exp3_22．html) HTML结构同例321，CSS代码如下。 ﹤ style type="text/css" ﹥ ．nav﹥ li﹥ a {color: red; textdecoration: none; }/*选择一级导航*/ ．nav﹥ li﹥ ul﹥ li﹥ a {color: green; }/*选择二级导航*/ ﹤/style﹥ 例322的运行效果如图325所示。 图325子选择器 子结合符两边可以有空白符，以下写法都是正确的，建议不要有空格。 ul ﹥ li ul﹥ li ul ﹥ li 3．9CSS的继承性 CSS样式具有继承性，所谓的继承性，是给某些元素设置样式时，子标签会继承父标签的样式。例如 color属性设置字体颜色，后代自动继承。如果为 ﹤ body﹥ 标签选择器设置文字颜色，其他标签不设置，则所有的后代标签文字颜色都继承 ﹤ body﹥ 的设置(超链接、 ﹤ h1﹥ ~ ﹤ h6﹥ 等标签由于浏览器有默认样式，根据优先级，不显示继承的样式)。具有继承特性的样式，不必对每一个标签都书写样式属性，只需要在父标签中书写一次，子标签继承此属性，可以在一定程度上简化代码，降低CSS样式的复杂性。 字体、字号、文字颜色等文本样式属性具有继承性，可以在body元素中统一设置，通过继承影响文档中所有文本。本书第4章将要学习的盒子模型以及第5章将要学习的定位属性则不具有继承性。 【例323】CSS的继承性(案例文件: chapter03\\example\\exp3_23．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ CSS的继承性 ﹤/title﹥ ﹤ style type="text/css" ﹥ body{ color: red; fontsize: 20px; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ h2标签 ﹤/h2﹥ ﹤ h3﹥ h3标签 ﹤/h3﹥ ﹤ p﹥ p标签段落 ﹤ span﹥ span标签 ﹤/span﹥ ﹤/p﹥ ﹤ a href="#" ﹥ a标签超链接 ﹤/a﹥ ﹤/body﹥ ﹤/html﹥ 例323的运行效果如图326所示。 图326CSS的继承性 ﹤ P﹥ 标签和 ﹤ span﹥ 标签的文字颜色和字号大小继承了对 ﹤ body﹥ 标签的设置。 ﹤ h1﹥ ~ ﹤ h6﹥ 标签和 ﹤ a﹥ 标签，先继承 ﹤ body﹥ 的设置，又由于浏览器有默认的样式，浏览器默认样式的优先级大于继承的样式优先级，所以 ﹤ h1﹥ ~ ﹤ h6﹥ 标签只显示继承的文本颜色，字号大小采用浏览器默认的样式， ﹤ a﹥ 标签继承body的字号大小，文字颜色显示浏览器默认的颜色。 3．10 CSS的优先级 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。 3．10．1外部样式表、内部样式表和行内样式的优先级 在3．3节的例36中，可以看到外部样式表、内部样式表、行内样式的优先级是“外部样式表 ﹤ 内部样式表 ﹤ 行内样式”。 当外部样式表、内部样式表都为 ﹤ p﹥ 标签定义相同的CSS样式时，根据CSS的优先级，显示内部样式表定义的CSS样式。当外部样式表、内部样式表和行内样式都为 ﹤ p﹥ 标签定义了相同的CSS样式时，根据CSS的优先级，显示行内样式定义的CSS样式。 3．10．2基础选择器的优先级 CSS基础选择器包括通配符选择器、标签选择器、类选择器和ID选择器。为了研究CSS基础选择器的优先级，首先来看一个具体的示例。 【例324】基础选择器的优先级(案例文件: chapter03\\example\\exp3_24．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 基础选择器的优先级 ﹤/title﹥ ﹤ style﹥ *{color: pink; } p{color: red; } ．special1{color: blue; } #special2{color: green; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 第1个段落 ﹤/p﹥ ﹤ p class="special1" ﹥ 第2个段落 ﹤/p﹥ ﹤ p class="special1" id="special2" ﹥ 第3个段落 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例324的运行效果如图327所示。 图327基础选择器的优先级 以上示例中，使用不同的选择器对同一个元素设置文本颜色，浏览器根据选择器的优先级规则解析CSS样式。第1个段落，通配符选择器的优先级低于标签选择器，文字颜色显示红色。第2个段落，class选择器优先级大于标签选择器，文字颜色显示蓝色。第3个段落，ID选择器优先级大于class选择器，文字颜色显示绿色。各种样式表中基础选择器的优先级总结如图328所示。 图328基础选择器的优先级 3．10．3复合选择器的优先级 对于由多个基础选择器构成的复合选择器，优先级的判断需要计算权重。CSS为每一种基础选择器都分配了一个权重，其中，标签选择器权重为1，类选择器权重为10，ID选择器权重为100。这就能很好地理解前面讲的基础选择器的优先级“标签 ﹤ 类 ﹤ id”了。此外，继承样式的权重为0，即子元素定义的样式会覆盖继承来的样式。一个复合选择器的权重值等于组成它的基础选择器权重的叠加(并集选择器除外)。 【例325】复合选择器的优先级(案例文件: chapter03\\example\\exp3_25．html) ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 复合选择器的优先级 ﹤/title﹥ ﹤ style type="text/css" ﹥ body{color: #333; }/*权重为: 0*/ ul a{color: red; }/*权重为: 1+1*/ ul li a{color: pink; }/*权重为: 1+1+1*/ ．nav li a{color: black; } /*权重为: 10+1+1*/ #jianjie{color: green; }/*权重为: 100*/ ul li #jianjie{color: orange; }/*权重为: 1+1+100*/ ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ ul class="nav" ﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 首页 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 课程概要 ﹤/a﹥ ﹤ ul﹥ ﹤ li﹥ ﹤ a href="#" id="jianjie" ﹥ 课程简介 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 教学大纲 ﹤/a﹥ ﹤/li﹥ ﹤ li﹥ ﹤ a href="#" ﹥ 授课计划 ﹤/a﹥ ﹤/li﹥ ﹤/ul﹥ ﹤/li﹥ ﹤/ul﹥ ﹤/body﹥ ﹤/html﹥ 例325的运行结果如图329所示。 图329复合选择器的优先级 3．11CSS的层叠性 当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器，权重低的选择器效果会被权重高的选择器效果覆盖，这就是CSS的层叠性的表现。所谓层叠性是指多种CSS样式的叠加。CSS的层叠性分以下几种情况。 3．11．1样式不冲突的层叠 当多种CSS样式不冲突时，多种样式叠加。 【例326】不冲突的层叠(案例文件: chapter03\\example\\exp3_26．html) HTML结构和CSS代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ CSS层叠性 ﹤/title﹥ ﹤ style type="text/css" ﹥ p{ color: red; fontsize: 14px; } ．special{ fontweight: bold; backgroundcolor: yellow; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 段落文本1 ﹤/p﹥ ﹤ p class="special"id="special" ﹥ 段落文本2 ﹤/p﹥ ﹤ p﹥ 段落文本3 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例326的运行效果如图330所示。 图330样式不冲突的层叠 3．11．2样式冲突且存在优先级差别的层叠 当多种CSS样式冲突，且选择器存在优先级差别时，优先级高的选择器定义的样式将覆盖优先级低的选择器定义的样式。 【例327】存在优先级差别的层叠(案例文件: chapter03\\example\\exp3_27．html) HTML结构和CSS代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ CSS层叠性 ﹤/title﹥ ﹤ style type="text/css" ﹥ p{ color: red; fontsize: 14px; /*冲突*/ } ．special{ fontsize: 24px; /*冲突*/ fontweight: bold; backgroundcolor: yellow; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 段落文本1 ﹤/p﹥ ﹤ p class="special"id="special" ﹥ 段落文本2 ﹤/p﹥ ﹤ p﹥ 段落文本3 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例327的运行效果如图331所示。 图331样式冲突且存在优先级差别的层叠 3．11．3样式冲突且选择器优先级相同的层叠 当多种CSS样式冲突，且选择器优先级相同时，例如，同一选择器被多次定义，采取“后来居上”原则，即最后定义的样式将覆盖先前定义的样式。 【例328】同一选择器被多次定义(案例文件: chapter03\\example\\exp3_28．html) HTML结构和CSS代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ CSS层叠性 ﹤/title﹥ ﹤ style type="text/css" ﹥ p{fontsize: 24px; color: red; } p{color: green; } p{color: blue; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 段落文本1 ﹤/p﹥ ﹤ p class="special"id="special" ﹥ 段落文本2 ﹤/p﹥ ﹤ p﹥ 段落文本3 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例328的运行效果如图332所示。 图332同一选择器被多次定义 3．11．4样式冲突且同一标签运用不同类型选择器的层叠 同一标签运用不同类型的选择器时，优先级高的选择器定义的样式覆盖优先级低的选择器定义的样式。 【例329】同一标签运用不同类型选择器(案例文件: chapter03\\example\\exp3_29．html) HTML结构与CSS代码如下。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ CSS层叠性 ﹤/title﹥ ﹤ style type="text/css" ﹥ ．special{ backgroundcolor: yellow; } #special{ backgroundcolor: pink; } ﹤/style﹥ ﹤/head﹥ ﹤ body﹥ ﹤ p﹥ 段落文本1 ﹤/p﹥ ﹤ p class="special" id="special" ﹥ 段落文本2 ﹤/p﹥ ﹤ p﹥ 段落文本3 ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ 例329的运行效果如图333所示。 图333同一标签运用不同类型选择器 【项目实战】 项目31百度搜索结果网页局部样式设置 (案例文件目录: chapter03\\demo\\demo3_1) 效果图 项目31的运行效果如图334所示。 图334文本网页效果 思路分析 这是一个纯文本的网页，在百度搜索等搜索引擎中搜索的界面效果。效果图中，带下画线的是超链接，文本的颜色主要有红色、灰色、蓝色、绿色和黑色，其中，黑色是浏览器默认的文本颜色，蓝色是浏览器默认的超链接的颜色。第一行，可以用 ﹤ h2﹥ 标签嵌套 ﹤ a﹥ 标签，红色的文字使用 ﹤ span﹥ 标签，最后一行使用 ﹤ p﹥ 标签嵌套3个 ﹤ a﹥ 标签，第一个 ﹤ a﹥ 标签通过 ﹤ class﹥ 选择器(cite)设置文字颜色为绿色，第二和第三个 ﹤ a﹥ 标签通过class选择器(gray)设置为灰色。中间的文字利用 ﹤ p﹥ 标签，设为一个段落，灰色和红色的文字使用 ﹤ span﹥ 标签，设置 ﹤ span﹥ 标签的文字颜色为红色，并用class选择器(gray)设置文字颜色为灰色。HTML结构分析如图335所示。 图335HTML结构图示 制作步骤 Step01.根据图335 HTML结构分析图，编写HTML结构代码。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" /﹥ ﹤ title﹥ 文本网页 ﹤/title﹥ ﹤/head﹥ ﹤ body﹥ ﹤ h2﹥ ﹤ a href="#" ﹥ ﹤ span﹥ HTML教程 ﹤/span﹥ |菜鸟教程 ﹤/a﹥ ﹤/h2﹥ ﹤ p﹥ ﹤ span class="gray" ﹥ 发表时间: 2016年12月21日 - ﹤/span﹥ ﹤ span﹥ 超文本标记语言 ﹤/span﹥ (英语: HyperText Markup Language,简称: ﹤ span﹥ HTML ﹤/span﹥ )是一种用于创建网页的标准标记语言。 您可以使用 ﹤ span﹥ HTML ﹤/span﹥ 来建立自己的 WEB站… ﹤/p﹥ ﹤ p﹥ ﹤ a href="#" class="cite" ﹥ www．runoob．com/html/htmltutorial．html ﹤/a﹥ - ﹤ a href="#" class="gray" ﹥ 快照 ﹤/a﹥ - ﹤ a href="http://http://www．runoob．com/" class="gray" ﹥ 菜鸟教程 ﹤/a﹥ ﹤/p﹥ ﹤/body﹥ ﹤/html﹥ Step02.建立内部CSS样式表，清除浏览器默认的样式，由于本例中使用了 ﹤ p﹥ 、 ﹤ h2﹥ 、 ﹤ a﹥ 、 ﹤ span﹥ 4种标签，因为后两种标签不具备margin属性和padding属性，所以仅对 ﹤ p﹥ 和 ﹤ span﹥ 标签进行样式设置即可。 ﹤ head﹥ ﹤ meta charset="UTF8" /﹥ ﹤ title﹥ 文本网页 ﹤/title﹥ ﹤ style type="text/css" ﹥ p,h2{margin: 0; padding: 0; } ﹤/style﹥ ﹤/head﹥ Step03.通过设置 ﹤ body﹥ 标签的CSS样式，编写可以被继承的文本样式——文字字体。 ﹤ style type="text/css" ﹥ p,h2{margin: 0; padding: 0; } body{fontfamily: arial,"宋体"; } ﹤/style﹥ Step04.设置 ﹤ h2﹥ 标签的文字样式。 ﹤ style type="text/css" ﹥ p,h2{margin: 0; padding: 0; } body{fontfamily: arial,"宋体"; } h2{fontsize: 16px; fontweight: 400; } ﹤/style﹥ 此时，在浏览器中测试页面显示效果如图336所示。 图336Step04效果 Step05.从图336中可见， ﹤ span﹥ 标签内的“HTML教程”下画线是蓝色的，而效果图中下画线是红色的。设置 ﹤ span﹥ 标签的文字样式可以解决这个问题。 ﹤ style type="text/css" ﹥ p,h2{margin: 0; padding: 0; } body{fontfamily: arial,"宋体"; } h2{fontsize: 16px; fontweight: 400; } span{color: #c00; } ﹤/style﹥ 此时,在浏览器中测试页面显示效果如图337所示。 图337Step05效果 Step06.从图337中可以看到，中间的段落文字颜色是黑色而不是深灰色(#333)， ﹤ span﹥ 标签内的“发表时间: 2016年12月21日 -”文字颜色是红色。设置段落 ﹤ p﹥ 标签的文字颜色、字号、行间距，为class=“gray”设置文字颜色为浅灰色(#666)。 ﹤ style type="text/css" ﹥ p,h2{margin: 0; padding: 0; } body{fontfamily: arial,"宋体"; } h2{fontsize: 16px; fontweight: 400; } span{color: #c00; } p{ fontsize: 14px; color: #333; lineheight: 22px; } ．gray{color: #666; } ﹤/style﹥ 此时，在浏览器中测试页面显示效果如图338所示。 图338Step06效果 Step07.设置最后一行，第一个超链接的文字样式。 ﹤ style type="text/css" ﹥ p,h2{margin: 0; padding: 0; } body{fontfamily: arial,"宋体"; } h2{fontsize: 16px; fontweight: 400; } span{color: #c00; } p{ fontsize: 14px; color: #333; lineheight: 22px; } ．gray{color: #666; } ．cite{color: #4e9c62; } ﹤/style﹥ Step08.浏览器兼容性测试，即将所完成的案例页面在多个浏览器中运行测试其兼容性，本案例在Google Chrome、火狐、Opera、Safari for Windows及IE 11版块中测试通过。 项目32端午节习俗新闻页面(案例文件目录: chapter03\\demo\\demo3_2) 效果图 项目32的运行效果图如图339所示。 图339纯文本网页样式效果 思路分析 在本案例中，整篇文章使用id属性为page的 ﹤ div﹥ 标签组织结构，并通过ID选择器设置文章的。利用 ﹤ h2﹥ 标签设置大标题， ﹤ h3﹥ 标签设置作者、时间等信息，通过群组选择器设置居中样式。 ﹤ h4﹥ 标签设置小标题， ﹤ p﹥ 标签设置段落，并通过群组选择器设置首行缩进两字符。 ﹤ a﹥ 标签为“端午节”设置超链接。通过为最后一个段落设置为class=“right”，并通过标签指定选择器设置居右对齐。 制作步骤 Step01.根据布局及HTML结构分析图，编写HTML结构代码。 ﹤!DOCTYPE html﹥ ﹤ html lang="en" ﹥ ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 端午节习俗暗藏中医养生精髓 ﹤/title﹥ ﹤/head﹥ ﹤ body﹥ ﹤ div id="page" ﹥ ﹤ h2﹥ 端午节习俗暗藏的中医养生精髓 ﹤/h2﹥ ﹤ h3﹥ 沈华        2017年05月22日16: 29        来源: 光明网 ﹤/h3﹥ ﹤ p﹥ ﹤ a href="#" ﹥ 端午节 ﹤/a﹥ 传统习俗有吃粽子、悬艾草、吃咸鸭蛋、挂香囊、戴五彩线……你知道吗？几乎每个习俗都可以找到健康的根源。 ﹤/p﹥ ﹤ h4﹥ 糯米粽子为养胃清火而来 ﹤/h4﹥ ﹤ p﹥ 无论南北方， ﹤ a href="#" ﹥ 端午节 ﹤/a﹥ 被大众广为继承的习俗…… ﹤/p﹥ ﹤ h4﹥ 艾草是为抵抗疾病而挂 ﹤/h4﹥ ﹤ p﹥ ﹤ a href="#" ﹥ 端午节 ﹤/a﹥ 为什么要悬挂艾草呢？…… ﹤/p﹥ ﹤ h4﹥ 咸鸭蛋为滋阴清肺而生 ﹤/h4﹥ ﹤ p﹥ ﹤ a href="#" ﹥ 端午节 ﹤/a﹥ 也是咸鸭蛋热卖的节日，在很多人的…… ﹤/p﹥ ﹤ h4﹥ 赛龙舟是为了气血通畅 ﹤/h4﹥ ﹤ p﹥ ﹤ a href="#" ﹥ 端午节 ﹤/a﹥ 习俗还有与运动有关的，就是赛龙舟…… ﹤/p﹥ ﹤ p﹥ 端午时节是一年中阳气至盛的时段，天气较闷热，…… ﹤/p﹥ ﹤ p class="right" ﹥ (责编: 陈灿、陈苑) ﹤/p﹥ ﹤/div﹥ ﹤/body﹥ ﹤/html﹥ Step02.建立内部CSS样式表，编写#page的文本样式。 ﹤ head﹥ ﹤ meta charset="UTF8" ﹥ ﹤ title﹥ 端午节习俗暗藏中医养生精髓 ﹤/title﹥ ﹤ style type="text/css" ﹥ #page { fontfamily: "宋体"; color: #333; fontsize: 16px; lineheight: 1．5em; } ﹤/style﹥ ﹤/head﹥ Step03.编写 ﹤ h2﹥ 、 ﹤ h3﹥ 标签文本CSS样式，h2采用了默认的文字大小和加粗，h3设置文字字号，通过fontweight取消浏览器默认的加粗效果，利用群组选择器设置居中。 ﹤ style type="text/css" ﹥ #page { fontfamily: "宋体"; color: #333; fontsize: 16px; lineheight: 1．5em; } h2,h3{textalign: center; } h3{ fontsize: 18px; fontweight: normal; } ﹤/style﹥ Step04.通过群组选择器设置 ﹤ h4﹥ 、 ﹤ p﹥ 标签首行缩进两字符。 ﹤ style type="text/css" ﹥ #page { fontfamily: "宋体"; color: #333; fontsize: 16px; lineheight: 1．5em; } h2,h3{textalign: center; } h3{ fontsize: 18px; fontweight: normal; } h4,p {textindent: 2em; } ﹤/style﹥ Step05.通过标签指定选择器为class=“right”设置居右对齐。 ﹤ style type="text/css" ﹥ #page { fontfamily: "宋体"; color: #333; fontsize: 16px; lineheight: 1．5em; } h2,h3{textalign: center; } h3{ fontsize: 18px; fontweight: normal; } h4,p {textindent: 2em; } p． rigt{textalign: right; } ﹤/style﹥ Step06.浏览器兼容性测试，即将所完成的案例页面在多个浏览器中运行测试其兼容性，本案例在Google Chrome、火狐、Opera、Safari for Windows及IE 11版块中测试通过。 【实训作业】 实训任务31Web前端试学班广告页局部样式设置 利用 ﹤ p﹥ 标签、标题标签、 ﹤ span﹥ 标签和 ﹤ a﹥ 标签以及CSS技术制作页面效果，如图340所示。 图340Web前端试学班广告局部效果 具体要求如下。 1． 首页命名为index或default，首页扩展名为．html或．htm。 2． 合理使用 ﹤ p﹥ 标签、标题标签、 ﹤ span﹥ 标签和 ﹤ a﹥ 标签组织网页结构。 3． 合理使用CSS选择器，选择器命名规范，设置文本CSS样式。 图341“商品推荐”页面效果 实训任务32“商品推荐”页局部样式设置 利用所学HTML标签和CSS技术制作“商品推荐”页面效果，如图341所示。具体要求如下。 1． 目录结构明晰，有默认图像文件夹(图像文件夹命名为images或img)，图像文件命名规范。 2． 根目录下有首页，首页命名为index或default，首页扩展名为．html或．htm。 3． 合理使用所学HTML标签组织网页结构和布局。 4． 合理使用CSS选择器，选择器命名规范，设置文本CSS样式。