1. Introduction of css pages
(1) External chain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css Introduction method-Outer chain type</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div></div>
</body>
</html>
External chains introduce css files through link tags, which need to be introduced into head Tags
href is the abbreviation of Hypertext Reference. This means the URL that specifies the hyperlink target. Is a kind of css code. Here is the css file test in the same directory as this HTML file.
The code in test.css is:
div{
width:200px;
height:200px;
background-color: red;
}
(2) Embedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css Introducing Method of Page-Embedded system</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Running the code, the page displays as follows:
A blue square with a side length of 200 pixels.
Embedded, is to write css through style tags. The style tag is in the head header, and the div tag is in the body.
(3) Inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css Introducing Method of Page-Inline</title>
</head>
<body>
<div style="width:200px;height:200px;background-color:green;"></div>
</body>
</html>
Running the code, the page displays as follows:
A green square with a side length of 200 pixels.
Inline, set css style directly with style attribute of div tag
(4) div tags are introduced in three ways at the same time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div Three ways of introducing labels at the same time</title>
<link rel="stylesheet" href="test.css">
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div style="width:200px;height:200px;background-color:green;"></div>
</body>
</html>
To sort it out, there are three css settings in the above code, which make the div tag in the body represent a square with a side length of 200 px.
From front to back, the order is:
1. External chain type: corresponding to red square;
2. Embedded: corresponding blue box
3. Inline type: corresponding to green box.
When we use the three css settings at the same time, the background color is green.
There is no priority distinction between outer-chain, embedded and inline, but the later css settings will override the previous css settings.
In other words: the div tag represents the closest css settings to it.
2. Basic selector of css
(1) Label selector
<head>
<meta charset="UTF-8">
<title>css Three selectors.html</title>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
Label selectors have the greatest impact, and div elements in the body are set to the style corresponding to style in the head.
(2) Class selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css Three selectors.html</title>
<style>
.item1{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid green;
/*Border: Linewidth 1 pixel, solid line, green*/
}
.item2{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
<div></div>
<div class="item1"></div>
</body>
</html>
Running the code, the page displays as follows:
Big red square,
Small green squares,
Big red square.
As you can see, the class selector sets the style of the element through the class class class name.
For each div element, it represents the style of the class attribute corresponding to the selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>by class Property Sets Multiple Values</title>
<style>
.w{
width: 200px;
}
.h{
height: 200px;
}
.b{
background-color: red;
}
</style>
</head>
<body>
<div class="w h b"></div>
</body>
</html>
Running the code, the page displays as follows:
A big red box.
The class selector here can be analogous to the class in python. In python, a class allows multiple parent classes. In this case, the class attribute of the div tag can also have multiple values. The div tag represents the css settings corresponding to all values.
(3) id selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id selector</title>
<style>
#uuz{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="uuz"></div>
</body>
</html>
Run the code and the page displays as follows:
A small red square.
In the same HTML file, div tags with the same id are not allowed.
Summary:
The implementation of the three selector functions requires the style tag in the head and the div tag in the body to correspond. The content of label selector is written in div {}, the content of class selector is written in dot (.)+class name {}, and the content of ID selector is written in well number (#) +id name {}.
(4) Priority of three selectors
If a div tag sets both class and id attributes, which css settings does it represent?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Priority of three selectors</title>
<style>
#uuz{
width: 100px;
height: 100px;
background-color: red;
}
.item1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="uuz" class="item1"></div>
</body>
</html>
Run the code and the page displays as follows:
A small red square.
The label selector affects all div tags; the class tag affects a class tag of the corresponding class name; and the id selector affects a label of the corresponding id. So: as far as the scope of impact is concerned, label selector > class selector > id selector.
But for priority, id selector > class selector > label selector.
(In python, the higher the class level is, the larger the scope of influence is, and the lower the priority of public attributes and methods in the subclass is. This is the basis for polymorphism to be realized.)
(In python, the so-called priority refers to the priority of public attributes and methods. Priority is considered only when the attributes and methods of subclasses and superclasses have renames. Priority is not the priority of a class. It is not a class that accepts only the attribute method of the class with the highest priority and excludes others. Similarly, the css attribute set in style still follows this priority. That is to say, when the label selector and the class selector coexist, the div label will not only accept the css settings in the class selector. If the label selector has attributes that are not set in the class selector, the div label will still represent the attributes.)
(In short, priority is considered only when the css attribute is renamed.)
3. Relation selector of css
(1) Hierarchical selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hierarchical selector</title>
<style>
.wrap{
height: 200px;
width: 200px;
border:1px solid blue;
}
/*Set the outer wrap to a colorless square with a 200-pixel edge and a blue solid border*/
.wrap div{
height: 100px;
width: 100px;
background-color: red;
}
/*Set all div elements in wrap inner layer to a red square with 100 pixels edge length*/
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
</div>
</body>
</html>
Run the code and the page displays as follows:
A large blue square border with two red squares arranged vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hierarchical selector 2</title>
<style>
.wrap{
height: 400px;
width: 400px;
border:1px solid blue;
}
.wrap .inner{
height: 100px;
width: 100px;
background-color: red;
}
.wrap div{
height: 200px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
</div>
<div>
<div class="inner"></div>
</div>
</div>
</body>
</html>
Run the code and the page displays as follows:
A large blue square border. The top of it is a red square with 100 sides, and the bottom is a green square with 200 sides. In this green square there is a red square with 100 sides.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hierarchical selector 2</title>
<style>
.wrap{
height: 400px;
width: 400px;
border:1px solid blue;
}
.wrap .inner{
height: 200px;
width: 200px;
background-color: red;
}
.wrap div{
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div></div>
</div>
</div>
</body>
</html>
Run the code and the page displays as follows:
A large blue square border, the top of which is a red square with a side length of 200, and the inside of this red square is a green square with a side length of 100.
Hierarchical selectors mainly apply and select the child elements under the parent class, or the child elements under the child elements. Naming conflicts can be reduced by hierarchy according to different namespaces.
(2) Group selector (parallel selector)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parallel selector</title>
<style>
.r,.b,.g{
width: 100px;
height: 100px;
}
/*Set the same style for multiple elements at the same time*/
/*Separation between different class names*/
.r{
background-color: red;
}
.b{
background-color: blue;
}
.g{
background-color: green;
}
</style>
</head>
<body>
<div class="r"></div>
<div class="b"></div>
<p class="g"></p>
</body>
</html>
Run the code and the page displays as follows:
Small red square, small blue square, small green square.
(3) Pseudo-class selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo-class selector</title>
<style>
.uuz{
width: 200px;
height: 200px;
border: 3px solid black;
}
.uuz:hover{
background-color: green;
}
/*Set the style of the div element when the mouse hovers over it*/
/*hover/'hʌvər/v. To hover; hover.*/
/*When the mouse hovers, the div element's style inherits the non-hovering css settings.*/
</style>
</head>
<body>
<div class="uuz"></div>
</body>
</html>
Run the code and the page displays as follows:
A black square border filled with green when the mouse hovers over the figure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudo-class selector 2</title>
<style>
.box{
width: 400px;
height: 400px;
background-color: pink;
}
.box:before{
content: "I'm the content inserted in the head of the element, and I'm going to set it to an attribute. content And it's caused by quotation marks.";
}
.box:after{
content: "I'm inserting content at the end of the element, and I'm going to set it to properties. content And it's caused by quotation marks.";
}
</style>
</head>
<body>
<div class="box"><br>I am div The contents set in the label<br></div>
</body>
</html>
Run the code and the page displays as follows:
A pink square with a side length of 400 pixels, which contains:
I'm the content inserted in the head of the element. I want to set it in the attribute content and cause it with quotation marks.
I'm the content set in the div tag.
I am the content inserted at the end of the element. I want to set it in the attribute content and cause it with quotation marks.