CSS Summary (Part 1)_html/css_WEB-ITnose

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 tag), use the tag to link the css style file to the HTML file, as shown in the following code:

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.

This color setting applies not only to the p tag, but also to all sub-element text in the p tag, where the sub-element is the span tag.

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.

In the above example, the function of the code is only to set the border to 1 pixel, red, and solid border line for the p tag, but it has no effect on the sub-element span.

　☆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.

p and .first both match the p tag, so which color will be displayed? green is the correct color, so why? This is because the browser determines which CSS style to use based on the weight, and the CSS style with the higher weight is used.
The following are the weight rules:
The weight of the tag is 1, the weight of the class selector is 10, and the maximum weight of the ID selector is 100. For example, the following code:
p{color:red;} /*The weight is 1*/
p span{color:green;} /*The weight is 1 1=2*/
.warning {color:white;} /*The weight is 10*/
p span.warning{color:purple;} /*The weight is 1 1 10=12*/
#footer .note p{color: yellow;} /*The weight is 100 10 1=111*/
Note: There is another weight that is special - inheritance also has a weight but it is very low. Some documents suggest that it is only 0.1, so it can be understood as inheritance. has the lowest weight.

　☆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.

The text in p in the end will be set to green. This cascading is easy to understand. It is understood that the later style will overwrite the previous style.
So the previous CSS style priority is not difficult to understand:
Inline style sheet (inside the tag) > Embedded style sheet (in the current file) > External style sheet (in the external file).

　☆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.

At this time, the text in the p paragraph will be displayed in red.
Note: !important should be written in front of the semicolon
Note here that when the web page creator does not set the css style, the browser will display the web page according to its own set of styles. And users can also set their own custom styles in the browser. For example, some users are accustomed to setting the font size to a larger size so that they can view the text of the web page more clearly. At this time, please note that the style priority is: browser default style < web page creator style < style set by the user, but remember that the !important priority style is an exception and has a higher weight than the style set by the user.