HTML (5)/css (3) review (a) The CSS Foundation (i)

Recently from ExtJS to write items, HTML (5)/css (3) is naturally familiar, so be quick to review the basics.

In the process of review, always feel that some knowledge will always forget, the following record down:

(All content in this article is not related to H5 and CSS3)

three types of CSS:

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 style, written directly in existing HTML tags

内联式CSS style sheet is to write CSS code directly in the existing HTML tags, such as the following code:

<p style= "Color:red" > here the text is red. </p>

embedded CSS style, written in the current file

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. And in general the embedded CSS style is written between

<style type= "Text/css" >    span{        color:red;    } </style>    

external CSS style, written in a separate file 

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

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

External CSS file BASE.CSS content:

span{   color:red;   font-size:20px;}

Attention:

1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.

2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.

3, <link> label location is generally written in the

 priority levels for three types of CSS:

Some of the small partners asked, if there is a situation: for the same element we have three ways to set CSS style, then which method really effective? That's what happens in the editor on the right.

1. Use 内联式 CSS to set "super cool Internet" text for 粉色 .

2. Then use 嵌入式 CSS to set the text to 红色 .

3, and finally use 外部式 the settings text 蓝色 (style.css file Settings).

But eventually you can observe that the text of the short word "super cool Internet" is set in order 粉色 .

Because these three styles are prioritized, remember their priorities:

内联式 > 嵌入式 > 外部式

But embedded > external,

There is a premise that the placement of the embedded CSS style must be behind the exterior.

For example, the <link href= "Style.css" ...> code is in front of <style type= "Text/css" >...</style> Code (also written in the actual development). Interested partners can try, change them in order, and see if their priority changes.

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? And listen to tell:-).

HTML (5)/css (3) review (a) The CSS Foundation (i)