“This is the 27th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”
Common CSS Basics (2)
The last article documented an introduction to CSS and three ways it can be used. Here are the basics of writing CSS selectors.
At the beginning of learning, I was used to write the CSS code directly in the label or embedded in the header label. However, a large number of style codes occupy the page and lead to the page being too long and poor observability. When you’re doing inline style changes you’re always going to find a lot of redundancy and it’s going to be a lot of work.
So as the later years of learning and then the friction of the project getting bigger and going through repeated style changes, the bad habit began to change, and the CSS style sheets were removed from the HTML page in a neat way.
People grow through constant consultations, haha.
Therefore, for code brevity, it is usually recommended to refer to CSS as an external link, the link tag.
<link rel="stylesheet" type="text/css" href="style.css">
1. CSS selector
1.1 ID selector
Because of the uniqueness of the ID, the ID selector matches only the unique element that corresponds to the value of the ID attribute of the HTML element. The ID selector uses the symbol # + ID name.
#span1{
color:blue;
}
Copy the code1.2 Element selectors
The element selector selects the corresponding HTML element based on the element name.
span{
color:red;
}
Copy the code1.3 Class selectors
The class selector selects the corresponding HTMl element by matching the class attribute value. The format is.+class class name.
.span2{
color:pink;
}
Copy the codeAn element style that has a particular label if it needs to be set. The element tag is followed by the class name. Such as
span.span2{
font-size:20px;
}
Copy the codeOnly span tag elements with class=” SPAN2 “will have a font size of 20px, while others will have the default size.
Note: HTML elements can have more than one class name separated by a space.
1.4 Universal selector
The generic selector (*) is used to match all HTML elements on a page. Usually used to set the default format, remove the default margins and spacing, and so on.
*{
margin:0;
padding:0;
font-size:15px;
}
Copy the code1.5 Group selector
Because some styles are too repetitive, grouping selectors are used to merge HTML elements with the same style definition in order to simplify code.
p,span,a{
font-size:15px;
color:red;
}
Copy the codeAll right. This is where the recording of the selector ends. I will continue to learn and improve. Come on, Ollie!