第四章 CSS样式基础

月亮里的橘子猫

已于 2024-10-01 12:27:21 修改

阅读量628

点赞数 19

文章标签： css 前端 html

于 2024-10-01 12:26:31 首次发布

本文链接：https://blog.csdn.net/2303_80888494/article/details/142583581

版权

4.1 CSS概述

4.1.1 CSS的基本概念

CSS中文释义为“层叠样式表”，它是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式

4.1.2 传统HTML的缺点

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

2.标记不足：HTML自身的标记不丰富，很多标记都是为网页服务内容的，而关于美工的标记，例如文字间距、段落所经的成本很高

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

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

4.1.3 CSS的特点和优势

1.表现和内容分离

2.增强了网页表现力

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

4.1.4 CSS的编写规则

1.目录结构命名规则

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

2.样式文件的命名规则

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

4.CSS代码注释

CSS 注释符用/*开头到*/结尾。里面可以写多行也可以是单行

4.2 CSS语法基础

4.2.1 CSS语法基础

1.基本语法：

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

2.语法说明：

4.2.2 CSS选择类型

1.标记选择器

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

2.class选择器

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

3.id选择器

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

4.伪类选择器

前面介绍的选择器都是能够与HTML中具体标记一一对应的，但是像段落行的第一行，超链接访问前与访问后等，就没有HTML标记与之对应，所以就有了伪类选择器

4.2.3 CSS选择器声明

1.集体声明

2.全局声明

对于实际网站中的一些小型页面，例如弹出的小型对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式，

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

4.3CSS引入方式

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

内联样式表的CSS规则写在首行标记内，只对所在的标记有效，几乎任何一个HTML标记上都可以设置style属性，属性值可以包含CSS规则声明，不包含选择器

4.3.2 内部样式表

内部样式表写在HTML的<head>标签里面，只对所在网页有效

4.3.3 外部样式表

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

1.链接外部样式表

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

2.导入外部样式表

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

4.4 CSS的属性单位

4.4.1 长度、百分比单位

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

1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位时，将会依据父元素的font-size属性，如果没有父元素，则参考浏览器的默认字号，百分比是一种常用的相对类型

2.绝对类型

绝对类型所使用的单位不会随着显示单位的不同而改变，也就是说当属性值使用绝对单位时，不论在那种设备上显示都是一样的

注意：

无论使用哪种类型在设置的时候数值与单位之间都不用加空格

4.4.2 色彩单位

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

表示方法为#RRGGBB，其中前两个数字代表红光强度，中间两个数表示绿光强度

4.5 CSS继承与重叠

1.继承

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>Web开发</em>教程</h1>
		<p>如果您有任何问题，欢迎联系我们</p>
	</body>
</html>

2.层叠

CSS的全称是“层叠样式表”，层叠样式和继承是不一样的，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式残生冲突时的吃力，CSS规定优先级为：行内样式>id样式>class样式>标记样式

<!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><!--两个都是class，但由于等号旁边先是purple然后才是red，所以这行文本的颜色是紫色-->
	</body>
</html>

4.6 元素类型

1.块级元素（display：block）

display属性设置为block将显示块级元素，块级元素的宽度为100%。而且后面隐藏附带有换行符，使块级元素失踪占据一行，如<div>常常被称为块级元素，着意味着这些元素显示为一块内容，标题、段落、列表、表格、分区等都是块级元素

2.行级元素（display：inline）

行级元素也称为内联元素， display属性设置为inline将显示块级元素

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

其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号

4.隐藏元素（display：none）

其所包含的内容不会被浏览器解析和显示

综合案例：

以开平碉楼的申遗大事记为例子，参照给定的HTML代码、CSS设置和图片资源，和

HBuilder 设计Web 网页。

要求：

（1）标题设置为h2、“微软雅黑”、居中显示；

（2）小标题设置为“黑体”，字体颜色设置为“#8B4513”，段落背景颜色为“#D3B175.

行高为200%；

（3）正文其他所有的字体设置为“微软雅黑”、18px、首行缩进2字符；

（4）使用外部样式表链接到HTML文档中。

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开平碉楼</title>
		<link type="text/css" rel="stylesheet" href="css/综合案例.css"/>
	</head>
	<body>
		<div id="content"">
			<h2 class="biaoti">开平碉楼申遗大事记</h2>
			<hr color="#D3B175" size="5"/>
			<img src="img/pic200.jpg"/>
			<p class="tx1">200年，开平成立申遗小组</p>
			<p>2000年2月，从国务院信访局到开平挂市委常委职务的李攻同志在香港侨团团拜会上向相耀坤、吴荣治等侨领首次提出
			將开平楼申报为世界文化遗产。
			   2000年10月30日，开平市成立“开平 楼” 报世界文化遗产领导小组。领导小组下设办公室,分整治组、黄料组、宣传组。
			</p>
			<p class="tx1">2001年，省申遗领导小组成立</p>
			<p>
				2001年4月30日，开平市市长办公会议研究持开平辆楼中造项目名称定为“开平明楼与民居”。
				2001年6月19日，中道办评伟强、张健文、作积康3位负责人赴北京，在李攻同志的陪网下拜访了中国国际古迹遗址理事
				会秘书长郭静、清华大学教投陈志华，就申造的有关事宜进行会谈
				20011年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;
}

运行结果：

代码总结：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<style>
			
		</style>
	</head>
	<body>
		<!--4.2.1 CSS语法基础-->
		<p>这是第一段内容</p>
		<p>这是第二段内容</p>
		<!--4.2.2 CSS选择类型-->
		<!--4.2.2class选择器-->
		<p style="color: #00ffaa;">这是第二段内容</p><!--行内样式表,因为HTML有就近原则，所以这行文本的颜色是#00ffaa-->
		<p class="class1">这是class1内容</p><!--如果类选择器与标签选择器设置的样式冲突了，浏览器会优秀显示类选择器设置的样式-->
		<p class="class1">这是class1内容</p>
		<p class="class2">这是class2内容</p><!--应为没有给class2特意设置样式，所以这句话会继续遵循之前已经设置过的p标签的样式显示出来-->
		
		<!--4.2.3 id选择器-->
		<p id="id1">这是id1的内容</p>
		<p id="id2" class="class1">这是id2的内容</p><!--像这种情况，浏览器会自动按照先id选择器再class选择器最后标记选择器的顺序来设置样式，也就是说
													若id选择器中只设定了字号没有设置颜色，那么浏览器会去查找class有没有设定，以此类推-->
		<!--4.2.4 伪类选择器-->
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

CSS代码：

p{
		/*4.2.1 标记选择器*/
				color: #ff0000;
				font-size: 20px;
			}
			.class1{
				color: #00ff00;
				font-size: 30px;
			}
			.class1{
				color: #0000ff;
			}
			#id1{
				color: #00aaff;
				font-size: 40px;
			}
			#id2{
				font-size: 40px;
			}
			a:link{
				color: #aa00ff;
			}
			a:hover{
				color: #ffaa00;
			}
			a:visited{
				color: #ff00aa;
			}
			/*4.2.3.2 集体声明*/
			/*将class1和a标签的字体设置成了宋体*/
			.class1,a{
				font-family: fangsong;
			}
			/*4.2.3.2 全局声明（给所有内容的样式进行设定）*/
			*{
				font-family: Georgia, 'Times New Roman', Times, serif;
			}