2015-09-21CSS: Introduction mode, selector, comment, Text style

 1. How to introduce CSS in HTML

There are 4 styles of CSS introduced in HTML: inline, inline, imported, and linked.

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

⑵ Embedded

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

　　
The downside is that for a site that contains many pages, using embedded in each page makes it cumbersome to modify the style. A single page can consider using embedded.
⑶ 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 
　
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.
⑷-Linked
The link also introduces a. css file into an HTML file, but it is different from importing it by using HTML rules to introduce an external CSS file, which is used in the 
1
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.
Summary: In general, do the site when the style is written in more than one style sheet file, so we first use the link to introduce a total CSS file, and then in this CSS file using the import to introduce other CSS files. However, if you introduce CSS files dynamically through Javascrip, you can only use the linked style.
2. CSS selector and priority ⑴ Base Selector
⑵ Combo Selector
⑶ Selector Priority
In general, the more special The selector, the higher its priority. The more accurate the selector is, the higher its priority. Usually we use 1 to indicate the priority of the tag Selector, 10 for the class selector, and 100 to prioritize the ID selector.
For example,. Polaris span {color:red;} The selector priority is 10 + 1 which is 11; the priority of the. Polaris is 10; The browser will naturally display the red Word. After understanding this, the following priority calculation is a breeze:
Div.test1. span var priority 1+10 +10 +1
Span#xxx. Songs Li priority 1+100 + 10 + 1
#xxx-li Priority 100 +1
In the case of what selectors to use, the principle of using different selectors is: first: Accurate selection of the label to be controlled; second: Use the selector with the most reasonable priority; Third: HTML and CSS Code are as concise and beautiful as possible. Usually:
1. The most commonly used selector is the class selector.
2, Li, TD, DD and so on often a large number of consecutive, and the same style or similar label, we adopt the class selector and tag name selector combination of the descendant selector. XX Li/td/dd {} mode selection.
3, very few cases will use the ID selector, of course, many front-end developers like Header,footer,banner,content set to the ID selector, because the same style in a page can not have a second time.
Here we have to mention the use of CSS in the tag to write CSS, that is:
<div style= "color:red" >polaris</div>
The priority at this time is the highest. We give it a priority of 1000, which is not recommended, especially for beginners. This also completely violates the idea of the separation of content and display.
3. CSS Annotations
Comments for CSS:/* */
HTML annotations:<!---->
JavaScript Comments:/* *//
4. CSS Text style ⑴ font
font-family: "Microsoft Yahei";
　　
⑵ Text Size
font-size:24px;
　　
⑶ text color
color:red;
　　
⑷ text thickness
font-weight:800;
　　
⑸ text underline, strikethrough, top dash, no dash
Text-decoration:underline;
　　
Text-decoration:line-through;
　　
Text-decoration:overline;
　　
Text-decoration:none;
　　
⑹ English Letter Case
text-transform:capitalize;/* the first letter of the word * *
　　
text-transform:uppercase;/* ALL CAPS */
　　
text-transform:lowercase;/* All lowercase */
　　
⑺ Letter Spacing
letter-spacing:normal;/* Default value is normal*/
　　
letter-spacing:5px;
　　
⑻ Alignment
Text-align:left;
　　
Text-align:center;
　　
Text-align:right;
　　
⑼ Line Spacing
line-height:50px;/* when the line-height is as tall as its parent element, it will appear vertically centered */
　　
5, a software
Fscapture
2015-09-21CSS: Introduction mode, selector, comment, Text style