Cascading Style Sheets
Cascading Style Sheets
It is used to control the style of web pages and allows the A markup language that separates style code from web content
CSS syntax structure
Selector declaration{} Attribute name: attribute value
css three introduction methods
embedded
Text color is red
Embedded
External style
Priority
Embedded>Embedded>External
But embedded>external style has a premise: the position of the embedded css style must be behind the external style.
CSS selector
Basic selector
Tag selector
p{
color:red;
}
Class selector
.class{
color:red;
}< /pre> id selector
#id{
color:red
}
Advanced selector
Descendant selector
All p in div
div p{
css code style;
}
Child selector
Only valid for children
div>p{
css code style;
}
Combination selector
h1,span,p{
color:red;
font-size:14px;
}
Pseudo element selector
It follows the "love and hate rule", the so-called love and hate is "LoVe HAte"
/* unvisited links*/
a:link {
color: # FF0000
}
/* Visited links*/
a:visited {
color: #00FF00
}
/* Move the mouse to the link*/
a:hover {
color: #FF00FF
}
/* Selected link*/
a:active {
color: #0000FF
}
/*The style when the input box gets the focus*/
input:focus {
outline : none;
background-color: #eee;
}
Pseudo-class selector
Commonly set initials Special style:
p:first-letter {
font-size: 48px;
color: red;
}
before
/*In every Insert content before each element*/
p:before {
content:"*";
color:red;
}
after
/*Insert content after each element*/
p:after {
content:"[?]";
color:blue;
}
Before and after are mostly used to clear floats.
CSS inheritance
Web application: For example, when we design a website, the website has a uniform font color It is gray and the font size is 14px. Then we can make good use of the inheritance of css to achieve this effect. But not all properties can be inherited
The code is as follows:
body{
color:gray;
font-size:14px;
}
CSS weight
Inheritance weight is almost 0
Element selector 1
Class selector 10
ID selector 100
Inline style 1000
The weight calculation will never be rounded!
!important has the largest weight
p{color:gray;}/*weight is 1*/
div div p{color:yellow;}/*right The value is 1+1+1=3*/
.active{color:red;}/*weight 10*/
div .active{color:black;}/*weight 11* /
div div .active{color:blue;}/*weight is 12*/
.wrap #box2 .active{color:purple;}/*weight is 120*/
#box1 #box2 .active{color:green;}/*weight is 210*/