フロントエンド開発では、CSS は不可欠な部分です。 CSS は、Web ページにスタイルを追加したり、ページをより美しくしたり、Web ページをよりプロフェッショナルでユーザーがアクセスしやすくしたりするのに役立ちます。この記事では、CSS を呼び出す方法について説明します。 1. インライン スタイル HTML の タグ内に CSS を記述することができ、このような CSS をインライン スタイルと呼びます。インライン スタイルは、個々の要素のスタイル設定に適しており、最も優先されます。 </p> <p>// HTML code<br><div style="background-color: red; color:white;">これは上記の div 要素です</div></p> <p>たとえば、インライン スタイルを使用して、div の背景色を赤、テキストの色を白に設定します。インライン スタイルの使用はできる限り少なくする必要があることに注意してください。そうしないと、HTML コードが長くなり、保守が困難になります。 </p> <p>2. 埋め込みスタイル</p> <p>HTML 文書の <head> タグ内に CSS を記述することもでき、このタイプの CSS を埋め込みスタイルと呼びます。インライン スタイルは、複数の要素のスタイル設定に適しており、優先度は中です。 </p> <p>// HTML コード<br><head></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style> div { background-color: blue; color: white; } p { font-size: 14px; } ログイン後にコピー 这是一个 div 元素 这是一个 p 元素ログイン後にコピーログイン後にコピー 上記の例では、埋め込みスタイルを使用して div の背景色を青、テキストの色を白に設定し、p のフォント サイズを 14px に設定します。なお、埋め込みスタイルは外部から参照できないため、一元管理には不向きです。 3. 外部スタイル シート 最良の方法は、CSS を外部スタイル シートに記述し、別のリンクを通じて外部スタイル シートを指定することです。そうすることで、HTML コードがより簡潔になるだけでなく、スタイルの統合管理もより適切に実現されます。 // HTML コード ログイン後にコピー 这是一个 div 元素 这是一个 p 元素ログイン後にコピーログイン後にコピー // style.css コード div { background-color: green; color: white;ログイン後にコピー }p { font-size: 16px;ログイン後にコピー } 上記の例では、 CSS は別の style.css ファイルに記述され、HTML ドキュメントにリンクされます。外部スタイル シートは Web サイト全体のスタイル設定に適しており、複数の HTML ドキュメントで共有できることに注意してください。 概要 インライン スタイル、埋め込みスタイル、外部スタイル シートのいずれであっても、それらを通じて CSS スタイルを呼び出すことができます。ただし、実際の状況に応じて異なる方法を選択する必要があります。 インライン スタイルは、個々の要素のスタイル設定に適しています。埋め込みスタイルは、複数の要素のスタイル設定に適しています。外部スタイル シートは、Web サイト全体のスタイル設定に適しており、複数の HTML ドキュメントで使用できます。共有使用。
