第四章 CSS样式基础

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

4.1.2传统HTML的缺点

4.1.2.1.维护困难

传统HTML中，网页的结构和样式紧密耦合，当需要修改网页的结构时，往往需要涉及到大量的代码修改，这增加了维护和修改的难度。

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都可以掌握它。其特点主要如下。
旦是随(2)可以轻松控制页面的布局。(1)页面的字体变得更漂亮，更容易编排。
更诞生   (3)可以在大多数浏览器上使用。
使结   (4)以前一些必须通过图像转换才能实现的功能，现在只要用CSS 就可以轻松实现，
分离，   页面下载更快。
(5) 可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行，就可以改变整个网站上页面的显示样式。

4.1.3.1.表现和内容分离

CSS将样式和HTML文档分离，使得样式可以独立修改，不会影响到HTML文档的结构和内容。这样可以提高代码的可维护性和可重用性。

4.1.3.2.增强了网页的表现力

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

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

使用CSS可以为整个网站或整个文档定义一套样式，使得网站或文档的风格和外观保持统一和一致性。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放于不同的CsS 文件，是为了CSS编写和调试的方性
便;在项目后期，为了网站性能上的考虑，会将不同的CSS 文件整合到一个CSS文件中, 选
这个文件一般命名为style.css 或css.css

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样的时间。样式名必须能够表示样式的大概含义(禁止出现如Divl，Div2和Style 等自名)

4.1.4.4.CSS代码注释

在CSS中，可以使用注释来给代码添加解释或者暂时禁用某些样式。CSS的注释语法有两种：

单行注释：使用双斜线（//）来表示单行注释。注释内容在双斜线之后，直到行末为止。例如：
```
/* 这是一个单行注释 */
p {
  color: red; /* 这是另一个单行注释 */
}
```
多行注释：使用 /* 和 */ 将多行注释内容括起来。注释内容在括号内，并可以跨越多行。例如：
```
/*
这是一个多行注释，
可以写多行内容。
*/
p {
  color: red;
}
```

4.1.4.5.CSS代码缩进

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

4.2 CSS语法基础

4.2.1.CSS基本语法

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

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

元素选择器：选择特定的HTML元素，如p，div等。
类选择器：选择具有相同类名的元素，以.开头，如.class1，.class2。
ID选择器：选择具有唯一ID的元素，以#开头，如#id1，#id2。

2.属性和值：属性-值对用于定义元素的样式。常见的属性有：

color：指定文本的颜色。
font-size：指定字体的大小。
background-color：指定背景的颜色。
width：指定元素的宽度。
height：指定元素的高度。
margin：指定元素的外边距。
padding：指定元素的内边距。

4.2.1.1.基本语法

selector{ propertyl :valuel ; property2:value2 ; property3:value3;…}
选择器|属性1:属性值1;属性2:属性值2;属性3:属性值3;.}

4.2.1.2.语法说明

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

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

标记选择器是一种用于在HTML文档中选择特定元素或元素组合的方法。它们以一种简洁的方式来定位或选择特定的HTML元素

4.2.2.2.class选择器

class选择器用于选取具有相同class属性值的元素。使用class选择器可以为某个元素定义样式，并使多个元素共享相同的样式。

要创建一个class选择器，需要在选择器名称前加上一个句点（.），然后跟上class属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.2.1.CSS基本语法</title>
		<style>
			p{
				color: #FF5577;
				font-size: 30px;
			}
			.class1{
				color:#CCBB33;
			}
			.class2{
				color:#00FF55;
			}
		</style>
	</head>
	<body>
		<p>这是第一段落内容</p>
		<p>这是第二段落内容</p>
		<p class="class1">这是第三段落内容</p>
		<p class="class1">这是第四段落内容</p>
		<p class="class2">这是第五段落内容</p>
	</body>
</html>

4.2.2.3.ID选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.2.2.3ID选择器</title>
		<style>
			#id1{ /*4.2.2.3ID选择器*/
				color: #00aaff;
				font-size: 40px;
			}
			#id2{
				font-size: 40px;
				color: #FF00FF;
			}
			</style>
		</head>
		<body>
			
			<p id="id1">这是id1内容</p>
			<p id="id2">这是id2内容</p>
			</body>
</html>

4.2.2.4.伪类选择器

伪类选择器（Pseudo-class selector）是CSS中一种用于选择特定状态或特定位置的元素的选择器。它们通过在选择器名称后面使用冒号（:）和关键字来指定，以匹配特殊的状态或条件。

伪类名	说明
link	用于可以设置未被访问的链接的样式
visited	用于设置已经被访问的链接的样式
hover	用于设置将鼠标悬浮在链接上的样式
active	用于设置鼠标点击链接时到鼠标松开时的样式
focus	用于设置用键盘将焦点放在链接上时的样式
first-child	设置第一个标记的样式
lang	设置具有lang属性的标记的样式目录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.2.2.4伪类选择器</title>
		<style>
		
		
		        a:link{
		            color: #aa00ff;
		        }
		        a:hover{
		            color: #aa00ff;
		        }
		        a:visited{
		            color: #00aaff;
		        }
		
			</style>
		</head>
		<body>
			<a href="http://www.baidu.com">百度一下</a>
			
			</body>
</html>

4.2.3.CSS选择器申明

4.2.3.1.集体申明

.class,a{
font-family: fangsong;
}

4.2.3.2.全局申明

        *{
               font-family: 'Courier New', Courier, monospace;
           }

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

派生选择器（也称为上下文选择器）是一种CSS选择器，它根据元素在其他元素内或相对于其他元素的位置来选择元素。派生选择器使用空格分隔元素，表示它们之间的关系。

4.3 CSS引入方式

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

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

4.3.1.1.基本语法

<标记 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.基本语法

</style>

4.3.2.2.语法说明

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

4.3.3.外部样式表

4.3.3.1.链接外部样式表

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

4.3.3.2.导入外部样式表

在CSS中，可以使用@import语句来导入外部的样式表。这样可以将样式表拆分为多个文件，方便管理和维护，@import语句必须位于CSS文件的开头，放在所有其他CSS规则之前。

要导入外部样式表，可以在CSS文件中使用以下语法：

<style type=" text/css">
@import url("CSS文件路径");
/*此处还可以存放其他CSS样式*
</style>

导入样式表必须在style标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”

4.4 CSS的属性单位

4.4.1.长度、百分比单位

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

4.4.1.1.相对类型

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

4.4.1.2.绝对类型

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

常用长度单位
类型	长度单位	说明
绝对类型	in	英寸 Inches(1英寸=2.54厘米）
	cm	厘米 Centimeters
	pt	点Point(1点=1/72英寸）
	pc	皮卡Picas(1皮卡=12点)
	mm	毫米 Millimeters
相对类型	em	元素的字体高度
	ex	字母x的高度
	px	像素Pixels
	%	百分比 Percentage

4.4.2.色彩单位

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

使用十六进制数来表示色彩值是CSS中常用的方式。每个色彩值由6个十六进制数字组成，前两个数字表示红色分量，中间两个数字表示绿色分量，最后两个数字表示蓝色分量。每个数字的取值范围是0到F（即0到15），0表示最小值，F表示最大值。

以下是一些示例：

黑色：#000000
白色：#FFFFFF
红色：#FF0000
绿色：#00FF00
蓝色：#0000FF
青色：#00FFFF
品红色：#FF00FF
黄色：#FFFF00
橙色：#FFA500
灰色：#808080

除了使用6个十六进制数字来表示色彩值，还可以使用3个缩写的十六进制数字表示。例如，#000000可以缩写为#000，#FFFFFF可以缩写为#FFF。

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

除了使用十六进制数表示色彩值，CSS也支持使用色彩名称来表示常见的颜色。下面是一些常见的色彩名称及其对应的色彩值：

黑色：black
白色：white
红色：red
绿色：green
蓝色：blue
青色：cyan
品红色：magenta
黄色：yellow
橙色：orange
灰色：gray

使用色彩名称的主要优势是可读性和易记性，但常见的色彩名称有限，不适用于所有颜色。如果需要特定的颜色，使用十六进制数或RGB值通常更为灵活。

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

RGB函数是一种CSS中表示色彩值的方式，它使用红、绿和蓝三个颜色通道的数值来表示颜色。每个颜色通道的取值范围是0到255，0代表没有颜色，255代表最大强度的颜色。

RGB函数的语法是rgb(x, y, z)，其中x、y、z分别表示红、绿、蓝三个颜色通道的数值。可以使用百分比或整数来指定数值。例如，rgb(255, 0, 0)表示红色，rgb(0, 255, 0)表示绿色，rgb(0, 0, 255)表示蓝色。

可以根据需要使用RGB函数来表示任何颜色，它给予了更大的灵活性和精确度，尤其是对于需要自定义颜色的情况。

4.5.CSS继承与层叠

继承（inheritance）是指元素从其父元素继承样式属性值的能力。某些CSS属性具有继承性，例如字体样式（font-style）、文本颜色（color）和文本对齐（text-align）。当没有为一个元素明确指定某些继承属性的值时，该元素将从其父元素继承该属性的值。这样可以减少CSS代码的冗余，并使整个页面的样式更加一致。

层叠（cascading）是指在CSS中，当多个选择器应用于同一个元素时，通过层叠规则来决定哪个选择器的样式将优先应用于元素。层叠规则是基于选择器的特异性（specificity）、顺序和重要性（importance）等因素进行计算的。

继承和层叠相互作用，但在继承的属性中，层叠规则不会考虑继承属性的特异性和顺序。继承属性只会从父元素继承其值，而不考虑层叠规则。

CSS规定的如下优先级为：行内样式>id样式>class样式>标记样式

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>

2.CSS层叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS层叠</title>
		<style type="text/css">
			p{
				color: green;
			}
			.red{
				color: red;
			}
			.purple{
				color: purple;
			}
			#link3{
				color: blue;
			}
			
		</style>
		
	</head>
	<body>
		<p>这是第1行文本</p>
		<p class="red">这是第2行文本</p>
		<p id="link3" class="red">这是第3行文本</p>
		<p style="color: orange;" id="link3">这是第4行文本</p>
		<p class="purple:red">这是第5行文本</p>
	</body>
</html>

4.6 元素类型

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，该元素及其所有内容就不再显示，也不占用文档中的空间

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

html代码

注意：<link>中href改为css文件名即可，这里为text.1

<! DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>开平碉楼</title>
		<link rel="stylesheet" href="css/text1.css" type="text/css"/>
		<body>
			<div id= "content" >
				<h2 class =" biaoti">开平碉楼申遗大事记</h2>
				<hr color="#D3B175"   size="5"/>
				<img src ="img/66.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;
}