css层叠样式表的简单使用

最新推荐文章于 2023-09-23 10:57:24 发布

布拉格W枫

最新推荐文章于 2023-09-23 10:57:24 发布

阅读量408

点赞数 1

文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_54129054/article/details/112777737

版权

网页的基本组成

html 网页结构
css 网页的外观
javascript 驱动网页的脚本
前面两篇文章已经分享了html，今天就来分享一下，我们前端另一个基本css。

1、css的引入方式

行内样式
相关代码

<p style="color:red;">

结果展示
在这里插入图片描述

内嵌样式
相关代码

<p class="red">样式内容写在style标签内</p>

<head>
<style>
.red{color:red;}
</style>
</head>

结果展示
在这里插入图片描述

外链样式：
建立css文件 style.css

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

利用下面这一行代码，将样式引入你想要使用的文件中。

<link rel="stylesheet" href="./style.css">

相关代码

<p id="myp">我要又大又红</p>

结果展示
在这里插入图片描述

导入
导入一般可以导入的位置有两个。第一个是 .css 文件中，第二个是 style 标签中
导入的相关语法如下
1、@import url('./xxx.css')
2、@import './xxx.css'

2、css层叠关系

当属性一致的时候
谁最终在后面，谁发挥作用，后面的覆盖前面的
行内样式的优先级最高（最靠近元素，最后面）
当属性不一致则相加
!important; 权限最高，声明最重要，不可以覆盖
相关代码

<!DOCTYPE html>
<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>

相关结果
在这里插入图片描述

3、css选择器

css组成：选择器 .big、属性名 color、属性值 red

.red{color:red;}

css选择器分为五种
1、通配符选择器 *
适用于页面中的任何元素

*{ color:red}

2、id 选择器 #
通过id做出选择，只对相应id的元素起作用

#myp {color:orange;}

3、class 选择器 .
通过class类名选择，只对相应类名的元素起作用

.name{ color :red;}

4、类型标签名
通过html标签选择，只对对应标签起作用

p {font-size:48px;}

相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css选择器</title>
		<style type="text/css">
			/* *通配符选择器，代表是页面中的任意元素*/
			*{color: red;}
			/* *用过标签名做选择器，选择到一个类型的元素*/
			p{color: green;}
			/* .+类名 代码的类选择*/
			.odd{background-color: #FFD700;}
			/* #+id名称 id选择器*/
			#myli{background-color: black;}
		</style>
	</head>
	<body>
		<h1>css选择器</h1>
		<p>选择到HTML元素，应用css样式</p>
		<ul>
			<li>包含选择器</li>
			<li id="myli">id选择器</li>
			<li>class选择器</li>
			<li class="odd">类型 标记选择器</li>
			<li>通配符选择器</li>
		</ul>
		<p>第二个可爱行</p>
	</body>
</html>

相关结果：
在这里插入图片描述
除了上述选择器之外还有一个选择器也很重要。
5、包含选择器
形式：选择器1 选择器2{}
选择器2必须是选择器1的后代

选择器1 尽量用class 或者id（缩小选择范围）
选择器通常不超过三层（规则可以打破）
相关代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>包含选择器</title>
		<style type="text/css">
			/*.gold li{background-color: gold;}
			/*选择的li标签是ul的后代*/
			/*ul li{background-color: gold;}*/
			li span{color: #FF0000;}
			/*尽量在包含选择器中，父辈用类名或者id*/
			/*一般选择器选择层不超过三层*/
			.gold span{background-color: gold;}
			
		</style>
	</head>
	<body>
		<h1>包含选择器</h1>
		<p>通常用来缩小选择的范围</p>
		<ul class="gold">
			<li>ul中的li1</li>
			<li>ul<span>中的</span>li2</li>
			<li>ul<span>中的</span>li2</li>
		</ul>
		<ol>
			<li>ul中的li3</li>
			<li>ul<span>中的</span>li2</li>
			<li>ul中的li1</li>
		</ol>
	</body>
</html>

结果展示
在这里插入图片描述

4、css选择器的优先级

1、相同选择器 css选择器越靠近元素优先级越高
2、不同选择器：
通配符选择器 * 权限大概是 0.5
id 选择器 # 权限大概是 100
class 选择器 . 权限大概是 10
类型标签名权限大概是 1
包含选择器两个选择器权限相加
所以优先级是id 选择器大于 class 选择器 .大于类型标签名大于通配符选择器
包含选择器的优先级要看它使用的是那些选择器。
相关代码

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

结果展示
在这里插入图片描述

5、css的调试

为了可以更直观的看出自己编写的代码是否有误，调试就格外重要。
1、首先我们要在浏览器运行我们的代码，然后按f12键或者点击鼠标右键点击检查，进入
下面这个页面。
在这里插入图片描述
2、点击style
3、点击computed

调试，可以在浏览器页面进行，不过它并不会改变源代码，真正修改还要在自己写的代码中。
今天的分享就到这里，希望大家有所收获。