Web Front End Interview Guide (11): What are the ways to style import?

Style Import Method

• Link

• Import

How to use

• Use of link

[CSS] view plain copy 650) this.width=650; "Src=" https://code.csdn.net/assets/CODE_ Ico.png "width=" "height=" "alt=" on code to view the chip "style=" Border:none; "/>650" this.width=650; "src=" https ://code.csdn.net/assets/ico_fork.svg "width=" "height=" "alt=" derived from My Code slice "style=" border:none; "/>

1. <link href= "index.css"  rel= "Stylesheet" >  

• Use of Import

[CSS] view plain copy 650) this.width=650; "Src=" https://code.csdn.net/assets/CODE_ Ico.png "width=" "height=" "alt=" on code to view the chip "style=" Border:none; "/>650" this.width=650; "src=" https ://code.csdn.net/assets/ico_fork.svg "width=" "height=" "alt=" derived from My Code slice "style=" border:none; "/>

2. <style type= "Text/css" >

4. @import "Index.css";

6. </style>

different points

• In addition to referencing a style file, link can also reference a resource file such as a picture, and import only references a style file

<link rel= "shortcut icon" href= "/favicon.ico" type= "Image/x-icon"/>
<link rel= "icon" sizes= "any" mask href= "//www.baidu.com/img/baidu.svg" >
<link rel= "search" type= "Application/opensearchdescription+xml" href= "/content-search.xml" title= "Baidu Search "/>

• compatibility, link does not exist compatibility issues, import support above IE5, is css2.1 new

• In a stylesheet file, you can import other style sheet files using import, and link can not

• When a link references a CSS, it loads at the same time as the page loads, @import requires that the page be loaded after it is fully loaded.

• Link supports using JavaScript to control the DOM to change style, while @import does not support it.

Add sub-item

Import is more

@import ' style.css '//windows ie4/ns4, Mac OS X IE5, Macintosh ie4/ie5/ns 4 not recognized
@import "Style.css"//windows ie4/ns4, Macintosh ie4/ NS4 does not recognize
@import URL (style.css)//windows NS4, Macintosh NS4 does not recognize
@import URL (' style.css ')//windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 does not recognize
@import URL ("style.css")// Windows NS4, Macintosh NS4 does not recognize

@import URL (index.css) is recommended;

-------------------------------------------------------------------------------------------

This article from "Wisdom 1" blog, reproduced please contact the author!

Web Front End Interview Guide (11): What are the ways to style import?