第四章 CSS样式基础

数据类型

已于 2024-09-26 20:42:29 修改

阅读量672

点赞数 18

文章标签： css 前端

于 2024-09-26 20:09:11 首次发布

本文链接：https://blog.csdn.net/2401_84059676/article/details/142509129

版权

CSS（层叠样式表，Cascading Style Sheets）是一种用来描述文档外观和格式的语言，常用于增强HTML文档的表现力。以下是对您提出的大纲中的各个点进行简要解释：

4.1 CSS概述

4.1.1 CSS的基本概念

CSS是一种用来定义HTML文档外观的语言，它可以控制页面上的布局、颜色、字体等样式。

4.1.2 传统HTML的缺点

4.1.2.1 维护困难

当样式信息与HTML标记混合时，修改样式需要同时修改多个地方。

4.1.2.2 标记不足

HTML标记主要用于定义文档的结构，而不是样式。

4.1.2.3 网页过“胖”

每个页面都包含大量的样式信息会导致页面体积增大。

4.1.2.4 定位困难

HTML本身没有提供强大的定位能力，使得布局设计变得复杂。

4.1.3 CSS的特点和优势

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

(1)页面的字体变得更漂亮，更容易编排。
(2)可以轻松控制页面的布局。
(3)可以在大多数浏览器上使用。
(4)以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现页面下载更快。
(5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该CSS文件中相应的行，就可以改变整个网站上页面的显示样式。

4.1.3.1 表现和内容分离

CSS使得样式和内容分离，便于维护和管理。

4.1.3.2 增强了网页的表现力

提供了更多的样式控制选项，使得页面更加美观。

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

可以使用一个CSS文件来控制多个页面的样式，保持一致性和统一性。

4.1.4 CSS的编写规则

4.1.4.1 目录结构命名规则

通常，CSS文件应该放在项目的`css`文件夹内。

4.1.4.2 样式文件的命名规则

样式文件通常以`.css`为扩展名，并且名字应该清晰地反映文件的内容。在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的便:在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中这个文件一般命名为 style.css 或 css.css。

4.1.4.3 选择器的命名规则

类名和ID应该具有描述性，避免使用过于通用的名字。所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样式的时间。

4.1.4.4 CSS代码注释

使用`/* */`来添加注释，帮助理解代码的作用。

4.2 CSS语法基础

4.2.1 CSS基本语法

4.2.1.1 基本语法

selector {property: value;}`。

4.2.1.2 语法说明

选择器指向要设置样式的HTML元素，属性定义样式，值定义样式的具体设置。

4.2.2 CSS选择器类型

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

4.2.2.1 标记选择器

如`p`，选择所有`<p>`标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
			color:#0000ff;
			front-size:30px
		}
		</style>
		</head>
	<body>
		<p>这是第一段的内容</p>
	</body>
</html>

4.2.2.2 类选择器

如`.classname`，用于具有指定类的所有元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
			color:#0000ff;
			front-size:30px
		}
		.class1{
			color:#ff0000
		}
		</style>
		</head>
	<body>
		<p>这是第一段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
	</body>
</html>

4.2.2.3 ID选择器

如`#idname`，用于具有指定ID的单个元素。ID选择器只能在HTML页面中使用-次，针对性更强。定义I选择器时，需要在id名称前加一个“#”。接下来通过实例来演示ID 选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
			color:#0000ff;
			front-size:30px
		}
		.class1{
			color:#ff0000
		}
		.class2{
			color:#00ff00
		}
		#ID1{
			color:#aaccff
		}
		#ID2{
			color:#ffccaa
		}
		</style>
		</head>
	<body>
		<p>这是第一段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
		<p id="ID1">这是ID1的段落</p>
		<p id="ID2" class="class2">这是ID2的段落</p>
	</body>
</html>

4.2.2.4 伪类选择器

如`:hover`，用于某个特定状态下的元素。前面介绍的选择器都是能够与HTML中具体标记对应的，但是像段落的第行，超链接访问前与访问后等，就没有H1ML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进了伪类选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		.class1{
			color:#ff0000
		}
		.class2{
			color:#00ff00
		}
		#ID1{
			color:#aaccff
		}
		#ID2{
			color:#ffccaa
		}
		a:link{
			color:##00ffcc
		}
		a:visited{
			color: #ffaa00;
		}
		a:hover{
			color: #ff00aa;
		}
		</style>
		</head>
	<body>
		<p>这是第一段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
		<p id="ID1">这是ID1的段落</p>
		<p id="ID2" class="class2">这是ID2的段落</p>
		<a href="http://www.jxatei.net/">江西应用工程职业学院</a>
	</body>
</html>

4.2.3 CSS选择器声明

4.2.3.1 集体声明

多个选择器可以共享一组属性声明。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 css样式基础</title>
		<style>
		p,h1{
			/*集体声明*/
			color:#acacaa;
		}
		.class1{
			color:#ff0000;
		}
		.class2{
			color:#00ff00;
		}
		#ID1{
			color:#aaccff;
		}
		#ID2{
			color:#ffccaa;
		}
		a:link{
			color:##00ffcc;
		}
		a:visited{
			color: #ffaa00;
		}
		a:hover{
			color: #ff00aa;
		}
		</style>
		</head>
	<body>
		<p>这是第一段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
		<p id="ID1">这是ID1的段落</p>
		<p id="ID2" class="class2">这是ID2的段落</p>
		<a href="http://www.jxatei.net/">江西应用工程职业学院</a>
	</body>
</html>

4.2.3.2 全局声明

通配符`*`选择器可以应用于所有元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 css样式基础</title>
		<style>
		*{/*全局声明*/
			font-family: fangsong;
		}
		a,h1{
			/*集体声明*/
			color:#acacaa;
		}
		.class1{
			color:#ff0000;
		}
		.class2{
			color:#00ff00;
		}
		#ID1{
			color:#aaccff;
		}
		#ID2{
			color:#ffccaa;
		}
		a:link{
			color:##00ffcc;
		}
		a:visited{
			color: #ffaa00;
		}
		a:hover{
			color: #ff00aa;
		}
		</style>
		</head>
	<body>
		<p>这是第一段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
		<p id="ID1">这是ID1的段落</p>
		<p id="ID2" class="class2">这是ID2的段落</p>
		<a href="http://www.jxatei.net/">江西应用工程职业学院</a>
	</body>
</html>

4.2.3.3 派生选择器

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

4.3 CSS引入方式

4.3.1 内联样式表

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

4.3.1.1 基本语法

`style="property:value;"`。

4.3.1.2 语法说明

直接在HTML元素中定义样式。

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

4.3.2 内部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 css样式基础</title>
		<style>
		*{/*全局声明*/
			font-family: fangsong;
		}
		a,h1{
			/*集体声明*/
			color:#acacaa;
		}
		.class1{
			color:#ff0000;
		}
		.class2{
			color:#00ff00;
		}
		#ID1{
			color:#aaccff;
		}
		#ID2{
			color:#ffccaa;
		}
		a:link{
			color:##00ffcc;
		}
		a:visited{
			color: #ffaa00;
		}
		a:hover{
			color: #ff00aa;
		}
		</style>
		</head>
	<body>
		<h1>第四章 css样式基础</h1>
		<p style="font-size: 70px;">这是第一段的内容</p>
		<p>这是第二段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
		<p id="ID1">这是ID1的段落</p>
		<p id="ID2" class="class2">这是ID2的段落</p>
		<a href="http://www.jxatei.net/">江西应用工程职业学院</a>
	</body>
</html>

4.3.2.1 基本语法

`<style> ... </style>`。

*{/*全局声明*/
			font-family: fangsong;
		}
		a,h1{
			/*集体声明*/
			color:#acacaa;
		}
		.class1{
			color:#ff0000;
		}
		.class2{
			color:#00ff00;
		}
		#ID1{
			color:#aaccff;
		}
		#ID2{
			color:#ffccaa;
		}
		a:link{
			color:##00ffcc;
		}
		a:visited{
			color: #ffaa00;
		}
		a:hover{
			color: #ff00aa;
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第四章 css样式基础</title>
		<link rel="stylesheet" href="css/new_file.css" type="text/css"/>
		</head>
	<body>
		<h1>第四章 css样式基础</h1>
		<p style="font-size: 70px;">这是第一段的内容</p>
		<p>这是第二段的内容</p>
		<p class="class1">这是class1的段落</p>
		<p class="class2">这是class2的段落</p>
		<p id="ID1">这是ID1的段落</p>
		<p id="ID2" class="class2">这是ID2的段落</p>
		<a href="http://www.jxatei.net/">江西应用工程职业学院</a>
	</body>
</html>

4.3.2.2 语法说明

在文档的头部定义样式。

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

4.3.3 外部样式表

4.3.3.1 链接外部样式表

使用`<link>`标签。

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

4.3.3.2 导入外部样式表

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

4.4 CSS的属性单位

4.4.1 长度、百分比单位

4.4.1.1 相对类型

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

4.4.1.2 绝对类型

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

4.4.2 色彩单位

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

在计算机中，定义每种色彩的强度范围为0~255。如`#FF0000`。

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>继承关系演示</title>
		<style>
		h1{
			color: blue;
		}
		em{
			color: #ff0000;
		}
		</style>
	</head>
	<body>
		<h1>学习<em>web开发</em>教程</h1>
	</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>这是第一行</p>
		<p class="red">这是第二行</p>
		<p id="line3" class="red">这是第三行</p>
		<p style="color: orange;">这是第四行</p>
		<p class="purple red" >这是第五行</p>
	</body>
</html>

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

如`rgb(255, 0, 0)`。

4.5 CSS继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。
CSS继承允许子元素继承父元素的某些样式属性。
层叠是指当多个样式应用于同一个元素时，CSS会根据一定的规则决定哪个样式生效。

4.6 元素类型

4.6.1 块级元素

如`div`、`p`，默认独占一行。

4.6.2 行级元素

如`span`、`a`，与其他行级元素在同一行。

4.6.3 列表项元素

如`li`，通常用于定义列表中的项。

4.6.4 隐藏元素

通过CSS设置`display:none`或`visibility:hidden`来隐藏元素。

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/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">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="tl">来源:开平碉楼</p>
		</div>
	</body>
</html>