第四章 CSS样式基础

最新推荐文章于 2024-10-02 15:35:50 发布

雪中凌月

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量979

点赞数 15

文章标签： css 前端

本文链接：https://blog.csdn.net/2403_87170819/article/details/142583682

版权

4.1 CSS概述

4.1.1.CSS的基本概念

CSS全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是HTML为基础，设置网业的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。在网页设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应代码做一些简单的修改就可以改变同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。

4.1.2传统HTML的缺点

HTML标记是用来定义文档内容，比如通过hl,p和table等标记来表达“这是标题”、“这是段落”、“这是表格”等信息，而文档布局由浏览器完成。

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的缺点。

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

（2）可以轻松控制页面的布局。

（3）可以在大多数浏览器上使用。

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

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

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

4.1.3.1.表现和内容分离

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

4.1.3.2.增强了网页的表现力

CSS样式呼吸提供了比HTML更多的格式设计功能。

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

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

4.1.4 CSS的编写规则

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式放在不同的CSS文件，是为了CSS编写和调试的方便。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。

4.1.4.4.CSS代码注释

像其他语言一样，CSS允许用户在源代码中嵌入注释。CSS注释以字符“/*”开始，以字符“*/”结束。

4.1.4.5.CSS代码注释

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码错乱。

4.2 CSS语法基础

4.2.1.CSS基本语法

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

4.2.1.1.基本语法

selector { property1:value1;property2:value2;....}

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

4.2.1.2.语法说明

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

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

(3) 属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名名称的写法，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号（-）分隔。

4.2.2.CSS选择器类型

1.标记选择器

标记选择器即直接使用HTML标记名称作为选择器。它定义的样式作用于页面中所有与选择器同名的标记。

2.class选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 CSS样式基础</title>
			<link rel="=stylesheet" href="css/index.css" type="text/css"/>
		<style>
			/*全局申明*/
			*{
				font-family: Georgia, 'Times New Roman', Times, serif;
			}
			/*集体申明*/
			.class1,a{
				font-family: fangsong;
			}
			p{ /*标签选择器*/
				color: #ff0000;
				font-size: 20px;
			}
			.class1{
				color: #00ff00;
				font-size: 30px;
			}
			.class2{
				color: #0000ff;
			}
			
			#id1{
				color: #00aaff;
				font-size: 40px;
			}
			#id2{
				font-size: 40px;
			}
			a:link{
				color: #aa00ff;
			}
			a:visited{
				color: #ff00aa;
			}
			a:hover{
				color: #ffaa00;
			}
		</style>
	</head>
		<p>这是第一段内容</p>
		<p style="color: #00ffaa;>这是第二段内容</p>
		<!-- 4.2.2.2.class选择器 -->
		<p class="class1">这是class1的内容</p>
		<p class="class1">这是class1的内容</p>
		<p class="class2">这是class2的内容</p>
		<!-- 4.2.2.3.ID选择器 -->
		<p id="id1">这是id1的内容</p>
		<p id="id2" class="class1">这是id2的内容</p>
		<!-- 4.2.2.4.伪类选择器 -->
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

3.ID选择器

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

4.伪类选择器

前面介绍的选择器都是能够与HTML中具体标记对应的，但是像段落的第一行，超链接访问前与访问后等，就没有HTML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进来伪类选择器。

4.2.3 CSS选择器声明

1.集体声明

h3,h4,h5,p{color;red;font-size;18px;}

2.全局声明

对于实际网站中的一些小型页面，例如单出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全员声明符号“*”，代码如下

*{
    color:red;
    font-size:18px;
}

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

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

4.3 CSS引入方式

CSS按其位置可以分为4种：内联样式表（Inline Style Sheet）、内部样式表（Internal Style Sheet）、链接外部样式表（Link External Style Sheet）以及导入外部样式表（ImportExternal Style Sheet）。

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

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

1.基础语法

<标记 style="属性1：属性值1;属性1：属性值2;...">修饰的内容</标记>

2.语法说明

（1）标记是指HTML标记，如p,hl和body等标记；

（2）标记的style定义的声明只对自身起作用；

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

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

4.3.2 内部样式表

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

1.基本语法

 <style type="text/css"
选择器1|属性1：属性值1；属性2：属性值2；.....
选择器2.....
</style>

2.语法说明

style标记是成对标记，有1个type属性是指style元素以CSS的语法定义。

选择器1，...，选择器n，可以定义n个选择器，再定义声明部分。

属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

4.3.3 外部样式表

外部样式表是将CSS规则写在以.css为后缀的CSS文件里，在需要用此样式的网页里引用该CSS文件。根据引用的方式不同可以分为链接外部样式表和导入外部样式表，它们形式上的区别在于链接外部样式通过链接link标记，导入外部样式表必须在内部样式表内首行通过“@import url（外部样式文件）；”来定义。

1.链接外部样式表

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

（1）基本语法：

<link type="text/css" rel="stylesheet" href="外部样式表名.css">

（2）语法说明

语法中必须指定<link>标记的3个属性，其中href是定义链接外部样式表文件的url可以是相对路径和绝对路径；rel是定义当前文档与被链接文档之间的关系，这里指定stylesheet，比哦啊是被链接的文档是样式表文件；type是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。

2.导入外部样式表

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

（1）基本语法：

<style type="text/css">
@import url("CSS文件路径")；
/*此处还可以存放其他CSS样式*/
</style>

（2）语法说明:

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

4.4 CSS的属性单位

4.4.1 长度、百分比单位

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

1.相对类型

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

2.绝对类型

绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的例如屏幕上的1cm与打印机上的1cm是一样长的。

4.4.2 色彩单位

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

在计算机中，定义每种色彩的强度范围为0~255.当所有色彩的强度都为0时，将产生黑色；当所有色彩的强度为255时，将产生白色。

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

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

3.使用RGB(x,y,z)函数表示

x,y,z分别是红色、绿色、蓝色的值，x,y,z包含[ 0,225 ]，亦可用百分比表示；对比rgba（x,y,z,a）中a是alpha通道设置透明度取值0~1。

4.5 CSS继承与层叠

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>

<!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 元素类型

1.块级元素(display:block)

display属性设置为block将显示块级元素，块级元素的宽度为100%,而且后面隐藏附带有换行符，使块级元素始终占据一行。

2.行级元素(display:inline)

行级袁术也称为内联元素，display属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其他内容的大小超链接、图像、范围、表单元素等都是行级元素。

3.列表项元素(display:list-item)

list-item属性值表示列表项目，其实质也是块状显示，使一种特殊的块状类型，它加了缩进和项目符号。

4.隐藏元素(display:none)

none属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display设置为none，该元素及其所有内容就不再显示，页不占文档中的空间。

*{
	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;
}

<!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/pic200.jpg"/>
			<p class="txl">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="txl">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>