Some summaries about CSS_html/css_WEB-ITnose

After a day of studying and practicing the basics of CSS, I feel that I was quite ignorant before. I always thought that CSS styles were written by others, and I just need to use them like a guide package. It wasn’t until I studied it seriously that I realized what it was like. I feel like I will never learn new knowledge if I don’t type code. Even if a book sometimes tells me what the result of a piece of code looks like, the feeling of knowing the result from a book is completely different from what I type by myself. It’s simple. To put it bluntly, you will never know what the truth is like if you don’t practice it. In the past, I often felt that some knowledge was too difficult and I couldn’t learn it anyway, so I stopped trying. Now after doing some attempts, I realize that it is not that difficult as I thought. As long as you get into it, all problems will be solved in the end. Come on. Let me share some of the knowledge I learned today about CSS.

　

CSS: Cascading Style Sheets (Cascading Style Sheets), used to define how to display HTML elements, realize the separation of content and presentation, which can greatly improve Work efficiency.
1.CSS style sheet features:
①.Inheritance: Many CSS style rules not only affect the elements defined by the selector, but will also be affected by these elements. Descendant inheritance
　②.Stackability: When a Web page uses multiple style sheets, the styles in multiple style sheets can be cascaded into one (if there is no conflict, all styles will be displayed)
2 CSS Selector
①.Element Selector
　　eg: html {color:black;}
　　h1 {color:blue;}
　　h2 { color:silver;}
②. Class selector: The class selector is used to match style rules with elements with a class attribute, where the value of the class attribute is the value specified in the class selector
　　　.className{}
③. Element selector and class selector are combined to achieve subdivided control of different styles in a certain element
　　Element selector.className{ }
④.id selector: only acts on the id attribute The value of id is unique, so it only applies to the content of one element.
　　　eg; #intro {font-weight:bold;}
　　　

This is a paragraph of introduction.

⑤. Selector grouping: select The controller can be declared as a comma-separated list of elements in order to apply some of the same rules to multiple elements
　　　 eg: h2, h1,p,.className {color:gray;}
⑥. Derived selection eg:h1 span {color:red;} only works on the middle part of h1
　　

This is a important heading

　　　

This is a important paragraph.

⑦.Pseudo-class selector
　
Ⅰ.Definition: Used to add special effects to certain selectors. (For example: when viewing a link in a browser, the different states of the link can be displayed in different ways ​blue, and visited links will be displayed in purple)
　　　selector:pseudo-class{property: value} /* The selector on the left is the element selector, and the right is the pseudo-class*/
　
Ⅱ Pseudo-classes commonly used for link elements are: 　　　
(1) :link: is used to add special styles to unvisited links. That is, the URI pointed to by the link has not yet appeared in the user's browser's access history. 　　　
(2) :visited: is used to add special styles to visited links. This state is mutually exclusive with the :link state. 　　　
(3) :hover: is used to add a special style to this element when the mouse moves over it. This pseudo-class applies elements that are in a "hover state". 　　　
(4) :active: is used to add special styles to elements that are in the active state (events that occur between mouse click and release). 　　　
(5) :focus Pseudo class: Applied to focused elements. For example, in an input box with text input focus in a document, a text input cursor appears;

　　That is to say, when the user starts typing, text will be entered into this input box.