第四章CSS样式基础知识

2401_87136665

已于 2024-12-02 13:10:28 修改

阅读量905

点赞数 12

文章标签： css 前端

于 2024-10-05 22:40:36 首次发布

本文链接：https://blog.youkuaiyun.com/2401_87136665/article/details/142719607

版权

4.1 CSS概述

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

一: CSS 的基本概念

CSS 的核心作用在于为网页内容的外观和格式进行精准定义。它涵盖了众多方面，如字体的特性（包括字体类型、大小等）、色彩的呈现、页面的布局规划以及元素之间的间隔距离等。通过 CSS，开发者能够依据特定的样式规则，对网页进行精心打造，使其在视觉上更加吸引人，同时也更加便于用户使用。CSS是前端开发中的核心部分，它使得网页设计更加灵活和动态。随着Web技术的发展，CSS也在不断地更新和扩展，以支持更复杂的设计和交互

二、传统 HTML 的缺点
（一）维护困难为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高

（二）标记不足
传统 HTML 在样式控制方面的能力十分有限。它无法提供足够丰富的样式控制选项，使得开发者在设置颜色、调整字体样式以及实现复杂排版效果等方面面临诸多困难。例如，想要实现一些特殊的字体效果或者独特的色彩搭配，传统 HTML 往往难以胜任。

（三）网页过“胖”
如果在网页开发的前期阶段就将样式直接嵌入到 HTML 代码当中，会导致网页文件的体积迅速膨胀。这不仅会使网页的加载速度明显变慢，影响用户的浏览体验，还会使得样式难以被重复利用。因为每个页面都包含了大量重复的样式代码，不仅浪费了存储空间，也增加了开发和维护的成本。

（四）定位困难

在整体页面布局时，HTML对于各个模块的位置调整很困难 .在缺乏严格样式定义的情况下，网页元素的定位会变得极为复杂。由于没有明确的规则来确定元素的位置和布局，开发者很难实现预期的布局效果。这可能导致网页的布局混乱，元素之间的位置关系不清晰，严重影响网页的整体美观和可用性。

三、CSS 的特点和优势
（一）表现和内容分离
CSS 最大的优势之一就是实现了内容与样式的分离。在这种架构下，HTML 专注于构建网页的内容结构，而 CSS 则负责网页的视觉表现。这种分离带来了诸多好处，其中最显著的就是增强了网页的可维护性。当需要进行样式调整时，开发者只需要修改 CSS 文件，而无需在大量的 HTML 代码中寻找和修改样式相关的内容，大大提高了开发效率。

（二）增强了网页的表现力

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

（三）使整个网站显示风格趋于统一
借助外部样式表，CSS 能够确保网站的各个页面都保持一致的样式。这对于提升用户体验至关重要。当用户在浏览网站的不同页面时，不会因为样式的不一致而感到困惑或不适。统一的样式也有助于塑造网站的品牌形象，增强用户对网站的认知度和记忆点。

4.2.目录结构命名规则

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

( 二）样式文件的命名规则

为了提高代码的可读性和可维护性，在命名 CSS 样式文件时，应遵循有意义、易于理解的原则。例如，可以使用“main.css”来表示主要的样式文件，“header.css”表示头部区域的样式文件等。避免使用过于复杂的命名方式，以免造成混淆和理解困难。

( 三）选择器的命名应当简洁明了，易于识别和理解。常用的规范包括使用小写字母，并通过连字符进行分隔。例如，“.study-big”这样的命名方式既清晰地表达了选择器的作用（表示主要按钮），又符合规范，易于阅读和维护。做到“见名知义”，这样就节省了查找样:的时间。

（四）CSS 代码注释

在 CSS 代码中添加注释是一种良好的编程习惯。可以使用“/ *注释内容* /”的形式为 CSS 代码添加注释。注释可以帮助开发者更好地理解代码的功能和作用，也方便其他开发人员在阅读代码时快速了解代码的意图

（五）CSS 代码注释

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

4.3 CSS语法基础

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

基本语法代码如下

<!DOCTYPE html>
 
<html>
 
<head>
 
    <meta charset="utf-8" />
 
    <title>第四章语法基础</title>
 
    <style>
 
        p {
 
            / 标签选择器 /
 
            color: #ffaaff; / 调整字体颜色 /
 
            font-size: 30px; / 调整字体大小 /
 
        }
 
    </style>
 
</head>
 
<body>
 
    <p>CSS的基本语法</p>
 
</body>
 
</html>

.语法说明
(1)标记选择器可以选中所有相同的标签。在上述代码中，使用`<p>`标签选择器可以选中所有的`<p>`段落元素，并为它们设置相同的样式。这种选择器的使用非常方便，可以快速地为一类元素应用统一的样式即类选择器

<p class="class1">这是 class1 的内容</p>
 
<p class="class2">这是 class2 的内容</p>

(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“.”连接，每个属性/属性值对之间用分号(;)隔开。
(3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性 background-color;而在脚本语言中，对象属性则连写成backgroundColor在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

(4)id选择器

<p id="id1">这是 id1 内容</p>

5.伪类选择器

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

<a href="http://www.baidu.com/">我爱学网页设计</a>

/*伪类选择器*/
           a:link{
               color: #00ffcc;
               font-size: 50px;
           }
           a:visited{
               color: #ffaa00;
               font-size: 50px;
           }
           a:hover{
               color: #ff00aa;
               font-size: 50px;
           }

值得一提的是 a:hover 必须位于a:link和a:visited之后才有效；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
	</head>
	<style type="text/css">
		a:link{color: gray;text-decoration: none;}
		a:visited{color: blue;text-decoration: none;}
		a:hover{color: red;text-decoration: none;}
		a:active{color: yellow;text-decoration: none;}
		p::first-letter{font-weight: bold;font-family:"微软雅黑";font-size: larger;}
		
	</style>
	<body>
		<p>伪类选择器</p>
		<a href="http:/www.sina.com">新浪首页</a>
	</body>
</html>

4.3 CSS引入方式
4.3.1.内联样式表（行内样式表）
内联样式表的CSS 规则写在首标记内，只对所在的标记有效，几乎任何一个HIML务
记上都可以设置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>内联样式表</title>
		</head>
	<body>
         <p style="color:#FF0000; font-size: 20px; text-decoration: underline;">正文内容1</p> 
			 <p style="color: #000000; font-size: 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文档中。
（1）基本语法：
<link type="text/css" rel="stylesheet"href="外部样式表名.css">
（2）语法说明：
语法中必须指定<link>标记的3个属性，其中href 是定义链接外部样式表文件的ur可以是相对路径和绝对路径；rel是定义当前文档与被链接文档之间的关系，这里指定stylesheet，表示被链接的文档是样式表文件；type 是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及3个属性，rel="stylesheet“规定当前文档与被链接文档之间的关系。type="texv/css“规定被链接文档的 MIME 类型。href="mystyle.css"规定被链接文档的位置，只需要记住这个固定写法即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接外部样式表</title>
		<link  href="4-5.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<h2>CSS标题</h2>
		<p>这是正文内容...>
		<h2>CSS标题</h2>
		<p>通过link标签将外部样式表4-5.css链接到HTML文档中</p>
	</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”

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

4.4CSS选择器声明

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

1.集体声明
集体声明代码如下:

h3, h4, h5, p {

--color: bule; font-size: 35px;

}

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

* {color : black ;
font-size:28px ;}

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

li strong {

font-style : italic ; font-weight ; normal ;}

strong {font-weight :bold ;

}

4.5 CSS 引入方式

一、内联样式表（行内样式表）

1.基本语法
<标记 slye=“属性!:属性值1;属性 2:属性值 2:…">这是内联样式的段落</标记>

二）语法说明

内联样式是直接写在元素的属性中的，但这种方式不建议频繁使用，因为它会使代码的可维护性降低。内联样式虽然可以快速地为单个元素设置特定的样式，但当需要对多个元素进行相同的样式设置时，内联样式会导致代码的重复和冗余，增加了维护的难度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   .au-class {
      color: #FF0000;
    }
  </style>
  <title>111</title>
</head>

<body>
  <p class="au-class">这是第二段内容</p>
</body>

</html>

二、内部样式表

1.基本语法

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

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

因为每个文档都需要重复定义相同的样式，增加了代码的工作量和维护成本。

三、外部样式表

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

(1)基本语法:

<link type="textcss”rel="stylesheet" href="外部样式表名.css">

（二）导入外部样式表

<style type="text/css"> @import url("CSS 文件的路径");



</style>

4.6 CSS的属性单位

一、长度、百分比单位

一）相对类型
相对类型的单位如`em`、`rem`和`%`，它们的大小是相对于父元素或根元素来确定的。相对单位的使用可以使网页在不同的设备和屏幕尺寸下具有更好的适应性。例如，使用`em`单位设置字体大小，可以根据父元素的字体大小进行相对调整，确保在不同的环境下都能保持较好的可读性。

（二）绝对类型
绝对类型的单位如`px`和`mm`，它们具有固定的大小，通常不会随父元素的变化而变化。绝对单位在需要精确控制元素大小和位置时非常有用。例如，在设计图形界面或需要确保元素具有特定尺寸的情况下，可以使用绝对单位进行设置。

二、色彩单位

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

（二）用色彩名称方式表示色彩值
例如：“color: red;”。色彩名称方式简单直观，易于记忆和使用。但这种方式所能表示的颜色种类有限，不能满足一些复杂的设计需求。

（三）使用 RGB（x，y，z）函数表示
例如：“color: rgb(255, 87, 51);”。RGB 函数表示方式可以通过指定红、绿、蓝三个通道的数值来确定颜色，与十六进制数表示方式类似，但更加直观和易于理解。亦可用百分比表示

4.7.CSS继承与层叠

在 CSS 中，许多属性是可以从父元素继承的，比如字体样式和颜色等。同时，CSS 还可以制定样式的优先级，通过层叠来确定最终的样式表现。值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，

以下是一个继承关系的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承关系</title>
		<style>
			h1{
				color: red;
				text-decoration: aqua;
			}
			em{
				color: cyan;
			}
		</style>
	</head>
	<body>
		<h1>学习<em>web开发</em>教程</h1>
		<p>如果你有问题请联系我们</p >
	</body>
</html>

4.8.CSS继承与层叠

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>CSS 层叠演示</title>
    <style type="text/css">
        p {
            color: #2ecc71; /* 绿色 */
        }* 蓝色 *
 
       .red {
            color: #e74c3c; /* 红色 */
        }
 
       .purple {
            color: #9b59b6; /* 紫色 */
        }
 
        #line3 {
            color: #0000ff; /* 蓝色 */
        }
    </style>
</head>
 
<body>
    <p>这是第 1 行文本</p>
    <p class="red">这是第 2 行文本</p>
    <p id="line3" class="red">这是第 3 行文本</p>
    <p style="color: #f39c12; " id="line3">这是第 4 行文本</p>
    <p class="purple red">这是第 5 行文本</p>
</body>
 
</html>

4.8.1.块级元素

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

4.8.2.行级元素(display:inline)

行级元素包括`<span>`、`<a>`等。这些元素不会产生换行，其宽度仅占据自身内容所需的空间。行级元素通常用于在文本中插入特定的内容或设置链接等。例如，可以使用`<span>`元素来为一段文本中的特定部分设置样式，使用`<a>`元素来创建超链接。，

4.8.3.列表项元素(display:list-item)

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

4.8.4.隐藏元素(display:none)

none 属性值及示隐藏并取消盆模型，所包含的内容不会被浏览器解析和显示。通过把dispay 设置为 none，该元素及其所有内容就不再显示，也不占用文档中的空间。

4.9 综合案例：开平碉楼申遗大事记

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

*{
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
.biaoti{
    font-family: "微软雅黑";
    text-align: center;
}
#contect{
    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;
}

效果图如下