CSS（层叠样式表）

最新推荐文章于 2024-09-14 15:26:51 发布

奶恩兔米球邱

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量336

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/qiu199812/article/details/112777460

版权

CSS是指层叠样式表 (Cascading Style Sheets)

优点：

使HTML专注于网页的内容，css专注于网页的表现
提供了丰富的格式化功能
可以针对各种可视化浏览器 (主要有显示器、打印机、PDA等)来设置不同的样式

CSS与浏览器
并不是所有的CSS的样式都被浏览器支持
不同的浏览器对CSS的实现有细微的不同，需要特别注意

1.css的引入方式

行内样式
行内样式，写在html标签的style属性值里面

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<p style="color:red">新年，我要红</p>	
	</body>
</html>

效果：
内嵌样式
样式内容写在style标签内
注意: style标记要指定type属性为text/css

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.big{
				font-size: 48px;
			}
		</style>
	</head>
	<body>
		<p class="big">新年，我要红</p>
	</body>
</html>

效果：
外链样式
将CSS写入单独的一个文件中，注意该文件的文件扩展名为.css
在HTML文档中使用< link >标记弓|入css文件
-link标记需要指定属性:rel (relationship)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<p id="myp">新年，我要红</p>
	</body>
</html>

style.css文件

#myp{
	font-size: 48px;
	color:red;
}

效果：
三种样式的优劣
行内样式使用范围当前的元素
内嵌样式使用范围为当前的html文件
外链样式，使用范围为引用他的html文件（复用性最高）
使用导入样式
使用@import指令可以将css文件中的css样式导入到不- 同的地方
导入式的结果和直接书写是同样的效果
导入式可以共享样式代码
可以在内嵌式里使用导入，也可在css文件中使用
导入样式的使用方法
@import ur( “sheet1.css” );
@import “sheet1.css” ;

2.css的优先级

有important 修饰符最高
css越靠近元素优先级越高（选择器一致）
style行内样式优先级高；同样的css，后面的会覆盖前面

<html>
	<head>
		<meta charset="utf-8">
		<title>css优先级</title>
		<link rel="stylesheet" href="./style02.css">
		<style>
			.red{color:red !important;}
			.red{
				font-size: 48px;
				color:gold;
				color:blue;
				}
		</style>
		</head>
	<body>
		<p class="red">北国风光，千里冰封，万里雪飘</p>
	</body>
</html>

style02.css文件

.red{
	color:green;
}

效果：
css调试
可通过css调试检查：

自己写的css样式是否与电脑计算后的样式一致
自己写的样式是否被覆盖掉

4.css选择器

包含选择器
通常用来缩小选择的范围

<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.gold li{background-color: gold;}
		/* ul li { background-color: gold;} */
		/* 选择的li标签是ul的后代 */
		/* ul li span{color: #FF0000;} */
		/* .gold li span{ color: #FF0000;} */
		/* 尽量在包含选择器中 父辈用类名，或者id */
		/* 一般选择层不超过3层 */
		.gold span{ color: #FF0000;}
	</style>
</head>
<body>
	<ul class="gold">
		<li>ul中的li1</li>
		<li>ul <span>中的</span>li2</li>
		<li>ul<span>中的</span>li3</li>
	</ul>
	<ol>
		<li>ol中的li3</li>
		<li>ol <span>中的</span>li2</li>
		<li>ol中的li1</li>
	</ol>
	<span>out span</span>
</body>
</html>

效果：
选择器1 选择器2{}
选择器2必须是选择器1的后代
选择器1 尽量用class 或者id（缩小选择范围）
选择器通常不超过三层（规则可以打破）
id选择器#
类型标记选择器
通配符选择器 *
class选择器 .

<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器</title>
		<style>
			/* *通配符选择器，代表的是页面中的任意元素 */
			* {color:red}
			/* 通过标签名作为选择器，选择到一个类型元素 */
			p {color:green}
			/* .+类名 代码的类选择 */
			.odd{ background-color: orange;}
			/* #+id名称 id选择器 */	
			#myli{ background-color: black;}
		</style>
	</head>
	<body>
		<h1>css选择器</h1>
		<p>选择到html元素</p>
		<ul>
			<li id="myli">包含选择器</li>
			<li class="odd">id选择器</li>
			<li>class 类选择器</li>
			<li class="odd">类型 标记选择器</li>
			<li>通配符选择器</li>
		</ul>
	</body>
</html>

效果：
选择器的优先级
通配符选择器 *（权限0.5）
类型标记选择器（权限1）
class选择器 .（权限10）
id选择器# （权限100）
包含选择器（权限相加）

<html>
	<head>
		<meta charset="utf-8">
		<title>选择器优先级</title>
		<style>
			 .parent #youp{ color: #0000FF;} /* 包含选择器 权限相加  100 + 10*/
			 .parent #youp{color:black;}
			 /* .parent .myp{color:orangered} */
			 #youp{ color:deeppink;} /* 100 */
			.myp{color:gold;} /* 10 */
			p{color:green} /* 1 */
			*{color:red;} /* .5 */
		</style>
	</head>
	<body>
		<div class="parent">
			<p class="myp" id="youp">你好我是一个p标签</p>
		</div>
		</body>
</html>