Inherit usage analysis in CSS

This article mainly introduces the CSS in the use of Inherit tips summary, CSS, the use of inherited keywords is the basic knowledge of CSS primer learning, the need for friends can refer to the following

Ignoring the features of cascading style sheets is ignored. Most developers know the Inherit keyword, but there are several new CSS3 inheritance features you may not know ...
Property:inherit;

The Inherit keyword represents "use all values assigned to the parent element." If there is no explicit value definition in the parent element, the browser searches the DOM tree until the corresponding property is found. It will use the browser's default value if it cannot be found at the end, for example:

#myparent   {       margin:10px;       border:1px solid #000;   }   /* Use the same border as the parent */#myparent p   {       border:inherit;   }

In practice it is seldom necessary to use inherit. Many useful attributes are automatically inherited, such as font, font size, color, and so on.

Inheritis can be safely used. Although IE6 and IE7 do not support it, your design will not be destroyed because of this.
property:initial;

Oh, a new CSS3 keyword! Initial sets a property to its initial value-the default defined value of the browser, for example:

Body   {       font-size:0.5em;   }   /* Reset paragraphs to 1em */p   {       font-size:initial;   }

Is it useful? Maybe, after all, you can't make sure that all browsers have the same default values.

Supports reasonable--chrome,firefox,safari and opera 15 +. IE it does not take effect, and I am trying to think about what situation this would be a catastrophic issue.
Property:unset;

This is a slightly unusual one. When unset is used, it behaves as if an inheritable value exists. If it cannot find an inheritable value-for example, it is a non-inheritable property like Box-shadow-it behaves as if it inherits the browser's default value.

Then again, I can't think of much of the scene using unset, and there's little support for it.
All: [Inherit | initial | unset];

Finally, all is a property and not a value. You can specify inherit, initial, or unset to affect all properties, such as resetting all CSS properties to the browser default:

#mywidget   {       all:initial;   }

If you add a third-party control and want to avoid page-style conflicts, this could be an optional global CSS field.

Unfortunately, so far you can't rely on cross-browser strict consistency, however, it's still a useful feature.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!