第四章 CSS样式基础

殅.

于 2024-09-30 22:30:28 发布

阅读量502

点赞数 22

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_82187402/article/details/142583588

版权

4.1 CSS概述

CSS是用于简化 HTML 标签，把关于样式部分的内容提取出来，进行单独地控制，使结构与样式分离式开发。对页面布局等的控制也更加精确，同时能够实现内容和表现的分离，使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

4.1.1.CSS的基本概念

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

4.1.2传统HTML的缺点

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

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的编写规则

利用 CSS 样式设计虽然很强大，但是如果设计人员管理不当将导致样式混乱。本节介
绍学习 CSS 编写中的一些技巧和规则。

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

在项目后期，为了网站性能上的考虑，会将不同的CSS 文件整合到一个 CSS 文件中.
这个文件一般命名为 style.css 或css.css

4.1.4.3.选择器的命名规则

新有死播能必须由小写英文字出欢下划线组成。必孤以字母升头：不能为纯数字。设计
若要所看能义的单同或游写坐合来命名选接福，做“见名想X”，这样就节省丁香我程式“。的，特我名业频能够表示样式的大横含义（禁止出现如Divl, Div2 和Syle等自名）

4.1.4.4.CSS代码注释

允许用户在源代码中嵌入注释。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.基本语法

selectorf propertyl:valuel;property2:value2;property3:value3 ··
选择器（属性1：属性值1；属性2：属性值2；属性3：属性值3；

4.2.1.2.语法说明

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

4.2.2.CSS选择器类型

CSS选择器1主要有4种类型：标记选择器、class选择器、ID选择器和伪类型选择器等。

4.2.2.1.标记选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<style>
			p{
				color: #ff0000;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
	</body>
</html>

运行结果：

4.2.2.2.class选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<style>
		.class1{
				color: #00ff00;
				font-size: 30px;
			}
			.class2{
				color: #0000ff;
			}
		</style>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p class="class1">1</p>
		<p class="class2">2</p>
	</body>
</html>

运行结果：

4.2.2.3.ID选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<style>
			#id1{/*#是id选择器*/
			color: #00aaff;
			font-size: 40px;
			}
			#id2{
				font-size: 40px;
			}
		</style>
	</head>
	<body>
    	<p id="id1">id1内容</p>
		<p id="id2" class="class1">id2内容</p>
	</body>
</html>

运行结果：

4.2.2.4.伪类选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<style>
			a:link{
				color: #aa00ff;
			}
			a:hover{
				color: #ffaa00;
			}
			a:visited{
				color: #ff00aa;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

运行结果：

4.2.3.CSS选择器声明

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

4.2.3.1.集体生明

集体声明代码如下：
h3, h4, hs,p{ color:red;fon-size:18px;}

.class1,a{
				font-family: 'Courier New', Courier, monospace;
			}

4.2.3.2.全局声明

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

color: red;

font-size: 18px;

}

*/*全局声明*/{
				font-family: 'Courier New', Courier, monospace;
			}

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

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

代码如下；
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<stong>/p>
<ol>
<lis< strong>我是斜体字，这是因为 strong元素位于li标记内/ stnong>/li>
<li>我是正常的字体</li>
</ol>
在上面的例子中，有两个 strong 标记，但只有11元素中的 strong 元素的样式为斜体字、
而且无须为 6rong标记定义特别的 class或d，应用派生选择器，代码更加简清。

4.3 CSS引入方式

CSS按位置可以分为四种：内联样式表、内部样式表、链接外部样式表、导入外部样式表

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

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

4.3.1.1.基本语法

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

<p style="color: #00ffaa;">第二段内容</p>

运行结果:

4.3.1.2.语法说明

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

4.3.2.内部样式表

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

4.3.2.1.基本语法

I <style type= "tex/css">
选择器1{属性1:属性值1;属性2:属性值2;···}

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

选择器n{属性1:属性值1;属性2:属性值2;···}

</style>

		*/*全局声明*/{
				font-family: 'Courier New', Courier, monospace;
			}
			/*集体声明*/
			.class1,a{
				font-family: 'Courier New', Courier, monospace;
			}
			/**/
			p{
				color: #ff0000;
				font-size: 20px;
			}
			.class1{
				color: #00ff00;
				font-size: 30px;
			}
			.class2{
				color: #0000ff;
			}
			#id1{/*#是id选择器*/
			color: #00aaff;
			font-size: 40px;
			}
			#id2{
				font-size: 40px;
			}
			a:link{
				color: #aa00ff;
			}
			a:hover{
				color: #ffaa00;
			}
			a:visited{
				color: #ff00aa;
			}

4.3.2.2.语法说明

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

4.3.3.外部样式表

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

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过的chead>/head 标签中使用<ink>标记将外部样式表文件链接到 HTML 文档中。

(1)基本语法：
<link type="tex/es" nrel='"stylesheet"href="外部样式表名.cs">

(2) 语法说明：
语法中必须指定<link>标记的3个属性，其中 href 是定义链接外部样式表文件的dg 以是相对路径和绝对路径；rel 是定义当前文档与被链接文档之间的关系，这里指搬stylesheet,表示被链接的文档是样式表文件；type 是定义链接文档的类型，这里类型指定tex/css,表示链接的外部文件为 CSS样式表。
这里面涉及3个属性,rel=" syleshee"规定当前文档与被链接文档之间的关系。r"tex/es"规定被链接文档的 MIME 类型。href=" myslyle.cs"规定被链接文档的位置，只需要住这个固定写法即可。

4.3.3.2.导入外部样式表

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

(1) 基本语法：
<style type="text/css'">
@ impot url("CSS 文件路径")：
/*此处还可以存放其他 CSS 样式*，
<Jstyle>
(2) 语法说明。

导入样式表必须在 style 标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部样式写在最前面，内部样式写在后面。
“@impot”必须连续书写，即“@”和“impot”之间不能留有任何空格。外部样式
表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”。
导人式会在整个网页加载完后再加载 CSS 文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况。这是导人式固有的一个缺陷。
虽然导入式和链接式功能基本相同，但大多数网站都是采用链接式引入外部样式表，这是因为两者的加载时间和顺序不同。在加载页面时，<link>标签引用的CSS 样式表将同时被加载，而“@ impot”引用的 CSS 样式表会等整个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此，大多数的网站采用链接外部样式表是使用频率最高、最实用的 CSS样式表。它可以将 HTML 代码与CSS代码分离为两个或多个文件，实现类结构和表现的完全分离，使网页的前期制作和后期维护都变得十分方便。

4.4 CSS的属性单位

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

4.4.1.长度、百分比单位

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

4.4.1.1.相对类型

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

4.4.1.2.绝对类型

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

百分比单位是一种常用的相对类型，通常的参考依据为font-size 属性。百分比值总是相对于另一个值。下面的语句将 margin 属性的值设置为 font-size 的 200%:
p{margin:200%；}
需要注意的是，不管使用哪种单位，在设置的时候数值与单位之间不需要加空格。

4.4.2.色彩单位

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

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

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

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

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

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

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

4.5.CSS继承与层叠

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

运行结果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层叠</title>
		<style type="text/css">
			p{
				color: green;
			}
			.red{
				color: red;
			}
			.purple{
				color: purple;
			}
			#line3{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p>这是第一行文本</p>
		<p class="red">这是第二行文本</p>
		<p id="line3" class="red">这是第三行文本</p>
		<p style="color: orange;" id="line3">这是第四行文本</p>
		<p class="purple red">这是第五行文本</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”，段落背景颜色为“#D3B17"行高为 200%；

(3)正文其他所有的字体设置为“微软雅黑”、18px、首行缩进2字符；

(4)使用外部样式表链接到 HTML 文档中。

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

<!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="5"/>
			<img src="img/pic200.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月,开平碉楼申报世界文化遗产的项目名称由"开平碉楼与民居"变为"开平碉楼与村落",极大地延伸了开平
			</p>
			<p class="tx1">2006年，世遗专家评估开平申遗</p>
			<p>
				2006年1月11日，国家文物局局长单霁翔正式签署英文申报文本。
				2006 年1月, 国务院正式批准"开平碉楼与村落"作为 2007 年代表中国向联合国中报世界文业遗产的项目，英文申报文本已被联合国教科文组织确认合格接收。
				2006年3月2日至3日,联合国教科文组织专家乔拉·索拉先生和阿里先生按原计划来到未考察“中造”准备工作。
				2006年4月3日下午，国家文物局、省政府、江门和开平市委、市政府在开平市行政大楼召先hant
				开平碉楼与村落申报世界文化遗产工作会议, 研究申遗工作进入第二个重要环节——环境整治阶段存在能 bint-family问题，提出下一步工作意见。 ret-lin：
				2006年5月9日，黄华华省长在江门市委书记陈继兴、市长王南健的陪同下到江门市检查指期
				开平碉楼与村落中遗工作。
				2006年8月21日至22日，经业主方其祥、方其赏、方其锦授权，塘口镇自力村三座尘封了大学
				个世纪的居庐——叶生居庐、官生居庐、澜生居庐被依次打开，并发现大量珍贵文物。
				let-iolent;
				2006年8月 27 日至28 日, 著名歌唱家阎维文与中央电视台摄制组一行10 多人来到开平, 糊
				开平碉楼与村落申报世界文化遗产主题曲——《碉楼颂》音乐电视。 fet-lamly:
				2006年9月, 中国华侨出版社出版了两本关于开平碉楼与村落的学术著作，总结开平碉楼与制 fat-iae:18
				落研究所取得的丰硕成果，支持开平碉楼与村落中报世界文化遗产。
				2006 年9月15日,开平市举行”共同的心愿——全力支持开平碉楼与村落申报世界文化遗产 小为主题的申遗文艺晚会，世遗评估专家卢光裕先生、副省长雷于蓝、国家文物局有关领导观看了晚会。晚全
				束时，共收到来自社会各界的捐款1480多万元，其中，著名侨领吴荣治先生及夫人捐款100万元。
				2006年9月15至18日，受联合国教科文组织世界遗产中心的委源，“世遗”评估专家卢光的
				生到江门市对开平碉楼与村落进行评估。
			</p>
			<p class="tx1">2007年，申遗成功</p>
			<p>
				2007年1月，开平碉楼与村落申遗项目顺利通过国际古迹遗址(1COMOS)委员会长
				会在巴黎召开的专家会议的评审。
				西兰。 2007年6月20日，开平市赴新西兰、澳大利亚申遗代表团一行30多人经香港精机后抵点
				2007年6月22日，中国政府代表团飞赴新西兰，出席世界请产重员公第31届大会为开中
				与村落中遗助威。
				2007年6月底，开平碉楼与村落申遗项目顺利通过在新面兴及开的第31届世双是产大会
				决，正式列入《世界遗产名录》。
			</p>
				<p id="t1">来源：开平碉楼</p>
			</div>
		</body>
</html>

运行结果：