もっと詳しく

カスケードスタイルシート(別名CSS)は、Webページに表示されるHTML要素のスタイルを設定するために使用されるスタイル言語です。 CSSを使用すると、複数のWebページを一度にスタイル設定するために使用できる再利用可能なスタイルシートを生成できます。 これらのスタイルシートは多くの時間を節約し、保守が容易です。 しかし、CSSスタイルシートをHTMLドキュメントにリンクする方法を考えたことはありますか? さて、私たちはこのブログであなたのために要約された答えを持っています。

CSSをHTMLにリンクするための3つの方法。 これらは以下に参加しています。

  1. インラインCSS
  2. 内部CSS
  3. 外部CSS

これらのアプローチはすべて、このブログで説明されています。

インラインCSSをHTMLにリンクする方法

このアプローチを採用している場合は、スタイルを設定する特定の要素のスタイル属性を使用する必要があります。 要素の開始タグにスタイルを挿入するだけです。

このアプローチは、特定の要素の開始タグ内でスタイリングが行われるため、コードの読み取りと保守が困難になるため、お勧めしません。 さらに、インラインCSSは再利用できないため、すべての要素を個別にスタイル設定する必要があり、スタイル設定タスクが煩雑になり、CSSを使用する目的が失われます。

ここでは、例を使用してこのアプローチを示しました。

HTML

<!DOCTYPE html>
<html>>
<>>

<タイトル>>CSSをHTMLにリンクする方法</タイトル>>
</>>
<>>

<div スタイル=“パディング:5px;ボーダー:2px青一色;”>>
<h1 スタイル=「色:紫;」>>CSSをHTMLにリンクする方法</h1>>
<p スタイル=“赤色;”>>インラインCSS</p>>
</div>>

</>>
</html>>

上記のコードでは、次の3つの要素が生成されています。

、および

。 3つすべてが、style属性を使用してスタイル設定されています。 divコンテナにはいくつかのパディングと境界線があり、その間、見出しと段落には特定のテキストの色が付けられています。

出力

要素はインラインCSSを使用してスタイル設定されました。

CSSをHTMLに内部的にリンクする方法

このアプローチでは、HTMLドキュメントのheadセクションにある