第四章 CSS样式基础

laymo

于 2024-09-29 20:40:45 发布

阅读量504

点赞数 20

文章标签： css 前端 html

本文链接：https://blog.csdn.net/dhy_04/article/details/142587381

版权

4.1 CSS概述

CSS指的是页面样式文件，以HTML为基础，设置网页的外观显示样式，如字体，颜色，背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。

传统HTML页面的缺点：

1.维护困难

2.标记不足

3.网页过“胖”

4.定位困难

优点：

1.表现和内容分离

2.增强了网页的表现力

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

编写规则：

1.目录结构命名规则

存放CSS文件的目录一般命名为style或css

2.样式文件的命名规则

文件一般命名为style.css或css.css

3.选择器的命名规则

4.CSS代码注释

XXXX

5.CSS代码缩进

使用TAB键来缩进选择器

4.2 CSS语法基础

4.2.1 CSS基本语法

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

selector {propertyl：value；propertyl2：value2；propertyl3：value3；.....}

选择器可以是自定义的标识符

注：类选择器和标记选择器的属性冲突时，选择类选择器的属性；类选择器和ID选择器冲突时，选择ID选择器的属性

浏览器会尊重我们的劳动成果

4.2.2 CSS选择器类型

4.2.2.1标记选择器

标记选择器即直接使用HTML标记名称作为选择器。

4.2.2.2class选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和class值然后通过class选择器找到对应的标签，为其设置class值，即添加CSS样式。

4.2.2.3ID选择器

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 行内样式表

<标记 style=“属性1：属性值1；属性2：属性值2；.....”>修饰的内容</标记>

4.3.2 内部样式表

I<style type="text/css">

选择器1 {属性1：属性值1；属性2：属性值2；....}

选择器2 {属性1：属性值1；属性2：属性值2；....}

选择器3 {属性1：属性值1；属性2：属性值2；....}

</style>

4.3.3 外部样式表

4.4 CSS的属性单位

4.4.1 长度、百分比单位

类型	长度单位	说明
绝对引用	in	英寸inches
	cm	厘米
	mm	毫米
	pt	点
	pc	皮卡
相对引用	em	元素的字体高度
	ex	字母x的高度
	px	像素
	%	百分比

4.4.2 色彩单位

颜色	名称	颜色	名称
black	黑色	silver	浅灰
blue	蓝色	green	绿色
teal	靛青	aqua	天蓝
red	红色	purple	紫色
olive	褐黄	yellow	黄色
white	白色

4.5 CSS继承与层叠

<!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>lyw</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>
	</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.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;
}