CSS - 样式基本关键字样式关键字all关键字

45 阅读 0 评论 30 点赞

我是靠谱客的博主潇洒大米，最近开发中收集的这篇文章主要介绍CSS - 样式基本关键字样式关键字all关键字，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

因为接下来就要开始学习具体的样式了，但是在学习样式之前，还是要将几个可能出现的样式关键字说明一下。

样式关键字

先看一个例子：先对下面的例子做一个简单的说明，首先可以查看文章确定下面的属性值的可继承性。下面例子中的可继承和不可继承的属性用来进行测试的，对于自定义的知识简单的将不同div展示出来。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            body {
                margin: 0px;
                background: rgba(220,229,239,0.9);
            }

            .parent {
                /*可继承*/
                font-size: 20px;
                font-family: "Comic Sans MS";

                /*不可继承*/
                width: 200px;
                height: 200px;
                background-color: gray;
                border: 1px solid red;
            }

            .initial {
                /*可继承*/
                font-size: initial;
                font-family: initial;

                /*不可继承*/
                width: initial;
                height: initial;
                background-color: initial;
                border: initial;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 250px;
            }

            .inherit {
               /*可继承*/
                font-size: inherit;
                font-family: inherit;

                /*不可继承*/
                width: inherit;
                height: inherit;
                background-color: inherit;
                border: inherit;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 0px;
            }

            .unset {
               /*可继承*/
                font-size: unset;
                font-family: unset;

                /*不可继承*/
                width: unset;
                height: unset;
                background-color: unset;
                border: unset;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 400px;
            }

            .revert {
               /*可继承*/
                font-size: revert;
                font-family: revert;

                /*不可继承*/
                width: revert;
                height: revert;
                background-color: revert;
                border: revert;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 550px;
            }
        </style>
    </head>  
    <body>  
        <div class="parent">
            <div>
                normal child text
            </div>
            <div class="initial">
                initial text
            </div>

            <div class="inherit">
                inherit text
            </div>

            <div class="unset">
                unset text
            </div>

            <div class="revert">
                revert text
            </div>
        </div>
    </body>  
</html>

initial

initial 关键字用于设置 CSS 属性为它的默认值（然后我们看到的就是当前浏览器的默认样式），可作用于任何 CSS 样式。
（IE 不支持该关键字）。

我们可以看到当前initial text的文字大小没有20px。

inherit

inherit 关键字指定一个属性应从父元素继承它的值。（IE7-不支持）

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。

每一个 CSS 属性都有一个特性就是，这个属性必然是默认继承的 (inherited: Yes) 或者是默认不继承的 (inherited: no)其中之一，我们可以在 MDN 上通过这个索引查找或者查看文章，判断一个属性的是否继承特性。

对于可继承的，我们不进行操作，也会应用到子元素中，但是如果默认不继承的时候，我们可以通过inherit显示继承。
上面的例子中，我们可以看到inherit text部分与parent的样式相同。

unset

unset 关键字我们可以简单理解为不设置。其实，它是关键字 initial 和 inherit 的组合。
如果该属性是默认继承属性，该值等同于 inherit
如果该属性是非继承属性，该值等同于 initial

兼容性如下：

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0-13.0	2.0-26.0	4.0-40.0	6.0-9.0	15.0-27.0	6.0-9.0	2.1-4.4.4	18.0-39.0
6.0-13.0	27.0+	41.0+	6.0-9.0	28.0+	6.0-9.0	44.0+	40.0+

我们可以看到上面的例子中，unset text知识应用了font相关可继承的属性。

revert

表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于unset

兼容性: 只有safari9.1+和ios9.3+支持

因为chorme不支持，所以这个测试的没有效果。

all关键字

修改所有元素或其父元素的属性为初始值。all 属性用于重置所有属性，除了 unicode-bidi 和 direction。

值	描述
initial	修改所有元素属性或父元素的值为其初始化值
inherit	修改所有元素属性或父元素的值为其父元素的值
unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

这个其实很好理解，现在我们将上面的例子改写成all的这种格式，如下：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            body {
                margin: 0px;
                background: rgba(220,229,239,0.9);
            }

            .parent {
                /*可继承*/
                font-size: 20px;
                font-family: "Comic Sans MS";

                /*不可继承*/
                width: 200px;
                height: 200px;
                background-color: gray;
                border: 1px solid red;
            }

            .initial {
                all: initial;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 250px;
            }

            .inherit {
                all: inherit;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 0px;
            }

            .unset {
                all: unset;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 400px;
            }

            .revert {
                all: revert;

                /*自定义*/
                position: absolute;
                top: 0px;
                right: 550px;
            }
        </style>
    </head>  
    <body>  
        <div class="parent">
            <div>
                normal child text
            </div>
            <div class="initial">
                initial text
            </div>

            <div class="inherit">
                inherit text
            </div>

            <div class="unset">
                unset text
            </div>

            <div class="revert">
                revert text
            </div>
        </div>
    </body>  
</html>