preface
CSS code consists of a selector and one or more declarations. A selector is an HTML tag that needs to change its style. In CSS, each code is separated by semicolons. Each code is a declaration, and the declaration is enclosed in curly braces {}.
Previously, we explained the basic concept of CSS. Selectors are HTML tags that need to change styles. However, selectors are divided into three types: tag selectors, id selectors and class selectors. Their role is to set CSS styles.
1, CSS selector
(1) Label selector
The tag selector styles tags in HTML.
For example, in the following html code, set h2 label style font size to 25 pixels and red, and p label style font size to 15 pixels and blue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2 {
color: red;
font-size: 25px;
}
p {
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<h2>CSS</h2>
<p>Cascading style sheets are used to represent HTML or XML File style computer language.</p>
<p>CSS It can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.</p>
</body>
</html>
The operation results are as follows:
(2) id selector
id selector, you can use "#" in CSS to design specific styles for html tags with a specific id, and you can set different CSS styles for multiple tags in html. If "#" is not used, it means that the style settings are applied to all tags of this type in the current html code.
Note that multiple id selectors cannot be used at the same time, that is, id tags can only be referenced once.
For example, in the following html code, the text style with id=style1 is set to red and the font size is 15 pixels; The text style of id=style2 is set to blue and the font size is 15 pixels:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#style1 {
color: red;
font-size: 15px;
}
#style2 {
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<p id="style1">Cascading style sheets are used to represent HTML or XML File style computer language.</p>
<p id="style2">CSS It can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.</p>
</body>
</html>
The operation results are as follows:
(3) Category selector
Category selector (class selector), which is used to design the style of a group of tags. It can act on multiple tags and be used multiple times. Set the class attribute of tags in html and then use "." in CSS Reference.
You can also use multiple selector names in html tags separated by spaces to design multiple styles for one or more tags.
For example, in the following html code, the h2 label text of class="other red" is centered and set to red, the p label style of class="red" is set to red and the font size is 10 pixels, and the p label style of class="blue" is set to blue and the font size is 15 pixels:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2.other {
text-align: center;
}
.red {
color: red;
font-size: 10px;
}
.blue {
color: blue;
font-size: 15px;
}
</style>
</head>
<body>
<h2>Here is CSS Introduction to:</h2>
<h2 class="other red">CSS</h2>
<p class="red">Cascading style sheets are used to represent HTML or XML File style computer language.</p>
<p class="blue">CSS It can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.</p>
<p class="blue">CSS It 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.</p>
</body>
</html>
The operation results are as follows:
The id tag can also be mixed with the class tag, such as the following html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red {
color: red;
font-size: 20px;
}
#style {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Here is CSS Introduction to:</h2>
<h2 class="red">CSS</h2>
<p id="red" class="red">Cascading style sheets are used to represent HTML or XML File style computer language.</p>
</body>
</html>
2, Selector nesting for labels
When you want to style the nested tags in html tags, you can use the two selectors {} of nested tags in CSS code, and the tags and nested tags are separated by spaces.
For example, in the following HTML code, style the "HTML" in the text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p span {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS</h2>
<p><span>Cascading style sheets</span>It's a way to show HTML or XML File style computer language.</p>
</body>
</html>
The operation results are as follows:
3, Collective and global statements
(1) Collective declaration
Multiple html tags can be collectively declared by spacing multiple selectors with "," in CSS code.
For example, in the following html code, the h2 tag and p tag in html are uniformly styled:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2,p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS</h2>
<p><span>Cascading style sheets</span>It's a way to show HTML or XML File style computer language.</p>
</body>
</html>
The operation results are as follows:
(2) Global declaration
Use "*" to uniformly style all html tags in CSS code, that is, global declaration.
For example, in the following html code, all tags in html are uniformly styled:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
color: orangered;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS</h2>
<p>Cascading style sheets are used to represent HTML or XML File style computer language.</p>
<p>CSS It 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.</p>
</body>
</html>
The operation results are as follows:
epilogue
The above is the whole content. It's a long space. Thank you for your reading and support. If there is any improper expression or code, please point out! Your points and suggestions can bring great motivation to the author!!!