第四章 css样式基础

2402_83184791

于 2024-09-30 12:27:03 发布

阅读量405

点赞数 11

文章标签： css 前端

本文链接：https://blog.csdn.net/2402_83184791/article/details/142544299

版权

4.1 CSS概述

随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，包着这些功能的增加，使得HTML变得越来越杂乱，HTML页面也越来越臃肿，CS 了。CSS是用于简化HTML标签，把关于样式部分的内容提取出来，进行单独地控制，: 构与样式分离式开发。对页面布局等的控制也更加精确，同时能够实现内容和表现的分使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

4.1.1.CSS的基本概念

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

4.1.2传统HTML的缺点

（1）维护困难（2）标记不足（3）网页过“胖” （4)定位困难

4.1.3.CSS的特点和优势

特点：

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

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

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

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

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

优势：

（1）表现和内容分离（2）增强了网页的表现力（3）使整个网站显示风格趋于统一

4.1.4 css的编写规则

1.目录结构命名规则

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

2.样式文件的命名规则

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

3.选择器的命名规则

4.css代码注释

注释有助于记住复杂的样式规则的作用、应用的范围等，便于样式规则的后期维护和应用。注释可以是单行，也可以是多行，并可以出现在css代码的任何地方

5.css代码注释

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

4.2 css语法基础

4.2.1 css基本语法

css规则有两个主要的部分构成：选择器和声明

1.基本语法

selector|property1：value1：property2：value2；property3：value3；...|

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

2.语法说明

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

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

（3）属性：凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号（-）分隔

p{
				color: #0000ff;
				font-size:20px;
			}

（4）复合属性：在css中有些实行可以表示多个属性的值

p{
				font-style:italic;
				font-size:20px;
				font-family:黑体;
			}

（5）多个属性值：在css中有些属性可以设置多个属性值

selector{
				font-family:"楷体-gb2313","黑体","Times New Roman";
			}

4.2.2 css选择器类型

1.标记选择器：

元素选择器：及直接使用HTML标记名称作为选择器

2.class选择器：



<p class="class1">这是class1的内容</p>
		<p class="class2">这是class2的内容</p>

3.ID选择器

<p id="id1">这是id1内容</p>
		<p class="class1" id="id2">这是id2内容</p>

4.伪类选择器

特别注意：a：hover 必须位于a：link和a：visited之后，才有效；a：active 必须位于a:hover 之后才有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			a:link{
				color: #ffccaa;
				font-size: 50px;
				   }
			a:visited{
				color: #ffaa00;
				font-size: 50px;
					 }
			a:hover{
					color: #ff00aa;
					font-size: 50px;
					}
			</style>
	</head>
	<body>
		<p>伪类选择器</p>
		<a href="http://www.sina.com">新浪首页</a>
		
	</body>
</html>

4.2.3 css选择器声明

1.集体声明

h3，h4，h5，p{color：red；font-size：18px；}

2.全局声明

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

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

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

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS代码变得更加整洁。例如，要让列表项<li>中的<strong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong { font-style ; italic;font-weight; normal;}
strong { font-weight:bold;}

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<strong></p >
<ol>
<li>< strong>我是斜体字,这是因为strong元素位于li标记内</strong></li>
</ol>
<li>我是正常的字体</li>

4.3 css引入方式

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

1.基本语法

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

2.语法说明

(1)标记是指HTML标记，如p，hl和body等标记;
(2)标记的style定义的声明只对自身起作用；
(3)style 属性的值可以包含多个声明，每一声明之间用“；”分隔;
(4标记自身定义的style样式优先于其他所有样式定义

<p class="color: #000000;">这是第二段内容</p>

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>

2.语法说明

style 标记是成对标记，有1个type 属性是指style元素以CSS的语法定义。
选择器1,选择器n，可以定义n个选择器，再定义声明部分。
属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

4.3.3 外部样式表

1.链接外部样式表

（1）基本语法

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

（2）语法说明：
语法中必须指定<link>标记的3个属性，其中href 是定义链接外部样式表文件的u可以是相对路径和绝对路径；r1是定义当前文档与被链接文档之间的关系，这里指定styleshet，表示被链接的文档是样式表文件；（ype 是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type="textcss"规定被链接文档的MIME 类型。href="mystyle.css“规定被链接文档的位置，只需要记住这个固定写法即可

2.导入外部样式表

（1）基本语法

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

（2）语法说明。导入样式表必须在style标记内开头的位置定义，可以同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部样式写在最前面，内部样式写在后面。
“@import”必须连续书写，即“@”和“import”之间不能留有任何空格。外部样式表的名称在书写时，必须是全称再加上后缀名“.css”

导入式会在整个网页加载完后再加载CSS文件，因此如果网页比较大则会出现先显示无样式的页面，再出现网页的样式的情况。这是导入式固有的一个缺陷。
虽然导入式和链接式功能基本相同，但大多数网站都是采用链接式引入外部样式表，这是因为两者的加载时间和顺序不同。在加载页面时，<link>标签引用的CSS样式表将同时被加载，而“@import”引用的CSS样式表会等整个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此，大多数的网站采用链接外部样式表是使用角最高、最实用的CSS样式表。它可以将HTMIL代码与CSS代码分离为两个或多个文件。现类结构和表现的完全分离，使网页的前期制作和后期维护都变得十分方便。

4.4 css的属性单位

4.4.1 长度、百分比单位

1.相对类型

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

2.绝对类型

百分比单位是一种常用的相对类型，通常的参考依据为fonl-size属性。百分比值总是相对于另一个值。下面的语句将margin 属性的值设置为foni-size的200%：p{margin:200%}
需要注意的是，不管使用哪种单位，在设置的时候数值与单位之间不需要加空格。

4.4.2 色彩单位

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

div{
color:#FF0000;
}

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

3.使用RGB（x，y，z）函数表示

x,y,z分别是红,绿,蓝的值x，y，z属于[0,255],也可以用百分比表示。

4.5 css继承与层叠

4.7示例层叠：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承关系</title>
		<style>
			h1{
				color: bule;
				text-decoration: underline;
			}
			em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>学习<em>web开发</em>教程</h1>
		<p>如果你有问题请联系我们</p >
	</body>
</html>

4.8示例 css层叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>层叠</title>
		<style>
			p{
				color: green;
			}
			.red{
				color: red;
			}
			.purple{
				color: purple;
			}
			#line3{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p>这是第1行文本</p >
		<p class="red">这是第2行文本</p >
		<p style="color:orange" id="line3">这是第3行文本</p >
		<p class="purple red">这是第4行文本</p >
	</body>
</html>

4.6 元素类型

1.块级元素（display：block）

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

2.行级元素（ display：inline）

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

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

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

4.隐藏元素（display：none）

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

综合案例：开平碉楼申遗大事记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开平碉楼</title>
		<link type="text/css" rel="stylesheet" href="css/case.css"/>
	</head>
	<body>
		<div id="content">
			<h2 class="biaoti">开平碉楼申遗大事记</h2>
			<hr color="#D3B175" size="5"/>
			< img src="img/pic200.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>