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

Today, I would like to share with you the relevant knowledge points of CSS cascading style sheet instance analysis, the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

CSS cascading style sheet

1. Separation of structure, style and behavior

P {

Background-color:green

Height:100px

Width:400px

Border:1pxsolidred

}

H3 {

Background-color:#aaa

Height:100px

Width:400px

Border:1pxsolidred

}

.yellow {

Background-color:yellow

Height:300px

Width:600px

Border:1pxsolidred

}

_ window.onload () = function () {

H3Node=document.getElementById ("tt")

H3Node.onmouseover=function () {

This.className= "yellow"

}

H3Node.onmouseout=function () {

This.className= ""

}

}

Meditate at night

There is a bright moonlight in front of the bed

Classification of 2.css

(1) id selector

(2) tag selector

(3) Class selector

(4) packet selector

(5) wildcard selector

(6) pseudo-class selector (operation on hyperlinks)

(7) derived selector, also known as compound selector

Priority of selector: the nearest principle, the smaller the range, the higher the priority.

You can use! important to change priority

/ * id selector * /

# a01 {

Color:red

}

/ * tag selector * /

P {

Color:blue

}

/ * Class selector * /

.c01 {

Background:green

}

/ * packet selector * /

H2,h3,h4 {

Color:yellow

}

/ * wildcard selector * /

* {

Background:#aaa

}

/ * derived selector * /

Listrong {

Color:orange

}

Unordered list option 1

Unordered list option 2

Unordered list option 3

Unordered list option 4

Meditate at night

There is a bright moonlight in front of the bed

Can it be hoar-frost on the ground

Looking up, I find the moon bright

Bowing, in homesickness I'm drowned

Pseudo class selector

In browsers that support css, different states of a link can be displayed in different ways, including active status, accessed status, unaccessed status, and rollover status.

The order of pseudo classes: link,visited,hover,active

A:link {/ * unaccessed status * /

Color:#000000

Text-decoration:none

}

A:visited {/ * visited * /

Color:#FF6633

}

A:hover {/ * mouse over * /

Color:#00FF66

Rext-decoration:underline

}

A:active {

Color:#CCFF6

}

Construct css rules

Focus pseudo class

Add a special style to an element when it gets focus

Input:focus {

Background-color:#FF0066

}

How to use 3.css

(1) embedded type

Li {

Color:red

}

Unordered list option 1

Unordered list option 2

Unordered list option 3

Unordered list option 4

(2) in-line formula

I can abstract the whole world.

(3) lead-in

@ import "File path"

Unordered list option 1

Unordered list option 2

Unordered list option 3

Unordered list option 4

Meditate at night

There is a bright moonlight in front of the bed

Can it be hoar-frost on the ground

Looking up, I find the moon bright

Bowing, in homesickness I'm drowned

Create a .css file

# a01 {

Color:red

}

P {

Color:blue

}

(4) linked type

Unordered list option 1

Unordered list option 2

Unordered list option 3

Unordered list option 4

Meditate at night

There is a bright moonlight in front of the bed

Can it be hoar-frost on the ground

Looking up, I find the moon bright

Bowing, in homesickness I'm drowned

Create a .css file

# a01 {

Color:red

}

P {

Color:blue

}

These are all the contents of the article "CSS cascading stylesheet example Analysis". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.