Home >Web Front-end >HTML Tutorial >Detailed explanation of examples of how html uses four ways to reference css style sheets
Detailed explanation of examples of how html uses four ways to reference css style sheets
- 黄舟Original
- 2017-07-26 09:45:522219browse
Method one: css1.html
<html> <head> <title>内联样式(方法一)</title> </head> <body> <a href=”http://www.baidu.com” style=”color:#FF00FF; font-size:80;”>百度一下</a> </body> </html>
Method two: css2.html
<html>
<head>
<title>style标签中调用(方法二)</title>
<style type=”text/css”>
a{color:#FF0000;background:#FFFF00;}
</style>
</head>
<body>
<a href=”http://www.baidu.com“>百度二下</a>
</body>
</html>Method three: css3.html
<html> <head> <title>link标签中调用(方法三)</title> <link rel=stylesheet type=”text/css” href=”three.css”/> </head> <body> <a href=”http://www.baidu.com“>百度三下</a> </body> </html>
In the same directory as css3.html three.css file: a{color:#FF00FF; background:#0000FF;}
Method four: css4.html
<html> <head> <title>@import指令(方法四)</title> <style type=”text/css”> @import url(“four.css”); </style> </head> <body> <a href=”http://www.baidu.com“>百度四下</a> </body> </html>
Four.css file in the same directory as css4.html: a{color:#0000FF; background:#FF00FF;}
****************************** *************************************************** *******************
In actual applications, inline styles using the style attribute are not recommended, and the first method is not recommended. , this approach weakens the advantage of CSS to centrally control the appearance of the entire document.
The first three methods use link tags and style tags, and have the following restrictions in IE (including IE6, IE7 and IE8 beta1):
◆ There are only The CSS associated with the first 31 link or style tags can be applied; starting from the 32nd, the CSS associated with the tags will be invalid.
◆ A style tag is only valid for the first 31 @import directives; it is ignored starting from the 32nd @import directive.
◆ Only the first 31 @import directives of a css file are effectively applied; starting from the 31st @import directive is ignored.
◆ A CSS file cannot exceed 288kb.
IE's restrictions on CSS will not be encountered in most cases. Even if you encounter the best solution, you should merge the CSS files and response tags manually or through a back-end program. ,
Minimizing the number of http requests is the first principle for optimizing page rendering
The above is the detailed content of Detailed explanation of examples of how html uses four ways to reference css style sheets. For more information, please follow other related articles on the PHP Chinese website!