Referencing CSS files to HTML page methods

Last Update:2016-10-02 Source: Internet

Author: User

Tags html header

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Referencing CSS files to HTML methods-CSS introduction ,CSS referencing

Using different methods to reference the CSS style sheet, the final effect is the same, but the use of different methods to apply the CSS file will affect the SEO and Web page open speed efficiency.

The HTML reference CSS method is as follows
1. Make div+css Web page directly in Div using CSS style
2. Use style in HTML to bring your own style
3. Referencing external CSS files using @import
4. Refer to external CSS files using link to recommend this method

Extended reading: Link and import differences

Next we'll walk through an example of HTML referencing CSS methods

1. Embed CSS styles directly within HTML tag elements, such as <div style= "FONT-SIZE:14PX; Color: #FF0000; " > I am a div CSS test content-www.divcss5.com support </div> effects such as

2. In the head section of the HTML header, style declares the insertion code as follows:

<style type="Text/css">
<!--
. ceshi {font-size:14px; color: #FF0000;} /* Here is the CSS style content */
-
</style>

Specific methods such as:

3. Using @import to refer to external CSS file methods

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv= "content-type" content= "text/html; charset=gb2312 " />
<title>css Reference Method Instance-www.divcss5.com test instance </title>
<style type="Text/css">
<!--
@import URL (wcss.css);/* Here is the style content of CSS referenced by @import */
-
</style>
</head>
<body>
<div class="Ceshi"> I am a div CSS test content www.divcss5.com support </div>
</body>
</html>

The code in the Wcss.css file. Ceshi {font-size:14px; color: #FF0000;}

Effects such as:

You can see that using this method and using a self-styled CSS style sheet method has the same place that you need to refer to the external CSS using the style tag in the head of the HTML.

4. Use link to invoke the external CSS file
Place <link rel= "stylesheet" href= "Wcss.css" type= "Text/css"/> in the head to invoke the external Wcss.css file to implement the HTML reference CSS file
Details such as

This method does not require a style tag, but instead directly refers to the external style via the link style
It is generally recommended to use link to refer to external CSS style methods.

Advantages of using link to reference external CSS
1, in favor of SEO, using this method to reference external CSS files, will make the HTML page of the source code a lot less than directly add CSS style, because the search engine spider crawling Web page is not crawling CSS files, so that the HTML source code is very small, so that spiders crawl faster, less processing, Increase the weight of this page, in favor of ranking.
2, save the HTML to make the browser download Web page when separate threads, like loading a page at the same time there are two lines in the open a page truth, so that the page opened exceptionally fast. (The HTML source code and CSS file are downloaded at the same time when the user browses this webpage, making it faster)
3, modify the style of the page is convenient, just modify the CSS style can modify the page's art style, if in the site project this method, because the whole station has applied the common CSS basic style, so modify the whole station style according to Quick and convenient.

Referencing CSS files to HTML page methods

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More