第4章 CSS样式基础

4.1 CSS概述

        随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML变得越来越杂乱，HTML页面也越来越臃肿，CSS便诞生了。CSS 是用于简化HTML标签，把关于样式部分的内容提取出来，进行单独地控制，使结构与样式分离式开发。对页面布局等的控制也更加精确，同时能够实现内容和表现的分离，使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

4.1.1.CSS的基本概念

        CSS 全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以HTML为基
础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不
同的浏览器设置不同的样式。在网页设计时采用CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，既
可以改变同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。

4.1.2传统HTML的缺点

        HTML标记是用来定义文档内容，比如通过h.p和 table等标记表达“这是标题”、“这是段落”、“这是表格”等信息，而文档布局由浏览器完成。随着新的HTML标记(比如字体标记和颜色属性)添加到HTML规范中，要实现页面美工、文档内容清晰、独立于文档表现层的站点变得越来越困难。传统

4.1.2.1.维护困难

        为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。

4.1.2.2.标记不足

        HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些HTML中都很难找到。

4.1.2.3.网页过“胖”

        由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。

4.1.2.4.定位困难

        在整体页面布局时，HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

        CSS通过定义标记如何表现,对页面结构风格进行控制，分离文档的内容和表现，克服了传统 HTML的缺点。将CSS嵌人在页面中，通过浏览器解释执行，而且CsS 文件是文本文件，只要理解HTML都可以掌握它。其特点主要如下。
        (1)页面的字体变得更漂亮，更容易编排。
        (2)可以轻松控制页面的布局。
        (3)可以在大多数浏览器上使用。
        (4)以前一些必须通过图像转换才能实现的功能，现在只要用CSS 就可以轻松实现，页面下载更快。
        (5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行，就可以改变整个网站上页面的显示样式。
        CSS 可以称得上Web设计领域的一个突破。

4.1.3.1.表现和内容分离

        CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.增强了网页的表现力

CSS 样式属性提供了比HTML更多的格式设计功能。例如，可以通过CSS 样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。

4.1.3.3.使整个网站显示风格趋于统一

        将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网
页的格式功能，从而大大降低网站的开发与维护的成本。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放CSS样式文件的目录一般命名为 style 或css。

4.1.4.2.样式文件的命名规则

        在项目初期，会把不同类别的样式放于不同的css 文件，是为了 CSS编写和调试的方便;在项目后期，为了网站性能上的考虑，会将不同的CsS文件整合到一个 CSS文件中,这个文件一般命名为style.css 或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义(禁止出现如Divl，Div2 和 Style 等自名)，读者可以参考表4-1 中的样式命名。

4.1.4.4.CSS代码注释

        CSS 注释以字符“/*”开始，以字符“。/”结束。注释可以是单行，也可以是多行，并可以出现在CSS代码的任何地方。

4.1.4.5.CSS代码注释

        代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。

4.2 CSS语法基础

        CSS 控制页面是通过CSS 规则实现的，CSS规则由选择器和声明组成，声明由属性和属性值对组成。CSS 提供了丰富的选择器类型，包括标记选择器、类选择器、id选择器及伪类选择器等，能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。

4.2.1.CSS基本语法

        CSS 就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成:选择器(Selector选择器)和声明(Declaration)。
        选择器通常是需要改变样式的HTML元素。
        声明由一个或多个属性与属性值对组成。属性是CSS 的关键字，如font-family(字体) color(颜色)和 border(边框)等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征。  

4.2.1.1.基本语法

        selector { propertyl:valuel ;property2:value2; property3:value3;....}

        选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3....;}

4.2.1.2.语法说明

        (1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。
        (2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“:”连接，每个属性/属性值对之间用分号(;)隔开。
        (3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS 中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性background-color;而在脚本语言中，对象属性则连写成backgroundColor。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。
        下面是一个简单样式表的示例。

p{

beckground-color; reel;font-size; 20pre;eolot:grren; 

}

        上例的CSS规则中p为选择器。background-color, font-size和color为属性，red，20px和green为属性值。该CSS规则将HTML中的所有段落统一设置成“背景色为红色、花小为20像素以及字体颜色为绿色”。通常为了增强样式定义的可读性，建议每行只描述一个属性。

        (4)复合属性。在CSS中有些属性可以表示多个属性的值。如关于文字的设置，有font-family(字体)、font-size(字体大小)、font-style(字体风格)，这些可以用一个属性font 来表示，

例如: p{
font- style:italie; font-size:20ps; font-family:黑体;}
可以如下表示:
p{

font:italic 20px黑体

}

        值得注意的是，当使用font复合属性在一个声明中设置所有字体属性时，应按照 font- style, font-variant, font-weight, font-size/ line-height, font-family的顺序，可以不设置其中的某个值，比如“font:100%verdana;”仅设置了font-size和font-family 属性，其他未设置的属性会使用其默认值。类似的复合属性还有border，margin 和padding等。
        (5) 多个属性值。在CSS中有些属性可以设置多个属性值，用逗号(，)分隔。例如

selector{

font-family:"楷体_gb2312","黑体",”Times New Roman”;

}

        该样式表说明了可以使用楷体_gb2312、黑体、Times NewRoman 3种字体来设置 selector 的字体效果。若系统中找不到楷体_gb2312，则使用黑体，若也没有黑体，则使用 Times New Roman，即按出现的先后顺序优先选择。

4.2.2.CSS选择器类型

        CSS选择器主要有4种类型:标记选择器、class选择器、ID选择器及伪类选择器等。

4.2.2.1.标记选择器

        标记选择(也可称为“素选择器”)即直接使用HTML标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				color: #1edab5;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<p>第一段</p>
		<p>第二段</p>
	</body>
</html>

运行结果：

4.2.2.2.class选择器

class 选择器也叫“类”选择器，可以给指定的标签设置一个class 属性和class 值然后通过class 选择器找到对应的标签，为其设置class值，即添加CsS 样式。使用class类选择器时，需要用英文(.)进行表示。

标记选择器，class选择器冲突，class选择器生效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.class1{
				color: bisque;
				font-size: 34px;
			}
		</style>
	</head>
	<body>
		<p class="class1">这是class1的内容</p>
		<p class="class2">这是class2的内容</p>
	</body>
</html>

运行结果：

4.2.2.3.ID选择器

        ID选择器用来对某个单一元素定义单独的样式。ID选择器只能在HTML页面中使用一次，针对性更强。定义ID选择器时，需要在id名称前加一个“#”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#id1{
				color: #00aaff;
				font-size: 34px;
			}
		</style>
	</head>
	<body>
		<p id="id1">这是id1的内容</p>
	</body>
</html>

运行结果：

标记选择器、class选择器、ID选择器冲突，ID选择器一定生效。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				color: #1edab5;
				font-size: 24px;
			}
			.class1{
				color: bisque;
				font-size: 34px;
			}
			#id1{
				color: #00aaff;
			}
		</style>
	</head>
	<body>
		<p class="class1" id="id1">这是id2的内容</p>
	</body>
</html>

运行结果：

对于CSS 来说，ID选择器与class选择器的功能很相似但不完全相同。一般来说，class选择器更加灵活，能完成ID选择器的所有作用，也能完成更加复杂的功能应用。如果对样式可重用性要求较高，则应该使用class选择器将新元素添加到类中来完成，对于需要唯一标识的页面元素，则可以使用ID选择器。
 

4.2.2.4.伪类选择器

前面介绍的选择器都是能够与HTML中具体标记对应的，但是像段落的第1行，超链接访问前与访问后等，就没有H1ML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进了伪类选择器。常用伪类见表4-2。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link{
				color: #000000;
			}
			a:hover{
				color: #aaaaaa;
			}
			a:visited{
				color: #00aaff;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

运行结果：

4.2.3.CSS选择器声明

        在声明各种CSS 选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都可以使用集体声明的方法，用“,”分隔多个选择器，对风格相同的CSS选择器同时声明。

4.2.3.1.集体声明

案例代码：
h3,h4,h5,p{ color:red;font-size:18px}

4.2.3.2.全局声明

        对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”，案例代码：

        *{ 
            color:red;
            font-size:18px
         }

4.2.3.3派生选择器（上下文选择器）

        另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使 CSS 代码变得更加整洁。例如，要让列表项<li>中的< strong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {font-style:italic ;font-weight : normal ; }

strong { font-weight : bold ; }

代码如下:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用<strong></p >
<ol>

        <li>< strong>我是斜体字,这是因为 strong元素位于l标记内</strong></li>

        <li>我是正常的字体</li>

</ol>
在上面的例子中，有两个strong标记，但只有l元素中的strong元素的样式为斜体字，而且无须为 strong标记定义特别的class 或id，应用派生选择器，代码更加简洁。
CSS按其位置可以分为4种:内联样式表(Inline tyle Sheet)、内部样式表(Internal

4.3 CSS引入方式

        CSS按其位置可以分为4种:内联样式表(Inline tyle Sheet)、内部样式表(InternalStyle Sheet)、链接外部样式表(LinkExternal Style Sheet)以及导人外部样式表(ImportEx-ternal Style Sheet)。

4.3.1.内联样式表（行内样式表）

        内联样式表的CSS规则写在首标记内，只对所在的标记有效，几乎任何一个HTML标记上都可以设置style属性，属性值可以包含CSS规则的声明，不包含选择器。        

4.3.1.1.基本语法

<标记 style="属性1:属性值1;属性 2:属性值2;…">修饰的内容</标记>

4.3.1.2.语法说明

语法说明:
(1)标记是指 HTML标记，如p，hl和body等标记;
(2)标记的style定义的声明只对自身起作用;
(3)style 属性的值可以包含多个声明，每一声明之间用“:”分隔；
(4)标记自身定义的style样式优先于其他所有样式定义。内联样式表的应用如以下实例所示。

<!DOCTYPE html>
<html> 
    <head> 
	    <meta charset="UTF-8"> 
	    <title>第四章 css样式基础</title> 
    </head>
    <body>
		<p style="color: #ff0000;font-size: 20px;text-decoration: underline;">正文内容1</p >
		<p style="color: #000000;font-style: italic;">正文内容2</p >
		<p style="color: #ff00ff;font-size: 25px;font-weight: bold;">正文内容3</p >
		<p>此段无内联样式</p >
	</body> 
</html>

运行结果：

4.3.2.内部样式表

内部样式表写在HTML的<head></head>里面，只对所在的网页有效。使用< style ></ style>标记对来放置CSS 规则。

4.3.2.1.基本语法

I <style type =" text/css">
选择器1{属性 1:属性值1;属性 2:属性值2;…}
选择器2{属性 1:属性值1;属性 2:属性值2;…}  
选择器n{属性 1:属性值1;属性 2:属性值2;...}
</style>

4.3.2.2.语法说明

style 标记是成对标记，有1个type属性是指style元素以CSS 的语法定义。选择器1，…，选择器n，可以定义n个选择器，再定义声明部分。属性和属性值之间用冒号连接,“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

外部样式表是将CSS 规则写在以 .css为后缀的CSS 文件里，在需要用到此样式的网页里引用该CSS 文件。根据引用的方式不同可以分为链接外部样式表和导入外部样式表，它
们形式上的区别在于链接外部样式表通过链接link标记，导入外部样式表必须在内部样式表内首行通过“@import url(外部样式文件);”来定义。

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head标签中使用<link>标记将外部样式表文件链接到HTML 文档中。
<link type=" text/css" rel=" stylesheet"href="外部样式表名.css">
语法中必须指定<link>标记的3个属性，其中 href是定义链接外部样式表文件的url可以是相对路径和绝对路径;rel是定义当前文档与被链接文档之间的关系，这里指定 stylesheet，表示被链接的文档是样式表文件;type是定义链接文档的类型，这里类型指定为 text/css，表示链接的外部文件为CSS 样式表。
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type= text/css"规定被链接文档的MIME类型。href="mystyle. css"规定被链接文档的位置，只需要记住这个固定写法即可。
以下示例演示链接外部CSS 样式表:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第四章 CSS样式基础</title>
		<link rel="stylesheet"
			href="css/第四章.css"
			type="text/css"/>
	</head>
	<body>
		<p>第一段</p>
		<p>第二段</p>
		<p class="class1">这是class1的内容</p>
		<p class="class2">这是class2的内容</p>
		<p class="class2">这是class2的内容</p>
		<p id="id1">这是id内容</p >
		<p class="class1" id="id2">这是id2内容</p >
		<p class="class1" id="id1">这是id2的内容</p>
		<a href="http://www.baidu.com">百度一下</a>
    </body>
</html>

运行结果：

4.3.3.2.导入外部样式表

        导入式是将一个独立的CSS文件导入 HTML文档中，其是在HTML文档< head>中应用< style>标签，并在< style>标签中的开头处用@import语句，即可导入外部样式表文件。

        (1)基本语法:<style type=" text/css">

@ import url( "CSS 文件路径");

/*此处还可以存放其他 CSS 样式*/</style>

        (2)语法说明。导入样式表必须在style标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“;”结束。一般导入外部样式写在最前面，内部样式写在后面。

“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”。

导入式会在整个网页加载完后再加载CSS文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况。这是导入式固有的一个缺陷。

虽然导入式和链接式功能基本相同，但大多数网站都是采用链接式引入外部样式表，这是因为两者的加载时间和顺序不同。在加载页面时，<link>标签引用的CSS 样式表将同时被加载，而“@import”引用的CSS 样式表会等整个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此，大多数的网站采用链接外部样式表是使用频率最高、最实用的CSS样式表。它可以将HTML代码与CSS代码分离为两个或多个文件，实现类结构和表现的完全分离，使网页的前期制作和后期维护都变得十分方便。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导入外部样式表</title>
		<style type=" text/css">
		@import url("css/4-5.css");
		</style>
	</head>
	<body>
		<h2>CSS 标题</h2>
		<p>这是正文内容.</p>
		<h2>CSS 标题</h2>
		<p>通过 style 标签将外部样式表4-5.css导入到HTML文档中</p >
	</body>
</html>

运行结果：

4.4 CSS的属性单位

        在CSS文字、排版、边界等的设置上，常常会在属性值后加上长度或者百分比单位，通过本节的学习将掌握两种单位的使用。

4.4.1.长度、百分比单位

        长度单位通常由两个英文字母的缩写表示，且设置大部分属性时仅能使用正数，只有少数属性可以使用正、负数的设置。而且必须注意，若属性值设置为负数，且超过浏览器所能接受的范围，以至于无法支持时，浏览器将会选择比较靠近且能支持的数值，长度单位在设置时分别为以下两种不同的类型。

4.4.1.1.相对类型

        其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm(当前字母中，字母的宽度)作为属性单位时，将会依据父元素的font-size属性，如果没有父元素，则参考浏览器的默认值字号。

4.4.1.2.绝对类型

        绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的，例如屏幕上的1cm与打印机上的1cm 是一样长的。表 4-3为浏览器支持的绝对类型的长度单位。

4.4.2.色彩单位

        HTML网页和CSS样式都是按照RGB来设置颜色的。在HTML标记中只提供了两种设置色彩的方法:十六进制数和色彩英文名称。CSS则提供了三种定义色彩的方法:十六进制数、色彩英文名称、rgb函数和 rgba函数。

4.4.2.1.用十六进制数方式表示色彩值

        在计算机中，定义每种色彩的强度范围为0~255。当所有色彩的强度都为0时，将产生是
黑色;当所有色彩的强度都为255时，将产生白色。
        在 HTML中，使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制数字表示，表示方法为:#RRCGBB，其中，前两个数字代表红光强度(Red)，中间两个数字代表绿光强度(Green)，后两个数字代表蓝光强度(Blue)，以上3个参数的取值范围为00~ff。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示256x256x256种色彩，即.16M 种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为#FF0000、#00FF00、#0000FF、#000000、#FFFFFF。例如下面的代码:
div{
color :#FF0000;
        如果每个参数各自在两位上的数字都相同，也可缩写为#RGB的方式。例如 #cc9900可以缩写为#c90。

4.4.2.2.用色彩名称方式表示色彩值

        在CSS中也提供了与HTML一样的用色彩英文名称表示色彩的方式。csS只提供16种色彩名称，见表 4-4。

4.4.2.3.使用RGB（x,y,z）函数表示

        x、y、z、分别是红色、绿色、蓝色的值，x，y，z∈[0，225]，亦可用百分比表示;对比rgba (x，y,z,a) 中a是alpha通道设置透明度取值0~1。

4.5.CSS继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。

4.5.1继承关系演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承关系演示</title>
		<style>
			a{
				color: aquamarine;
				text-decoration: underline;  /* 下划线 */
			}
			b{
				color: blue;
			}
		</style>
	</head>
	<body>
		<a>学习<b>Web</b>开发教程</a>
		<p>如果您有任何问题，欢迎联系我们</p>
	</body>
</html>

运行结果：

4.5.2CSS层叠演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠</title>
		<style>
			p{
				color: aquamarine;
			}
			.blue{
				color: blue;
			}
			.mediumpurple{
				color: mediumpurple;
			}
			#line1{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<p>这是第1行文字</p>
		<p class="mediumpurple">这是第2行文字</p>
		<p id="line1" class="mediumpurple">这是第3行文字</p>
		<p style="color: coral;" id="line1">这是第4行文字</p>
		<p class="blue mediumpurple">这是第5行文字</p>
	</body>
</html>

运行结果：

        样式表的层叠性就是继承性，样式表的继承规则是:外部的元素样式会保留下来，由各元素所包含的其他元素继承;所有在元素中嵌套的元素都会继承外层元素指定的属性，有时会把多层底套的样式叠加在一起，除非进行更改;遇到冲突的地方，以最后定义为准。

4.6 元素类型

        在前面已经以文档结构树形图的形式讲解了文档中元素的层次关系，这种层次关系同时也要依赖于这些元素类型间的关系。CSS 使用 display属性规定元素应该生成的框的类型，任何元素都可以通过display属性改变默认的显示类型。

4.6.1.块级元素

        display 属性设置为block将显示块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区 div和 body等元素都是块级元素。

4.6.2.行级元素

        行级元素也称内联元素，display属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超链接、图像、范围(span)、表单元素等都是行级元素。

4.6.3.列表项元素

        list-item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。

4.6.4.隐藏元素

        none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把 display 设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间。
综合案例:开平碉楼申遗大事记。
以开平碉楼的申遗大事记为例子，参照给定的HTML代码、CSS 设置和图片资源，利用 HBuilder 设计 Web网页。
要求:
(1)标题设置为h2、“微软雅黑”、居中显示;
(2)小标题设置为“黑体”，字体颜色设置为“#8B4513”，段落背景颜色为“#D3B175”,行高为200%;
(3)正文其他所有的字体设置为“微软雅黑”、18px、首行缩进2字符;
(4)使用外部样式表链接到HTML文档中。

4.7 综合案例——开平碉楼申遗大事记

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>开平碉楼</title>
		<link
			type="text/css"
			rel="stylesheet"
			href="css/z4.css"/>
	</head>
	<body>
		<div id="content">
		<h2 class="biaoti">开平碉楼申遗大事记</h2>
		<hr color="#D3B175" size="5px"/>
		<img src="img/4.7案例.jpg"/>
		<p class="tx1">2000年,开平成立申遗小组</p>
		<p>2000年2月,从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产。
		2000年10月30日,开平市成立"开平碉楼"申报世界文化遗产领导小组。领导小组下设办室，分整治组、资料组、宣传组。</p>
		<p class="tx1">2001年,省申遗领导小组成立</p>
		<p>2001年4月30日,开平市市长办公会议研究将开平碉楼申遗项目名称定为"开平碉楼与民居"。
		2001年6月19日,申遗办谭伟强、张健文、邝积康3位负责人赴北京,在李玫同志的陪同下拜访了中国国际古迹遗址理事会秘书长郭旃、清华大学教授陈志华,就申遗的有关事宜进行会谈。
		2001年3月至6月,开平市开展"开平碉楼"的普查工作,并请上海同济大学、华南理工大学专家对33座碉楼测绘了立面图、剖面图、平面图和细部特征图。
		2001年6月,江门市成立了以时任市长雷于蓝为组长的江门市申报世界文化遗产领导小组。2001年7月11日至17日,清华大学陈志华、楼庆西、李秋香教授,五邑大学张国雄、梅伟强教授,深入到三埠、长沙、沙冈、塘口、蚬冈、百合、月山、赤坎、大沙等镇(办事处)对碉楼与民居进行了认真细致的考察。开平市政府特聘几位专家为"开平碉楼与民居"申报世界文化遗产工作高级 问。
		2001年9月6日至7日,时任副省长的李兰芳到江门市视察碉楼,对开平碉楼申遗工作给予了充分的肯定,并表示省政府对此将大力支持。2001年9月12日,联合国世界遗产评估机构国际古迹遗址理事会总协调员亨利博士考察
		开平碉楼,对开平碉楼的价值和开平乃至广东的文物保护工作表示了充分的肯定。
		2001年11月,广东省成立申报世界文化遗产领导小组及其办公室。
		2001年,开平籍旅港同胞、恒生银行董事长利国伟爵士就开平碉楼申报事宜专门写信给时任国务院总理的朱镕基。</p>
		<p class="tx1">2004 年,世遗中心受理开平申遗</p>
		<p>2004年4月10日至11日,联合国世界遗产专家乔拉·索拉先生及夫人、以色列文物专家阿里·拉哈米莫夫先生及夫人,中国国际古迹遗址理事会秘书长郭旃先生,澳门文化局文化财产厅陈泽成厅长的陪同下到开平考察碉楼。
		2004年5月,任仲夷同志致函省委书记张德江,请德江同志向中央汇报开平碉楼申报世界文化遗产工作。
		2004年5月17日,张德江同志在开平市委、市政府《关于请张德江书记向中央汇报开平碉楼申
		报世界遗产工作的请示》中批示:我赞成和支持开平碉楼申报世界文化遗产。
		2004年6月,开平市被中国建筑学会授予"中国碉楼之乡"的称号。
		2004年7月2日,中国100多个申遗"预备清单"中已有5个申报项目被世界遗产中心受理,分
		别是澳门历史建筑群、开平碉楼、殷墟、福建土楼和红河哈尼梯田。
		2004年10月28日,蚬冈镇锦江里昇峰楼业主旅加华侨胡黄惠英(乳名:黄滚盛)女士及其兄长
		黄雄畅先生在梁金山世外豪园酒店正式将他们的碉楼无偿委托给开平人民政府管理。</p>
		<p class="tx1">2005 年,申报名称变更</p>
		<p>2005 年4月21日,由清华大学建筑学院与开平市申遗办合作开展的第二次全市性碉
		楼普查工作于圆满完成。本次碉楼普查从2005年3月16日开始,历时13个月。第二次碉楼普查深入到全
		 	市每条村庄逐幢碉楼进行登记、拍照、调查核实,拍摄2万多张图片,采集到一些珍贵的、鲜为人知的历史	
		资料。
		2005年9月18日,联合国世界遗产协调员乔拉先生、建筑规划师阿里先生来到开平,指导开平
		碉楼申报世界文化遗产工作。
		2005年9月24日,由省人民政府主办,省文化厅、江门市人民政府、开平市人民政府承办的广东省开平碉楼申报世界文化遗产动员大会在省博物馆门前隆重举行。
		2005年11月,开平碉楼申报世界文化遗产的项目名称由"开平碉楼与民居"变为"开平碉楼与
		村落",极大地延伸了开平碉楼的文化内涵和历史价值,更有利于申报世界文化遗产。
		2005年12月5日,北京大学世界遗产中心沈文权博士,中国古文物保护专家张志平女士(郭旃
		夫人)抵达开平,着手开展修改北大制订的开平碉楼文化遗产保护规划,为适应申报的需要,该规划将改名为《开平碉楼与村落保护管理规划》,并对相关内容进行增补。
		</p >
		<p class="tx1">2006 年,世遗专家评估开平申遗</p>
		<p>2006年1月11日,国家文物局局长单霁翔正式签署英文申报文本。
		2006年1月,国务院正式批准"开平碉楼与村落"作为2007年代表中国向联合国申报世界文化
		遗产的项目,英文申报文本已被联合国教科文组织确认合格接收。
		2006年3月2日至3日,联合国教科文组织专家乔拉·索拉先生和阿里先生按原计划来到开平
		考察"申遗"准备工作。
		2006年4月3日下午,国家文物局、省政府、江门和开平市委、市政府在开平市行政大楼召开了
		开平碉楼与村落申报世界文化遗产工作会议,研究申遗工作进入第二个重要环节-环境整治阶段存在的问题,提出下一步工作意见。
		2006年5月9日,黄华华省长在江门市委书记陈继兴、市长王南健的陪同下到江门市检查指导
		开平碉楼与村落申遗工作。
		2006年8月21日至22日,经业主方其祥、方其赏、方其锦授权,塘口镇自力村三座尘封了大半
		润生居庐被依次打开,并发现大量珍贵文物。
		2006年8月27日至28日,著名歌唱家阎维文与中央电视台摄制组一行10多人来到开平,拍摄
		开平碉楼与村落申报世界文化遗产主题曲《碉楼颂》音乐电视。
		2006年9月,中国华侨出版社出版了两本关于开平碉楼与村落的学术著作,总结开平碉楼与村
		落研究所取得的丰硕成果,支持开平碉楼与村落申报世界文化遗产。
		2006年9月15日,开平市举行"共同的心愿全力支持开平碉楼与村落申报世界文化遗产”
		为主题的申遗文艺晚会,世遗评估专家卢光裕先生、副省长雷于蓝、国家文物局有关领导观看了晚会。晚会结束时,共收到来自社会各界的捐款1480多万元,其中,著名侨领吴荣治先生及夫人捐款100万元。
		2006年9月15至18日,受联合国教科文组织世界遗产中心的委派,"世遗"评估专家卢光裕先
		生到江门市对开平碉楼与村落进行评估。
		</p >
		<p class=" tx1" >2007 年,申遺成功</p>
		<p>2007年1月,开平碉楼与村落申遗项目顺利通过国际古迹遗址(ICOMOS)委员会执委
		会在巴黎召开的专家会议的评审。
		2007年6月20日,开平市赴新西兰、澳大利亚申遗代表团一行30多人经香港转机后抵达新
		西兰。
		2007年6月22日,中国政府代表团飞赴新西兰,出席世界遗产委员会第31届大会,为开平碉楼
		与村落申遗助威。
		2007年6月底,开平碉楼与村落申遗项目顺利通过在新西兰召开的第31届世界遗产大会的表决,正式列入《世界遗产名录》。
		</p>
			<p id="t1">来源：开平碉楼</p>
		</div>
	</body>
</html>

CSS：代码

/* -----------Css 参考代码-----------*//*------全局声明----------*/
	*{
		width:1024px;
		margin-left:auto;
		margin-right:auto;
	}
/*--------正文标题格式-----------*/
	.biaoti{
		font-family:"微软雅黑";
		text-align:center;
	}
/*--------正文所有内容样式-----------*/
	#content{
		text-indent:2em;
		font-family:"微软雅黑";
		font-size:18px;
	}
/*--------小标题样式-----------*/
	.tx1{
		font-weight:bold;
		font-family:"黑体";
		font-size:24px;
		color:#8B4513;
		background-color :#D3B175;
		line-height:200%;	/*设置行高*/	
	}

/*--------结尾样式-----------*/
	#t1{
		color:#333;
		text-align:right;
	}

运行结果：