HTML が CSS スタイルシートを参照する 4 つの方法を使用する例の詳細な説明-htmlチュートリアル-php.cn

HTML が CSS スタイルシートを参照する 4 つの方法を使用する例の詳細な説明

黄舟

リリース： 2017-07-26 09:45:52

オリジナル

2204 人が閲覧しました

方法 1: css1.html

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

ログイン後にコピー

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

ログイン後にコピー

方法 3: 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 と同じディレクトリにある 3 つの .css ファイル: a{color:#FF00FF; #0000FF;}

方法 4: 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 と同じディレクトリにある 4 つの.css ファイル: a{color:#0000FF; background:#FF00FF;}

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

実際のアプリケーションでは、style 属性を使用しますインラインスタイルは推奨されません。また、最初の方法は、ドキュメント全体の外観を一元的に制御するという CSS の利点を弱めます。

最初の 3 つの方法では、リンクタグとスタイルタグを使用します。IE (IE6、IE7、IE8 ベータ 1 を含む) では次の制限があります。

◆ ドキュメント内の最初の 31 個のリンクタグまたはスタイルタグに関連付けられた CSS のみ。適用可能 ; 32 番目以降、そのタグに関連付けられた CSS は無効になります。

◆ style タグは最初の 31 個の @import 命令でのみ有効で、32 番目の @import 命令以降は無視されます。

◆ CSS ファイルの最初の 31 個の @import ディレクティブのみが効果的に適用され、31 番目の @import ディレクティブ以降は無視されます。

◆ CSS ファイルは 288kb を超えることはできません。

CSS に関する IE の制限は、たとえ最適な解決策が見つかったとしても、

最小限の http リクエストの数を最大化することによって、CSS ファイルと応答タグをマージする必要があります。ページレンダリングを最適化するための第一原則

以上がHTML が CSS スタイルシートを参照する 4 つの方法を使用する例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。