Introduction to CSS
☆CSS stands for "Cascading Style Sheets", which is mainly used to define HTML content in the browser Display style, such as text size, color, font bold, etc.
☆CSS styles are composed of selectors and declarations, and declarations are composed of attributes and values, as shown below:
☆Selectors: also known as selectors , indicating the elements in the web page to which the style rule applies.
Declaration: What is enclosed in English curly brackets "{}" is the declaration, and the attributes and values are separated by English colons ":". When there are multiple statements, they can be separated by English semicolons ";", as shown below:
p{font-size:12px;color:red;}
Note:
1. The last statement There is no need for a semicolon, but for the convenience of future modification, a semicolon is usually added.
2. In order to make it easier to read using styles, you can write each code in a new line, as shown below:
p{
font-size:12px;
color:red;
}
☆There are also comment statements in CSS: use /*comment statement*/ to indicate it, and Html uses .
Basic knowledge of CSS styles
☆CSS style code insertion forms can basically be divided into the following three types: inline, embedded and external. kind.
1. The inline css style sheet is to write the css code directly in the existing HTML tag, such as the following code:
The text here is red.
. 2. Embedded css style means that the css style code can be written between the tags. For example, the following code sets the text in the tag to red:
Embedded css styles must be written between , and generally embedded css styles are written between
.
3. External css style (also called external style) is to write the css code in a separate external file. This css style file has ".css" as the extension, in
Note:
1. The name of the css style file is named with meaningful English letters, such as main.css.
2. rel="stylesheet" type="text/css" is a fixed writing method that cannot be modified.
3. The tag position is generally written within the tag.
The priority of the three methods, inline > embedded > external, proximity principle (the closer to the element being set, the higher the priority).
But note that the priority summarized above has a premise: the CSS styles in inline, embedded, and external style sheets have the same weight.
CSS Selector
☆Each CSS style declaration (definition) consists of two parts, in the following form:
Selector {
Style
};
The part before {} is the "selector", and the "selector" specifies the object of the "style" in {}, that is, the role of "style" Which elements in the web page.
1. The tag selector is actually the tag in the html code.
For example, the following code:
p{font-size:12px;line-height:1.6em;}
The function of the above css style code: set 12px font size and line spacing for the p tag 1.6em style.
2. Class selector: First set the class attribute and attribute name in the element, and then select and set the style with ".class name { style }" in the embedded and external styles; pay attention to the "." key Don’t forget to enter it using the English input method. The class name can be chosen arbitrarily, but it cannot be Chinese.
Syntax:
.Class name {
Style
}
3. ID selector
In many ways, ID selectors are similar to class selectors, but there are also Some important differences:
1. Set id="ID name" for the tag instead of class="class name".
2. The ID selector is preceded by a pound sign (#) instead of an English dot (.).
ID selector and class selector
Similarity: can be applied to any element
Difference:
1. ID selector can only be used once in the document. Unlike class selectors, ID selectors can only be used once, and only once, in an HTML document. Class selectors can be used multiple times.
4. The sub-selector, that is, the greater than symbol (>), is used to select the first-generation child elements of the specified label element. The following code:
.food>li{border:1px solid red;}
This line of code will add a red solid border to the sub-element li under the class name food.
5. Contain selectors, that is, add spaces, which are used to select descendant elements under the specified label element. The following code:
.first span{color:red;}
Please note the difference between this selector and a child selector. A child selector only refers to its direct descendants
Or you can understand it as acting on the first generation of descendants of child elements. The descendant selector acts on all child descendant elements
. The descendant selector selects through spaces, while the child selector selects through ">".
Summary: > Acts on the first generation descendants of the element, and spaces act on all descendants of the element.
6. The universal selector is specified with a (*) sign. Its function is to match all tag elements in html. Use the following code to set the font color of any tag element in html to red:
*{color:red;}
7. Pseudo-class selector, which allows setting styles for tags that do not exist in html (a certain state of the tag). For example, we give a tag in html Set the font color when the mouse is over the element:
a:hover{color:red;}
The above line of code is to set the font color to red when the mouse is over the a tag.
Eight. Grouping selector. When you want to set the same style for multiple tag elements in HTML, you can use the grouping selector (,). The following code is h1 and span in the code editor on the right. The label also sets the font color to red:
h1,span{color:red;}
which is equivalent to the following two lines of code:
h1{color:red;}
span{color:red; }
The inheritance, particularity, cascading and importance of CSS
☆The inheritance of CSS
Inheritance is a rule, it Allows styles to be applied not only to a specific html tag element, but also to its descendants.
p{color:red;}
In the third grade, I was a little girl who was timid as a mouse.
But note that some CSS styles are not inherited. For example, border:1px solid red;
p{border:1px solid red;}
In the third grade, I was still a little girl who was timid as a mouse.
☆Speciality of CSS
Sometimes we set different CSS style codes for the same element, so which CSS style will be enabled for the element? Let’s take a look at the following code ：
p{color:red;}
.first{color:green;}
In the third grade, I was still as timid as a ’s little girl.
☆The cascading nature of CSS
Stacking means that there can be multiple css styles for the same element in the html file. When there are styles with the same weight, they will be based on these css styles. Determined by the order before and after, the css style at the end will be applied.
Such as the following code:
p{color:red;}
p{color:green;}
In the third grade, I was still a
☆Importance of CSS
When we are making web page code, there are some special situations where we need to set the highest weight for certain styles. What should we do? At this time we can use !important to solve it.
The following code:
p{color:red!important;}
p{color:green;}
In the third grade, I was still a< span>A little girl who is as timid as a mouse.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
