css style rules:
selector{Attribute 1: attribute value 1; Attribute 2: attribute value 2;}
p{font-size:10px; color: red;}
- Strictly case sensitive, but attributes and values are not case sensitive, but are generally lowercase
- A semicolon in English is required between multiple attributes; Separation, the last one can be omitted
- If the attribute value is composed of multiple words and there is a space in the middle, it needs to be caused by quotation marks in English
Introduce css Style:
Inline
Syntax:
<Tagnames style="Attribute 1: Attribute value 1; Attribute 2: Attribute value 2;"> content </Tagnames>
example:
<p style="font-size: 30px; color: aqua; font-family: "arial narrow";">This is a beautiful day. We should be grateful!</p>
result:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-f0aeAqxJ-1635516075796)(C:\Users \ ASUS \ appdata \ roaming \ typora \ typora user images \ 1635511491619. PNG)]
embedded
Syntax:
<head>
<style type="text/css">
selector {attribute: Attribute value;}
</style>
</head>
example:
<style type="text/css">
/* Selector {property: property value;} */
p{font-size: 10px; color: red; font-family: "arial narrow"}
</style>
result:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-KRUtt7Mj-1635516075799)(C:\Users \ ASUS \ appdata \ roaming \ typora user images \ 1635512030968. PNG)]
Remember:
Simple examples of inline and inline
The commented out is inline. If you want to use it, you can cancel the comment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Technical beautification</title>
<style type="text/css">
/* Selector {property: property value;} */
p{font-size: 10px; color: red; font-family: "arial narrow"}
</style>
</head>
<body>
<!-- <p style="font-size: 30px; color: aqua; font-family: "arial narrow"";>This is a beautiful day. We should be grateful!</p> -->
<p>This is a beautiful day. We should be grateful!</p>
</body>
</html>
Chain type
Syntax:
<head>
<link href="CSS Path to file" type="text/css" rel="stylesheet" />
</head>
example:
HTML section:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Technical beautification</title> <link href="day29.css" type="text/css" rel="stylesheet" /> </head> <body> <p>This is a beautiful day. We should be grateful!</p> </body> </html>
css part
p{font-size: 40px; color: blueviolet; font-family: "arial narrow"}
result:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-OqyIZBJJ-1635516075801)(C:\Users \ ASUS \ appdata \ roaming \ typora \ typora user images \ 1635512690242. PNG)]
css basic selector
Tag selector
Syntax:
Tagnames{attribute: Attribute value;}
example:
p{font-size: 40px; color: blueviolet; font-family: "arial narrow"}
It's actually demonstrated above
Class selector
Syntax:
.Class name{attribute: Attribute value;}
- The first character of a class name cannot be a number
- Class names are strictly case sensitive and are generally lowercase
Class selectors can define individual or identical styles for element objects
Being alone means: < p class = "font_size" > this is a beautiful day. We should be grateful</ p>
The so-called "whole": < p class = "color_bisque" class = "font_size" > this is a beautiful day, and we should be grateful</ p>
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Technical beautification</title>
<style type="text/css">
.font_size{font-size: 12px;}
.color_bisque{color: bisque;}
</style>
</head>
<body>
<p class="color_bisque" class="font_size">This is a beautiful day. We should be grateful!</p>
</body>
</html>
result:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-oTgaId6s-1635516075804)(C:\Users \ ASUS \ appdata \ roaming \ typora \ typora user images \ 1635513832464. PNG)]
id selector
Syntax:
#id name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}
The element id value is unique and can only correspond to a specific element in the document
If so: < p id = "color_bisque" id = "font_size" > this is a beautiful day and we should be grateful</ p> In this case, only id='color_bisque 'works
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Technical beautification</title>
<style type="text/css">
#font_size{font-size: 5px;}
#color_bisque{color: bisque;}
</style>
</head>
<body>
<p id="font_size">This is a beautiful day. We should be grateful!</p>
<p id="color_bisque">This is a beautiful day. We should be grateful!</p>
</body>
</html>
result:
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-kvW87Jeu-1635516075806)(C:\Users \ ASUS \ appdata \ roaming \ typora \ typora user images \ 1635514811813. PNG)]
Wildcard selector
Syntax:
*{Attribute 1: attribute value 1; Attribute 2: attribute value 2; Attribute 3: attribute value 3;}
It has the widest scope and can match all elements in the document, but it is not recommended because it will reduce the speed of code execution
Summary:
- The tag selector is the foundation, equivalent to the appearance of a house
- Class selector advanced, equivalent to a room decoration in a house
- id selectors tend to be more detailed, equivalent to the specific decoration of a place in a room, such as a desk
- All wildcards are OK. Do you think that if a person is responsible for both the overall design and the detailed design, the efficiency will be very low, so this method is not recommended. Furthermore, the first three are all division of labor designs, which are efficient and flexible.
Encourage with you