One. Three types of css import for css:
1. Defined internally in the tag (not recommended).
2. The style in the head always defines the style.
3. Use link to link external css files.
DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title >Test csstitle>
<link rel="stylesheet" href="newcss.css">
<style >
p {
color: blueviolet;
}
style>
head>
<body >
<p style="color: blue">Test three selectors< span style="color: #0000ff;">p>
body>
html>
css demo
The priority of the role is 1 “2” 3.
Two. Four basic selectors:
1. Tag selector (only the format under this tag)
p {
color: blueviolet;
}
Specify a tag and change all tags to this style.
2.id selector
#d1{
color:yellow;
}
Change the format under this id to this style.
3. Class selector
.p1{
color: coral;
}
changes all the classes that define the class name into this format.
4. Global selector
*{
color:coral;
}
Change all the formats under this page to this format.
When there are the same selectors, the last one shall prevail.
The priority of different selectors is arranged by the size of the scope. The larger the selection range, the lower the priority.
Three. Combination selector.
1. Descendant selector.
div p {
color: blueviolet;
}
All p styles under this div are of this style.
2. Son selector.
div>span {
color: aqua;
}
Only the span in the div has this attribute,
3. Adjacent to the selector.
div+span {
color: orange;
}
The style of the next span next to the div.
4. Brother selector.
div~span {
color: brown;
}
Modify all the span styles below div.
Four, attribute selector
<input type="text" name="username" hobby span>="jdb">
<input type="text">
<span hobby="jdb">spanspan>
< /div>
1. Attribute name
[hobby] {
background-color: red;
color: orange;
}
Use the attribute name to specify the modification.
2. Attribute name plus value
[hobby="jdb"] {
background-color: pink;
}
Use attribute name plus value to specify modification.
3. Tag, attribute name plus value
input[hobby="jdb"] {
background-color: greenyellow;
}
specifies the modification of an element with a certain attribute and a certain value in a certain tag.
Five. Grouping and nesting.
1. Grouping. You can modify some values that require the same style modification together.
div,span, p {
color: pink;
}
2. Nesting Different selectors can combine the same attributes.
#d1,.c1,span {
color: orange;
}
VI. Pseudo-class selector.
is mainly a selector used for the link tag .
1.link
link is the album displayed when the a tag is connected.
a:link {
color: pink;
}
2. Hovering state
The style that will appear when the mouse is hovering over the link.
a:hover {
color: red;
}
3. Mouse click state
The style and state that will appear when the mouse clicks down.
a:active {
color: purple;
}
4. Access state.
The state that appears when the link is accessed.
a:visited {
color: dimgrey;
}
5. The state of the input box when it is clicked, is called getting focus
input:focus {
background-color: orange;
}
6. The status displayed when the input is floating.
input:hover {
background-color: red;
}
Seven. Pseudo element selector.
1. It is used for the style of the first character of a certain label.
p:first-letter {
font-size: 48px;
color: gold;
}
2. Acts at the beginning of an element and cannot be selected.
p:before {
content: ‘$’;
color: gold;
}
3. Act on the end of an element.
p:after {
content: "?";
color: red;
}
These selectors will be very useful in floating point issues.
DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title >Test csstitle>
<link rel="stylesheet" href="newcss.css">
<style >
p {
color: blueviolet;
}
style>
head>
<body >
<p style="color: blue">Test three selectors< span style="color: #0000ff;">p>
body>
html>
css demo
DOCTYPE html>
<html lang="en">
<head >
<meta charset="UTF-8">
<title >Test csstitle>
<link rel="stylesheet" href="newcss.css">
<style >
p {
color: blueviolet;
}
style>
head>
<body >
<p style="color: blue">Test three selectors< span style="color: #0000ff;">p>
body>
html>
p {
color: blueviolet;
}
#d1{
color:yellow;
}
.p1{
color: coral;
}
*{
color:coral;
}
div p {
color: blueviolet;
}
div>span {
color: aqua;
}
div+span {
color: orange;
}
div~span {
color: brown;
}
<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">spanspan>
< /p>
[hobby] {
background-color: red;
color: orange;
}
[hobby="jdb"] {
background-color: pink;
}
input[hobby="jdb"] {
background-color: greenyellow;
}
div,span, p {
color: pink;
}
#d1,.c1,span {
color: orange;
}
a:link {
color: pink;
}
a:hover {
color: red;
}
a:active {
color: purple;
}
a:visited {
color: dimgrey;
}
input:focus {
background-color: orange;
}
input:hover {
background-color: red;
}
p:first-letter {
font-size: 48px;
color: gold;
}
p:before {
content: ‘$’;
color: gold;
}
p:after {
content: "?";
color: red;
}