Home > Developer > Web Develop
There are three ways to use the most commonly seen CSS
1. Define CSS directly using the style attribute on the span, Div, etc. tab
<style= "Color:blue">this is blue. </ span >
2. Define class in the current HTML file and set the property of class in the HTML tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"> <HTML> <HEAD> <TITLE>New Document</TITLE> <styletype= "Text/css">. Blue{Color:Blue} </style> </HEAD> <BODY> <spanclass= "Blue">This is Blue.</span> </BODY> </HTML>
3. The third Way is to separate the definition of CSS into a file, HTML files using link to introduce CSS files
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"> <HTML> <HEAD> <TITLE>New Document</TITLE> <Linkhref= "Blue.css"rel= "stylesheet"type= "Text/css" /> </HEAD> <BODY> <spanclass= "Blue">This is Blue.</span> </BODY> </HTML>
4. In addition to the above, another way is to use the @import
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"> <HTML> <HEAD> <TITLE>New Document</TITLE> <styletype= "Text/css">@import URL (blue.css); </style> </HEAD> <BODY> <spanclass= "Blue">This is Blue.</span> </BODY> </HTML>The first two ways not to say more, here to compare the way link and @import? Link and @import differences
1. Source and function. Link is the XHTML tag, in addition to loading CSS, you can also define RSS, define the REL connection properties and other functions;
@import is a completely CSS-only way to load CSS.
2. The loading order is different. the CSS referenced by link is loaded at the same time as the page is loaded;
the CSS referenced by @import will wait until the page has been downloaded and loaded, so sometimes there will be no style at the beginning, and then the page will blink to show the style (more noticeable when the network speed is slow).
3. Differences in compatibility. @import is proposed by CSS2.1, the old browser does not support, IE5 more than the ability to identify (but now, it is not a problem, there should be few use of IE5 and the following browser).
Link browser is supported.
4. Using JavaScript, you can control the link, but @import can't control it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"> <HTML> <HEAD> <TITLE>New Document</TITLE> <LinkID= "LinkId"href=""rel= "stylesheet"type= "Text/css" /> </HEAD> <BODY> <spanclass= "Blue">This is Blue.</span> <Script>document.getElementById ("linkId"). href= "Blue.css"; </Script> </BODY> </HTML>
5. @import can introduce another style sheet in CSS. You can create a main style sheet that introduces other style sheets in the main style sheet.
This benefit is easy to modify and extend.
CSS split into files, although for development and maintenance is more convenient and clear, but one drawback is that the Site server generates more HTTP requests. Large-scale Web site is still cautious use, such as some large access to large sites, the homepage, will directly put CSS or JS directly in the HTML.
If you want the style sheet to load in parallel to make the page faster, use link instead of @import.
How CSS is imported (link or import?)
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
