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

1. Selector (device) uses basic syntax

Selector {attribute 1: attribute value 1

Attribute 2: attribute value 2

Attribute 3: attribute value 3

... .:. .

}

two。 Tag selector (use HTML tag as selector directly)

Second.html

Tag selector

Tag selector (use html tag as selector directly)

Second.css

P {

Font-size:34px

Text-align:left

Text-transform:uppercase

Font-family: boldface, Song style

Text-indent:3em

Text-decoration:line-through

Font-weight:bolder

Letter-spacing:0.5em

Line-height:3px

Margin:34px

Padding:23px

}

3. Class selector (set a class name for each tag, CSS can use the class name to set the style for the tag, different label class names can be the same, the same can share the same style)-CSS is signed with the label. Class name or. Class name representation

Second.html

Class selector

Class selector (set a class name for each tag. CSS can style the tag through the class name, and different tag class names can be the same.

The same can be shared in the same style)-the signature is used in CSS. Class name or. Class name representation

Second.css

.text {

Font-variant:small-caps;/* small Capital letter * /

Font-family: song style, boldface

Font-style:italic

Text-transform:lowercase

Font-size:35px

Text-indent:3em

Text-decoration:overline

Font-weight:bold

Letter-spacing:1px

Line-height:3em

Font-variant:small-caps

Text-align:right

}

4.ID selector (set a unique ID,CSS for each HTML tag that can be styled through id)

-- indicated by the # id value {} in CSS

Second.html

ID selector

ID selector (set a unique ID,CSS for each HTML tag that can be styled through id)

-CSS is represented by the # id value {}

Second.css

.text {

Font-variant:small-caps;/* small Capital letter * /

Font-family: song style, boldface

Font-style:italic

Text-transform:lowercase

Font-size:35px

Text-indent:3em

Text-decoration:overline

}

# textp1 {

Font-weight:bold

Letter-spacing:1px

Line-height:3em

Font-variant:small-caps

Text-align:right

}

5. Include selector (descendant selector: cross-generational, cross-tag): include another tag in one tag

Second.html

Include selector

ID selector

(set a unique ID,CSS for each html tag. You can style the tag through id.)

-CSS is represented by the # id value {}

Second.css

Pa {

Text-decoration:none

Font-size:25px

Background-color:pink

}

.text {

Font-size:21px

Font-style:normal

Text-transform:lowercase

Text-indent:3em

Font-weight:bold

Letter-spacing:0.7em

Line-height:27px

}

6. Sub-selector (not supported by IE browsers): cannot contain other tags in the middle; CSS is indicated by tag 1 > tag 2 (child tag)

Second.html

Subselector

Subselector

(not supported by IE browsers): cannot contain other tags in the middle; tag 1 > tag 2 (child tags) in CSS indicates

Second.css

P > a {

Text-decoration:none

Font-family: boldface, Song style

}

P {

Font-size:23px

}

7. Adjacent selector: (CSS style acts on the last tag) commonly used to set the column properties of the table-CSS with label 1 +. . Label n indicates

Second.html

Adjacent selector

Sub-selector:

(not supported by IE browsers): cannot contain other tags in the middle; tag 1 > tag 2 (child tags) in CSS indicates

Adjacent selector (the CSS style acts on the last tag) often sets the column properties of the table-CSS uses the label 1. Label n indicates

Second.css

.text + .text1 {

Color:pink

Background-color:gray

Font-size:34px

}

8. Union selector: multiple tags are styled together and separated by commas

Second.css

Union selector

Sub-selector:

(not supported by IE browsers): cannot contain other tags in the middle; tag 1 > tag 2 (child tags) in CSS indicates

Union selector: multiple tags are styled together and separated by commas

Second.css

.text, .text1 {

Color:pink

Background-color:gray

Font-size:34px;}

9. Pseudo-class (a state of an element that is often used to describe the state of a hyperlink: link (unaccessed state); visited (accessed state); hover (mouse over state); active (clicking state) CSS is represented by the tag name: status

Second.html

Pseudo class

Pseudo class

Second.css

A:link {

Color:blue

Font-size:53px

Text-decoration:none

}

A:visited {

Color:red

Font-size:193px

}

A:hover {

Color:green

Font-size:73px

}

A:active {

Color:gray

Font-size:183px

}

10. Pseudo-element (the state of an element in an object) CSS is marked with a signature: pseudo-class representation

The commonly used ones are (first-letter [acting on the first word], first-line [acting on the first line of the text])

Second.html

Pseudo class

Pseudo elements (the state of an element in an object) are signed with tags in CSS:

Pseudo elements are commonly used (first-letter [acting on the first word], first-line [acting on the first line of the text])

Pseudo elements (the state of an element in an object) are signed with tags in CSS:

Pseudo elements are commonly used (first-letter [acting on the first word], first-line [acting on the first line of the text])

Second.css

P:first-letter {

Font-size:200%

}

P:first-line {

Color:red

}

11 style priority: inline selector > ID selector > class selector (pseudo-class, attribute) > tag selector

Yes! important; increases priority

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. Thank you for reading here. I hope you have the most profound experience on the key question of "what are the selectors in css" from the practical level, and you still need to practice and use it yourself to understand it. If you want to read more related articles, you are welcome to follow the industry information channel!

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.