ホームページ > 記事 > ウェブフロントエンド > HTML が CSS スタイルシートを参照する 4 つの方法を使用する例の詳細な説明
HTML が CSS スタイルシートを参照する 4 つの方法を使用する例の詳細な説明
- 黄舟オリジナル
- 2017-07-26 09:45:522211ブラウズ
方法 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 サイトの他の関連記事を参照してください。