1, Cascading style sheets
Introduction
Cascading style sheets are used to represent HTML(Standard universal markup language An application of) or XML (a subset of the standard common markup language) and other file style computer languages. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages. CSS can accurately control the layout of elements in the web page at the pixel level, support almost all font and size styles, and have the ability to edit web page objects and model styles.
Introduction mode
1. In line style - label style combined with style, plus corresponding style
<h1 style="color: blue" >A title label</h1>
2. Embedded style - the page style uses the style tag and is nested in the < head > tag
<head>
<style type="text/css">
h2{
color: red
}
</style>
</head>
3. Outer chain style - link tag. Write a css file separately and nest it in the < head > tag for introduction
<head> <link rel="stylesheet" type="text/css" href=""> </head>
css file:
*{
margin:0px;
padding:0px;
}
h1{
color:green;
}
4. Import style - similar to the external chain, which is imported through import in style
<head>
<style type="text/css">
@import url(css.css);
</style>
</head>Priority of four import methods:
In general: inline style > inline style > outer chain style > Import style
Exception: for the priority of similar styles, the later the definition, or the later the imported style, the higher the priority. (the closer to the code, the higher the priority)
2, Basic selector
1. Tag selector (obtained by tag name)
<style type="text/css">
div {
color: blue;
}
</style>
2. ID selector (obtained from ID attribute)
<style type="text/css">
#name {
color: blue;
}
</style><p id="name">This is id selector</p>
3. Class selector (obtained according to class attribute)
<!-- <style type="text/css">
.name{
color: green;
}
</style> -->
<!-- Class selector --><div class="name">This is a div</div>
4. Universal selector (wildcard *)
<style type="text/css">
*{
color: yellow;
}
</style>Priority: ID > class > label > General
The same level styles are defined in the order of styles by default, and the latter overrides the former
3, Include selector:
Descendant selector (get the first child tag of a tag)
<style type="text/css">
div.name>ul{
border-style: solid;
border-color: green;
}
</style>
<!-- Progeny selector -->
Descendant selector (get all sub tags of a tag) Note: read from right to left, find right first and then forward.
Find li first, then user.
<style type="text/css">
.user li{
border-style: solid;
border-color: red;
}
</style>
<!-- Descendant Selectors -->Group selector (comma selector, use commas to style multiple labels)
<style type="text/css">
.name,#yuchen,h1{
border-style: solid;
border-color: blue;
}
</style>
<!-- Comma selector -->4, Attribute selector (attribute selector can select elements according to their attributes and attribute values.)
<style type="text/css">
a[href][title]
{
color:red;
}
</style>5, Pseudo class selector
The same label, different states and different styles are called pseudo classes, which are represented by colons
: link before clicking the link
: visited # link visited
: hover: hover over the connection
: active
: focus selects the < input > element that gets the focus.
<style type="text/css">
a:link{ color: red } /* Make the link red before clicking */
a:visited{ color: orange } /* Make the link orange before clicking */
a:hover{ color: green } /* Green when hovering */
a:active{ color: blue } /* When the mouse clicks but does not let go, it is blue */
</style>
Note: a:hover can only take effect after a:link and a:visited in CSS definition!
a:active can only take effect after a:hover in CSS definition! Pseudo class names are case insensitive.
The correct order is: a:link, a:visited, a:hover, a:active
6, Pseudo element selector
::before(css3)
::after
:before(css2)
:after
Note: content attribute must be written after
p::before{content: "S"} add S before P
p::after{content: "hhh"} add hhh after p
p::before{ content: "s" }
p::after{ content: "-----zhangsan" }