HTML-スタイルシート
カスケードスタイルシート（CSS）は、ドキュメントが画面上、印刷物でどのように表示されるか、またはおそらくどのように発音されるかを説明します。W3Cは、1994年にコンソーシアムが設立されて以来、Web上でのスタイルシートの使用を積極的に推進してきました。
カスケードスタイルシート（CSS）は、HTMLタグのさまざまな属性を指定するための簡単で効果的な代替手段を提供します。CSSを使用すると、特定のHTML要素にいくつかのスタイルプロパティを指定できます。各プロパティには、コロン（:)で区切られた名前と値があります。各プロパティ宣言はセミコロン（;）で区切られます。
例
まず、<font>タグと関連する属性を使用してテキストの色とフォントサイズを指定するHTMLドキュメントの例を考えてみましょう-
Note−フォントタグは非推奨になり、HTMLの将来のバージョンで削除される予定です。したがって、それらを使用するのではなく、CSSスタイルを使用してフォントを操作することをお勧めします。ただし、学習を目的として、この章ではfontタグを使用した例を使用します。
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>スタイルシートを使用して、上記の例を次のように書き直すことができます。
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>これにより、次の結果が生成されます-
HTMLドキュメントでは3つの方法でCSSを使用できます-
External Style Sheet −別の.cssファイルでスタイルシートルールを定義してから、HTML <link>タグを使用してそのファイルをHTMLドキュメントに含めます。
Internal Style Sheet − <style>タグを使用して、HTMLドキュメントのヘッダーセクションでスタイルシートルールを定義します。
Inline Style Sheet −を使用して、HTML要素とともにスタイルシートルールを直接定義します。 style 属性。
適切な例を使用して、3つのケースすべてを1つずつ見ていきましょう。
外部スタイルシート
さまざまなページでスタイルシートを使用する必要がある場合は、別のファイルで共通のスタイルシートを定義することを常にお勧めします。カスケードスタイルシートファイルの拡張子は次のようになります.css <link>タグを使用してHTMLファイルに含まれます。
例
スタイルシートファイルを定義することを検討してください style.css 以下のルールがあります-
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}ここでは、HTMLタグに定義された3つの異なるクラスに適用できる3つのCSSルールを定義しました。CSSを学びながら学ぶので、これらのルールがどのように定義されているかを気にしないでください。次に、次のHTMLドキュメントで上記の外部CSSファイルを利用しましょう-
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>これにより、次の結果が生成されます-
内部スタイルシート
スタイルシートルールを単一のドキュメントにのみ適用する場合は、<style>タグを使用してHTMLドキュメントのヘッダーセクションにそれらのルールを含めることができます。
内部スタイルシートで定義されたルールは、外部CSSファイルで定義されたルールを上書きします。
例
上記の例をもう一度書き直してみましょう。ただし、ここでは、<style>タグを使用して同じHTMLドキュメントにスタイルシートルールを記述します。
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>これにより、次の結果が生成されます-
インラインスタイルシート
を使用して、スタイルシートルールを任意のHTML要素に直接適用できます。 style関連するタグの属性。これは、HTML要素にのみ特定の変更を加えることに関心がある場合にのみ実行する必要があります。
要素とインラインで定義されたルールは、外部CSSファイルで定義されたルールと<style>要素で定義されたルールをオーバーライドします。
例
上記の例をもう一度書き直してみましょうが、ここでは、を使用してHTML要素とともにスタイルシートルールを記述します。 style それらの要素の属性。
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>これにより、次の結果が生成されます-