Four Methods of CSS Association calling in web design

There are four common methods to associate HTML documents with CSS:
1. Mark with link

<Link rel = "stylesheet" type = "text/css" href = "sheet.css"/>

2. Use the style element

<Style type = "text/css">

Body {background: # fff ;}

H1 {font-size: 12px ;}

</Style>

3. Use the @ import command

<Style type = "text/css">

@ Import url(sheet1.css );

@ Import "sheet2.css ";

</Style>

4. inline style)

<P style = "color: # f00;"> This Is a red word </p>

In practical applications, inline styles using the style attribute are not recommended. XHTML1.1 has set this standard as not recommended, because it is very simple that this method is no better than font marking, this weakens CSS's ability to centrally control the appearance of the entire document.

The first three methods use link tag and style tag, which have the following restrictions in IE (including IE6, IE7, and IE8 beta1:

◆ Only the first 31 links or CSS associated with style labels in the document can be applied.

Starting from 32nd, all associated CSS tags will be invalid. Internet Explorer official documentation All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer also mentions this restriction, including in use.. xml files also have this restriction. However, it seems that the number of errors is incorrect. See in IE:

◆ A style tag is only valid for the first 31 @ import commands.

Ignore from 32nd @ import commands.

◆ A css file is only valid for the first 31 @ import commands.

Ignore from 31st @ import commands.

◆ A CSS file cannot exceed 288kb?

In most cases, the restrictions on CSS are not met by IE. Even in the case of the best solution, the CSS file and response tag should be merged manually or through the backend program, minimizing the number of http requests is the first principle to optimize page rendering.

Reprinted from: http://www.xiaoer68.cn/html/142.html