Reprint: CSS composition, three styles (inline, embedded, external), priority

Source: Internet
Author: User

(for self-backup only) original address: http://blog.csdn.net/chq11106004389/article/details/50515717

CSS composition Selector/selector + declaration (attribute + value)

Selector/selector , which indicates the element in the Web page to which the style rule applies, as in this case p is the selector , its text will turn blue, and the other elements (such as OL) will not be affected

statement: When there are multiple declarations, the middle can be a semicolon ";" Separated

-------------------------------------------------- inline CSS ---from Mu-class ----------------------------- ---------------------------------------------------------------------------------------------------------------

Where can CSS styles be written? From the form of CSS-style code insertion, the basic can be divided into the following 3 kinds: inline , embedded and external three kinds.

Inline CSS stylesheets simply write CSS code directly into existing HTML tags (such as p,span...etc) , such as: <pstyle= "color:red;font-size:12px" > Here the text is red. </p>

    • Note that it is wrong to write in the start tag of the element: <p> here the text is red. </pstyle= "color:red;font-size:12px" >
    • and the CSS style code is written in style= "" double quotes

<body>
<p> This short word is an example, <span style= "Color:green" > This phrase will turn green </style></span>,<span> but this phrase will not turn green < /SPAN>. Wow Kaka! </p>
</body>

----------------------------------- embedded CSS ---from Mu class -------------------------------------------- ------------------------------------------

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. The code will uniformly set the text in multiple <span> tags to red:

Embedded CSS styles must be written between <style></style>, and in general the embedded CSS style is written between

------------------------------- external CSS --- From Mu class------------------------------------------------------------------------------------

An external CSS style (also known as an inline) is to write the CSS code in a separate external file, with a CSS style file with a ". css" extension, within

<link href= "base.css" rel= "stylesheet" type= "Text/css"/>

    • CSS style file names are named with meaningful English letters, such as MAIN.CSS.
    • Rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.
    • <link> label location is generally written in the

------------------------------------------------- Contrast --- From Mu class--------------------------------------------------------------

These three styles are prioritized, remember their priorities内联式 > 嵌入式 > 外部式

But embedded > external has a premise: the placement of the embedded CSS style must be behind the exterior. As is the case with the right code editor, <link href= "Style.css" ...> code in front of <style type= "Text/css" >...</style> Code (also written in the actual development).

In fact, in summary, that is --就近原则(离被设置元素越近优先级别越高) .

However, note that the precedence summarized above is a precondition: inline, inline, external style sheet CSS style is the same weight in the case, what is the weight of the value? This is explained in the next 9-2 sections.

So the previous CSS style precedence is easy to understand:

Inline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file)

Reprint: CSS composition, three styles (inline, embedded, external), priority

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.