第四章 CSS样式基础

猫咪朵朵

已于 2024-09-26 23:01:24 修改

阅读量572

点赞数 23

文章标签： css 前端

于 2024-09-26 22:28:25 首次发布

本文链接：https://blog.csdn.net/2301_80634189/article/details/142509404

版权

4.1css概述

4.1.1css的基本概念

它是以HTML为基础，设置网页的外观显示样式，如字体，颜色，背景，及整体布局

4.1.2传统HTML的缺点

1:修改特殊标记格式困难

2：标记不丰富

3：体积大

4：位置调整困难

4.1.3css的特点和优势

1.字体容易编排

2.轻松控制页面布局

3.大多数浏览器使用

4.轻松实现图像转换功能

5.可以使用一个css文件控制整个网站风格

4.1.4css的编写规则

1.目录结构命名：一般为style或css

2.样式文件命名：style.css或css.css

3.选择器命名：所有选择器必须由小写英文字母或下划线组成，不能为纯数字

4.css代码注释：/*......*/

4.2 css基本语法

4.2.1css基本语法

css规则由两部分组成：Selector选择器和Declaration声明

1.基本语法：

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

4.2.2css选择器类型

1.标记选择器：直接选用HTML标记作为选择器

2.class选择器：给指定标签设置一个class属性和class值，找到对应标签添加css样式，使用选择器时，要用（.）进行表示

3.ID选择器：定义ID选择器时，要在id前面加一个“#”

4.伪类选择器：

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

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				color:#0000ff;
				font-size:30px;
			}
			.class1{
				color:#ff0000;
				font-size:40px
			}
			#ID1{
				color:#00ff00;
				font-size:20px
			}
			a:link{
							color: #ff0000;
							font-size: 50px;
		    }
			a:visited{
							color: #ffaa00;
							font-size: 50px;
		    }
			a:hover{
								color: #ff00aa;
								font-size: 50px;
			}
		</style>
	</head>
	<body>
		<p>第一段落内容</p>
		<p class="class1">第二段内容样式</p>
		<p id="ID1">第二段内容样式</p>
		<a href="">江西应用工程职业学院</a>
	</body>
</html>

示例结果

4.2.3css选择器声明

1.集体声明：h3,h4,h5,p|color:red;font-size:18px|

2:全局声明：

color:red

font-size:18px

}

3.派生选择器：

li strong{ font- style: italic; font- weight: normal;}
 strong { font- weight: bold;}
代码如下：
<p><stnong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<strong></p >< ol>
<li><strong>我是斜体字，这是因为 strong元素位于 li标记内<xtrong></ \lim
< li>我是正常的字体<d \lim
</ ol>

4.3css引入方式

css按其位置可以分为4种：内联样式表，内部样式表，链接外部样式表，导入外部样式表

4.3.1内联样式表

语法：<标记 style="属性1：属性值1；属性2：属性值2；....">修饰内容</标记>

说明：标记指HTML标记，标记自身定义的style样式先于其他样式

4.3.2内部样式表

语法：<style type="text.css">

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

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

</style>

4.3.3 外部样式表

1.链接外部样式表

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

rel="stylesheet":规定当前文档与被链接文档之间的关系

type="text.css":规定被链接文档的MIME类型

href="mystyle.css":规定被链接文档位置

2.导入外部样式表

语法：<style type="text.css">

@import url("css文件路径")；

/*此处还可以存放其它css文件样式*/

</style>

说明：@与import必须连续书写，不能有空格

4.4css的属性单位

4.4.1长度，百分比单位

1.相对类型：以属性的前一个属性的单位值为基础来完成目前的设置，如果没有，则参考浏览器默认字号

2.绝对类型：

注意：不管使用哪种单位，数值与单位之间不需要加空格

4.4.2色彩单位

定义色彩的方法：十六进制，色彩英文名称，rgb函数和rgba函数

1.十六进制：如#0000FF，#FF0000

2.颜色名称：

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

x,y,z分别表示红绿蓝，x,y,z∈[0,225],亦可使用百分比表示，对比rgba（x,y,z,a）中a是alpha通道设置透明度取值0-1

4.5css继承与层叠

css继承即是子标记会继承父标记的所有样式风格，并且可以父标记的基础上修改产生新样式

注意：不是所有的标记都会自动传给子元素，有的属性不会继承夫标记属性值

css的全称是“层叠样式表”，层叠特性即对同一内容设置多个不同类型样式产生冲突时的处理

优先级：行内样式>id样式>class样式>标记样式

示例代码

<!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>层叠</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）

块级元素的宽度为100%，而且后面隐藏时带有换行符，使块级元素始终占据一行，如：div,body。

2.行级元素（display:inline）

也叫内联元素，元素前后没有换行符，没有高度和宽度，没有固定的形。

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

实质上是块状显示，是一种特殊的块状类型，加了缩进和项目符号

4.隐藏元素（display:none）

none的属性值表示隐藏并取消盒模式，包含的内容不会被浏览器解析和显示，并不占用文档空间。

综合案例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开平楼</title>
		<link type="text/css" rel="stylesheet" href="css/z4.css">
	</head>
	<body>
		<div if="content">
		<h2 class="biaoti">开平碉楼申遗大事记</h2>
		<hr color="#D3B175" size="5"/>
		<img src="img/ing.jpg"/>
		<p class="txl">2000年，开平成立中遗小组</p>
		<p>2000年2月，从国务院信访局到开平挂市委常委职务的李玩同志在香港价团团拜会上耀坤，吴荣治等领首次提出将开平明楼中报为世界文化遗产。
		2000年10月30日，开平市成立“开干楼“申报世界文化遗产领导小组。领导小组下设室，分整治组、资料组、宣传组。
		</p>
		<p class="txl">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="txl">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="txl">2005年，中报名变更史</p>
		<p>2005年4月21日，由清华大学建筑学院与开平市中遗办合作开展的第二次全市性明查工作于国满完成。本次明楼普查从2005年3月16日开始，后时13个月。第二次明香查深入到会各村幢明楼进行登记，抽照，调查核实，搞2万多图片，米集到一些珍音的，鲜为人如的历史料
		2005年9月18日，联合国世界建产协调员乔拉先生，建筑规划师阿里先生永到开平，指导开半明中报世界文化遗产工作。
		2005年9月24日，初省人民政府主办，省史化行江门市人民政府，开市人民政府承办的广东省开平确楼中拉世界文化遗产动员大会森首物馆门前隆重华行。
		2005年11月，开平明楼中报世界文化遗产的项目名称由“开平明楼与民品“变为“开平福与村落"，极大地延了开平楼的发化内涵知史传值，更有利于中报世界文化遗产。
	    2006年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="txl">2007年,申遗成功</p>
		<p>2007年1月，开平明楼与村落中遗项目顺利通过国际古遗址(ICOMOS)委员会执会在巴察升的专家会议的评审。
		2007年6月20日，并平市赴新西兰，澳大利亚中道代表团一行30多人经转机后报
		2007年6月22日，中国政府代表团飞赴新西兰，出席世界道产委装会第3上届大会，为开与村落申助威
		2007年6月底，开平确楼与村落中遗项目顺利通过在新西兰召开的第31届世界建产大安决，正式到入《世界逢严名录》。
		</p>
		<p id="tl">来源：开平碉楼</p>
</div>
</body>
</html>

css文件代码：

*{
 width:1024px;
 margin-left:auto;
 margin-right:auto;
 }
/*-正文标题格式-*/
.biaoti{
 font-family:"微软雅黑";
 text-align:center;
 }
/*-正文所有内容样式-*/
#content{
 text-indent:2em;
 font-family:"微软雅黑";
 font-size:18px;
}
/*-小标题样式-*/
.txl{
 font-weight:bold;
 font-family:"黑体";
 font-size:24px;
 color:#8B4513;
 background-color:#D3B175;
line-height:200%; /*设置行高*/
}
/*-结尾样式-*/
#tl{
 color:#333;
 text-align:right;
 }