我是靠谱客的博主 潇洒大米,这篇文章主要介绍CSS - 样式基本关键字样式关键字all关键字,现在分享给大家,希望可以做个参考。

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

样式关键字

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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

兼容性如下:

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-13.02.0-26.04.0-40.06.0-9.015.0-27.06.0-9.02.1-4.4.418.0-39.0
27.0+41.0+28.0+44.0+40.0+

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


revert

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

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

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


all关键字

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

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

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>


上面的例子我也加上了revert,尽管没有起作用,但是通过这个例子和上面的例子对比,我发现revert text的格式出现了变化。

      

如图,原来font-family对于revert支持。当然这只是我测试的结果。

最后

以上就是潇洒大米最近收集整理的关于CSS - 样式基本关键字样式关键字all关键字的全部内容,更多相关CSS内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(73)

评论列表共有 0 条评论

立即
投稿
返回
顶部