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

Source: Internet
Author: User

 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.


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


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


⑶ text color


⑷ text thickness


⑸ text underline, strikethrough, top dash, no dash








⑹ 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*/




⑻ Alignment






⑼ Line Spacing
line-height:50px;/* when the line-height is as tall as its parent element, it will appear vertically centered */


5, a software


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.