第四章 CSS样式基础

最新推荐文章于 2024-10-09 14:44:12 发布

Liuuu5

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量870

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/Liuuu5/article/details/142510261

版权

4.1 CSS概述

4.1.1.CSS的基本概念

‌CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言‌，它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

4.1.2传统HTML的缺点

4.1.2.1.维护困难

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

4.1.2.2.标记不足

HTML本身的标记十分的少，很多标记都是为我那个也内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。

4.1.2.3.网页过“胖”

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

4.1.2.4.定位困难

在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的<table>标记同样也导致页面的复杂和后期维护的困难。

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

将样式和结构分开，使得网页结构更清晰，易于维护和管理。

4.1.3.2.增强了网页的表现力

可以通过CSS控制页面加载速度和渲染效率，提升用户体验。

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

使用CSS可以轻松实现对网页内容的可访问性和无障碍体验。

4.1.4.CSS的编写规则

CSS语法规则由选择器和声明块组成，选择器用于选择要应用样式的元素，声明块包含一个或多个属性值对。

4.1.4.1.选择器的命名规则

4.1.4.2.CSS代码注释

CSS注释以/* */的形式包裹注释内容，用于在样式表中添加注释说明，提高代码的可读性和可维护性。

4.2 CSS语法基础

4.2.1.CSS基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。

selector {declaration1; declaration2; ... declarationN }

属性（property）是样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

4.2.2.CSS选择器类型

CSS选择器根据选择元素的不同方式分为元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。不同的选择器适用于不同的场景，可以精确地选择需要修改样式的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			p{
				color:#0000ff;
				font-size:30px;
			}
			/*类选择器*/
			.class1{
				color:#ffff00;
				font-size:30px;
			}
			.class2{
				color:#ff3852;
				font-size:30px;
			}
			/*Id选择器*/
			#ID1{
				color:#859d38;
				font-size:30px;
			}
			#ID2{
				color:#00ff00;
				font-size:30px;
			}
			/*伪类选择器*/
			a:link{
				color:#00bd83;
				font-size:30px;
			}
			a:visited{
				color:#003800;
				font-size:30px;
			}
			a:hover{
				color:#7ff;
				font-size:30px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<!--标记选择器-->
		<p>这里是一个标签</p>
		<p>这里是第二个标签</p>
		<!--类选择器-->
		<p class="class1">这里是class1段落中的内容</p>
		<p class="class1">这里是class1段落中的内容</p>
		<p class="class2">这里是class2段落中的内容</p>
		<!--Id选择器-->
		<p id="ID1">这里是ID1中内容</p>
		<p id="ID2">这里是ID中内容</p>
		<!--伪类选择器-->
		<a href="http://www.jxatei.net">css</a>
	</body>
</html>

结果：

4.2.3.CSS选择器声明

	/*全局声明*/
			font-family:fangsong;
			
			/*集体声明*/
			p,h1{
				color:#1fc;
				font-weight: bold;
			}

4.3 CSS引入方式

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

内联样式通过在HTML标签的style属性中直接定义样式，适用于单个元素的特定样式设置。

<p style="color: red; font-size: 16px;">这是一个红色字体的段落。</p>

4.3.3.外部样式表

4.3.3.1.链接外部样式表

外部样式表将样式规则写在一个单独的CSS文件中，并通过<link>标签引入到HTML文档中，适用于整个网站的样式共享和统一管理。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

4.3.3.2.导入外部样式表

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

4.4 CSS的属性单位

4.4.1.长度、百分比单位

CSS属性中，长度单位通常用于控制元素的尺寸、位置、行高等。常用的单位包括像素(px)、em、百分比(%)、视口宽度(vw)、视口高度(vh)等。

像素(px)：绝对单位，像素point，是屏幕上的一个点。
em：相对单位，相对于当前对象内文本的字体尺寸，如果用于设置字体大小，则相对于父元素的字体大小。
百分比(%)：相对单位，相对于包含它的元素的相应属性。
视口宽度(vw)：相对单位，1vw等于视口宽度的1%。
视口高度(vh)：相对单位，1vh等于视口高度的1%。

示例代码：

div {
  width: 100px; /* 像素单位 */
  height: 2em; /* em单位 */
  font-size: 16px; /* 父元素字体大小 */
  padding: 5%; /* 百分比单位 */
  margin: 1vw; /* 视口宽度单位 */
  border-radius: 10vh; /* 视口高度单位 */
}

4.4.2.色彩单位

CSS中表示颜色的属性是color，颜色可以使用以下几种方式指定：

预定义的颜色名称：如red、blue、green等。
十六进制颜色代码：如#FF0000表示红色。
RGB颜色：如rgb(255, 0, 0)也表示红色。
RGBA颜色：如rgba(255, 0, 0, 1)，最后一个值表示不透明度。
HSL颜色：如hsl(0, 100%, 50%)，分别表示色相、饱和度和亮度。
HSLA颜色：如hsla(0, 100%, 50%, 1)，最后一个值表示不透明度

示例代码：

p {
  color: #ff0000; /* 十六进制颜色 */
}
 
p {
  color: rgb(255, 0, 0); /* RGB颜色 */
}
 
p {
  color: rgba(255, 0, 0, 1); /* RGBA颜色 */
}
 
p {
  color: hsl(0, 100%, 50%); /* HSL颜色 */
}
 
p {
  color: hsla(0, 100%, 50%, 1); /* HSLA颜色 */
}
 
p {
  color: red; /* 预定义颜色名称 */
}

4.5.CSS继承与层叠

CSS的继承
CSS的继承性指的是在文档树中，子元素会继承父元素的某些样式属性。这种机制可以减少代码的冗余，并使得样式表更加简洁和易于维护。

需要注意的是，并非所有CSS属性都会被子元素继承。一些与文本样式相关的属性（如color、font-family、font-size等）默认具有继承性，而一些与布局和定位相关的属性（如margin、padding、border等）则不具有继承性。

CSS的层叠

CSS的层叠性指的是当同一元素上应用多个样式规则时，浏览器会根据一系列优先级规则来决定哪条规则最终生效。这种机制使得网页设计更加灵活和高效，因为它允许我们定义多个样式规则，并通过优先级规则来解决潜在的冲突。

4.6 元素类型

4.6.1.块级元素

块级元素‌（如 <div>, <p>, <h1>-<h6>, <ul>, <ol>等）默认会独占一行，可以设置宽度、高度、padding和margin等属性。块级元素内部可以包含其他块级元素和行内元素。

特点：
- 同一个块级元素，只能一行一个，自带换行
- 块级元素默认是没有高度的，是依靠内容来支撑，宽度默认占据父级元素的100%宽度。可以通过css样式属性设置宽度与高度
- 块级元素是完整的边距的

4.6.2.行级元素

特点：

同一个行内块级元素，可以一行多个，直到当前一行满行就会换行到第二行显示
行内块级元素默认是没有宽度与高度的，是依靠内容来支撑，但是可以通过css样式属性设置宽度与高度
行内块级元素是完整的边距的

4.6.3.列表项元素

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

4.6.4.隐藏元素

特点：

用户不可见，隐藏的内容不会占用网页空间，也就是没有宽高
除了上面这个，还有 head，title，mate等元素。
在后面的css学习中，我们会学习到1个display属性，这个属性可以改变元素的显示模式。
案例一：

<!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">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>

/*全局声明*/
*{
	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;
}