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

This article mainly explains "how to define the selection symbol group of CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to define the selection symbol group of CSS".

1. Syntax of CSS:

The definition of CSS consists of three parts:

The selector (selector), the properties (attribute) and the value of the attribute (value).

Syntax: selector {property: value} (selector {attribute: value})

Description:

Selectors can be in a variety of forms, usually the HTML tags you want to define the style, such as BODY, P, TABLE... You can define its properties and values in this way, which are separated by colons

Example: body {color: black}, the effect of this example is to make the text on the page black.

If the value of an attribute is composed of multiple words, you must put quotation marks on the value, for example, the name of the font is often a combination of several words:

Example: P {font-family: "sans serif"} (defines the paragraph font as sans serif)

If you need to specify more than one attribute for a selector, we use a semicolon to separate all attributes from values:

Example: P {text-align: center; color: red} (paragraphs are centered; and the text in paragraphs is red)

two。 Selector group

You can combine selectors with the same attributes and values and separate selectors with commas to reduce repetitive style definitions:

H2, h3, h4, h5, h6, h7 {color: green} (this group includes all title elements, each of which has green text)

P, table {font-size: 9pt} (the text in paragraphs and tables is size 9)

The effect is exactly the same as:

P {font-size: 9pt}

Table {font-size: 9pt}

3. Class selector

With the class selector, you can classify the same elements and define different styles. When defining the class selector, add a period to the name of the custom class. If you want two different paragraphs, one aligned to the right and one centered, you can define two classes first:

P.right {text-align: right}

P.center {text-align: center}

Then use it in different paragraphs, just add the class parameter you defined in the HTML tag:

This paragraph is aligned to the right

This paragraph is arranged in the middle

There is also a use for class selectors to omit the HTML tag name in the selector so that several different elements can be defined in the same style:

. Center {text-align: center} (definition. The class selector of center is text centered)

Such a class can be applied to any element. Let's classify both the H2 element (heading 1) and the p element (paragraph) as the "center" class, which causes the style of both elements to follow the class selector ". Center":

The title is arranged in the middle

This paragraph is also arranged in the middle.

Note: this kind of class selector omitting the HTML tag is the most commonly used CSS method after we use this method, we can easily apply the pre-defined class style to any element.

4. ID selector

In the HTML page, the ID parameter specifies a single element, and the ID selector is used to define a separate style for this single element.

The application of the ID selector is similar to the class selector, as long as you replace CLASS with ID. Replace the class in the above example with ID:

Align this paragraph to the right

To define the ID selector, precede the ID name with a "#" sign. Like class selectors, there are two ways to define the properties of an ID selector. In the following example, the ID attribute will match all elements of id= "intro":

# intro

{

Font-size:110%

Font-weight:bold

Color:#0000ff

Background-color:transparent

} (font size is 110% of the default size; bold; blue; background color transparent)

In the following example, the ID attribute matches only the paragraph elements of the id= "intro":

P#intro

{

Font-size:110%

Font-weight:bold

Color:#0000ff

Background-color:transparent

}

Note: the ID selector is so limited that you can only define the style of an element individually, and you can only use it in special cases.

5. Include selector

A stylesheet that contains relational definitions for an element separately, and element 1 contains element 2, which defines only element 2 in element 1, and no definition for individual element 1 or element 2, for example:

Table a

{

Font-size: 12px

}

The links within the table have changed the style, and the text size is 12 pixels, while the text for links outside the table is still the default size.

6. Cascading of stylesheets

Cascading is inheritance, and the inheritance rule of the stylesheet is that external element styles are retained and inherited to other elements contained in this element. In fact, all elements nested within an element inherit the attribute values specified by the outer element, sometimes overlaying many layers of nested styles unless otherwise changed. For example, the P tag is nested within the DIV tag:

Div {color: red; font-size:9pt}

……

The text of this paragraph is red number 9.

(the content in the P element inherits the attributes defined by DIV)

Note: in some cases, internal selectors do not inherit the values of surrounding selectors, but in theory these are special. For example, the upper boundary attribute value is not inherited, and intuitively, a paragraph will not have the same upper boundary value as the document BODY.

In addition, when a conflict occurs in the inheritance of a stylesheet, the last defined style always prevails. If the color of P is defined in the example above:

Div {color: red; font-size:9pt}

P {color: blue}

……

The text of this paragraph is blue number 9.

We can see that the text size 9 in the paragraph inherits the div attribute, while the color attribute follows the final definition.

When different selectors define the same element, the priority between different selectors should be taken into account. ID selector, class selector, and HTML tag selector, because the ID selector is added to the element last, so it has the highest priority, followed by the class selector. If you want to transcend the relationship between the three, you can use it! Important promotes the priority of stylesheets, such as:

P {color: # FF0000!important}

. Blue {color: # 0000FF}

# id1 {color: # FFFF00}

We add these three styles to a paragraph on the page at the same time, and it will eventually be! The HTML tag selector style of the important declaration is red text. If you remove it! Important, the ID selector with the highest priority is yellow text.

7. Note:

You can insert comments in CSS to explain the meaning of your code, which helps you or others to understand the meaning of the code when editing and changing the code later. Comments are not displayed in the browser. The CSS comment ends with "", as follows:

P

{

Text-align: center

Color: black

Font-family: arial

}

Thank you for your reading, the above is the content of "how to define the selector group of CSS". After the study of this article, I believe you have a deeper understanding of how to define the selector group of CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.