1、CSS权重及其引入方式

最新推荐文章于 2022-02-08 13:30:28 发布

Slueia

最新推荐文章于 2022-02-08 13:30:28 发布

阅读量238

点赞数

分类专栏： [面经总结]html/css

本文链接：https://blog.csdn.net/Slueia/article/details/109698061

版权

[面经总结]html/css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

引入css(cascading style sheet 层叠样式表)的四种方法：

1 行间样式

 <div style="background: red;">内联样式</div>

2 内部样式表（内嵌样式）在head标签写style标签

<html>
    <head>
        <title>内部样式表</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                font-size: 12px;
            }
        </style>
    </head>
    <body></body>
</html>

3 外部css文件使用link标签

<html>
    <head>
        <title>外部样式表</title>
        <link rel="stylesheet" type="text/css" href="..."/>
    </head>
    <body></body>
</html>

4 导入样式

<style type = test/css>
@import url("外部样式表的名称");
</style>

CSS权重

从样式选择器看权重优先级

important > 内联样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

权重值计算如下：

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content a:link :[title]，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p ::before，权值为1。

Slueia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
1、CSS权重及其引入方式

引入css(cascading style sheet 层叠样式表)的四种方法：1 行间样式 <div style="background: red;">内联样式</div>2 内部样式表（内嵌样式）在head标签写style标签<html> <head> <title>内部样式表</title> <style> *{
复制链接

扫一扫