CSS page introduction method
An outer chain (inside the head tag)
<link rel= “style href =“.1.css””>
1.css file as follows
div{
width：200px:
height：200px:
backgr-color：red
}
Embedded by style tags, which write head (write outreach of formula in which the same style tag)
<style>
div{
width：200px:
height：200px:
backgr-color：red
}
</style>
Inline (inside the body) is very important semicolon
<div style = "width:200ps:height:200ps:backgroud-color:red"><div>
And embedding recommended ~~~~ outreach
Priority: The closer the elements, the higher the
CSS selectors
Label selector element is provided by the label
id selector, by adding the label id inside, can not be repeated id!
Class selector, most applications
Note: / * write a comment here * /
Tag selector, by a div tag, affect all div tags
<style>
div{
width：200px:
height：200px:
backgr-color：red
}
</style>
Class selector to style class by class name
First div tag to add class name in the body of
<div class=“iteam”></div>
Then, when the write head ### embedded referenced class, in front of a certain point, a class can be applied to the plurality of elements
<style
.tieam {
width：200px:
height：200px:
backgr-color：red
}
</style>
An element can use multiple class names
<div class=“iteam iteam3”></div>
selector id, the id styling
First, add the id of the div tag body
<div id=“iteam2”></div>
Then head to write embedded lead ### id, they must have a # in front, the only id
<style>
#iteam1{
width：200px:
height：200px:
backgr-color：red
}
</style>
Priority: The larger the scope, the smaller the priority: id> class> tag
Level selector that selects set attributes subclass parent, mixing type, id, an element to set the element to find a
(The following is a label selected in the class selector)
First, the body
<div class：“wrap”></div>
<div></div>
Then embedded in the head tag
<style
.wrap div{
width：200px:
height：200px:
backgr-color：red
}
</style>
(The following is the class in the class selector selector)
<div class：“wrap”></div>
<div class：“wrap2”></div>
----------------------------------------------
<style
.wrap .warp2{
width：200px:
height：200px:
backgr-color：red
}
</style>
Similarly class id selected in the selector device,
Parallel selector, a plurality of elements disposed the same style, the middle of a reference-earth element is separated by commas
<div class：“hhh”></div>
<div class：“ggg”></div>
<div class：“vvv”></div>
Their width and height settings 200
<style
.hhh, ggg, vvv {
width：200px:
height：200px:
}
</style>
Pseudo class selector
Set hover state elements
<div class：“qqq”></div>
----------------------------------------
<Style> (normal state)
.qqq；hover{
width：200px:
height：200px:
}
</style>
<style
.qqq; hover {(mouse-over state, smaller)
width：111px:
height：111px:
}
</style>