第四章 CSS样式基础

迷茫.404

于 2024-09-30 21:34:21 发布

阅读量500

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/2402_87184304/article/details/142629452

版权

4.1 CSS的概述

1 CSS的基本概念

CSS是“层叠样式表”，是以HTML为基础，设置网页的外观显示样式，如颜色，字体，背景等。还可针对不同浏览器设置不同样式。

2.传统HTML的缺点

2.1 维护不足（后期维护过高）；

2.2 标记困难（标记不丰富，如文字间距等）；

2.3 网页过胖（体积太大，各种风格没有统一控制）；

2.4 定位困难（对各个模块的位置调整很难）；

3.CSS的特点和优势

CSS通过定义标记如何表现，对页面结构风格进行调整，分离文档的内容和表现，克服了传统HTML的缺点，而且CSS文件是文本文件。

特点:

1.页面文字变得更漂亮，更容易编排

2.可以轻松控制页面布局

3.可以在大多数浏览器使用

4.以前一些必须通过图像转换才能实现的功能，现在可以用CSS轻松实现，页面下载更快。

5.可以使用一个CSS文件控制整个网站的显示风格

优势：

1.表现和内容分离（CSS通过HTML标记如何显示控制网页的格式，使得页面内容和表现分离）

2.增强了网页的表现力（CSS样式属性提供了比HTML更多的格式设计功能，如去下划线等）

3.使整个网站显示风格趋于统一（用CSS样式确保网页一致的格式，降低了维护成本）

4.CSS的编写规则

1.目录结构命名规则

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

2.样式文件的命名规则

CSS文件的一般命名规则为style.css和css.css

3.选择器的命名规则

选择器必须由小写英文字母和下划线组成，必须以字母开头，不能为纯数字。

4.CSS的代码注释

*//注释内容*/，注释可以是单行，也可以是多行

5.CSS代码缩进

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

4.2 CSS语法基础

1.CSS基本语法

CSS是一个包含一个或多个规则的文本文件，他由两部分组成选择器和声明

选择器是一个需要改变样式的HTML元素

声明是由一个或多个属性与属性值对组成，属性是CSS的关键词，属性用于指定选择器某一方面的特征，而属性值用于指定选择器的特征的具体特征

1.基本语法

选择器 { selector{
属性: 值; property:value;
属性: 值; property:value;
} }

2.语法说明

1.选择器 HTML标记名称或属性的值，或者是自定义识别符

2.属性和属性值属性和属性值之间用（：），属性与属性之间用（；）

3.属性单词之间用（-）

4.复合属性可以表示多个属性的值。如fout-family（字体）、fout-size（字体大小）等

5.多属性值可以设置多个属性值。用，分割。

6.常见的属性

颜色和背景

color：文本的颜色。
background-color：元素的背景颜色。
字体

font-size：字体大小。
font-family：字体类型。
font-weight：字体粗细。
文本

text-align：文本对齐方式（左、中、右）。
line-height：行高。
边距和填充

margin：元素的外边距。
padding：元素的内边距。
边框

border：设置边框的宽度、样式和颜色。

2.CSS选择器类型

1.标记选择器

直接选择 HTML 标签。

p { color: blue; /* 设置段落文本颜色为蓝色 */ }

2.class选择器（类选择器）

选择具有特定类的元素，前面加 . 符号。

示例

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>类选择器示例</title>  
    <style>  
        /* 类选择器 */  
        .highlight {  
            background-color: yellow;  /* 设置背景色为黄色 */  
            font-weight: bold;          /* 设置字体加粗 */  
        }  
        
        .text-blue {  
            color: blue;                /* 设置字体颜色为蓝色 */  
        }  
    </style>  
</head>  
<body>  
    <h1 class="highlight">欢迎使用类选择器示例</h1>  
    <p class="text-blue">这是一个蓝色的段落。</p>  
    <p class="highlight">这个段落也是高亮的。</p>  
    <p>这是一个普通的段落。</p>  
</body>  
</html>

显示效果

3.ID选择器

对某一元素定义单独的样式，选择特定 ID 的元素，前面加 # 符号。

示例

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>ID选择器示例</title>  
    <style>  
        /* ID选择器 */  
        #login-form {  
            border: 1px solid #ccc;  /* 设置边框 */  
            padding: 20px;           /* 设置内边距 */  
            width: 300px;            /* 设置宽度 */  
            margin: auto;            /* 居中对齐 */  
        }  
 
        #username {  
            width: 100%;             /* 设置输入框宽度 */  
            padding: 10px;           /* 设置内边距 */  
        }  
 
        #password {  
            width: 100%;             /* 设置输入框宽度 */  
            padding: 10px;           /* 设置内边距 */  
        }  
 
        #submit {  
            background-color: blue;  /* 设置按钮背景色 */  
            color: white;            /* 设置按钮字体颜色 */  
            border: none;            /* 去掉边框 */  
            padding: 10px;           /* 设置内边距 */  
            cursor: pointer;         /* 设置鼠标样式 */  
        }  
    </style>  
</head>  
<body>  
    <div id="login-form">  
        <h2>登录页面</h2>  
        <label for="username">用户名:</label>  
        <input type="text" id="username" placeholder="请输入用户名">  
        <br>  
        <label for="password">密码:</label>  
        <input type="password" id="password" placeholder="请输入密码">  
        <br>  
        <button id="submit">提交</button>  
    </div>  
</body>  
</html>

显示效果

4.伪类选择器

段落第一行，超链接访问前后等，则需要对应的伪类标记

示例

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>伪类选择器示例</title>  
    <style type="text/css">  
       a:link{color: gray;text-decoration: none;}
	   a:visited{color: blue;text-decoration: none;}
	   a:hover{color: red;text-decoration: none;}
	   a:active{color: yellow;text-decoration: none;}
	   a::first-letter{font-weight: bold;font-family: "微软雅黑";font-size: larger;}
    </style>  
</head>  
<body>  
    <p>伪类选择器</p>
	<a href="http://www.baidu.com">百度一下</a>
</body>  
</html>

显示效果

3.CSS选择器声明

1.集体声明

代码如下：

h3 ,h4,h5 ,p{ color:red;font-size:18px; }

2.全局声明

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

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

}

3.派生选择器（上下文选择器）

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS 代码变得更加整洁。例如，要让列表项<li>中的<stong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器:
li strong { font-style : italic ; font-weight : normal ; }
strong { font-weight : bold ; }
代码

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用<strong></p>

        <ol>
                <li>< strong>我是斜体字,这是因为 stong 元素位于|i 标记内</ srong></li>

                <li>我是正常的字体</li>
        </ol>在上面的例子中，有两个 stong 标记，但只有i元素中的 suong 元素的样式为斜体字,而且无须为 strong 标记定义特别的class 或id，应用派生选择器，代码更加简洁

4.3 CSS引入方式

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

1.基本语法

<标记 style=“属性 1:属性值 1;属性 2:属性值2;…">修饰的内容</标记>

2.语法说明

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

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内联样式表</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<p style="color: #ff0000;font-size: 20px;text-decoration: underline;">正文内容1</p>
		<p style="color: #000000;font-size: italic;">正文内容2</p>
		<p style="color: #ff00ff;font-size: 25px;font-weight: bold;">正文内容3</p>
		<p>这段话没有内联样式</p>
	</body>
</html>

显示效果

2.内部样式表

内部样式表写在HTML的<head></head>里面，只对所在的网页有效。使用<style></style>标记对来放置CSS规则

1.基本语法

<style type="text/css">

选择器1{属性1:属性值1;属性2:属性值2；...}
选择器2{属性1:属性值1;属性2:属性值2；...}
</style>

2.语法说明

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

3.外部样式表

外部样式表是将CSS规则写在以.css为后缀的CSS文件里，在需要用到此样式的网页里引用该CSS文件。

1.链接外部样式表

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

1.基本语法

<link type="text/css"

rel="stylesheet"

href="外部样式表名.css">

2.语法说明

语法中必须指定<link>标记的3个属性，其中href 是定义链接外部样式表文件的u可以是相对路径和绝对路径；

r1是定义当前文档与被链接文档之间的关系，这里指定styleshet，表示被链接的文档是样式表文件；

（ype 是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type="textcss"规定被链接文档的MIME 类型。href="mystyle.css“规定被链接文档的位置，只需要记住这个固定写法即可。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>链接外部样式表</title>
		<link href="4-5.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<h2>CSS标题</h2>
		<p >这是链接外部样式表</p>
		<h2>CSS标题</h2>
		<p>链接外部样式表</p>
	</body>
</html>

显示效果

2.导入外部样式表

导入式是将一个独立的CSS文件导入HTML文档中，其是在HTML文档<head>中应用<style>标签，并在<style>标签中的开头处用@ import 语句，即可导入外部样式表文件。

1.基本语法

2.语法说明

导入样式表必须在style标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”，如“4-5.css”。
导入式会在整个网页加载完后再加载CSS文件，因此如果网页比较大则会出现先显示
无样式的页面，再出现网页的样式的情况。这是导入式固有的一个缺陷。

4.4 CSS的属性单位

1.长度、百分比单位

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

1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。

如：用cm（当前字母中，字母的宽度）作为属性单位时，将会依据父元素的font-size 属性，如果没有父元素，则参考浏览器的默认值字号

2.绝对类型

绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的，例如屏幕上的1cm与打印机上的1cm是一样长的。表4-3为浏览器支持的绝对类型的长度单位。百分比单位是一种常用的相对类型，通常的参考依据为fonl-size属性。百分比值总是相对于另一个值。

下面的语句将margin 属性的值设置为foni-size的200%：
p{margin:200%；}
注：不管使用哪种单位，在设置的时候数值与单位之间不需要加空格。

常见的长度单位

2.色彩单位

HTML网页和CSS样式都是按照RGB来设置颜色的。

在HTML标记中只提供了两置色彩的方法：十六进制数和色彩英文名称。

1.十六进制方式表示色彩值

在计算机中，定义每种色彩的强度范围为0~255。当所有色彩的强度都为0时，将产生黑色；当所有色彩的强度都为255时，将产生白色。

在HTML中，使用RGB 概念指定色彩时，前面是一个“#”号，再加上6个十六进制字表示，表示方法为：#RRGGBB

2.色彩名称方式表示色彩值

3.RGB（x,y,z）函数表示

4.5 CSS继承与层叠

1.CSS继承

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<style>
		h1{
			color: blue;
			text-decoration: underline;
		}
		em{
			color: red;
		}
	</style>
	<body>
		<h1>学习<em>Web开发</em>教程</h1>
		<p>如果您有任何问题，欢迎联系我们</p>
	</body>
</html>

显示效果

2.CSS层叠

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

CSS的全称是“层叠样式表”，层叠特性和“继承”不一样，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式产生冲突时的处理

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

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式层叠</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<style>
		p{
			color: green;
		}
		.red{
			color: red;
		}
		.purple{
			color: purple;
		}
		#line3{
			color: blue;
		}
	</style>
	<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 元素类型

1.块级元素（display: block）

display 属性设置为block将显示块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符，使块级元素始终占据一行

如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区div和body等元素都是块级元素。

2.行级元素（display: inline）

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

3.列表项元素（display: list-item）

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

4.隐藏元素（display: none）

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

4.7综合案例--开平碉楼申遗大事件

代码

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

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