python--Front-end CSS (CSS page introduction method, selector base selector, combo selector)

CSS creates the background:

In order to make the style of the Web page more rich, but also in order to let the content and style of the page can be split apart, CSS is born from this idea, CSS is cascading style Sheets acronym, meaning cascading style sheet.

With most of the css,html in the style of the label is discarded, HTML is only responsible for the structure and content of the document, the form of expression to the css,html document becomes more concise.

CSSBasic syntax and page references CSSBasic syntax

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

selector {                  property:value;                  Property:value;             ...  Property:value                   }

A selector is a name that associates a style with a page element, and a property is a style property that you want to set with one or more values for each property. For example:

h1 {color:red; font-size:14px;}

CSSPage Introduction Method:

1. In-line

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 yuan</p>

2. Embedded

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

3-Link
Introduction of a. css file into an HTML file via the link tag
<link href= "Mystyle.css" rel= "stylesheet" type= "Text/css"/>
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>
Link vs. Import-style comparison:
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is relatively large, you will see a page with no style first, after flashing, 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.
CSSText Settings
CSS styles for commonly used text:    Color sets the colour of the text, such as: color:red;    Font-size set the size of the text, such as: font-size:12px;    font-family Set the text font, such as: font-family: ' Microsoft ya Black ';    Font-style Set the font tilt, such as: Font-style: ' normal '; Set no tilt, Font-style: ' Italic '; set text italic    font-weight Set text whether bold, such as: Font-weight:bold; set bold font-weight:normal settings not bold    Font set several properties of the text at the same time, the order of writing has compatibility problems, it is recommended to write in the following order: font: Whether bold font size/line height, such as: Font:normal 12px/36px ' Microsoft Ya Black ';    Line-height set the line height of the text, such as: line-height:24px;    Text-decoration set the underline of the text, such as: Text-decoration:none; Remove text underline    text-indent set the first line of text indentation, such as: text-indent:24px; set text first line indent 24px    text-align Set text horizontal alignment, such as Text-align:center Set Text to center horizontally
CSSSelector Base Selector
Combo 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; }  E + f   adjoins the element selector, matching all sibling elements immediately following the E element F  :d IV + p {color: #f00;}  E ~ F   Ordinary Sibling selectors (separated by dashes)                 :. DIV1 ~ p{font-size:30px;}
Note, about tag 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 P tags cannot contain block-level labels.
python--Front-end CSS (CSS page introduction method, selector base selector, combo selector)