首頁 > 文章 > web前端 > html使用四種方式引用css樣式表的實例詳解

html使用四種方式引用css樣式表的實例詳解

黄舟原創: 2017-07-26 09:45:522197瀏覽

方法一: css1.html

<html>
<head>
<title>内联样式(方法一)</title>
</head>
<body>
<a href=”http://www.baidu.com” style=”color:#FF00FF; font-size:80;”>百度一下</a>
</body>
</html>

方法二: 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>

方法三: 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>

和css3.html同目錄下的three.css檔: a{color:#FF00FF; background:#0000FF;}

方法四: 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>

和css4.html同目錄下的four.css檔: a{color:#0000FF; background:#FF00FF;}

************************* ************************************************** *******************

在實際應用程式中，使用style屬性的內嵌樣式是不建議使用的，不建議使用第一種方式，這種方式削弱了CSS集中控制整個文件外觀的優點。

前3種方式利用了link標記和style標記，在IE(包括IE6、IE7和IE8 beta1)中有以下限制：

◆ 文件中只有前31個link或style標記關聯的CSS能夠應用；從第32個開始，其標記關聯的CSS都將失效。

◆ 一個style標記只有前31次@import指令有效應用；從第32個@import指令開始忽略。

◆ 一個css檔案只有前31次@import指令有效應用；從第31個@import指令開始忽略。

◆ 一個CSS檔案的不能超過288kb。

IE對CSS的限制在絕大部分情況下是不會遇到的，即使遇到最佳的解決方案也應該是手動或透過後端程式對CSS檔案和回應的標記進行合併，

最小化的http請求數是最佳化頁面呈現的第一原則

以上是html使用四種方式引用css樣式表的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：關於html中列表樣式的實例詳解下一篇：關於html中列表樣式的實例詳解

看更多