CSS for the front-end base

First, CSS syntax

A CSS rule consists of two main parts: a selector, and one or more declarations.

" "     Selector {            property:value;            Property:value;                ......            Property:value}"

For example:

" "     H1 {      color:red;      FONT-SIZE:14PX}"

Ii. four ways to introduce CSS

2.1. Inline type

Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.

<p style= "Background-color:rebeccapurple" >hello michael</p>

2.2. Embedded

Embedded is a set of CSS styles that are written in the

The format is as follows:

2.3. LINK Type
Introduce a. css file into an HTML file
<link href= "Mystyle.css" rel= "stylesheet" type= "Text/css"/>
2.4. Import type
Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the 
<style type= "Text/css" >           @import "mystyle.css"; note the path to the. css file </style>
Attention:
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking.
Third, CSS Selector
3.1. Basic Selector
3.2. Combination Selector
E,f   a multi-element selector that matches all E or F elements, separated by commas between E and F      :d iv,p {color: #f00;} E F   descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F: Li a {font-weight:bold;} e > F   child element selectors, matching all e element's child elements F            :d IV > P {C Olor: #f00;  the E + F   adjoins the element selector, matching all a sibling element immediately following the E element F  :d IV + p {color: #f00;}  E ~ F   ordinary sibling selectors (separated by dashes), matching the e element after all sibling elements F   :. DIV1 ~ p{font-size:30px;}
Note about label nesting:
In general, block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
　　It is important to note that thep tag cannot contain block-level tags.
3.3. Attribute Selector
[ATT]          Matches all tags with the att attribute, regardless of its value, as long as it has this property to match.                For example: [Class] {color: #f00;} E[att=val]      matches all tags in the e tag with the att attribute equal to "Val", complete matches                    such as: div[class= "error" {color: #f00;} E[att~=val]     matches all E tags with an att attribute with multiple space-delimited values, one with                         a value equal to "Val",                  such as: div[class~= "name"] {color: #f00;} E[attr^=val]    matches all tags in the e tag that have attribute values that begin with a specified value                                      such as: div[class^= "Test"]{background: #ffff00;} E[attr$=val]    matches all labels in the e tag that have attribute values to the end of the specified value,                     such as: div[class$= "Test"]{background: #ffff00;} E[attr*=val]    matches any label in the E tag that contains the specified value in the attribute value,                     such as: div[class*= "TE"]{background: #ffff00;}
　　
CSS for the front-end base