CSS Cascading Style sheets (2)

One, style sheet classification

(1) inline style. -Highest priority, worst code reuse.

(available when a particular style needs to be applied to an individual element.) Use style attributes directly in related tags. Style properties can contain any CSS properties. ）

(2) inline style sheet. --priority level second, infrequently used, code reusability in general.

(inline style sheets can be used when a particular style is required for a single file.) The inner style sheet is defined in the head section through the <style> tag. ）

(3) External style sheet. -Lowest priority, most commonly used, most code reuse.

(It can be used when the style needs to be applied to many pages.) You can use an external style sheet to associate multiple elements or files. ）

1. Create a style sheet first

2. Write style sheet contents, adjust style sheet position

Two. Selector Selector

Each CSS style definition consists of two parts, in the following form: The selector {property} is the "selector" in the previous part of {}. The selector indicates the object of the style in {}, which element the style acts on the Web page.

Selectors are selectors, external style sheets are just code locations

(1) Category selector (class selector)

Preceded by "." To mark, such as:

. d1

{

color:red;

}

In the HTML page:

<div class= "D1";> text </div> text color red

<p class= "D1";> text </p> text color red

Defines a class that applies a style to an element.

(2) The ID selector has the highest priority

Preceded by "#" to mark, such as:

#d2

{

Color:blue;

}

In the HTML page:

<div class= "D1" id= "D2" > Text </div> text color to Blue ID selector priority higher than category selector

(3) Tag Selector (selected by tag name) if both the category selector and the ID selector appear, follow the priority and execute. most infrequently used

Preceded by "label name" to mark, such as:

Div

{

color:red;

}

In the HTML page:

<div> text <div> text color turns red

(4) composite selector . There is the ID first priority/both the category selector second priority. Most commonly used

[1] Group Selector

When several element style attributes are the same, a declaration can be called together, separating the elements with commas.

. D1, #d2

{

color:red;

}

In the HTML page:

<div class= "D1";> text </div> text color red

<p id= "D2";> text </p> text color red

The use of the group selector will greatly simplify the CSS code, will have multiple elements of the same attributes, merging groups to select, define the same CSS properties, which greatly improve the efficiency of coding, but also reduce the size of the CSS file.

[2] descendant Selector

The descendant selector, also known as the containing selector, is used to select the descendants of a particular element or group of elements, placing the selection on the parent element in front, the selection of the child element in the back, and a space separating the middle.

. D1 #d2

{

Color:blue;

}

In the HTML page:

<div class= "D1" id= "D2" > Text </div> text color to Blue

Descendant selectors are useful selectors that use descendant selectors to position elements more precisely.

CSS Cascading Style sheets (2)