4.1 CSS概述
4.1.1.CSS的基本概念
层叠样式表 （Cascading Style Sheets，缩写为 CSS）是一种 样式表 语言，用来描述 HTML 或 XML （包括如 SVG 、 MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。 CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
4.1.2传统HTML的缺点
设计限制：虽然 HTML 提供了一些基本结构和样式选项，但它并不适合复杂的视觉设计。 层叠样式表（CSS）用于控制 HTML 内容的视觉呈现。
4.1.2.1.维护困难
4.1.2.2.标记不足
4.1.2.3.网页过“胖”
4.1.2.4.定位困难
4.1.3.CSS的特点和优势
4.1.3.1.表现和内容分离
4.1.3.2.增强了网页的表现力
4.1.3.3.使整个网站显示风格趋于统一
4.1.4.CSS的编写规则
4.1.4.1.目录结构命名规则
css,js,html
4.1.4.2.样式文件的命名规则
与要绑定html文件同名
4.1.4.3.选择器的命名规则
英文命名英译
4.1.4.4.CSS代码注释
/*
12
*/
4.1.4.5.CSS代码缩进
text-indent: 2em;
em是相对长度单位
无论字体大小设置多少，em单位作为缩进样式单位，即可自适应实现要缩进文字长度。
text-indent:2em 设置2em,就能实现无论字体大小设置多少，都能自适应缩进2个字的距离空格效果。
4.2 CSS语法基础
4.2.1.CSS基本语法
4.2.1.1.基本语法
4.2.1.2.语法说明
4.2.2.CSS选择器类型
4.2.2.1.标记选择器
p{
color: #ff0000;
font-size: 20px;
text-align: center
}<p>2fdfdfsf</p>
4.2.2.2.class选择器
<p class="class1">2fdfdfsf</p>
.class1{
color: blue;
font-size: 30px;
text-align: center;
}
4.2.2.3.ID选择器
#day{
color: aqua;
font-size: 40px;
text-align: center;
}<p id="day">id选择器</p>
4.2.2.4.伪类选择器
a:hover {
color: #ffff00;
}<a href="baidu.com">百度一下</a>
4.2.3.CSS选择器声明
在声明各种CsS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，都可以使用集体声明的方法，用“，”分隔多个选择器，对风格相同的CsS选择器同时声明。
4.2.3.1.集体生明
集体声明代码如下:
h3, h4,h5,p{color; red;font-size: 18px;}
4.2.3.2.全局声明
对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”,代码如下:
*/ {
color: red;
font-size: 18px;
}
4.2.3.3派生选择器（上下文选择器）
另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS代码变得更加整洁。
4.3 CSS引入方式
4.3.1.内联样式表（行内样式表）
<p style="color: #aa5500">第二段</p>
4.3.1.1.基本语法
4.3.1.2.语法说明
4.3.2.内部样式表
4.3.2.1.基本语法
4.3.2.2.语法说明
4.3.3.外部样式表
4.3.3.1.链接外部样式表
<link rel="stylesheet" href="css/index.css" type="text/css"/>
4.3.3.2.导入外部样式表
4.4 CSS的属性单位
4.4.1.长度、百分比单位
其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm(当前字母中，字母的宽度)作为属性单位时，将会依据父元素的font-size属性，如果没有父元素，则参考浏览器的默认值字号。
4.4.1.1.相对类型
4.4.1.2.绝对类型
4.4.2.色彩单位
在计算机中，定义每种色彩的强度范围为0~255。当所有色彩的强度都为0时，将产黑色:当所有色彩的强度都为255时，将产生白色。
在HTML中，使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制好字表示。
div {color: #FF0000;}
4.4.2.1.用十六进制数方式表示色彩值
4.4.2.2.用色彩名称方式表示色彩值
4.4.2.3.使用RGB（x,y,z）函数表示
4.5.CSS继承与层叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h4{
color: #aaff00;;
text-decoration: underline;
}
em{
color: #ffff7f;
}
h2{
color: #aaff00;
}
.h2{
color: #ffff00;
}
#h2_1{
color: aqua;
}
</style>
</head>
<body>
<h4>
第一<em>第二</em>
</h4>
<em>第三</em>
<h2>第三</h2>
<h2 class="h2">第四</h2>
<h2 id="h2_1">第五</h2>
<h2 id="h2_1" class="h2">第六</h2>
<h2 style="color: #ff0000" id="h2_1">第七</h2>
</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，该元素及其所有内容就不再显示，也不占用文档中的空间。
综合实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开平碉楼</title>
<link type="text/css" rel="stylesheet" href="css/3text.css"/>
</head>
<body>
<div id="content">
<h2 class="biaoti">开平碉楼申遗大事记</h2>
<hr color="#D3B175" size="5"/>
<img src="img/wx.jpg" id="src"/>
<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>*{
width: 1024px;
margin-left: auto;
margin-right: auto;
}
#src{
text-align: center;
}
.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万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
