Css-inclusion
CSS-包含
HTMLドキュメントにスタイルを関連付けるには、4つの方法があります。 最も一般的に使用されるメソッドは、インラインCSSと外部CSSです。
埋め込みCSS-<style>要素
<style>要素を使用して、CSSルールをHTMLドキュメントに配置できます。 このタグは、<head> … </head>タグ内に配置されます。 この構文を使用して定義されたルールは、ドキュメントで使用可能なすべての要素に適用されます。 ここに一般的な構文があります-
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>それは次の結果を生成します-
属性
<style>要素に関連付けられている属性は-
| Attribute | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This is required attribute. |
| media |
screen tty tv 投影 ハンドヘルド 印刷する 点字 聴覚 all |
Specifies the device the document will be displayed on. Default value is all. This is an optional attribute. |
インラインCSS-_style_属性
HTML要素の_style_属性を使用して、スタイルルールを定義できます。 これらのルールは、その要素にのみ適用されます。 ここに一般的な構文があります-
<element style = "...style rules....">属性
| Attribute | Value | Description |
|---|---|---|
| style | style rules | The value of style attribute is a combination of style declarations separated by semicolon (;). |
例
上記は、上記の構文に基づいたインラインCSSの例です-
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>それは次の結果を生成します-
外部CSS-<link>要素
<link>要素を使用して、HTMLドキュメントに外部スタイルシートファイルを含めることができます。
外部スタイルシートは、*。css *拡張子を持つ独立したテキストファイルです。 このテキストファイル内ですべてのスタイルルールを定義し、<link>要素を使用してこのファイルをHTMLドキュメントに含めることができます。
外部CSSファイルを含める一般的な構文は次のとおりです-
<head>
<link type = "text/css" href = "..." media = "..."/>
</head>属性
<style>要素に関連付けられている属性は-
| Attribute | Value | Description |
|---|---|---|
| type | text css | Specifies the style sheet language as a content-type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file having Style rules. This attribute is a required. |
| media |
screen tty tv 投影 ハンドヘルド 印刷する 点字 聴覚 all |
Specifies the device the document will be displayed on. Default value is all. This is optional attribute. |
例
次のルールを持つ_mystyle.css_という名前のシンプルなスタイルシートファイルを考えてください-
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}これで、このファイル_mystyle.css_を次のようにHTMLドキュメントに含めることができます-
<head>
<link type = "text/css" href = "mystyle.css" media = " all"/>
</head>インポートされたCSS-@importルール
@importは、<link>要素と同様の方法で外部スタイルシートをインポートするために使用されます。 @importルールの一般的な構文は次のとおりです。
<head>
<@import "URL";
</head>ここで、URLはスタイルルールを持つスタイルシートファイルのURLです。 同様に別の構文を使用することができます-
<head>
<@import url("URL");
</head>例
以下は、スタイルシートファイルをHTMLドキュメントにインポートする方法を示す例です-
<head>
@import "mystyle.css";
</head>CSSルールのオーバーライド
HTML文書にスタイルシートルールを含める4つの方法について説明しました。 スタイルシートルールをオーバーライドするルールを次に示します。
- インラインスタイルシートが最も優先されます。 そのため、<style> … </style>タグで定義されたルールまたは外部スタイルシートファイルで定義されたルールをオーバーライドします。
- <style> … </style>タグで定義されたルールは、外部スタイルシートファイルで定義されたルールをオーバーライドします。 *外部スタイルシートファイルで定義されたルールは最も優先順位が低く、このファイルで定義されたルールは、上記の2つのルールが適用できない場合にのみ適用されます。
古いブラウザの処理
CSSをサポートしていない古いブラウザはまだたくさんあります。 そのため、埋め込みCSSをHTMLドキュメントに書き込む際には注意が必要です。 次のスニペットは、コメントタグを使用して古いブラウザからCSSを非表示にする方法を示しています-
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>CSSコメント
多くの場合、スタイルシートブロックにコメントを追加する必要があります。 そのため、スタイルシートの任意の部分をコメントするのは非常に簡単です。/* …..これはスタイルシートのコメントです….. */の中に簡単にコメントを入れることができます。
/* …. */を使用して、CおよびC ++プログラミング言語で行うのと同様の方法で複数行ブロックをコメント化できます。
例
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/*This is a single-line comment*/
text-align: center;
}
/*This is a multi-line comment*/
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>それは次の結果を生成します-
