It's interesting
The basic rules of the game CSS are (Funny)
class
Definition
I understand classes as special tags
Programmers can customize classes, prefixed with "."
.Custom Class Name {Attribute: Value; Attribute: Value;.........}
For example: red{color:red;}
You can also modify the preset label without adding "."
Click View-Modify Preset Label-Code h1{<!--Meaning to make use of h1 Font background color, font color-->
text-align: center;
color: crimson;
background-color: rgb(123,123,255);
}
call
Previously, I said that classes are things that modify the label format, which is how to modify them.
Call method:
<Label class="Class name">Content</>
Click View - Class Calls - Code<div class="red">We failed to penetrate their armor!</div> <p class="red">We failed to penetrate their armor!</p>
Notice that class="red" is the call
Classes, as things that modify labels, can be called repeatedly.
id
The id and class are similar, but differ in the number of calls.
Definition
A class that can only be used once is an id
Programmers can customize id s, preceded by "#"
# Custom id name {Attribute: Value; Attribute: Value;.........}
call
<Label id="id name">Content</>
Ideally, an id can only be called once, but now many browsers allow it to be called multiple times for compatibility purposes
IDS can be used with classes such as: <div class="red" id="bold">CCCP</div>
Here is a sample program.
Click View - Sample Programs - Code<!DOCTYPE html>
<html>
<head>
<span></span>
<style>
span{font: bold 40px "Microsoft YaHei";}/*This defines the font, size, thickness*/
.orange{color: orange;}
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
selector
There are many kinds of selectors, and I think they are at the heart of web page styles.
The way you just defined and called classes and IDS is by using selectors.
In fact, the above "classes" and "ids" are class selectors and id selectors.
The so-called class may be just that or a preset or custom name (as I understand it)
Selector is used to customize, define and modify the style of all the content in the web page
When using labels, write the class you want to use inside class=
Union selector
Tag selector. Category selector {Attribute: Value;.........;}
Click View-Union Selector-Code<!DOCTYPE html>
<html>
<head>
<title>
Union selector
</title>
<style>
/*All selectors execute these styles as long as they are separated by commas*/
div,p,span,.NB{color:royalblue;}
</style>
</head>
<div>LBW</div>
<SPAN>NB</SPAN>
<P>LBWNB</P>
<h1 class="NB">LLLLLBBBBWWWWW</SPAN>
</html>
Intersection selector
Tag selector. Category selector {Attribute: Value;.........;}
Click View-Intersection Selector-Code<!DOCTYPE html>
<html>
<head>
<title>
Intersection selector
</title>
<style>
/*
Tag selector. Category selector {Attribute: Value;.........;}
Represents a Category attribute that is limited to the x tag
*/
.red{color:red;}
p.red{color:red; font:bold 100px "Microsoft YaHei";}
/*Less used*/
</style>
</head>
<body>
<div class="red">We failed to penetrate their armor!</div>
<p class="red">We failed to penetrate their armor!</p>
</body>
</html>
This also basically shows how selectors are used
Descendant selector and child element selector
Descendant selector-->Select all the child elements after a label
Category selector tag selector {Attribute: Value; Attribute: Value;.........}
<!DOCTYPE html>
<html>
<head>
<title>
Descendant Selectors
</title>
<style>
/*
A descendant selector, also known as a containment selector, is used to select descendants of an element or group of elements
When tags are nested, the inner tag becomes the descendant of the outer tag
Category selector tag selector {Attribute: Value; Attribute: Value;.........}
*/
.laoli span{
font: 900 80px "microsoft yahei";
color: red;
}
</style>
</head>
<body>
<div class="laoli">
<span>Second battalion commander! What about your mother's Italian cannon?</span>
<br>
<span>Pull it up for me!</span>
<p>Fire!</p>
</div>
</body>
</html>
Sub-element selector--&t; Select a child element immediately following a label
Category selector > Tag selector {Attribute: Value; Attribute: Value;.........}
<!DOCTYPE html>
<html>
<head>
<title>
Child Selector
</title>
<style>
.sov li{/*Descendant Selectors*/
font:900 50px "heiti";
color: red;
}
.sov > li{/*Child element selector (only parent-son (its first child element))*/
font: 700 30px "weiruan yahei";
color: darkred;
}
</style>
</head>
<body>
<ul class="sov">
<li>Level 1 Menu
<ol>
<li>Level 2 Menu</li>
<li>Level 2 Menu</li>
<li>Level 2 Menu</li>
</ol>
</li>
</ul>
</body>
</html>