第四章 CSS样式基础

最新推荐文章于 2024-10-06 23:37:55 发布

念怀故安

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量808

点赞数 25

文章标签： css 前端

本文链接：https://blog.csdn.net/w_wx8866/article/details/142394663

版权

4.1 CSS概述

如果不想看那种偏概念的，想直接开始学习主要的可以找目录直接跳过4.1。

4.1.1.CSS的基本概念

HTML是页面结构文件；

CSS是页面样式文件，它是以HTML文件为基础，设置网页的外观显示样式，如字体，颜色，背景的控制及整体的布局等。

4.1.2传统HTML的缺点

4.1.2.1.维护困难

如果想要某一行居中，需要从代码中去寻找那一行。

为了修改某个特殊标记的格式，需要花很多时间，但是后期修改和维护成本很高。

4.1.2.2.标记不足

给每一行居中，需要一行行去编辑。

HTML自身的标记并不丰富，而关于美工的标记，例如文字缩进，这些HTML中很难找到。

4.1.2.3.网页过“胖”

当每一行样式不一时，页面代码会变得很臃肿，导致后续修改寻找很困难，而且文件会很大。

4.1.2.4.定位困难

我们去定位一个元素会很困难，定义一个样式，后期想去寻找所有有关的样式会很麻烦。HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

简化了网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.增强了网页的表现力

增强了网页的表现力，提供了更多的格式设计功能。

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

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

在编写初期一般会把不同类别的样式分开来，而后期为了网站性能考虑，会将不同的CSS文件整合到一个CSS文件，一般这个文件会被命名为“style.css”或“css.css”。

4.1.4.3.选择器的命名规则

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

4.1.4.4.CSS代码注释

/*...*/是css代码注释形式，可以是单行，也可以是多行。

！！！css代码里面一定要用/*...*/来做注释，因为在里面没有用。

4.1.4.5.CSS代码注释

可以按一次Tab来缩进选择器，按两次Tab来缩进声明和结束大括号。

4.2 CSS语法基础

我们可以直接对整个内容的样式进行编辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style><!--从这里开始-->
			p{<!--在这里声明对所有<p>...</p>标签进行编辑-->
				color:#ff0000;
				font-size:20px;
			}
		</style><!--直到这里结束-->
	</head>
	<body>
		<p>这是第一段内容</p>
		<p>这是第二段内容</p>
		<p>这是第三段内容</p>
		<p>这是第四段内容</p>
		<p>这是第五段内容</p>
	</body>
</html>

4.2.1.CSS基本语法

4.2.1.1.基本语法

基本书写形式如下，要切记，此标签的放在头部标签里面的，也就是<head>...</head>标签中

<style>
		p{
			color:#ff0000;
			font-size:20px;
		}
</style>

4.2.1.2.语法说明

(1)选择器。选择器可以是HTML标记名称或者属性的值,也可以是自定义的标识符。

(2)属性/属性值对。“属性:属性值”必须一一对应,属性与属性值之间必须用“：”连接,每个属性/属性值对之间用分号(;)隔开。

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

4.2.2.1.标记选择器

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

<style><!--从这里开始-->
			p{<!--在这里声明对所有<p>...</p>标签进行编辑-->
				color:#ff0000;
				font-size:20px;
			}
		</style><!--直到这里结束-->

4.2.2.2.class选择器

class是类，它可以多次选择。它可以继承它的父类，然后继承样式，就不用写好多一长串的那种。如果没有给它设置，那么它就会继承上一个，比如下图的“class2”它其中还包含了p标签，所以也会继承p。

如果类选择器和标签选择器冲突了，那会以类选择器为准。如果将两个起冲突的class写在了一起，那么以双引号内靠前的那一个为准，因为两个优先级一致，那么先到先得。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1</title>
		<style>
			p{
				color:#ff0000;
				font-size:20px;
			}
			.class1{
				color:#00ff00;
			}
		</style>
	</head>
	<body>
		<p>这是第一段内容</p>
		<p>这是第二段内容</p>
		<p>这是第三段内容</p>
		<p>这是第四段内容</p>
		<p>这是第五段内容</p>

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

4.2.2.3.ID选择器

ID选择器不可以重复使用，它是单独的，和类不一样。

如果class和标签起冲突，那听class。如果class和ID起冲突，那听ID的。

它是主要用来针对某个单一元素定义单独的样式，需要在id名称前加一个“#”。

（下图中p标签是标记选择器，“.class”是类选择器（class选择器），“#id”是ID选择器。）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1</title>
		<style>
			p{
				color:#ff0000;
				font-size:20px;
			}
			.class1{
				color:#00ff00;
			}
			#id1{
				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.伪类选择器

前面所介绍的选择器都能与HTML中具体标记所对应，但是超链接访问前后等，就没有HTML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引用了伪类选择器。

4.2.3.CSS选择器声明

4.2.3.1.集体生明

对多个选择器同时定义就是集体声明设定，就是对p标签，a标签等多个选择器进行声明。

<style>
		h1,p,h2,h3{
			color:#ff0000;
			font-size:20px;
		}
</style>

4.2.3.2.全局声明

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

<style>
		*{
			color:#ff0000;
			font-size:20px;
		}
</style>

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

可以根据标记所在位置的上下文关系来定义样式，可以使标记更简洁。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1</title>
		<style>
		li strong{font-style: italic;font-weight: normal;}
		strong{font-weight: bold;}
		</style>
	</head>
	<body>
		<p><strong>粗体字，不是斜体</strong></p>
		<ol>
			<li><strong>斜体字，因为<!--<strong>...</strong>-->在<!--<li>...</li>-->中</strong></li>
			<li>正常字体</li>
		</ol>
	</body>
</html>

4.3 CSS引入方式

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

可以直接给p标签设置style属性，还要记住“就近原则”。如果行内样式表和页面样式起冲突，听行内的。

<p style="color: aqua;">行内样式</p>

4.3.1.1.基本语法

先前说过可以让页面不臃肿，可以用<link>引入外部文件，把css从页面内部样式改成外部css文件中去。（如果内外样式表起冲突，就近原则牢记，就算是内部和行内起冲突，也是就近，听行内）

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

4.3.1.2.语法说明

此处是新手必看内容！！！

一：标记是指HTML标记，如p，hl，body等标记；

二：标记的style定义的声明只对自身起作用；

三：style属性的值可以包含多个声明，每一声明之间用“ ；”分隔；

四：标记自身定义的style样式优先于其他所有样式定义。

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标记是成对标记，有一个type属性是指style元素以CSS的语法定义。

可以定义n个选择器，再定义声明部分。

属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

4.3.3.外部样式表

外部样式其实就是把css文件复制粘贴到css文件夹下面，然后导入进来。因为这样可以让文件不臃肿，会看起来更简洁。因为一开始就说了css会比HTML看起来更整洁，而引入进来的方法也很简单。

4.3.3.1.链接外部样式表

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

(1) 基本语法：
<link type='"text/css" rel="stylesheet" href="外部样式表名.css">

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

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 样式表将同时被加载，而“@ 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是一样长的。

类型	长度单位	说明
绝对类型	in	英寸Inches（1英寸=2.54厘米）
	cm	厘米Centimeters
	mm	毫米Millimeters
	pt	点Points（1点=1/72英寸）
	pc	皮卡Picas（1皮卡=12点）
相对类型	em	元素的字体高度The height of the element's font
	ex	字母x的高度The height of the letter“X”
	px	像素 Pixels
	%	百分比Percentage

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~f。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示 256×256×256种色彩，即16M 种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为#FF0000、#00FF00、#0000FF、#000000、FFFFFF。例如下面的代码：

div {
color:#FF0000:

}
如果每个参数各自在两位上的数字都相同，也可缩写为#RGB的方式。例如 #cc9900
可以缩写为#c90

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

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

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

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

4.5.CSS继承与层叠

继承

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>Wed开发</em>教程</h1>
		<p>如果您有任何问题，欢迎联系我们</p>
	</body>
</html>

层叠

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠</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 元素类型

有一个专门设置元素的类型（display）这个属性有四种值，对应四种类型。

4.6.1.块级元素

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

特点：霸道，就算只有一个字也会独占一行，就算有新的内容也只能滚到后面（block）。

4.6.2.行级元素

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

特点：比较好说话，再来元素可以往后追，如果放不下，会自动换行（inl ine）。

4.6.3.列表项元素

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

特点：无序的有序的，列表项，和列表一样（list-item）。

4.6.4.隐藏元素

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

特点：可以存数据，管理各种各样的功能。把一段，或者一行整体隐藏起来。将元素设置（none）可以将元素隐藏起来。

综合案例

题如下所示

以开平碉楼的申遗大事记为例子，参照给定的 HTML 代码、CSS 设置和图片资源，利用
HBuilder设计 Web 网页。要求：
(1) 标题设置为h2、“微软雅黑”、居中显示；
(2) 小标题设置为“黑体”，字体颜色设置为“#8B4513”，段落背景颜色为“#D3B175”, 行高为 200%；
(3)正文其他所有的字体设置为“微软雅黑”、18px、首行缩进2字符；
(4) 使用外部样式表链接到 HTML 文档中

题目配图

案例HTML代码示例

<! DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>开平碉楼</title>
		<link type=" text/css" rel="stylesheet" href="css/综合案例.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月,从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向胡耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产
				 2020年10月30日,开平市成立"开平碉楼"申报世界文化遗产领导小组.领导小组下设办公室,分整治组、资料组、宣传组.</p >
				        <p class="tx1"></p >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代码示例

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