第四章【CSS样式基础】

233M

于 2024-09-30 17:44:41 发布

阅读量543

点赞数 26

文章标签： css 前端

本文链接：https://blog.csdn.net/2302_80555711/article/details/142574370

版权

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

CSS的基本概念包括层叠样式表的定义、语法结构、使用方式以及基本选择器等。

4.1.2传统HTML的缺点

传统HTML的缺点有很多，主要体现在以下几个方面：

4.1.2.1.维护困难

1. 维护困难：传统HTML在修改特定标记的格式时，需要花费大量时间，尤其是对于整个网站而言，后期修改和维护的成本非常高。

4.1.2.2.标记不足

2. 标记不足：HTML本身的标记相对较少，很多标记都是为网页内容服务的，而关于美工样式的标记，如文字间距、段落缩进等，在HTML中很难找到。

4.1.2.3.网页过“胖”

3. 网页体积过大：由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用了大量宝贵的宽带资源。

4.1.2.4.定位困难

4. 定位困难：在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的<table>标记同样也导致页面的复杂和后期维护的困难。

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

内容与表现分离：CSS允许将网页的样式与内容分离，使得HTML专注于页面结构，而CSS负责样式表现。这样做的好处是，当需要更改网站的整体风格时，只需修改CSS文件即可，无需触及HTML代码，大大提高了维护效率。

4.1.3.2.增强了网页的表现力

强大的布局能力：CSS提供了多种布局技术，如Flexbox和Grid，这些技术使得创建复杂的页面布局变得更加简单和灵活。开发者可以轻松控制元素的位置、对齐方式以及响应不同屏幕尺寸的能力。
增强的视觉效果：CSS3引入了许多新特性，如圆角、阴影、渐变和动画等，这些特性使得网页设计师能够创造出更加丰富和吸引人的视觉效果，而无需依赖图像或JavaScript。

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

跨页面的样式统一性

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

CSS的目录结构命名规则主要包括**明确性、层次分明和样式文件的命名规范**。以下是对这些规则的具体介绍：

1. 明确性：每个目录应明确反映其内容的主题，如src, lib, data, docs等。
2. 层次分明：按功能、模块或项目阶段组织层级，避免过深的嵌套。例如，可以有project_name > module_name > functionality这样的结构。
3. 样式文件的命名规范：在项目初期，将不同类别的样式放入不同的CSS文件中，便于编写和调试。在项目后期，为了提升网站性能，可能会将这些文件整合到一个文件中，通常命名为style.css或css.css。

4.1.4.2.样式文件的命名规则

CSS文件样式文件的命名规则是一套旨在提高代码的可维护性、一致性和可读性的规范。以下是对这些规则的具体介绍：

1. 全局样式：通常命名为global.css，用于定义整个网站的通用样式规则。
2. 框架布局：命名为layout.css，专注于页面的整体布局和结构。
3. 字体样式：命名为font.css，包含所有与字体相关的样式定义。
4. 链接样式：命名为link.css，专门用于定义链接的样式，包括链接颜色、下划线等。

4.1.4.3.选择器的命名规则

CSS选择器命名规则是一套旨在提高代码的可维护性、一致性和可读性的规范。以下是对这些规则的具体介绍：

1. 字符采用：在实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文，以保持编码的兼容性和清晰度。
2. 数字慎用：在选择器命名时，应避免以数字开头，以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别，而其他浏览器则不识别此规则。
3. 区分ID：一个ID名在文档中只能使用一次，而class类名可以在文档中多次使用。这有助于避免样式冲突和重复定义。
4. 语义化标签：语义化标签意味着选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。这不仅让网页结构一目了然，还提高了网页对特殊浏览设备的友好性。
5. 大小写敏感：当在XHTML中使用CSS时，CSS里定义的元素名称是区分大小写的。为了避免错误，所有的定义名称都应采用小写。

4.1.4.4.CSS代码注释

CSS代码注释是用于解释和说明CSS代码的文本，它不会影响代码的执行。在CSS中，有两种类型的注释：

1. 单行注释：使用`/*`开始，以`*/`结束。例如：

/* 这是一个单行注释 */

2.多行注释：使用`/*`开始，以`*/`结束。例如：

/*
这是一个多行注释
可以跨越多行
*/

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

CSS的基本语法包括:选择器、属性和值、注释以及层叠与优先级。

4.2.1.2.语法说明

1. 选择器：选择器是CSS中用于选取HTML元素的方式，可以是元素类型、类名或ID等。例如，`h1` 选择器会选择所有的`<h1>`标签，`.box` 类选择器会选择所有包含类名为`box`的元素，而`#myId` ID选择器则会选择ID为`myId`的元素。
2. 属性和值：每条声明由一个属性和一个值组成，属性和值之间用冒号分隔。如果需要定义多条声明，则每条声明之间需要用分号隔开。例如，`color: red; font-size: 14px;` 设置了文本颜色为红色，字体大小为14像素。
3. 注释：CSS中的注释用于解释代码的目的、作者信息等，不会被浏览器执行。单行注释使用`/* */`，多行注释也使用`/* */`。例如，`/* 这是一个注释 */`或`/* 这是一个
多行注释
的示例 */`。
4. 层叠与优先级：当多个规则应用于同一元素时，CSS会根据一定的层叠规则来决定显示哪个样式。这包括选择器的具体性、来源（内联样式优先于内部样式，内部样式优先于外部样式）以及是否使用了!important标记。

4.2.2.CSS选择器类型

CSS选择器类型包括以下几种：

1. 元素选择器：通过HTML元素的标签名来选取元素。例如，`p` 选择器会选择所有的 `<p>` 段落元素。
2. 类选择器：通过元素的class属性值来选取元素。例如，`.box` 选择器会选择所有包含 class="box" 的元素。
3. ID选择器：通过元素的id属性值来选取元素。例如，`#myId` 选择器会选择 id="myId" 的元素。
4. 属性选择器：通过元素的某个属性和属性值来选取元素。例如，`[type="text"]` 选择器会选择所有 type 属性值为 "text" 的输入框元素。
5. 伪类选择器：通过元素的特定状态或行为来选取元素。例如，`:hover` 选择器会选择鼠标悬停在其上的元素。
6. 伪元素选择器：通过元素的特定部分（如首字母、行内标记等）来选取元素。例如，`::first-letter` 选择器会选择每个段落的第一个字母。
7. 组合选择器：通过组合多个选择器来选取元素。例如，`div p` 选择器会选择所有位于 `<div>` 元素内部的 `<p>` 元素。
8. 后代选择器：通过空格分隔的选择器来选取后代元素。例如，`div p` 选择器会选择所有 `<div>` 元素内的 `<p>` 元素。
9. 子代选择器：通过大于号（>）分隔的选择器来选取直接子元素。例如，`div > p` 选择器会选择所有直接位于 `<div>` 元素内部的 `<p>` 元素。
10. 相邻兄弟选择器：通过加号（+）分隔的选择器来选取紧邻的下一个兄弟元素。例如，`h1 + p` 选择器会选择紧跟在 `<h1>` 元素后面的第一个 `<p>` 元素。
11. 通用兄弟选择器：通过波浪线（~）分隔的选择器来选取所有后续的兄弟元素。例如，`h1 ~ p` 选择器会选择所有跟在 `<h1>` 元素后面的 `<p>` 元素。

4.2.2.1.标记选择器

同上

4.2.2.2.class选择器

同上

4.2.2.3.ID选择器

同上

4.2.2.4.伪类选择器

同上

4.2.3.CSS选择器声明

4.2.3.1.集体申明

CSS集体声明是用于同时为多个选择器应用相同或部分相同的样式规则的方法。

4.2.3.2.全局声明

全局声明是指在程序的任何地方都可以访问的变量或函数的声明，通常放在源文件的顶部或者头文件中。

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

派生选择器是CSS中用于根据元素在文档结构中的上下文关系来应用样式的一种选择器类型。

4.3 CSS引入方式

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

4.3.1.1.基本语法

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <h1 style="color: blue; font-size: 24px;">Hello World!</h1>
  <p style="font-family: Arial, sans-serif; color: green;">This is an example of inline CSS styling.</p >
</body>
</html>

4.3.1.2.语法说明

行内样式表通过在HTML元素的`style`属性中直接编写CSS规则来实现。这种方式适用于需要为某个特定元素快速应用样式的场景。

4.3.2.内部样式表

4.3.2.1.基本语法

CSS内连样式表用法是指在HTML文档的部分使用标签来定义CSS规则。

内连样式表的基本语法是在标签内部编写CSS规则，这些规则将应用于整个HTML文档或指定的部分。例如，

<style>p {color: red;}</style>

4.3.2.2.语法说明

内部样式表通常写在HTML文档的`<head>`部分的`<style>`标签中。这种方式适用于需要为单个页面或特定部分的页面设置样式的情况。

4.3.3.外部样式表

外部样式表通过使用`<link>`标签将一个独立的CSS文件链接到HTML文档中。这种方式适用于需要为多个页面设置统一样式的情况。

4.3.3.1.链接外部样式表

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is an example of linking an external CSS file.</p >
</body>
</html>

4.3.3.2.导入外部样式表

/* 导入外部样式表 */
@import url('styles.css');

/* 定义其他样式 */
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

@import规则将名为styles.css的外部样式表导入到当前CSS文件中。url()函数指定了外部样式表的路径，可以是相对路径或绝对路径。

4.4 CSS的属性单位

4.4.1.长度、百分比单位

CSS的属性单位用于指定属性值的大小或长度。以下是一些常见的CSS属性单位：

1. 绝对单位：
- `px`（像素）：最常用的单位，表示屏幕上的一个像素点。
- `pt`（点）：印刷中常用的单位，等于1/72英寸。
- `pc`（皮卡）：等于12点，常用于打印媒体。
- `mm`（毫米）：长度单位，等于1/10毫米。
- `cm`（厘米）：长度单位，等于1/100厘米。
- `in`（英寸）：长度单位，等于1英寸。

2. 相对单位：
- `em`：相对于当前元素的字体大小。例如，如果一个元素的字体大小为16px，那么`1em`等于16px。
- `rem`：相对于根元素（通常是`<html>`）的字体大小。例如，如果根元素的字体大小为16px，那么`1rem`等于16px。
- `%`：百分比单位，通常用于宽度、高度和字体大小的设置。例如，`50%`表示父元素的50%。

3. 视窗单位：
- `vw`：视窗宽度的百分比。例如，`50vw`表示视窗宽度的一半。
- `vh`：视窗高度的百分比。例如，`50vh`表示视窗高度的一半。
- `vmin`：视窗宽度和高度中较小的一个的百分比。例如，`50vmin`表示视窗宽度和高度中较小者的50%。
- `vmax`：视窗宽度和高度中较大的一个的百分比。例如，`50vmax`表示视窗宽度和高度中较大者的50%。

4. 其他单位：
- `ex`：相对于当前元素的小写字母x的高度。
- `ch`：相对于当前元素的零宽字符的宽度。
- `cap`：相对于当前元素的大写字母的高度。
- `lh`：相对于当前元素的行高。

这些单位可以用于各种CSS属性，如`width`, `height`, `font-size`, `margin`, `padding`等。根据需要选择合适的单位来定义样式。

4.4.1.1.相对类型

同上

4.4.1.2.绝对类型

同上

4.4.2.色彩单位

CSS色彩单位用于指定颜色值。以下是一些常见的CSS色彩单位：

1. 十六进制颜色：
- 使用`#`符号后跟6位十六进制数字表示颜色，例如`#FF0000`表示红色。
- 也可以使用3位十六进制数字表示简写形式，例如`#F00`也表示红色。

2. RGB颜色：
- 使用`rgb()`函数表示颜色，括号内包含三个参数，分别代表红、绿、蓝三个通道的值，范围是0到255。例如，`rgb(255, 0, 0)`表示红色。
- 可以使用百分数来表示每个通道的值，范围是0%到100%。例如，`rgb(100%, 0%, 0%)`也表示红色。

3. HSL颜色：
- 使用`hsl()`函数表示颜色，括号内包含三个参数，分别代表色调（hue）、饱和度（saturation）和亮度（lightness）。
- 色调是一个角度值，范围是0°到360°，表示颜色的基本类型。
- 饱和度和亮度都是百分比值，范围是0%到100%。
- 例如，`hsl(0, 100%, 50%)`表示红色。

4. HSLA颜色：
- 类似于HSL颜色，但增加了一个透明度参数（alpha），范围是0到1之间的小数或百分比。例如，`hsla(0, 100%, 50%, 0.5)`表示半透明的红色。

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

同上

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

同上

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

同上

4.5.CSS继承与层叠

CSS继承和层叠是CSS的两个重要概念，它们决定了样式的应用方式和优先级。

1. CSS继承：
- CSS继承是指子元素自动继承父元素的一些属性值。
- 不是所有的CSS属性都可以被继承，只有一些特定的属性可以被继承，如字体、颜色、文本相关属性等。
- 如果一个元素没有明确设置某个可继承的属性，那么它将从其父元素那里继承该属性的值。

2. CSS层叠：
- CSS层叠是指当多个选择器应用于同一个元素时，浏览器会根据一定的规则来决定哪个样式将被应用。
- 层叠的基本原则是：更具体的选择器优先于较不具体的选择器。
- 具体来说，以下顺序决定了样式的优先级：
- 内联样式（直接在HTML元素上使用`style`属性定义的样式）具有最高优先级。
- ID选择器的优先级高于类选择器、属性选择器和伪类选择器。
- 类选择器、属性选择器和伪类选择器的优先级相同，且高于元素选择器。
- 元素选择器的优先级最低。
- 如果多个选择器具有相同的优先级，则后出现的样式将覆盖先前出现的样式。

4.6 元素类型

5. 表格相关元素（Table-related elements）：
- 表格相关元素用于创建和呈现表格数据。
- 包括`<table>`, `<tr>`, `<td>`, `<th>`等。

4.6.1.块级元素

块级元素（Block-level elements）：
- 块级元素在页面上占据一个独立的行，并为其内容创建一个新的块格式化上下文。
- 常见的块级元素包括`<div>`, `<p>`, `<h1>`到`<h6>`, `<ul>`, `<ol>`, `<li>`, `<table>`等。

内联块级元素（Inline-block elements）：
- 内联块级元素结合了块级元素和内联元素的特性，既可以设置宽度、高度等块级属性，又可以与其他内联元素在同一行显示。
- 常见的内联块级元素包括`<input>`, `<button>`, `<label>`等。

4.6.2.行级元素

内联元素（Inline elements）：
- 内联元素不会独占一行，而是与其他内联元素在同一行显示。
- 常见的内联元素包括`<span>`, `<a>`, `<img>`, `<input>`, `<button>`等。

4.6.3.列表项元素

列表元素（List elements）：
- 列表元素用于创建有序或无序的列表。
- 有序列表使用`<ol>`标签，无序列表使用`<ul>`标签，列表项使用`<li>`标签。

4.6.4.隐藏元素

在CSS中，有多种方法可以隐藏元素。以下是一些常见的方法：

1. 使用`display: none;`属性：这将完全移除元素，使其不可见，也不占用任何空间。

hidden-element {
  display: none;
}

2. 使用`visibility: hidden;`属性：这将使元素不可见，但仍然会占据空间。

hidden-element {
  visibility: hidden;
}

3. 使用`opacity: 0;`属性：这将使元素透明，但仍可见。要完全隐藏元素，需要同时设置`opacity`和`pointer-events: none;`。

hidden-element {
  opacity: 0;
  pointer-events: none;
}

4. 使用`height: 0; width: 0;`属性：这将使元素的高度和宽度变为0，从而隐藏元素。这种方法通常用于隐藏具有固定高度和宽度的元素。

hidden-element {
  height: 0;
  width: 0;
}

5. 使用`position: absolute;`和`left: -9999px;`属性：这将使元素移出视口，使其不可见。这种方法通常用于隐藏浮动元素或绝对定位的元素。

hidden-element {
  position: absolute;
  left: -9999px;
}

综合案例

HTML代码

<!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>

CSS样式代码

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

运行结果