css的特性有哪些？css三个特性的分析（继承、优先级和层叠）-tutorial css-php.cn

css的特性有哪些？css三个特性的分析（继承、优先级和层叠）

不言

Lepaskan： 2018-07-27 16:50:05

asal

2798 orang telah melayarinya

css特性是什么？css的三个特性分别是：继承、优先级和层叠。那么。下面我们就来具体的看看css中继承、优先级和层叠三个特性的介绍。

继承

继承即子类元素继承父类的样式，比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color。简单的就不演示了，强调一下font-size这个东东(虽然也有继承，但是标签不同继承的效果也不一样)，比如下面的代码：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .fonts {
            font-size: 20px;
        }
    </style></head><body>
    <p class="fonts">
        <p id="p">我的字体大小为20px</p>
        <h1 id="h1">我的字体大小为40px</h1>
    </p></body></html>

Salin selepas log masuk

运行结果：

2345截图20180727163439.png

我给div和h1标签的父元素p设一个font-size为20px，p没有问题，继承了p的20px，但h1却变为了40px，我们从下面的JS代码可以获取。

为什么h1会是40px呢？因为h1的默认样式为2em（32px）,如下图

，

并且h1默认的font-size为200%，因为p设了20px，所以通过继承h1的最终font-size为20*2=40px，要想使h1的标签字体大小也等于父标签p，只需设置h1 {font-size:100%;},如下图所示：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .fonts {
            font-size: 20px;
        }
        h1 {
            font-size: 100%;
        }
    </style></head><body>
    <p class="fonts">
        <p id="p">我的字体大小为20px</p>
        <h1 id="h1">我的字体大小为20px</h1>
    </p></body></html>

Salin selepas log masuk