ホームページ > 記事 > ウェブフロントエンド > HTMLでCSSスタイルを参照するにはどうすればよいですか? HTMLでCSSファイルを参照する3つの方法を紹介
HTML で CSS スタイルを参照するには 3 つの方法があります。では、その 3 つの方法とは何でしょうか?この記事では、htmlでcssファイルを参照する3つの方法を詳しく紹介します。
CSS で HTML 文書および XHTML 文書にスタイルシートを適用するには、大きく分けて次の 3 つの方法があります。 (推奨チュートリアル: css ビデオ チュートリアル )
1. 2cdf5bf648cf2f33323966d7f58a7f3f 要素を使用して外部 CSS ファイルを呼び出し、適用します。
2.適用する要素 ドキュメント ユニット
3. 要素にスタイル属性を追加してスタイルを適用します。
2cdf5bf648cf2f33323966d7f58a7f3f 外部 CSS ファイルを呼び出して適用します。 HTMLファイルとは別にスタイルシートを記述し、HTMLファイルから呼び出すCSSファイルを作成します。呼び出しの場合、外部 CSS ファイルは、HTML ドキュメントを記述する
要素内の 要素を介して指定されます。適用されるスタイルがCSSに基づいていることをブラウザなどに通知するには、2cdf5bf648cf2f33323966d7f58a7f3f要素のtype属性の値にtext/cssを指定します。 XHTMLとの互換性やスタイルの修正のしやすさなどを考慮すると、この方法でスタイルシートを設定することを推奨します。スタイルシートのコンポーネントは外部ファイル(xxx.css)に記述されています。
p {color:blue; line-height:1.5;}
HTML ソース コード
<html> <head> <link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”> </ head> <body> <p>这是一个段落</ p> </ body> </ html>
c9ccee2e6ea535a969eb3f532ad9fe89 要素を使用してドキュメント単位に適用されます
HTML ドキュメントの 93f0f5c25f18dab9d176bd4f6de5d30e 要素に c9ccee2e6ea535a969eb3f532ad9fe89 要素を記述し、ドキュメントごとにスタイル シートを設定します。 c9ccee2e6ea535a969eb3f532ad9fe89 要素の type 属性の値として text/css を指定すると、適用されるスタイルが CSS に基づいていることをブラウザなどに通知します。
また、a43e6c59218ee94fffa714759615e7c2コメント スタイル シート セクションは、スタイル シートに対応していない古いブラウザで c9ccee2e6ea535a969eb3f532ad9fe89 要素の内容が表示されないようにするためのものです。ただし、近年のほとんどのブラウザは c9ccee2e6ea535a969eb3f532ad9fe89 要素をサポートしているため、 ほぼ問題ありません。
<html> <head> <style type="text/css"> <!-- p {color:blue; line-height:1.5;} --> </style> </head> <body> <p>这是一个段落。</p> </body> </html>スタイル属性を要素に追加してスタイルを適用する
スタイル属性を要素に追加し、HTML ソース コードにスタイル仕様を直接記述します。 style属性でスタイルを指定するには、文書内で使用されているスタイルシートがCSSであることをブラウザなどに通知するために、93f0f5c25f18dab9d176bd4f6de5d30e要素にe8e496c15ba93d81f6ea4fe5f55a2244要素を追加してスタイル言語を指定します。値として text/css を指定します。多くの場合、指定しなくてもブラウザが自動的にこれを判断しますが、不具合を避けるためにそれを記述する必要があります。
スタイル属性のスタイル指定は、スタイルに部分的な優先順位を付ける場合に便利ですが、HTML ソースが複雑になるとスタイル管理が複雑になる傾向があります。効率的なスタイル管理を目指す場合、CSS部分を外部ファイルに変換することが一般的です。
例: スタイル属性を使用してスタイルシートを直接適用する
<html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:blue; line-height:1.5;">这是一个段落。</p> </body> </html>
以上がHTMLでCSSスタイルを参照するにはどうすればよいですか? HTMLでCSSファイルを参照する3つの方法を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。