CSS-包含

HTMLドキュメントにスタイルを関連付けるには、4つの方法があります。最も一般的に使用されるメソッドは、インラインCSSと外部CSSです。

埋め込みCSS-<style>要素

<!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>

それは次の結果を生成します-

属性

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>要素

外部スタイルシートは、*。css *拡張子を持つ独立したテキストファイルです。このテキストファイル内ですべてのスタイルルールを定義し、<link>要素を使用してこのファイルをHTMLドキュメントに含めることができます。

外部CSSファイルを含める一般的な構文は次のとおりです-

<head>
   <link type = "text/css" href = "..." media = "..."/>
</head>

属性

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>

それは次の結果を生成します-

Css-inclusion

CSS-包含

埋め込みCSS-<style>要素

属性

インラインCSS-_style_属性

属性

例

外部CSS-<link>要素

属性

例

インポートされたCSS-@importルール

例

CSSルールのオーバーライド

古いブラウザの処理

CSSコメント

例

目次