Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the all attribute of CSS3 is, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

I. compatibility

Some CSS articles, or CSS documents, compatibility and so on are put at the end.

It's not a shady thing. Come on, light the bayonet at the beginning.

A simple understanding of the all property of CSS3

Compatibility is OK, except IE does not support, other browsers are basically green, at present, entertain yourself, intranet projects and so on can be used.

What is the use of all

The all attribute is actually an acronym for all CSS attributes, indicating what all CSS properties are like, but excluding the unicode-bidi and direction CSS attributes.

Why is there this CSS attribute?

We may know that some CSS attribute values are available to virtually all CSS properties, such as inheriting inherit!

When we CSS reset the input box, is there a code like this (it may actually be a specific value, the effect is similar):

Input, textarea {

Color: inherit

Font-size: inherit

Font-family: inherit

Because this type of input control has its own built-in size and font, it needs to be reset.

At this point, you will find that these attribute values are all inherit, if only you could merge!

Yo, yo, yo, oh, oh, oh

Input, textarea {

All: inherit

Wow, three-in-one, a sudden feeling of spring breeze. However, this is just a demonstration function, and it won't actually be used that way, because all:inherit will make the background color and everything inherit from the parent. I'm sure that's not what you want to see.

III. Grammar and differences

The syntax is as follows:

All: initial

All: inherit

All: unset

/ * CSS4 feature, ignore it * /

All: revert

Supports three CSS generic attribute values, initial, inherit, unset. What do these three attribute values mean?

You can click here: CSS3 all property demo demo (http://www.zhangxinxu.com/study/201603/css3-all.html)

The default HTML and CSS look like this, a traditional tag content with a title and a list:

Title

P-variable text

Ordered list 1

Ordered list 2

Ordered list 3

Text field

Article {

Background-color: # f0f3f9

Color: green

Article > textarea {

Border: 1px solid # 34538b

Background-color: # ffffe0

Color: red

In this golden age, as you can see:

A simple understanding of the all property of CSS3

Color, spacing, and text field status are all displayed as we think.

Now, click the drop-down of demo and select the corresponding all attribute value to achieve the following CSS effect:

.initial > * {

All: initial

.roomit > * {

All: inherit

.unset > * {

All: unset

Results:

Initial

A simple understanding of the all property of CSS3

Initial means the initial value, that is, all the first-level child elements under the article element, except unicode-bidi and direction, use the initial value for CSS.

For example

The built-in display:block in the element browser says goodbye directly and becomes an inline element, so it is displayed on one line:

A simple understanding of the all property of CSS3

Font-size also uses the size set by the browser software itself to change the 16px color color to the black color of the browser software itself. For example, change the font size in the browser settings to become large:

A simple understanding of the all property of CSS3

You will see that the text displayed has also become larger:

A simple understanding of the all property of CSS3

Because we only set the initial for the adjacent level child elements, the element is not affected, but because the default of the element is dotting when the parent element is unknown, so here from numbers to dots, list-style-type and list-style-position have changed.

Inherit

A simple understanding of the all property of CSS3

Inherit means inheritance, that is, all the adjacent child elements under the article element, except unicode-bidi and direction, CSS inherits the element's CSS.

Therefore,

The element is still block, the background-color is the background color of the element, and the color color is the same, green (the red of the text field is killed).

Not only the above CSS,padding/margin are also inherited, but the default is 0, so we can't see it. Let's modify it slightly, for example, give the element a margin value:

A simple understanding of the all property of CSS3

As a result, those child elements blossomed:

Unset

A simple understanding of the all property of CSS3

Unset means to cancel the setting, that is, all the neighboring child elements under the article element, except unicode-bidi and direction, do not want to kill all the CSS, so what do you use? The property of the unset value is as follows, which is ignored by the current element browser or user-set CSS, then if it is a CSS with an inherited attribute, such as color, the inherited value is used, and if it is a CSS attribute that does not inherit a property, such as background-color, the initial value is used.

Therefore,

The display attribute value of the element uses the initial value of initial, so it becomes the inline element, which is displayed in the same line; and the color color of these elements uses the inherited value of inherit, so it is green, and the background color background-color does not have inheritance properties, so it uses the initial value of initial, that is, transparent transparency, so it is the effect shown in the screenshot.

Thank you for reading this article carefully. I hope the article "what are the all attributes of CSS3" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.