Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the three major styles of CSS". In daily operation, I believe many people have doubts about what the three major styles of CSS are. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the three major styles of CSS?" Next, please follow the editor to study!

CSS style inline style

Also known as: inline style, inline style, embedded style

I'm div. I'm div2. I'm paragraph.

Use inline styles when styles need to be applied only once to an element

Shortcoming

The performance is mixed with the content, and the structural style is not separated, which is not conducive to later maintenance.

Styles cannot be reused (not recommended)

Internal internal stylesheet / * 3. In the style tag, you can write css code directly to modify * / p {color: red Font-size: 30px / * when writing css, if there is no special provision, the value must be in units (html is not required) Px: pixel * /} div {color: blue Font-size: 80px;} CSS basic learning

I am the paragraph.

Use internal style sheets when a single document requires a special style

Suitable for case and short page development

Use tags to define internal stylesheets in the document header

You can put the label anywhere, you don't have to put it in it. The reason why it is put in it is to let the browser load CSS first when loading, so that the browser will know who wants to modify what style, and then load the style to the relevant object directly after loading into html.

Advantages: separation of structural styles and easy maintenance

Cons: CSS style can only be used in one page

External external style sheet @ import url ("demo.css"); / * @ import: import, introduce * / CSS basic Learning external style CSS basic Learning external style

I am the paragraph.

I am the paragraph.

External stylesheets will be ideal when styles need to be applied to many pages

Suitable for the whole site development, relatively long page development

With an external stylesheet, you can change the appearance of the entire site by changing a file. Each page is linked to a style sheet using a tag, and the browser reads the style declaration from the CSS file and formats the document based on it

Advantages

Structured style separation for easy maintenance

Style reuse, which can be used by multiple pages

The difference between and import

When you use JavaScript to control DOM to change styles, you can only use tags

Because @ import can't be controlled by DOM.

@ import is provided by CSS2.1, so old browsers do not support it. @ import can only be recognized by those above IE5.

There is no such problem with labels.

When the page (the content in the body) is loaded (that is, when it is viewed by the viewer), the introduced CSS will be loaded at the same time

The CSS introduced by import will wait for the page to be loaded before it is loaded. If you use this loading method, it will flash when the network speed is slow, affecting the user experience.

In essence, it is the label of HTML, and import is a way provided by CSS

In the loading order

Differences in compatibility

Use DOM

Multiple style priority div {color: blue;} p {color: blue } the first test of the resolution rule

The second test of the parsing rule: use both external and internal stylesheets

Multiple style priority

When internal, external, and inline style sheets are used to modify the same label at the same time, the highest priority is the inline style sheet, that is, the display result is an inline style.

When external and internal stylesheets are used at the same time, which css style is close to the label will finally show which style

At this point, the study on "what are the three major styles of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.