第四章 CSS样式基础-CSDN博客

本文链接：https://blog.csdn.net/2301_81609959/article/details/142509704

4.1 CSS概述

4.1.1.CSS的基本概念

以html为基础，设置网页的外观，可以改变同一网页的不同部分效果也可以改变同一网站不同网页的外观和格式

4.1.2传统HTML的缺点

1.维护困难

为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。

2.标记不足

HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些HTML中都很难找到。

3.网页过“胖”

由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽。

4.定位困难

在整体页面布局时，HTML对于各个模块的位置调整很困难，

4.1.3.CSS的特点和优势

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

特点：

(1)页面的字体变得更漂亮，更容易编排。

(2)可以轻松控制页面的布局。

(3)可以在大多数浏览器上使用。

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

(5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS 文件中相应的行就可以改变整个网站上页面的显示样式。

优势：

1.表现和内容分离

2.增强了网页的表现力

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

4.1.4 CSS的编写规则

1.目录结构命名规则

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

2.样式文件的命名规则

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

3.选择器的命名规则

4.2 CSS语法基础
4.2.1.CSS基本语法

CSS就是一个包含一个或多个规则的文本文件，CSS规则由两个主要的部分构成:选择器(Selector选择器)和声明(Declaration)。

1.基本语法

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

2.语法说明

(1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。

(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“:连接，每个属性/属性值对之间用分号(;)隔开。

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

	<style>
			p{
				font-size: 24px;
				color: aquamarine;
			}
		</style>

4.2.2.CSS选择器类型

标记选择器：标记选择器(也可称为“元素选择器”)即直接使用HTML标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记。

class 选择器：class选择器也叫“类”选择器，可以给指定的标签设置一个 class 属性和 class 值然后通过 class 选择器找到对应的标签，为其设置class值，即添加 CSS 样式。使用 class 类选择器时，需要用英文(.)进行表示，

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

伪类选择器：

4.2.3.CSS选择器声明

集体声明：

<head>
<meta charset="utf-8">
		<title></title>
<style>
h1,h2,h3{
				font-size: 60px;
				color: aquamarine;
			}
		</style>
</head>
<body>
		<h1>第一</h1>
		<h2>第二</h2>
		<h3>第三</h3>
	</body>

全局声明：

<style>
*{
				font-size: 15px;
				color: red;
			}
</style>
<body>
		<h1>第一</h1>
		<h2>第二</h2>
		<h3>第三</h3>
</body>

4.3 CSS引入方式

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

基本语法：<标记 style="属性1:属性值1;属性 2:属性值2;…">修饰的内容</标记>

语法说明：

(1)标记是指 HTML标记，如p，hl和 body 等标记;

(2)标记的 style 定义的声明只对自身起作用;

(3)style属性的值可以包含多个声明，每一声明之间用“;”分隔;

(4)标记自身定义的 style 样式优先于其他所有样式定义。

<p style="font-size: 25px;color:#0000ffff">css基础</p>

4.3.2.内部样式表

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

4.3.3.外部样式表

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

1.链接外部样式表

<link rel="stylesheet" href="css/index.css"<style type="text/css">

4.4 CSS的属性单位

4.4.1.长度、百分比单位

相对类型： cm,dm.......

绝对类型：%,em......

4.4.2.色彩单位

用十六进制数方式表示色彩值#ffff0000 ..........
用色彩名称方式表示色彩值bule.......

4.5.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>wed开发</em>教程</h1>
		<p>如果您有任何问题，欢迎练习我们</p>
	</body>
</html>

层叠：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8" >
		<title>CSS 层叠</title>
		<style type="text/css">
			p{
				color:green;
			}
			.red{
				color: red;
			}
			.purple{
				color:purple;
			}
			#line3{
				color:blue;
			}
		</style>
	</head>
	<body>
		<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>
	</body>
</html>

4.6 元素类型

块级元素:独占一行
行级元素：放不下换行
列表项元素：块级元素加缩进和项目符号

4.7综合练习

<!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/8fb9096853049ba2444191508601864.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日,开平市举行"共同的心愿--全力支持开平碉楼与村落申报世界文化遗2为主题的申遺文艺晚会,世遣评估专家卢光裕先生、副省长雷于蓝、国家文物局有关领导观看了晚会。晚会组来时,共收到来自社会各界的捐款 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;
}