There are two main ways to import CSS files:
Linked (link)
| The code is as follows | Copy Code |
<link rel= "stylesheet" href= "Style.css" type= "Text/css"/> Import (@impot) <style type= "Text/css" > |
|
These are the grammatical differences between the two approaches. At the same time, there are differences in the way browsers handle these two ways:
Using link way, the browser will load the CSS file before loading the main part of the HTML, so the displayed page from the beginning is the style effect.
In the @import mode, the browser loads the full HTML file before loading the CSS file.
Why is this, the fundamental:
Link is an XHTML label (functionality is not limited to importing CSS), while @import is a rule provided by CSS (CSS2.1, consider compatibility).
From the user experience, the former will be more friendly, especially when the Web page file is relatively large and slow speed, the latter page will appear obvious flashing (there will be no style effect, when the CSS load is complete, suddenly show the style effect).
In addition, when using JavaScript to control the DOM to change the style, only link is used, because @import has only CSS, not DOM control.
An example:
| The code is as follows | Copy Code |
| <title>css demo</title> <link rel=stylesheet type= "text/css" href= "css/name.css" title= "cool" > <style> @import URL (css/name2.css); H1 {color:red} <style> <body> <H1>CSS Demo by jet<p style= "Color:blue" >good luck. </body> |
|
1 using link for reference
| The code is as follows | Copy Code |
<link rel= "stylesheet" type= "Text/css" href= "My.css" > |
|
2 Using Import for reference
| The code is as follows | Copy Code |
<style type= "Text/css" > |
|
The first is to write the CSS directly on the HTML page, while the second and third is to extract the file separately using the external reference style.
@import
Specifies the imported external style sheet and target device type.
In fact, the most fundamental difference between link and @import is that link is a tag of HTML, and @import is a label of CSS,
Link can have other functions besides invoking CSS, such as declaring page link attributes, declaring directories, RSS, and so on, and @import can only
Call CSS. If you are referencing CSS separately from outside, their role is basically the same, but the top of the boss is not the same. ：）
| The code is as follows | Copy Code |
@import code <style type= "Text/css" > |
|
There is another way for CSS to @media:
| The code is as follows | Copy Code |
| @media Print { @import "Print.css" } |
|
Use the @media first to make the device print, and then use the @impor link
CSS with HTML document combination of 4 methods:
1 linking to external style files using <link> elements
2 Use the "style" element in the 3 using the CSS "@import" tag to import a style form
4 Define styles using the "style" attribute in the elements within <body>
Well, maybe that's all, if there is not understand can baidu,google search, not all Datong small righteousness.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
