CSS接続

CSSをHTMLにリンクする

CSSをHTMLに適用するには3つの方法があります.

Inline Style Sheet

Internal Style Sheet

Linking Style Sheet

1. Inline Style Sheet

行スタイルシートは、CSSコードをHTMLタグのスタイル属性に入れて有効にする方法です.

<p style="color: blue"></p>

ラベルはセレクタになりますが、CSSコードには属性と値のみが含まれます.
その欠点は、装飾が限られており、繰り返し使用できないことである.

2. Internal Style Sheet

内部スタイルシートは、HTMLドキュメントにスタイルコードを入れる方法です.

<style>과</style> 안에 CSS 코드를 넣습니다.

<style>
  h1 {
    color: blue;
  }
</style>

styleタグは通常headタグの間に配置されますが、HTMLドキュメントのどこに置いても適用されます.この方法の利点は、HTMLドキュメント内の複数の要素を同時に修飾できることですが、他のHTMLドキュメントには適用できないという点です.

3. Linking Style Sheet

リンクスタイルシートは、個別のCSSファイルを作成してHTMLドキュメントに関連付ける方法です.たとえば、h 1要素のすべてのテキストを赤色にする場合は、styleを使用します.cssファイルを作成します.(CSSファイルの拡張子はcssです.)
適用するHTMLドキュメントに次のコードを追加します.

<link rel="stylesheet" href="style.css">

以上のコードは、HTMLファイルとCSSファイルが同じフォルダにあると仮定したもので、パスが異なる場合は修正が必要です.たとえば、HTMLドキュメントが存在するフォルダには、styleを含むcssフォルダが含まれています.cssファイルがある場合は、次の操作を行います.

<link rel="stylesheet" href="[css파일 경로]">
<link rel="stylesheet" href="css/style.css">

この方法の利点は、複数のHTMLドキュメントで使用できることです.style.リンクタグをcssを適用したいドキュメントにリンクするだけです.