CSSの適用方法 < CSS ｜ HTML+CSSまとめページ

CSS

HTML文書にCSSを適用するには、いくつかの方法がある。

ほとんどの場合、外部スタイルシートとして利用する（管理や修正などが容易なため）。

内部スタイルシートは、1つのHTML文書内にしか適用されないスタイルに限って利用する場合もある。

HTMLの各要素にstyle属性を用いて直接記入する方法は、ほとんど使用しない（修正などが煩雑になるため、あまり使用するべきではない）。

HTML文書とは別にCSSファイルを用意し、そこにスタイルを記述する方法を、外部スタイルシートという。

この方法が一般的かつ標準的な方法である。

外部スタイルシートのCSSファイルの拡張子は.cssとする。

もちろんファイル名には半角英数字しか使用できず、ファイル名の中に半角のスペースも利用できない。

通常は、HTML文書内のhead要素内で、link要素を利用して、適用するCSSファイル名を記述する。

例：link要素でCSSファイルのファイル名（この場合はstyle.css）を指定する。

<head>

			<link href="style.css" rel="stylesheet" type="text/css" media="all">

			</head>

（＊「media="all"」の部分でパソコン画面用と印刷用などを指定できる）

HTML文書のhead要素内にstyle要素を設け、HTML文書内にCSSを埋め込む方法を、内部スタイルシートという。

1つのHTML文書にしか使わないスタイルに限り、かつ、この方法の利便性が高い場合にのみ指定する。

例：head要素内のstyle要素でのスタイルの指定する。

<head>

				<style type="text/css">

				p {

				color: #333333;

				font-size: 1.5em;

				}

				</style>

				</head>

HTML文書の各要素にstyle属性を用いてスタイルを直接指定する方法もある。

この方法はいずれ使えなくなるし、何より管理や記述が手間なので、使用しない方が良い。

例：p要素にstyle属性で指定する。

<p style="color: #333333;">○○○○</p>