CSS三大特性

最新推荐文章于 2022-09-20 23:56:20 发布

UchihaTotoro

最新推荐文章于 2022-09-20 23:56:20 发布

阅读量140

点赞数 2

分类专栏： css笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/HelloBreaking/article/details/118862045

版权

css笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css三大特性

1、层叠性

存在相同样式冲突的样式属性，后面的样式属性值会覆盖掉前面的样式属性值（仅当是同一优先级的样式）。如果优先级不一样，优先级高的样式属性值会覆盖掉优先级低的样式属性值。详细见后面的优先级特性介绍。

实例：本实例中是同一优先级的元素选择器设置的相同样式，所以后面的样式属性值会覆盖前面的。
代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
        }
        p{
            color: hotpink;
        }
    </style>
</head>
<body>
    <p>这是层叠性测试</p>
</body>
</html>

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

2、继承性

什么是css的继承性？

定义：继承是指子孙元素会将自身没有设定的某些特定的属性值（这些属性值包括：**color、font-、text-、line- **），而其祖先元素又有这些属性值，那么子孙元素将会继承其祖先元素的这些属性值。

注意：

~~a标签的默认样式是不能被其子孙元素继承的。~~ a标签的默认样式是元素选择器的样式，所以会层叠掉继承过来的color 和 text-decoration属性。所以我找到的资料上错误的资料说法1 错误的资料说法2说的应该是错误的说法。正确的说法应该是：（a标签不会收继承性的影响而改变默认样式，a标签的默认样式依然可以被子孙元素继承 。）
a链接默认是元素选择器的样式，所以如果想消除a标签的默认样式，有两种方法：
- 运用css层叠性特性，直接重写这两个属性值
- 运用css优先级特性，通过css优先级样式（行内样式 | id选择器 | 选择器）来覆盖掉默认的属性值。
```
a{
	color: blue;
	text-decoration: underline
}
```
~~h标签的文字大小也是不能继承的~~ 错误的资料说法1 错误的资料说法2 正确的说法应该是： h标签的默认样式和a标签一样都是元素选择器设置的样式，所以h标签默认的字体大小样式是不会受继承影响的，且h标签的默认字体大小样式可以被其子孙元素继承。（其实按照规范，文字类标签如 h1~h6 、 p 等文字标签不建议里面嵌套别的标签特别不允许嵌套块级标签）

实例：
代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yeye{
            color: hotpink;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="yeye">
        <p>这是爷爷</p>
        <h2>这是爷爷说的话<span>测试h标签的文字大小是否可以继承</span></h2>
        <a href="">这是超链接 <span>小东西</span> </a>
        <div class="father">
            <p>这是父亲</p>
            <div class="son">
                <p>这是儿子</p>
            </div>
        </div>
    </div>
</body>
</html>

结果展示：
在这里插入图片描述
根据实例：我们排除掉错误的说法，顺便运用了css优先级的特性来解释继承当中的两个特列（h标签的字体大小、a标签的默认字体颜色和下划线属性）是不会受父级元素相同属性值继承的影响，因为继承的优先级权重为0。

行高的继承

1、font: 12px/24px 字体样式
24px 指的是：行高
2、font: 12px/1.5 这个1.5代表行高是当前元素大小font-size 的1.5倍
font：font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

如果 font 字体相关的属性的简写：

必须包含以下值：

<font-size>
<font-family>

可以选择性包含以下值：

<font-style>
<font-variant>
<font-weight>
<line-height>

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

注意：

font-style, font-variant 和 font-weight 必须在 font-size 之前
在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps，CSS3中,还可以是inherit属性值。

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

line-height 必须跟在 font-size 后面，由 “/” 分隔，例如 “16px/3”
font-family 必须最后指定

继承的好处：

可以简化代码。

3、优先级

当同一个元素指定多个选择器，就会有优先级的。当一个元素有多个选择器，或者不同的样式设置方式（比如：行内样式 |内联样式 |外联样式）设置的同一样式属性值，优先级高的样式属性值会覆盖掉优先级低的样式属性值，不冲突的样式属性值会保留起作用。

选择器	选择器权重
继承或者*	0,0,00
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的	无穷大

!important 加在样式属性的后面。

语法：

color: pink !important;
/* css属性: 属性值  !important */

实例：
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            text-align:center;
        }
        #box{
            width: 200px;
            height:200px;
            font-size: 14px;
            background-color: skyblue;
        }
        .content{
            width:300px;
            height:300px;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="box" class="content" style="background-color: hotpink">这是优先级测试用例</div>
</body>
</html>

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

结语：

css的三大特性非常的重要，一定要对css的三大特性非常了解，才能在css代码越来越多的情况下，不会自己懵逼。

本文参考：

bilibili pink老师的前段课程，真的很棒。黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程129集~135集
简书 CSS三大特性和显示模式
华为云 CSS(4)—三大特性(继承性，层叠性，优先级)
W3Cschool-font属性详解

UchihaTotoro

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性

css三大特性1、层叠性存在相同样式冲突的样式属性，后面的样式属性值会覆盖掉前面的属性样式。2、继承性子标签会继承父级标签的某些样式及属性值。主要是（text-, font-,line- 以及color属性）。目的：简化代码行高的继承1、font: 12px/24px 字体样式24px 指的是：行高2、font: 12px/1.5 这个1.5是当前元素大小font-size 的1.5倍3、优先级当同一个元素指定多个选择器，就会有优先级的。选择器选择器权重继
复制链接

扫一扫

专栏目录