第四章 CSS样式基础

@无铭

已于 2024-09-30 22:26:23 修改

阅读量672

点赞数 24

文章标签： css 前端

于 2024-09-30 21:54:32 首次发布

本文链接：https://blog.csdn.net/xs377905132/article/details/142587335

版权

4.1 CSS概述

4.1.1.CSS的基本概念

CSS（层叠样式表）是一种用于描述网页文档的表现样式的语言。它与HTML结合使用，使得网页的设计和布局更加灵活和美观。开发者能够控制网页的布局、颜色、字体等视觉效果。

4.1.2传统HTML的缺点

4.1.2.1.维护困难

在传统HTML中，样式与内容混合在一起，导致修改样式时需要逐一更新大量的HTML文件，增加了维护的复杂性。

4.1.2.2.标记不足

HTML主要关注内容的结构，而对样式的支持有限，这使得开发者在实现复杂布局时受到制约。

4.1.2.3.网页过“胖”

由于样式信息嵌入HTML中，网页文件的大小增加，加载速度变慢，用户体验下降。

4.1.2.4.定位困难

在没有CSS的情况下，网页的排版和布局控制较为困难，难以实现设计师的意图。

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

CSS允许将样式与内容分离，增强了网页的可维护性和灵活性。

1. 定义

内容：指网页中的实际文本、图像和数据，例如段落、标题和链接等。
表现：指网页元素的外观，如颜色、字体、布局等样式。

2. 重要性

可维护性：当样式与内容分开时，修改样式不需要改动 HTML 结构，从而减少错误和维护成本。
复用性：相同的CSS样式可以被多个HTML页面或元素复用，统一了网站的视觉风格。
灵活性：可以根据不同的设备或屏幕尺寸调整样式，而无需更改内容本身。

3. 实现方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		  h1 {
		      color: blue;
		      font-size: 24px;
		  }
		  p {
		      color: gray;
		      font-size: 16px;
		  }
		</style>
		
	</head>
	<body>
		<h1>欢迎来到我的网站</h1>
		<p>这是我的第一篇博客文章。</p>
	</body>

4.1.3.2.增强了网页的表现力

通过CSS，可以实现丰富多样的视觉效果，如动画、过渡等，提升用户体验

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

使用外部样式表可以确保整个网站在样式上的一致性，便于维护和更新。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

建议清晰地组织文件夹和文件，便于管理，如将CSS文件放在css/目录下。

4.1.4.2.样式文件的命名规则

采用语义化的命名方式，如main.css, header.css，便于理解文件用途

4.1.4.3.选择器的命名规则

使用有意义的类名，如.nav-menu, .btn-primary，便于识别。

4.1.4.4.CSS代码注释

使用/* 注释内容 */格式进行代码注释，以提高可读性。

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

1. 选择器

选择器用于指定要应用样式的HTML元素。常见的选择器包括：

元素选择器：直接选择标签名。
```
p {
    color: blue;
}
```
类选择器：用点号（.）表示，选择带有特定类的元素。
```
.my-class {
    font-size: 16px;
}
```
ID选择器：用井号（#）表示，选择特定ID的元素。

#my-id {
    background-color: yellow;
}

组合选择器：可以组合多个选择器。
```
h1, h2, h3 {
    margin: 10px;
}
```
2. 声明块

每个选择器后面跟着一个声明块，包含了若干个声明，格式如下：

h1 {
    color: red;
    font-size: 24px;
}

3. 属性与值

属性：样式的特性，如 color、font-size、margin 等。
值：属性的具体设置，如 red、16px、10px 等。
4. 继承与优先级
继承：某些属性会被子元素继承，例如字体属性。

优先级：不同选择器的优先级根据其类型和特定性决定，ID选择器的优先级高于类选择器，类选择器高于元素选择器。

6. 示例

以下是一个完整的CSS示例，展示了如何为不同元素设置样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 示例</title>
    <style>
        /* 网页背景 */
        body {
            background-color: #f0f0f0;
        }

        /* 标题样式 */
        h1 {
            color: navy;
            text-align: center;
        }

        /* 段落样式 */
        p {
            font-size: 14px;
            line-height: 1.6;
        }

        /* 类选择器 */
        .alert {
            color: red;
            font-weight: bold;
        }

        /* ID选择器 */
        #main-content {
            padding: 20px;
        }
    </style>
</head>
<body>

    <h1>欢迎来到我的网页</h1>

    <div id="main-content">
        <p>这是一个段落，展示了基本的文本样式。</p>
        <p class="alert">这是一个警告消息，使用了类选择器。</p>
    </div>

</body>
</html>

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

概念：标记选择器用于选择特定的HTML元素。它直接使用元素的标签名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标记选择器示例</title>
	<style>
    h1 {
        color: blue;          /* 所有<h1>元素文本颜色变为蓝色 */
        font-size: 36px;     /* 设置字体大小 */
    }
    
    h2 {
        color: green;         /* 所有<h2>元素文本颜色变为绿色 */
        font-size: 24px;     /* 设置字体大小 */
    }
    
    p {
        color: black;         /* 所有<p>元素文本颜色变为黑色 */
        line-height: 1.5;     /* 设置行高 */
    }
</style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落，包含一些文本。</p>
    <p>这是另一个段落，展示标记选择器的效果。</p>
    <div>
        <h2>子标题</h2>
        <p>这是一个子标题下的段落。</p>
    </div>
</body>
</html>

4.2.2.2.class选择器

.class选择器用于选择具有相同类名的元素。在HTML中，我们可以为元素添加一个或多个类名，以便以后可以使用这些类名来选择和样式化元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Selector Example</title>
    <style>
        /* 使用 .class 选择器 */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="highlight">这是一个标题</h1>
    <p>这是一个普通段落。</p>
    <p class="highlight">这是另一个高亮段落。</p>
</body>
</html>

4.2.2.3.ID选择器

在HTML中，#id选择器用于选中具有特定ID属性的元素。以下是一个使用ID选择器的简单示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器示例</title>
    <style>
        /* ID选择器样式 */
        #header {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }

        #content {
            margin: 20px;
            font-size: 18px;
        }

        #footer {
            background-color: lightgray;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>

    <div id="header">
        <h1>欢迎来到我的网站</h1>
    </div>

    <div id="content">
        <p>这是一个关于ID选择器的示例。</p>
    </div>

    <div id="footer">
        <p>版权所有 &copy; 2024</p>
    </div>

</body>
</html>

4.2.2.4.伪类选择器

HTML伪类选择器用于选择元素的特定状态或条件，而不需要添加额外的类或ID。伪类选择器以冒号（:）开头，常用于样式交互效果。以下是一些常见的伪类选择器及其示例。

常用伪类选择器

:hover：当鼠标悬停在元素上时应用的样式。
:active：当元素被激活（如鼠标按下时）时应用的样式。
:focus：当元素获得焦点时应用的样式，通常用于表单元素。
:first-child：选中父元素的第一个子元素。
:last-child：选中父元素的最后一个子元素。
:nth-child(n)：选中父元素的第n个子元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        /* :hover 伪类 */
        a:hover {
            color: red;
            text-decoration: underline;
        }

        /* :active 伪类 */
        button:active {
            background-color: lightgray;
        }

        /* :focus 伪类 */
        input:focus {
            border: 2px solid blue;
            outline: none;
        }

        /* :first-child 伪类 */
        li:first-child {
            font-weight: bold;
            color: green;
        }

        /* :nth-child(n) 伪类 */
        li:nth-child(2n) {
            background-color: #f0f0f0; /* 偶数项背景色 */
        }
    </style>
</head>
<body>

    <h1>伪类选择器示例</h1>

    <p>这是一个带有<a href="#">链接</a>的段落。</p>

    <button>点击我</button>

    <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
    </ul>

    <input type="text" placeholder="输入文本" />

</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派生选择器（上下文选择器）

根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使SS代码变得更加整洁。

4.3 CSS引入方式

1. 内联样式（Inline Styles）

直接在HTML元素中使用style属性定义样式。这种方式只影响特定的元素。

<p style="color: red; font-size: 20px;">这是一个红色段落。</p>

2. 内部样式表（Internal Stylesheet）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部样式示例</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>欢迎</h1>
    <p>这是一个绿色段落。</p>
</body>
</html>

3. 外部样式表（External Stylesheet）

将CSS代码保存在单独的.css文件中，并在HTML文档的<head>部分使用<link>标签引入。这种方式适用于多个页面共享同一套样式。

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

内联样式是将CSS样式直接应用于HTML元素的方式，使用style属性定义。

4.3.1.1.基本语法

<元素类型 style="样式属性: 属性值;">
    内容
</元素类型>

<p style="color: red; font-size: 20px;">这是一个红色段落。</p>

4.3.1.2.语法说明

元素类型：可以是任何HTML元素，例如<p>、<h1>、<div>等。
style属性：用于定义内联样式的属性，必须包含在元素的开始标签中。
样式属性：CSS样式的名称，使用小写字母书写（如color、font-size等），多个属性用分号分隔。
属性值：具体的样式值，如颜色名、十六进制颜色值、单位等（如red、#ff0000、20px等）

4.3.2.内部样式表

4.3.2.1.基本语法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        /* CSS样式规则 */
        选择器 {
            属性: 值;
        }
    </style>
</head>
<body>
    内容
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部样式示例</title>
    <style>
        body {
            background-color: lightyellow;
        }
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个绿色段落。</p>
</body>
</html>

4.3.2.2.语法说明

<style>标签：位于<head>部分，用于包含CSS样式。
选择器：指定要应用样式的HTML元素，可以是标签名、类名、ID等。
属性：CSS样式的特性，如color、background-color、font-size等。
值：为属性指定的具体值，如颜色名、像素值、百分比等。

4.3.3.外部样式表

外部样式表是将CSS样式定义在一个单独的 .css 文件中，并在HTML文档中进行引用。这种方式有助于实现样式的重用和代码的集中管理。

4.3.3.1.链接外部样式表

要链接外部样式表，可以使用<link>标签，将其放置在HTML文档的<head>部分。基本语法如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    内容
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
	<style>
		body {
		    background-color: lightgray;
		}
		
		h1 {
		    color: darkblue;
		    font-size: 28px;
		}
		
		p {
		    color: black;
		}

	</style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

4.3.3.2.导入外部样式表

除了使用<link>标签外，还可以通过@import规则在CSS文件中导入其他样式表。这通常用于将多个样式表组合在一起。

基本语法：

@import url("styles.css");

4.4 CSS的属性单位

在CSS中，单位用于定义样式属性的值，例如长度、大小、时间等。主要可以分为两大类：绝对单位和相对单位。

4.4.1.长度、百分比单位

4.4.1.1.相对类型

相对单位是相对于其他元素或环境的单位，常见的相对单位包括：

%（百分比）：相对于父元素的尺寸。例如，width: 50% 表示该元素的宽度为其父元素宽度的50%。
em：相对于当前元素的字体大小。1em等于当前元素的字体大小。例如，如果父元素字体大小为16px，则2em等于32px。
rem：相对于根元素（通常是<html>）的字体大小。1rem等于根元素字体大小。例如，如果根元素字体大小为16px，则2rem等于32px。
vw（视口宽度）：1vw等于视口宽度的1%。例如，width: 50vw表示宽度为视口宽度的50%。
vh（视口高度）：1vh等于视口高度的1%。例如，height: 50vh表示高度为视口高度的50%。
vmin：相对于视口的最小值，即宽度和高度中较小的那个的1%。
vmax：相对于视口的最大值，即宽度和高度中较大的那个的1%。

4.4.1.2.绝对类型

绝对单位是固定的，不会随着其他元素的变化而改变，常见的绝对单位包括：

px（像素）：最常用的单位，表示屏幕上的一个点。
pt（点）：常用于印刷，1pt = 1/72英寸。
cm（厘米）：用于物理测量，1cm = 37.795px。
mm（毫米）：同样用于物理测量，1mm = 3.7795px。
in（英寸）：1in = 96px。

4.4.2.色彩单位

在CSS中，定义颜色的方式有多种，以下是常用的几种表示方法。

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

十六进制颜色值以#开头，后面跟随6个或3个十六进制数字。格式如下：

6位十六进制：#RRGGBB
- RR：红色分量（00到FF）
- GG：绿色分量（00到FF）
- BB：蓝色分量（00到FF）
示例：#FF5733表示一种橙红色。
3位十六进制：#RGB
- 每个颜色分量的值可以用一个十六进制数字表示，等同于两个相同的数字。
示例：#F53等同于#FF5533。

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

CSS支持一些预定义的颜色名称，可以直接使用。例如：

red：红色
green：绿色
blue：蓝色
black：黑色
white：白色
yellow：黄色

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

RGB颜色值通过rgb()函数表示，格式如下：

rgb(red, green, blue)

每个参数的取值范围是0到255，代表红、绿、蓝三种颜色的强度。

color: rgb(255, 87, 51); /* 橙红色 */

此外，还有一种RGBA表示法，添加了透明度参数（a），格式为：

rgba(red, green, blue, alpha)

alpha的取值范围是0到1，0表示完全透明，1表示完全不透明。
```
color: rgba(255, 87, 51, 0.5); /* 半透明的橙红色 */
```

4.5.CSS继承与层叠

CSS 的继承和层叠是理解样式应用的重要概念。它们帮助我们管理样式的优先级和结构。

. 继承

继承是指某些CSS属性的值可以从父元素传递给子元素。不是所有的CSS属性都是可继承的，常见的可继承属性包括：

color
font-family
font-size
line-height
text-align

示例：

body {
    color: blue; /* 颜色继承 */
}

p {
    font-size: 16px; /* 字体大小不会被继承 */
}

在这个例子中，body的文字颜色会被其内部所有元素（如p标签）继承，但字体大小则需要在p中单独设置。

2. 层叠

层叠（Cascading）是指当多个规则适用于同一元素时，浏览器决定使用哪条规则。层叠的顺序通常遵循以下优先级：

内联样式：直接在HTML元素上使用style属性的样式优先级最高。
内部样式表（<style>标签）：在HTML文档中定义的样式次之。
外部样式表：通过<link>标签引入的CSS文件样式优先级最低。
浏览器默认样式：如果没有其他样式应用，浏览器自带的默认样式将被使用。

选择器的优先级

CSS选择器的优先级也影响样式的应用。一般优先级从高到低为：

ID选择器（#id）
类选择器（.class）和属性选择器（[attr]）
标签选择器（tag）
通配符选择器（*）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<style>
			h1{
				color: blue;
				text-decoration: underline;
			}
			em{
				color: red;
			}
			.purple{
				color: purple;
			}
			#line3{
				color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 4.5继承与层叠 -->
		<h1>我是<em>无铭</em></h1>
		<p>这是第1行文本</p>
		<p class="red">这是第2行文本</p>
		<p id="line3" class="red">这是第3行文本</p>
		<p style="color: orange;" id="line3">这是第4行文本</p>
		<p class="purple red">这是第5行文本</p>
	</body>
</html>

4.6 元素类型

在HTML中，元素可以根据其功能和用途分类为不同的类型。主要的元素类型包括：

4.6.1. 块级元素（Block-level Elements）

这些元素通常会在新的一行开始，并占据整个行的宽度。常见的块级元素有：

<div>: 通用容器，用于分组其他元素。
<h1>至<h6>: 标题元素，表示不同级别的标题。
<p>: 段落元素，表示文本段落。
<ul>和<ol>: 无序列表和有序列表。
<li>: 列表项，通常用在列表中。
<header>, <footer>, <section>, <article>: 语义化元素，用于结构化文档。

4.6.2. 行内元素（Inline Elements）

这些元素不会在新的一行开始，只占用其内容所需的宽度。常见的行内元素包括：

<span>: 通用容器，用于分组文本或其他行内元素。
<a>: 超链接元素。
<img>: 图像元素。
<strong>: 强调文本，默认加粗。
<em>: 斜体文本，表示强调。
<br>: 换行元素。

4.6.33. 行内块级元素（Inline-block Elements）

这些元素结合了块级元素和行内元素的特性。它们可以设置宽高，同时不会在新的一行开始。常见的行内块级元素包括：

<button>: 按钮元素。
<input>: 输入框元素。
<label>: 标签元素。

4.6.4. 表格元素（Table Elements）

这些元素用于创建表格，常见的表格元素有：

<table>: 表格元素。
<tr>: 表格行元素。
<td>: 表格单元格元素。
<th>: 表格头单元格元素。
<thead>, <tbody>, <tfoot>: 表格的不同部分。

4.6.5. 表单元素（Form Elements）

这些元素用于创建用户输入的表单，常见的表单元素有：

<form>: 表单容器。
<input>: 输入字段。
<textarea>: 多行文本输入。
<select>: 下拉列表。
<button>: 提交按钮。

4.6.6. 语义化元素

HTML5引入了一些新的语义化元素，用于增强文档的可读性和可访问性。这些元素包括：

<nav>: 导航区域。
<aside>: 侧边栏内容。
<figure>: 图像及其说明。
<figcaption>: 图像说明。

总结

了解不同类型的HTML元素有助于更好地构建和组织网页结构，使页面既符合标准又易于维护。选择合适的元素类型对于提升用户体验和SEO优化也至关重要。

4.6.7隐藏元素

none，表示隐藏并取消盒模型，不会在浏览器显示，也不会占用文档空间。

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/1.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>