Five, CSS style sheet

5.1 Basic concepts of CSS style sheets

The basic structure of the webpage can be built through the HTML tags, and the modification of the webpage using the previous attributes will not be perfect;

HTML tags are used to build the structure of web pages, and CSS is used to beautify various elements on web pages.

CSS is called Cascading Style Sheet

5.2 CSS writing rules

CSS needs to be written in the style tag;
There are a series of style rules in each style sheet, through these rules to modify the specified elements;
A style rule is composed of style name and style rule value, and the name and value are separated by ":";
Use ";" to separate multiple style rules;

5.3 Selector classification

Selector is mainly used to match HTML elements to be modified

5.3.1 Tag selector

The tag name existing in HTML is used as the name of the selector, and all elements of the same tag in the current page are displayed according to the style rule;

5.3.2 Class selector

Define a class selector, and define style rules in it, use the class attribute in the label to call the class selector when needed; (the definition of class selector: class name);

5.3.3 ID selector

Use the ID attribute in an HTML tag as a selector. The ID selector can only work for tags with the same id and does not need to be called (ID selector definition: #id{});

5.3.4 Structural pseudo-class selector (position selector)

(1):first-child: select the first child element belonging to its parent element;
(2):last-child: select the last element belonging to its parent element;
(3):nth-child(n): select the The nth child element of the parent element, (n can be a formula, such as (2n|2n+1);
(4):nth-child(odd|even): select all (odd) odd elements belonging to its parent element or ( even) even element;
(5): nth-last-child(n): select the nth child element in its parent element and count from the last element.

5.3.5 Target selector

:target, the currently visited element;

5.3.6 Combination selector

(1) Tag name. Class name {}: pa{} sets the style of all p tags using class a;
(2) Tag name 1, tag name 2, tag name 3 {}: a, div{} set multiple at the same time Label style
Label name 1, label name 2, class name {}:a,div,.xxx{} Set multiple label styles at the same time.

5.3.7 Include selectors (descendant selectors)

(1) Tag name Tag name{}:div p{} to set all p tags in div;
(2) .class tag name{}: .xxx p{} to set all p tags in class xxx, multi-level contain.

5.3.8 Child element selector

Tag name>sub-element tag name{}:div>p{} sets the direct sub-element p under div;

5.3.9 Attribute selector

(1) Tag name [attr]: select the element with the attr attribute in the
tag ; (2) Tag name [attr=val]: select the element with the attr attribute in the tag and the value is equal to val;
(3) Tag name [attr^ =val]: select the element that has the attr attribute in the tag and the value starts with val;
(4) tag name [attr$=val]: select the element that has the attr attribute in the tag and the value ends with val;
(5) the tag name [ attr*=val): Select the element that has the attr attribute in the tag and the value contains val.

5.3.10 Pseudo element selector

(1) Tag name::first-letter(): select the first word or word of text;
(2) Tag name::first-line(): select the first line of text;
(3) Tag name:: selection{}: Choose to set the style of the currently selected text;
(4) Tag name::befor{content:"new content"}: Insert new content before the original content inside the element;
(5) Tag name::after{content :"New content"}: Insert new content after the original content inside the element.