第四章 CSS样式基础

听Jay入眠

已于 2024-10-11 09:04:39 修改

阅读量1k

点赞数 24

文章标签： css 前端 html5 html

于 2024-09-29 11:19:54 首次发布

本文链接：https://blog.csdn.net/2301_80756005/article/details/142587286

版权

4.1 CSS概述

CSS是用于简化html标签都，把关于样式部分提取出来，进行单独的控制，使结构和样式分离式开发。对页面布局等的控制更加精准，能够使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

4.1.1.CSS的基本概念

HTML页面结构文件

CSS页面样式文件

4.1.2传统HTML的缺点

HTML是用来标记文档内容，通过标记来表达信息，要实现页面美化、文档内容清晰、独立于文档表现层的站点变得越来越困难。

4.1.2.1.维护困难

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

4.1.2.2.标记不足

HTML自身的标记并不丰富，很多标签都是为网页内容服务的，而关于美工的标记这些在HTML中都很难找到。

4.1.2.3.网页过“胖”

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

4.1.2.4.定位困难

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

4.1.3.CSS的特点和优势

CSS通过定义标记如何表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统HTML的缺点。将CSS嵌人在页面中，通过浏览器解释执行，而且CSs文件是文本文件，只要理解HTML都可以掌握它。

其特点主要如下：
(1)页面的字体变得更漂亮，更容易编排。

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

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

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

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

CSS可以称得上Web设计领域的一个突破，具有以下优势：

4.1.3.1.表现和内容分离

CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。

4.1.3.2.增强了网页的表现力

CSS样式属性提供了比HTML更多的格式设计功能。例如，可以通过CSs样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。

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

把CSS样式定义到样式表文件中，可以在多个页面同时应用样式表文件中的样式，确保多个页面具有一致的格式，并且随时更新样式文件，实现自动更行多个网站的功能，大大降低网站的开发与维修的成本。

4.1.4.CSS的编写规则

CSS样式设计虽然很大，但是设计人员管理不当将导致样式混乱。

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

为了网站的性能考虑，会将不同的CSS文件整合到同一个CSS文件中，这个文件一般命名为style.css或者css.css。

4.1.4.3.选择器的命名规则

应该用有意义的单词或者缩写组合来命名选择器，做到“见名知义”，能够节省查找样式的时间。

4.1.4.4.CSS代码注释

CSS注释能够被浏览器忽略，不影响网页效果。有助于记住复杂的样式规则的作用和应用的范围等，便于以后样式规则的维修和应用。

以字符/*开始，以字符 */结束，可以是单行也可以时多行。

4.1.4.5.CSS代码注释

代码缩进可以保证CSS代码的清晰可读

按一次tab健来缩进选择器，两次tab健来缩进声明和结束大括号。

4.2 CSS语法基础

CSS控制页面是通过CSS规则实现的，CSS规则由选择器和声明组成，声明由属性和属性值对组成。CSS提供了丰富的选择器类型，包括标记选择器、类选择器、id选择器及伪类选择器等，能够灵活地对整个页面、页面中的某个标记或一类标记进行样式设置。

4.2.1.CSS基本语法

CSS就是一个包含一个或多个规则的文本文件，CSs规则由两个主要的部分构成:选择器(Selector选择器)和声明(Declaration)。
选择器通常是需要改变样式的HTML元素。
声明由一个或多个属性与属性值对组成。属性是CSS的关键字，如font-family(字体)color (颜色)和border(边框)等，属性用于指定选择器某一方面的特性，而属性值则用于指定选择器的特性的具体特征

4.2.1.1.基本语法

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

4.2.1.2.语法说明

(1)选择器。选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。
(2)属性/属性值对。“属性:属性值”必须一一对应，属性与属性值之间必须用“:” 连接，每个属性/属性值对之间用分号(；)隔开。
(3)属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性background-color;而在脚本语言中，对象属性则连写成background Color. 在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。

4.2.2.CSS选择器类型

主要有四种类型：标记选择器、class选择器、id选择器和伪类选择器。

4.2.2.1.标记选择器

也叫元素选择器，可以直接使用HTML标记名称作为选择器。它定义的样式作用于页面中的所以相同名称的选择器。

4.2.2.2.class选择器

也叫类选择器，可以给指定的标签设置一个class属性和class值，然后通过class选择器找到相应的标签。

4.2.2.3.ID选择器

用来对某个单一元素定义独立的样式，ID选择器只能在HTML页面中使用一次，针对性更强。

定义ID选择器时，需要在id名称前加一个“#”。

4.2.2.4.伪类选择器

常见的伪类选择器：

伪类名	说明
link	用于可以设置未被访问的链接的样式
visited	用于设置已经被访问的链接的样式
hover	用于设置将鼠标悬浮在链接上的样式
active	用于设置鼠标点击链接时到鼠标松开时的样式
focus	用于设置用键盘将焦点放在链接上时的样式
first-child	设置第一个标记的样式
lang	设置具有lang属性的标记的样式

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派生选择器（上下文选择器）

根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使SS代码变得更加整洁。

4.3 CSS引入方式

按位置可以分为4种：内联样式表、内部样式表、链接外部样式表、导入外部样式表。

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

规则是写在首标记馁，只对所在的标记有效，几乎任何一个HTML标记上都可以设置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.内部样式表

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

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.外部样式表

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

4.3.3.1.链接外部样式表

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

基本语法：

语法中必须指定<link>标记的3个属性

4.3.3.2.导入外部样式表

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

(1)基本语法:

@import ul("CSS文件路径”);

/*此处还可以存放其他CSS样式*/ </style>

(2)语法说明。导人样式表必须在style标记内开头的位置定义，可以同时导人多个外部样式表，每条语句必须以“；”结束。一般导人外部样式写在最前面，内部样式写在后面。

4.4 CSS的属性单位

在CSS文字、排版、边界等的设置上，常常会在属性值后加上长度或者百分比单位。

4.4.1.长度、百分比单位

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

4.4.1.1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。

4.4.1.2.绝对类型

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

常用长度单位：

类型	长度单位	说明
绝对类型	in	英寸Inches(1英寸=2.54厘米)
	cm	厘米Centimeters
	mm	毫米Millimeters
	pt	点Points(1点=1/72英寸)
	pc	皮卡Picas(1皮卡=12点)
相对类型	em	元素的字体高度The height of the element's font
	ex	字母x的高度The height of the letter"x"
	px	像素Pixels
	%	百分比Percentage

4.4.2.色彩单位

HTML网页和CSS样式都是按照RGB来设置颜色的。

在HTML标记中只提供了两种设置色彩的方法：十六进制和色彩英文名称。

CSS提供了三种定义色彩的方法：十六进制和色彩英文名称还有rgb和rgba函数。

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

在计算机中，定义每种颜色的强度范围为0~255.

都为0时，为黑色

都为255时，为白色

表现方法为#rrggbb

前两个数代表红光强度，中间两位数代表绿光强度，后两位代表蓝光强度

div{

color:#ff0000

}

如果参数各自在两位上数字相同，也可以缩写

4.4.2.2.用色彩名称方式表示色彩值

在CSS中也提供了与HTML一样用色彩英文名称表示色彩的方式。

CSS只提供16中色彩名称。

4.4.2.3.使用RGB（x,y,z）函数表示

x,y,z分别代表红色，绿色，蓝色的值

4.5.CSS继承与层叠

CSS继承即子标记会继承父标签的所有样式风格，并且可以在父标签样式风格的基础上再加修改，产生新的样式

em是一个斜体标签，是一个样式，

4.6 元素类型

CSS使用display属性规定元素应该生成的框的类型，任何元素都可以通过display属性改变默认的显示类型。

4.6.1.块级元素

block，很霸道，独占一行，块级元素的宽度为100%，后面藏有附带的换行符。

4.6.2.行级元素

inline，一行可以放很多个元素，直到放不下

行级元素也称为内联元素

4.6.3.列表项元素

list-item，实质上也是块状元素，是一种特殊的块状类型，它加进了缩进和项目符号。

4.6.4.隐藏元素

none，表示隐藏并取消盒模型，不会在浏览器显示，也不会占用文档空间。

内容总结：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
	</head>
	<body>
		<!-- 标记选择器 -->
		<p>今天是星期五</p>
		<!-- 行内样式设定 -->
		<p style="color: #ffc000;">明天是星期六</p>
		<!-- .class选择器 -->
		<p class="class1">这是class1的内容</p>
		<p class="class2">这是class2的内容</p>
		<!-- id选择器 -->
		<p id1="id1">这是id1的内容</p>
		<p id2="id2" class="class2">这是id2的内容</p>
		<!-- 伪类选择器 -->
		<a href="http.//www.baidu.com">百度一下</a>
	</body>
</html>

	<style>
/* 全局声明 */
*{
	font-family: fantasy;
}
/* 集体声明 */
.class1,a{
	font-family: fangsong;
}
p{ /*标签选择器*/
	color: #fffcc0;
	font-size: 20px;
}
.class1{
	color: #ff00c0;
	font-size: 25px;
}
.class2{
	color: #00ccff;
	font-size: 30px;
}
#id1{
	color: #cc00fc;
	font-size: 35px;
}
a:link{
	color: #cc000f;
}
a:hover{
	color: #00ccfc;
}
	</style>

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/表图.jpg"/>
			<p class="tx1">2000年，开平成立申遗小组</p>
			<p>2000年2月，从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向胡耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产。
			2000年10月30日，开平市成立“开平碉楼”申报世界文化遗产领导小组。领导小组下设办公室，分整治组、资料组、宣传组
			</p>
			<p class="txl">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>

运行结果：