First, let’s introduce the four common ways to relate HTML documents to CSS:
1. Use link tags
| ＜link rel="stylesheet" type="text/css" href="sheet.css" /＞ |
2. Use style elements
＜style type="text/css"＞ body{background:#fff;} h1{font-size:2em;} ＜/style＞ |
3. Use the @import directive
＜style type="text/css"＞ @import url(sheet1.css); @import "sheet2.css"; ＜/style＞ |
| ＜p style="color:#f00;"＞This is red text＜/p＞ |
In practical applications, the use of inline styles using the style attribute is not recommended. XHTML1.1 has standardized its use as not recommended. The reason is simple. This method is not much better than the font tag and weakens the centralized control of the entire document appearance by CSS. advantages.
The first three methods use link tags and style tags, and have the following limitations in IE (including IE6, IE7 and IE8 beta1):
◆ Only the CSS associated with the first 31 link or style tags in the document can be applied.
Starting from the 32nd one, the CSS associated with its tag will be invalid. IE's official documentation All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer also mentions this limitation, including this limitation in .xml files using .xsl. But it seems that the wrong quantity was written. Please view it in IE:
◆ A style tag is only valid for the first 31 @import instructions.
Ignored starting from the 32nd @import directive.
◆ Only the first 31 @import instructions of a css file are effectively applied.
Ignored starting from the 31st @import directive.
◆ A CSS file cannot exceed 288kb?
This news comes from Internet Explorer CSS File Size Limit.
IE's restrictions on CSS will not be encountered in most cases. Even if the best solution is encountered, it should be to merge the CSS files and response tags manually or through a back-end program to minimize http requests. Number is the first principle of optimizing page rendering.