前段入门之CSS二（CSS引入方式、CSS声明权重及优先性）

最新推荐文章于 2024-09-14 22:46:39 发布

西红柿爱喝水

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量346

点赞数 1

分类专栏：前端学习文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_42800926/article/details/119218331

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前段入门之CSS二

前段入门之CSS二

1 如何引入CSS？

1.1 行间样式

在HTML元素开始标签中添加 style属性，属性值由分号隔开的CSS声明构成。

<h1 style=color:red;text-align:center;>中间红色</h1>
<h2 style=color:green;text-align:center;>中间绿色</h2>

在这里插入图片描述

1.2 页面样式

在HTML文档 <head>元素中加入 <style>元素，元素内容为CSS规则。

<head>
    <style type="text/css">
        h1 {
            text-align: center;
            color:red;
        }
        h2{
            text-align:center;
            color:green;
        }
    </style>
</head>

<h1 >中间红色</h1>
<h2 >中间绿色</h2>

在这里插入图片描述

1.3 外部样式

重新创建一个CSS文件，并在HTML文档 <head>元素中加入<link>元素。

/* waibu.css文件内容 */
h1 {
    text-align: center;
    color:red;
}
h2{
    text-align:center;
    color:green;
}

<head>
    <link rel="stylesheet" type="text/css" href="waibu.css">
</head>

<h1 >中间红色</h1>
<h2 >中间绿色</h2>

在这里插入图片描述

2 CSS声明权重及优先性

当CSS声明有冲突时，如下面这个例子：

p{
    background-color: blue!important;
}
#idDiv p{
background-color: red;
}
#idDiv .classP{
background-color: yellow;
}
.classDiv .classP{
background-color: green;
}

<div class="classDiv" id="idDiv">
	<p class="classP" id="idP">
	123456789
	</p>
</div>

依次操作	渲染结果
无
`!important`
交换`red`与`yellow`
`red`、`yellow`

元素选择器p与三个后代选择器#idDiv p 、#idDiv .classP和.classDiv .classP同时对<p>元素的background-color的属性进行了声明。这时，浏览器内核会根据CSS声明的权重值进行渲染。

CSS声明	选择器		权重(256进制)
important声明	任意		infinity
行间样式	无		1000
页面样式或外部样式
	单个选择器	id选择器	100
		属性选择器	10
		类选择器	10
		伪类选择器	10
		元素选择器	1
		伪元素选择器	1
		通用选择器	0
	复合选择器		单个选择器权重之和

根据上表，在这个例子中：

•p的权重为（ $i m p o r t a n t$ 声明）：
$i n f i n i t y$
•#idDiv p的权重为（id选择器+属性选择器)：
$100 + 10 = 110$
#idDiv .classP的权重为（id选择器+类别选择器)：
$100 + 10 = 110$
.classDiv .classP的权重为（类别选择器+类别选择器)：
$10 + 10 = 20$
所以声明权重值background-color:blue>background-color:red=background-color:yellow>background-color:green