Summary of various cascading style examples in css

CSS (Cascading Style Sheets) is used to specify the presentation form of HTML documents. Everything has a sequence, everything has a seniority. Under normal circumstances, no differences can be seen, which is the so-called equality of all living beings. However, when conflicts and entanglements occur, it is obvious that it is impossible to achieve complete equivalence, and the identity differences will appear in order. Cascading is the process in which the browser stacks multiple style sources and ultimately determines the result. This article is going to talk about the specific role of CSS cascading styles.

First of all, you can learn free courses related to php Chinese website

1. Learn"Learn HTML+CSS at your fingertips"中的CSS cascading Tutorial

##css cascading style

1.

CSS style inheritance and cascading

Features:

tag selector will select all specified tags in the current page; tag The selector has no relation to the current tag hierarchy of the code and can be selected as long as it is on the current page.

id selection: You need to specify a tag to set the id value first (the id value cannot be repeated and is unique in the entire page).

Class selection: Give the label a class name and select the specified label through the class selector.

2.

Detailed explanation of CSS cascading mechanism

Cascading in cascading style sheets means that styles will be passed from one level to another in the document structure. Its function is to let the browser decide which source among many sources to apply style attributes to a certain tag.

Cascading is a powerful mechanism. Understanding cascades can help you write CSS in the most economical and maintainable way, and can help you create the ideal document look you want.

3.

Detailed explanation of CSS inheritance and cascading features

The first P does not use a selector, so the default display color of HTML (black) is used

The second P uses a class selector, so the color of the class selector (red) is preferred

The third P uses two selectors, ID and class. Due to the priority of the ID selector Higher than the class selector, so the color is displayed in blue

The fourth P uses an inline selector and an ID selector. Since the inline selector has a higher priority than the ID selector, the color is displayed in yellow

The fifth P uses two class selectors at the same time. When the browser interprets the web page, the color defined by the first class selector shall prevail, so the color is displayed as purple

The sixth one Personal P uses two ID selectors at the same time, but since the ID selector can only be used for one tag at the same time and is globally unique, the browser considers this to be illegal, and the color is displayed at its default value (black)

4.

Detailed description of CSS cascading style sheet

[attribute] Select elements with attribute attributes.

[attribute=value] Select elements with attribute attribute and attribute value equal to value.

[attribute~=value] Select an element that has an attribute attribute and the attribute value is a space-separated list of words, one of which is equal to value.

[attribute|=value] Selects the E element that has the att attribute and the attribute value is a string starting with val and separated by the connector "-".

[attibute^=value] Matches E elements that have attribute attributes and whose values ​​start with value

[attribute$=value] matches E elements that have attribute attributes and whose values ​​end with value

[attribute*=value] Matches E elements with attribute attributes and values ​​containing value

5.

Analyze the value of CSS style sheets, inheritance, cascading and attributes

CSS has properties that control basic formatting (such as font-size and color, etc.), properties that control layout (such as position and float, etc.), and also determines where visitors will change pages when printing. Print control elements. In addition, there are many other attributes.

The style sheet contains rules that define the appearance of the web page. Each rule has two main parts: selector (selection) and declaration block (declaration). Selectors determine which elements are affected, and declaration blocks consist of one or more attribute-value pairs that specify what should be done.

6.

CSS specificity, inheritance and cascading

The declaration marked !important is called an important declaration. It has no speciality, but it must be compared with the non-important declaration. Consider them separately.

Specifically: non-important statements are grouped into a group, and conflicts between them are resolved using specificity; important statements are grouped into a group, and conflicts between them are resolved internally; important statements always take precedence over non-important statements.

Related Questions and Answers

1. How can an element without a cascading context have a larger z-index than an element with a cascading context?

2. ios webview loads html files, no problem under 9.2, but horizontal layout cascading appears at the bottom under 8.1

[Related recommendations]

1. PHP Chinese website free video tutorial: "php.cn Dugu Jiujian (2) - css video tutorial"

2. PHP Chinese website related articles: CSS Let DIV Overlap Example Summary

The above is the detailed content of Summary of various cascading style examples in css. For more information, please follow other related articles on the PHP Chinese website!