Case Analysis of CSS cascading style sheet
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.
