Examples illustrate the inheritance of CSS and its application

Source: Internet
Author: User
Tags inheritance

The inheritance of CSS means that the label inside the package will have the style property of the external label. The most typical application of the inheritance feature is generally applied to the style presets of the entire web page. You need to specify the part of other styles in individual elements. This feature provides better space for web designers. At the same time, there are also many inheritance rules, which are easy to confuse during application. donger will talk to you about these applications today.
Body
CSS is short for Cascading Style Sheet. Its specifications represent a unique stage of development in the history of the Internet. For those who are engaged in creating web pages, I have never heard of CSS, because it is often used in the process of creating web pages.
CSS allows us to set a richer and easier-to-modify appearance for documents, which can reduce the workload of web designers. Here we want to discuss the inheritance and particularity of CSS with our friends in depth.
1. Inheritance
One of the main features of CSS is inheritance, which depends on the relationship between ancestor and descendant. Inheritance is a mechanism that allows a style to be applied not only to a specific element, but also to its descendants. For example, the color value defined by a BODY is also applied to the text of a paragraph. The following is an example:
Style definition: body {color: red ;}
Application example code:
CSS cascade and inheritance
Application example:
The application result of this code section is: "CSS cascade and inheritance in-depth discussion" is red, and "Cascade and inheritance" is bold because strong elements are applied. This is in line with the intent of the producer and also the reason why inheritance is part of CSS.
II. Limitations of CSS inheritance
In CSS, inheritance is a very natural behavior. We don't even need to consider whether we can do this, but inheritance also has its limitations.
First, some attributes cannot be inherited. There is no reason for this, just because it is set in this way. For example, we all know that the border attribute is used to set the border of an element, so it has no inheritance. As shown in the following figure, if the border property is inherited, the document looks strange unless you take other measures to disable the border inheritance property.

As shown in the preceding figure, most border attributes, such as Padding, Margin, background, and border attributes, cannot be inherited.
III. Inheritance errors
Sometimes inheritance may cause some errors, such as the following CSS definition:
Body {color: blue}
In some browsers, this definition turns the text except the table into blue. Technically, this is incorrect, but it does exist. Therefore, we often need to use some techniques to get started.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.