4.1 CSS概述
CSS指的是页面样式文件，以HTML为基础，设置网页的外观显示样式，如字体，颜色，背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。
4.1.1.CSS的基本概念
存放CSS文件的目录一般命名为style或css
2.样式文件的命名规则
文件一般命名为style.css或css.css
3.选择器的命名规则
4.CSS代码注释
5.CSS代码缩进
使用TAB键来缩进选择器
4.1.2传统HTML的缺点
4.1.2.1.维护困难
为了修改某个特殊的标记格式要花费好多的时间
4.1.2.2.标记不足
自身的标记不丰富，很多标记都是网页内容服务的例如：文字间距，段落缩进等在HTML很难找到。
4.1.2.3.网页过“胖”
太复杂，查找困难
4.1.2.4.定位困难
多标签情况下，定义太麻烦只能一一定位
4.1.3.CSS的特点和优势
1.表现和内容分离
2.增强了网页的表现力
3.使整个网站显示风格趋于统一
4.1.4.CSS的编写规则
1.目录结构命名规则
存放CSS文件的目录一般命名为style或css
4.1.4.2.样式文件的命名规则
文件一般命名为style.css或css.css
4.1.4.3.选择器的命名规则
所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义(禁止出现如Divl，Div2和Style等自名)。
4.1.4.4.CSS代码注释
/**/，
多行注释
/*
*/
4.2 CSS语法基础
4.2.1.CSS基本语法
CSS就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成：选择器和声明。
selector {propertyl：value；propertyl2：value2；propertyl3：value3；.....}
选择器可以是自定义的标识符
注：类选择器和标记选择器的属性冲突时，选择类选择器的属性；类选择器和ID选择器冲突时，选择ID选择器的属性
浏览器会尊重我们的劳动成果。
4.2.1.2.语法说明
(1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“:”连接，每个属性/属性值对之间用分号(;)隔开。
(3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在 CSS 中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(一)分隔，例如背景颜色属性background-color;而在脚本语言中，对象属性则连写成backgroundColor。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。
4.2.2.CSS选择器类型
4.2.2.1.标记选择器
标记选择器即直接使用HTML标记名称作为选择器。
4.2.2.2.class选择器
class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和class值然后通过class选择器找到对应的标签，为其设置class值，即添加CSS样式。
4.2.2.3.ID选择器
ID选择器用来对某个单一元素定义单独的样式。
定义ID选择器时，需要在id名称前加一个“#”
4.2.2.4.伪类选择器
| 伪类名 | 说明 |
| link | 用于可以设置未被访问的链接的样式 |
| visited | 用于设置已经被访问的链接样式 |
| hover | 用于设置将鼠标悬浮在链接上样式 |
| active | 用于设置鼠标点击链接时到鼠标松开时的样式 |
| focus | 用于设置用键盘将焦点放在链接上时的样式 |
| first-child | 设置第一个标记的样式 |
| lang | 设置具有lang属性的标记的样式 |
4.2.3.CSS选择器声明
4.2.3.1.集体生明
h3，h4，h5，p{color：red；font-size：18px}
4.2.3.2.全局声明
*{
color：red；
font-size：18px；
}4.2.3.3派生选择器（上下文选择器）
根据标记所在位置的上下文关系来定义样式
4.3 CSS引入方式
4.3.1.内联样式表（行内样式表）
内联样式表的CSS规则写在首标记内，只对所在的标记有效，几乎任何一个而记上都可以设置style属性，属性值可以包含CSS规则的声明，不包含选择器.
4.3.1.1.基本语法
<标记 style=“属性1：属性值 1;属性 2：属性值2；…">修饰的内容</标记>
4.3.1.2.语法说明
(1)标记是指HTML标记，如p，hl和body等标记;
(2)标记的style定义的声明只对自身起作用；
(3)style 属性的值可以包含多个声明，每一声明之间用“；”分隔;
(4标记自身定义的style样式优先于其他所有样式定义。
4.3.2.内部样式表
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 标记是成对标记，有1个type 属性是指style元素以CSS的语法定义。
选择器1,选择器n，可以定义n个选择器，再定义声明部分。
属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。
4.3.3.外部样式表
根据引用的方式不同可以分为链接外部样式表和导入外部样式表，它们形式上的区别在于链接外部样式表通过链接 link标记，导入外部样式表必须在内部样式表内首行通过“@import url（外部样式文件）；”来定义。
4.3.3.1.链接外部样式表
<link type="text/css" rel="stylesheet" href="外部样式表名.css">4.3.3.2.导入外部样式表
(1)基本语法
<style type=" text/css">
@import url("CSS文件路径");
/*此处还可以存放其他CSS样式*
</style>(2)语法说明。导入样式表必须在style标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”。
4.4 CSS的属性单位
4.4.1.长度、百分比单位,4.4.1.1.相对类型4.4.1.2.绝对类型
| 类型 | 长度单位 | 说明 |
| 绝对类型 | in | 英寸inches |
| cm | 厘米 | |
| mm | 毫米 | |
| pt | 点 | |
| pc | 皮卡 | |
| 相对类型 | em | 元素的字体高度 |
| ex | 字母x的高度 | |
| px | 像素pixels | |
| % | 百分比 |
4.4.2.1.用十六进制数方式表示色彩值
div{
color:#FF0000;
}
4.4.2.2.用色彩名称方式表示色彩值
| 名称 | 颜色 | 名称 | 颜色 | 名称 | 颜色 |
| black | 黑色 | silver | 浅灰 | navy | 深蓝 |
| blue | 浅蓝 | green | 深绿 | lime | 浅绿 |
| teal | 靛青 | aqua | 天蓝 | maroon | 深红 |
| red | 大红 | purple | 深紫 | fuchsia | 品红 |
| Olive | 褐黄 | yellow | 明黄 | grey | 深灰 |
| white | 壳白 |
4.4.2.3.使用RGB（x,y,z）函数表示
#rrggbb对应红蓝绿对应xyz。
4.5.CSS继承与层叠
CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。
CSS的全称是“层叠样式表”，层叠特性和“继承”不一样，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS规定如下优先级为：行内样式>id样式>class样式>标记样式。
样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由各元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性，有时会把多层底套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义为准。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>继承关系</title>
<style>
h1{
color: bule;
text-decoration: underline;
}
em{
color: red;
}
</style>
</head>
<body>
<h1>学习<em>web开发</em>教程</h1>
<p>如果你有问题请联系我们</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四章 CSS样式基础</title>
<link rel="stylesheet" href="css/index.css" type="text/css"/>
<style>
h1{
color: blue;
text-decoration: underline;
}
em{
color: red;
}
.purple{
color: purple;
}
#line3{
color: blue;
}
</style>
</head>
<body>
<!-- 4.5继承与层叠 -->
<h1>博客<em>喜欢败给现实</em>呀</h1>
<p>这是第1行文本</p>
<p class="red">这是第2行文本</p>
<p id="line3" class="red">这是第3行文本</p>
<p style="color: orange;" id="line3">这是第4行文本</p>
<p class="purple red">这是第5行文本</p>
<!-- 为什么是purple，因为表同时发生冲突时，取值取前面的，先来后到 -->
</body>
</html>
4.6 元素类型
4.6.1.块级元素
display属性设置为block将显示块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符。
4.6.2.行级元素
行级元素也称为内联元素，display属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定形式，显示时只占据其内容的大小超链接、图像等都是行级元素。
4.6.3.列表项元素
list-item属性值表示列表项目，其实实质也是块状显示，是一种特殊的块状类型。
4.6.4.隐藏元素
none属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。
4.7案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>开平碉堡</title>
<link type="text/css" rel="stylesheet" href="css/z4.css"/>
</head>
<body>
<div id="content">
<h2 class="biaoti">开平碉楼申遗大事记</h2>
<hr color="#D3B175" size="5"/>
<img src="img/1.1.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>
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;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
