第四章 CSS样式基础

最新推荐文章于 2024-10-02 15:35:50 发布

傻子和白痴

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量687

点赞数 30

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/2402_87155212/article/details/142558520

版权

4.1 CSS概述
4.1.1.CSS的基本概念

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等）文档样式的样式表语言。以下是CSS的一些基本概念：

1. 选择器（Selector）：选择器用于选择HTML文档中的元素，以便将样式规则应用于这些元素。常见的选择器包括标签选择器、类选择器、ID选择器、属性选择器等。

2. 属性（Property）：属性是定义在HTML元素上的样式特征，例如颜色、字体大小、边框宽度等。

3. 值（Value）：值是与属性相关的具体信息，例如红色、12px、1px solid black等。

4. 声明（Declaration）：声明是属性和值之间的关联，通常以“属性: 值;”的格式出现。

5. 规则集（Rule Set）：规则集由一个或多个选择器组成，后跟一对花括号，花括号内包含一个或多个声明。

6. 层叠（Cascading）：CSS中的“层叠”指的是当多个规则应用于同一个元素时，浏览器如何决定使用哪个规则。这通常由选择器的优先级（特异性）和声明的顺序决定。

7. 继承（Inheritance）：继承是指某些样式属性会被子元素自动继承其父元素的样式。

8. 盒模型（Box Model）：盒模型描述了HTML元素如何分配空间和尺寸，包括元素的内容、内边距、边框和外边距。

9. 布局（Layout）：CSS布局涉及如何安排HTML文档中的元素，包括流布局、浮动布局、定位布局、Flexbox布局和Grid布局等。

10. 伪类（Pseudo-classes）：伪类用于定义元素的特殊状态，例如链接的悬停状态（:hover）、鼠标点击状态（:active）等。

11. 伪元素（Pseudo-elements）：伪元素用于选择和操作文档中的特定部分，例如第一个字母（::first-letter）、第一行（::first-line）等。

4.1.2传统HTML的缺点

布局限制：早期的HTML版本（如HTML 4及之前）缺乏有效的布局控制手段，通常依赖于表格（ <table> ）来布局页面，这不是表格的本意，而且会导致代码冗余和可访问性问题。
样式与内容混合：在HTML中直接使用样式属性（如 bgcolor 、 font 等）会导致样式与内容混合，这使得代码难以维护和更新。
可重用性差：由于样式和内容混合，使得在不同页面间重用样式变得困难，每个页面可能需要重复相同的样式定义。

扩展性不足：HTML本身不够灵活，无法轻松添加新的元素和属性以满足不断变化的需求。
缺乏语义：传统的HTML标签更多地关注于如何显示内容，而不是内容的含义，这不利于搜索引擎优化（SEO）和无障碍访问。
浏览器兼容性问题：不同的浏览器可能对HTML的解析和呈现方式有所不同，这导致开发者需要编写额外的代码来确保跨浏览器的兼容性。
安全性问题：HTML本身不提供安全机制，容易受到跨站脚本攻击（XSS）等安全威胁。
响应式设计困难：随着移动设备的普及，传统HTML难以适应不同屏幕尺寸和分辨率，响应式设计在传统HTML中实现起来较为复杂。

4.1.3.CSS的特点和优势

特点

层叠性：CSS中的“层叠”指的是样式的叠加和覆盖。这允许开发者定义全局样式，然后针对特定元素或情况覆盖这些样式。
继承性：某些CSS属性可以从父元素继承到子元素，减少了重复定义样式的需要。
分离内容与设计：CSS将文档的内容（HTML）与样式（CSS）分离，使得设计和内容的维护更加容易。
易于更新：由于样式是集中定义的，因此更新样式只需要修改少量的CSS代码，而不需要改动每个HTML页面。
丰富选择器：CSS提供了多种选择器，可以精确地选择不同的HTML元素进行样式化。
伪类和伪元素：CSS允许使用伪类和伪元素来定义特殊状态或文档结构的一部分的样式。

优势

提高效率：通过集中管理样式，CSS大大减少了重复工作，提高了开发效率。
易于维护：由于内容和样式的分离，维护和更新网站变得更加容易。
跨页面的样式一致性：CSS文件可以在多个HTML页面之间共享，确保了整个网站的视觉一致性。
减少代码量：CSS减少了HTML文档中的内联样式和重复代码，使得HTML文档更加简洁。
增强视觉效果：CSS提供了丰富的样式属性，可以创建更加吸引人的视觉效果。

4.1.3.1.表现和内容分离

表现和内容分离是Web设计和开发中的一个核心概念，它指的是将网站的结构（HTML）、样式（CSS）和行为（JavaScript）分离开来。

4.1.3.2.增强了网页的表现力

跨页面的样式一致性、增强视觉效果。

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

其实就是只指跨页面的样式一致性

4.1.4.CSS的编写规则

主要是一些语法基础和命名规则

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

一般用小写css.css，方便后期的调试。

4.1.4.3.选择器的命名规则

基本规则

使用有意义且描述性的名称：

选择器的名称应该能够清楚地描述它所作用的元素或组件。
使用小写字母：

为了保持一致性和避免潜在的问题，选择器名称应该使用小写字母。
使用连字符（-）分隔单词：

使用连字符来分隔单词可以提高选择器的可读性，例如 .menu-item 而不是 .menuItem 或 .menu_item 。
避免使用过度通用的选择器：

避免使用过于通用的选择器名称，如 .big 或 .red ，因为这样的命名不提供足够的信息。

保持选择器的简洁性：

选择器应该尽可能简洁，但也不能牺牲可读性和明确性。
避免使用ID选择器：

尽量避免使用ID选择器，因为它们具有高优先级且不易重用。

命名示例

.nav-list ：导航列表。
.btn-primary ：主要按钮。
.product-thumbnail ：产品缩略图。
.user-profile ：用户资料。
.error-message ：错误消息。
.modal-dialog ：模态对话框

4.1.4.4.CSS代码注释

以字符 /* 开始，*/结束。

4.2 CSS语法基础
4.2.1.CSS基本语法
4.2.1.1.基本语法

一个CSS规则主要由以下两部分组成：

选择器（Selector）：指定要样式化的HTML元素。
声明块（Declaration Block）：包含一个或多个声明，每个声明由一个属性和一个值组成。

选择器 {
  属性: 值;
  属性: 值;
  /* 更多的属性-值对 */
}

示例

h1 {
  color: blue; /* 设置文本颜色为蓝色 */
  font-size: 14px; /* 设置字体大小为14像素 */
}

注意事项

属性和值之间用冒号（:）分隔。
每个声明必须以分号（;）结束。
声明块必须用花括号（{}）括起来。
多个CSS声明可以位于同一选择器下。
CSS忽略空格、制表符和换行符，因此你可以按照个人喜好来格式化代码，以提高可读性。
注释可以用于解释代码，其语法是 /* 注释内容 */ 。

4.2.1.2.语法说明

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

4.2.2.CSS选择器类型

就是以下四种。

4.2.2.1.标记选择器

标记选择器（也称为类型选择器）是CSS中的一种基本选择器，它根据元素的标签名来选择页面上的HTML元素。使用标记选择器，你可以为相同类型的所有元素指定相同的样式。

 
/* 选择所有的 <p> 元素，并将文字颜色设置为蓝色 */
p {
  color: blue;
}

/* 选择所有的 <h1> 元素，并将字体大小设置为24像素 */
h1 {
  font-size: 24px;
}

/* 选择所有的 <a> 元素，并将文本装饰设置为无下划线 */
a {
  text-decoration: none;
}

注意以下几点：

标记选择器会选中页面中所有该类型的元素，除非被更具体的选择器覆盖。
在一些情况下，过度使用标记选择器可能会导致样式冲突，因此最好使用类选择器或ID选择器来实现更精细的控制。
标记选择器的优先级（权重）相对较低，可以被类选择器、ID选择器和属性选择器等覆盖。

4.2.2.2.class选择器

在HTML元素中，你可以通过 class 属性来为元素分配一个或多个类名，而在CSS中，类选择器是通过一个点（ . ）加类名来定义的。

注意事项：

类名是区分大小写的，但在HTML中通常使用小写。
一个类名可以在多个元素上重复使用。
一个元素可以同时拥有多个类名，类名之间用空格分隔。
类选择器的优先级高于元素选择器，但低于ID选择器。

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Selector Example</title>
<style>
  .highlight {
    background-color: yellow;
  }
  .error {
    color: red;
  }
  .large-text {
    font-size: 20px;
  }
</style>
</head>
<body>

<p class="highlight">This paragraph has a yellow background.</p >
<p class="error">This paragraph has red text.</p >
<p class="highlight error">This paragraph has both a yellow background and red text.</p >
<div class="boxed large-text">This div has a border and large text.</div>

</body>
</html>

4.2.2.3.ID选择器

ID选择器用于选择具有特定ID属性的HTML元素。每个ID在页面中必须是唯一的，这意味着在一个页面中，你不能有两个元素具有相同的ID。ID选择器是通过一个井号（ # ）加ID名来定义的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID Selector Example</title>
<style>
  #unique-id {
    font-size: 18px;
  }
  #special-section {
    background-color: gray;
  }
</style>
</head>
<body>

<div id="unique-id">This div has a unique ID and a font size of 18px.</div>
<section id="special-section">This section has a gray background.</section>

</body>
</html>

注意事项：

ID选择器的优先级高于类选择器和元素选择器。
ID应该是唯一的，尽管浏览器会应用样式给所有具有相同ID的元素，但这不符合HTML规范，可能会导致不可预见的问题。
ID名称是区分大小写的，但在HTML中通常使用小写。
ID选择器可以与属性选择器或后代选择器结合使用，以增加选择器的特异性。

4.2.2.4.伪类选择器

CSS伪类是用来给超链接<a>添加一些特殊效果的选择器。它们以冒号（ : ）开头，可以用于选择处于特定状态的元素，以下是一些常用的

动态伪类

:link ：选择未被访问的链接。
:visited ：选择已访问的链接。
:hover ：选择鼠标悬停在其上的元素。
:active ：选择正在被激活（例如点击）的元素。
:focus ：选择获得焦点的元素。

目标伪类

:target ：选择当前活动的锚点目标元素。

语言伪类

:lang(language) ：选择带有指定语言的元素。

状态伪类

:enabled ：选择已启用的表单元素。

4.2.3.CSS选择器声明
4.2.3.1.集体生明

代码如下：h3,h4,h5{ color:red;font-size:18px;}

4.2.3.2.全局声明

符号为 * ，示例代码

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

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

派生选择器（也称为上下文选择器或后代选择器）允许你根据文档结构中的位置来指定样式。这意味着你可以根据一个元素相对于另一个元素的位置来选择和设计样式。

派生选择器是通过在另一个选择器后面放置一个或多个空格来实现的，它将样式应用于第一个选择器所指定的元素，但仅当这些元素是第二个选择器所指定元素的子元素时。

 /* 选择任何在 <div> 元素内的 <p> 元素 */
div p {
  color: blue;
}

/* 选择任何在 <ul> 元素内的 <li> 元素内的 <a> 元素 */
ul li a {
  text-decoration: none;
}

/* 选择任何在 <article> 元素内的 <h1> 元素 */
article h1 {
  font-size: 2em;
}

/* 选择任何在 <nav> 元素内的 <a> 元素，且 <nav> 元素是在 <header> 元素内 */
header nav a {
  font-weight: bold;
}

在上述例子中：

第一个例子中，所有在 <div> 元素内的 <p> 元素的文本颜色都会变成蓝色。
第二个例子中，只有当 <a> 元素是 <li> 元素的子元素，并且 <li> 元素是 <ul> 元素的子元素时，链接的下划线才会被移除。
第三个例子中，所有在 <article> 元素内的 <h1> 元素的字体大小会被设置为当前字体大小的两倍。
第四个例子中，只有当 <a> 元素位于 <nav> 元素内，且 <nav> 元素位于 <header> 元素内时，链接的文本才会加粗。

4.3 CSS引入方式
4.3.1.内联样式表（行内样式表）

直接在HTML元素的 style 属性中定义CSS样式。

4.3.1.1.基本语法

<标记 style="属性1:属性值;..."></标记>

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

4.3.1.2.语法说明

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

4.3.2.内部样式表

在HTML文档的 <head> 部分使用 <style> 标签定义CSS样式。

4.3.2.1.基本语法

 <head>
     <style>
       p {
         color: blue;
         font-size: 14px;
       }
     </style>
   </head>

4.3.2.2.语法说明

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

4.3.3.外部样式表

创建一个独立的CSS文件（例如 style.css ），然后在HTML文档的 <head> 部分通过 <link> 标签引入该文件。

4.3.3.1.链接外部样式表

代码展示

 <head>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>

4.3.3.2.导入外部样式表

在一个CSS文件中通过 @import 规则引入另一个CSS文件。这通常在内部样式表中使用。

 @import url('styles.css');

4.4 CSS的属性单位

4.4.1.长度、百分比单位

width，hieght,%

百分比单位是相对长度单位的一种，通常用于指定元素的宽度、高度、边距、填充等属性相对于其父元素的百分比。

例如：

width: 50%;  表示元素的宽度是其父元素宽度的50%。
 margin-left: 20%;  表示元素的左外边距是其父元素宽度的20%。

百分比单位可以用于多种CSS属性，但并不是所有属性都支持百分比单位。例如，你不能为一个元素的 border-width 或 outline-width 设置百分比。

4.4.1.1.相对类型

相对长度单位

em：相对于当前元素的字体大小。如果当前字体大小是16px，那么1em等于16px。
rem：相对于根元素的字体大小（即HTML元素的字体大小）。
ex：基于当前字体的“x高度”，通常等于当前字体大小的一半。
ch：基于当前字体中“0”（零）字符的宽度。
vw (视口宽度)：相对于视口宽度的百分比。
vh (视口高度)：相对于视口高度的百分比。
vmin：视口宽度和高度中的较小者。
vmax：视口宽度和高度中的较

4.4.1.2.绝对类型

px (像素)：相对于屏幕的分辨率。通常用于网页设计。
cm (厘米)：基于物理尺寸。
mm (毫米)：基于物理尺寸。
in (英寸)：基于物理尺寸。
pt (点)：通常用于打印，1pt等于1/72英寸。
pc (派卡)：通常用于打印，1pc等于12pt。

4.4.2.色彩单位

在CSS中色彩单位用于指定颜色值

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

十六进制颜色代码

十六进制颜色代码以井号（#）开头，后面跟着六位十六进制数。这六位数字分为三组，每组两位，分别代表红色（R）、绿色（G）和蓝色（B）的强度。

例如：

#FF0000  表示红色
#00FF00  表示绿色
#0000FF  表示蓝色

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

就是用色彩的英文名表示。

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

RGB颜色值使用 rgb() 函数，接受三个参数，分别代表红色、绿色和蓝色的强度。每个参数的值可以是0到255之间的整数，或者是0%到100%之间的百分比。

例如：

rgb(255, 0, 0)  表示红色
rgb(0, 255, 0)  表示绿色
rgb(0, 0, 255)  表示蓝色
rgb(100%, 0%, 0%)  也表示红色

4.5.CSS继承与层叠

继承是指CSS属性从父元素传递到子元素的过程。某些CSS属性是继承的，这意味着如果某个元素没有指定某个属性的值，它将使用其父元素的值。

继承的属性

以下是一些常见的可继承属性：

字体相关的属性，如 font-family , font-size , font-weight
文本相关的属性，如 text-align , line-height , color
列表相关的属性，如 list-style , list-style-type
表格相关的属性，如 border-collapse

非继承的属性

并非所有属性都会被继承。例如，边框、外边距、内边距、背景和定位属性通常不会被继承。

强制继承

可以使用 inherit 关键字来强制继承一个属性。

div span {
  color: inherit; /* 强制继承父元素的color属性 */
}

层叠是指浏览器如何确定应用于某个元素的最终样式。当多个规则应用于同一个元素时，浏览器会根据以下规则来决定哪个样式生效：

1. 重要性（Importance）

!important 声明会覆盖其他所有声明。
用户代理样式表（浏览器默认样式）通常具有最低的优先级。

2. 优先级（Specificity）

选择器的优先级越高，其样式越有可能被应用。优先级可以通过以下规则计算：
内联样式（例如， style="color: red;" ）具有最高的优先级。
ID选择器的优先级高于类选择器、属性选择器和伪类。

类选择器、属性选择器和伪类的优先级高于元素选择器。
通用选择器（ * ）具有最低的优先级。

3. 源代码顺序（Source Order）

如果两个相同的选择器应用于同一个元素，并且具有相同的优先级，则最后定义的样式将覆盖之前的样式。

p {
  color: blue; /* 优先级较低 */
}

.some-class {
  color: green; /* 优先级较高 */
}

#some-id {
  color: red; /* 优先级最高 */
}

在这个例子中，如果一个 <p> 元素同时具有 some-class 类和 some-id ID，它的文本颜色将是红色，因为ID选择器的优先级最高。

4.6 元素类型

在HTML中，元素可以根据其性质被分为几种不同的类型。以下是HTML元素的主要类型：

4.6.1.块级元素

块级元素通常开始新的一行，并且尽可能占据可用的水平空间。它们可以包含其他块级元素或行内元素。以下是一些常见的块级元素：

4.6.2.行级元素

通常不会开始新的一行，它们只占据必要的水平空间。以下是一些常见的行内元素：

<span> （无语义元素，通常用于应用样式或脚本）
<a> （锚点，用于链接）
<img> （图像）
<em> （强调文本）
<strong> （强调文本，表示重要性）
<small> （小号文本）
<s> （删除线文本）
<cite> （引用）
<q> （短引用）
<abbr> （缩写）
<kbd> （键盘文本）
<sub> 、 <sup> （下标、上标）

4.6.3.列表项元素

list-item属性，本质上也是块状显示，加了缩进和项目符号。

4.6.4.隐藏元素

将元素的 display 属性设置为 none 会完全从文档流中移除该元素，它不会占据任何空间，也不会被渲染

.hidden {
  display: none;
}

将元素的 visibility 属性设置为 hidden 会使元素不可见，但它仍然占据原来的空间。

 .hidden {
  visibility: hidden;
}

4.7 综合案例

*{
	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;
 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开平碉堡</title>
		<link type="text/css" rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		<div id="content">
			<h2 class="biaoti">开平碉堡申遗大事记</h2>
			<hr color="#D3b175" size="5"/>
			<img src="img/shenyi.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多万元,其中,著名侨领吴荣治先生及夫人
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>