第4章 css样式基础

冰影千雪

已于 2024-09-30 20:55:11 修改

阅读量568

点赞数 25

文章标签： css 前端

于 2024-09-30 15:21:47 首次发布

本文链接：https://blog.csdn.net/2301_80799126/article/details/142583604

版权

4.1 CSS概述

4.1.1.CSS的基本概念

页面样式文件，可以对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制

4.1.2传统HTML的缺点

4.1.2.1.维护困难

查找困难，修改困难，花费时间过多

4.1.2.2.标记不足

HTML标记不丰富，容易造成代码冗余

4.1.2.3.网页过“胖”

对各种的风格样式没有统一的管理

4.1.2.4.定位困难

查找样式过于麻烦，标签太多

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

使页面内容和表现分离，简化页面格式设计

4.1.3.2.增强了网页的表现力

4.1.3.3.使整个网站显示风格趋于统一，修改更方便

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

一般命名为css和style

4.1.4.2.样式文件的命名规则

一般和HTML文件取相同的名字，方便寻找

4.1.4.3.选择器的命名规则

1.做到见名知意，不能使用关键字

2.由小写字母和下划线组成，必须字母开头

4.1.4.4.CSS代码注释

格式：/* */

4.1.4.5.CSS代码注释

进行有效的代码缩进，使代码可读性变高

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

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

选择器：需要改变样式的HTML元素

声明：由一个或多个属性（关键字）与属性值（属性的范围、大小等）对组成

4.2.1.2.语法说明

4.2.2.CSS选择器类型

4.2.2.1.标记选择器（元素选择器）

直接使用HTML标记名称作为选择器，修改与标记名称所有与选择器同名的标记

4.2.2.2.class选择器

格式：.class{样式}

类选择器低于id选择器，但高于标记选择器

4.2.2.3.ID选择器

格式：#id{样式}

id选择器的优先级最高

4.2.2.4.伪类选择器

在a标签里使用

格式：a:伪类名{}

4.2.3.CSS选择器声明

4.2.3.1.集体声明

示例：h1,a,.class{}

可以给多种标签一起声明

4.2.3.2.全局声明

格式：*{}

给全文进行声明，使用*符号

4.2.3.3派生选择器（上下文选择器）

不建议

4.3 CSS引入方式

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

4.3.1.1.基本语法

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

4.3.1.2.语法说明

1.标记指HTML标记，如：p、h1....等标记

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

3.style属性的值可以包含多个声明，每一声明用；号隔开

4.标记自身定义的style样式优先于所有的样式定义（就近原则）

4.3.2.内部样式表

4.3.2.1.基本语法

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

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

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

</style>

4.3.2.2.语法说明

style标记是成对的标记，可以定义n个选择器，再声明其部分，

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

4.3.3.外部样式表

4.3.3.1.链接外部样式表

在head头标记中使用<link>标签

link标签：

1.引入css文件

2.参数rel指定文件的作用

3.参数href指定文件的路径

4.参数type指定文件的类型

基本语法：

4.3.3.2.导入外部样式表

基本语法：

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

根据设备的不同会相对的修改

4.4.1.2.绝对类型

根据设备的不同不会相对的修改

常用单位：

4.4.2.色彩单位

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

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

使用颜色的英文单词

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

不推荐

4.5.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>

图片展示：

层叠：多种样式冲突，优先级为：行内样式>id样式>class样式>标记样式，同级样式取最先设定的

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>层叠</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 元素类型

4.6.1.块级元素

display属性设置为block将显示块级元素

块级元素始终占据一行，div和body等元素都是块级元素

4.6.2.行级元素

display属性设置为inline将显示行级元素

行级元素没有固定的高度和宽度，也没有固定的形状，超链接、图像、范围（span）、表单等都是行级元素

4.6.3.列表项元素

list-item属性值表示列表项目，其实质上也是块状显示

4.6.4.隐藏元素

none属性设置完表示隐藏，该元素就不再显示

案例

代码演示：

htmlindex.html：页面结构文件

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

css文件夹：存放css文件，页面样式文件

/* 全局声明 */
*{
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
/* 正文标题格式（使用类选择器） */
.biaoti{
	font-family: "微软雅黑";
	text-align: center;
}
/* 正文所有内容格式 （使用id选择器）*/
#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%;
}
/* 结尾样式（使用id选择器） */
#t1{
	color: #333;
	text-align: right;
}

图片展示：