概要

CSSとは、積層スタイルシート(Cascading Style Sheets)

を指す

スタイル定義HTML要素

を表示する方法

スタイルは、通常、スタイルシートに

が格納.

HTML 4.0にスタイルを追加するのは、コンテンツと表現が分離する問題を解決するため

である.

外部スタイルシートは、生産性を大幅に向上させることができる

.

外部スタイルシートは通常CSSファイルに

格納.

複数のスタイル定義は、

に積層することができる.
にじゅうそうじゅんじょ
同じHTML要素が1つ以上のスタイルで定義されている場合、どのスタイルが使用されますか?
一般的に、すべてのスタイルは、次のルールに従って新しい仮想スタイルテーブルに積層され、数字4が最も優先されます.
1.ブラウザのデフォルト設定
2.外部スタイルシート
3.内部スタイルシート(ラベルの内部)
4.インラインスタイル(HTML要素内)
三CSS基本文法
CSS構文は、セレクタ、属性、値の3つの部分で構成されています.

selector {property: value}

セレクタ(selector)は通常、定義したいHTML要素またはラベルです.プロパティ(property)は変更したいプロパティであり、各プロパティには値(value)があります.プロパティと値はコロンで区切られ、カッコで囲まれており、完全なスタイル宣言(declaration)が構成されています.
ヒント:値が複数の単語の場合、値に引用符を付けます.

p {font-family: "sans serif";}

ヒント:複数の宣言を定義する場合は、各宣言をセミコロンで区切る必要があります.次の例では、赤い文字の中央段落を定義する方法を示します.最後のルールはセミコロンを付ける必要はありませんが、セミコロンを付けるのは良い習慣です.

p {text-align:center; color:red;}  

ヒント:スタイル定義の読みやすさを向上させるには、行ごとに1つのプロパティのみを記述する必要があります.

p {
  text-align: center;
  color: black;
  font-family: arial;
}

ヒント:スペースを含めるかどうかは、ブラウザでのCSSの作業効果には影響しませんが、読み取り可能性を高めることができます.XHTMLと異なり、CSSは大文字と小文字に敏感ではありません.ただし、HTMLドキュメントと一緒に作業する場合、classとid名は大文字と小文字に敏感です.
ヒント:属性値と単位の間にスペースを残さないでください.「margin-left:20 px」ではなく「margin-left:20 px」を使用すると、IE 6でのみ有効ですが、Mozilla/FirefoxまたはNetscapeでは正常に動作しません.
四CSS高級文法
1.セレクタグループ
セレクタをグループ化することで、グループ化されたセレクタは同じ宣言を共有することができます.グループ化が必要なセレクタをカンマで区切ります.次の例では、すべてのタイトル要素をグループ化します.すべてのタイトル要素は緑です.

h1,h2,h2,h3,h5,h6 {
  color: green;
  }

2.継承とその問題
CSSによると、子要素は親要素から属性を継承します.しかし、それはいつもこのように働いているわけではありません.次のルールを見てみましょう.

body {
     font-family: Verdana, sans-serif;
     }

上記のルールに従って、サイトのbody要素はVerdanaフォント(アクセス者のシステムにフォントが存在する場合)を使用します.
CSS継承により、サブエレメントは、最上位エレメント(この例ではbody)が持つ属性を継承します.(p,td,ul,ol,ul,li,dl,dt,ddなどのサブエレメント.他のルールは必要ありません.すべてのbodyのサブエレメントはVerdanaフォントを表示するべきです.サブエレメントのサブエレメントも同じです.ほとんどの現代ブラウザでは、確かにそうです.しかし、そのブラウザ大戦の血生臭い時代には、このような状況は必ずしも起こりません.例えば、Netscape 4は継承をサポートしない.継承は無視されるだけでなく、body要素に適用されるルールも無視される.IE/Windowsは、IE 6まで関連する問題があり、表内のフォントスタイルは無視されます.どうすればいいの?
方法:

//:         ，     
body  { 
     font-family: Verdana, sans-serif;
     }
//:                  
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
//:            ，                
p  {
     font-family: Times, "Times New Roman", serif;
     }

3.派生セレクタ
派生セレクタを使用すると、ドキュメントのコンテキスト関係に基づいてラベルのスタイルを決定できます.たとえば、リストのstrong要素を通常の太字ではなく斜体字にしたい場合は、派生セレクタを定義します.

//:     
     ，   italic,  ，     
li strong {
    font-style: italic;
    font-weight: normal;
  }

例:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

次に、影響を与えるHTMLを示します.

The strongly emphasized word in this paragraph isred.
This subhead is also red.
The strongly emphasized word in this subhead isblue.

4.idセレクタ
idセレクタは、特定のidが付いたHTML要素に特定のスタイルを指定できます.idセレクタは「#」で定義されます.次の2つのidセレクタでは、最初の定義属性id="red"の要素の色が赤で、2番目の定義id="green"の要素の色が緑です.

#red {color:red;}
#green {color:green;}

次のHTMLコードでは、id属性がredのp要素が赤で表示され、id属性がgreenのp要素が緑で表示されます.

       。
       。

注意:idプロパティは、HTMLドキュメントごとに1回のみ表示されます.
5.idセレクタ+派生セレクタ
現代のレイアウトでは、idセレクタは派生セレクタを確立するためによく使用されます.

#sidebar p {
         font-style: italic;
         text-align: right;
         margin-top: 0.5em;
         }

上のスタイルは、idがsidebarの要素内に表示される段落にのみ適用されます.この要素はdivまたはテーブルユニットである可能性が高いが、テーブルまたは他のブロックレベルの要素である可能性がある.インライン要素、例えば、または、このような使用は不正です.インライン要素に埋め込むことはできません.
6.クラスセレクタ
クラスセレクタはポイント(.)で表示されます.

.center {text-align: center}

centerクラスを持つすべてのHTML要素が中央に配置されています.次のHTMLコードでは、h 1とp要素にcenterクラスがあります.これは、両方とも「.center」セレクタのルールを遵守することを意味します.

This heading will be center-aligned


This paragraph will also be center-aligned.

注意:クラス名の最初の文字は数値を使用できません.MozillaまたはFirefoxでは機能しません.
1>クラス選択+派生選択

.fancy td {
         color: #f60;
         background: #666;
         }

上記の例では、fancyというより大きな要素の内部のテーブルユニットにオレンジ色の文字が灰色の背景で表示されます.(fancyというより大きな要素はテーブルまたはdivである可能性があります)
2>派生選択+クラス選択

td.fancy {
         color: #f60;
         background: #666;
         }

上記の例では、fancyというクラス名のテーブルユニットは灰色の背景を持つオレンジ色であり、他の要素は影響を受けません.
5 CSSはどのように導入しますか?
スタイルシートを挿入する方法は、次の3つです.
1.外部スタイルシートスタイルを多くのページに適用する必要がある場合、外部スタイルシートが理想的です.各ページはラベルを使用してスタイルシートにリンクされます.ラベルは(ドキュメントの)ヘッダーにあります.

2.内部スタイルシート個々のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用します.ラベルを使用して、ドキュメントのヘッダに内部スタイルシートを定義できます.このように:</p>
<div class="jb51code">
<pre class="brush:css;">
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
 3.インラインスタイルは、表現と内容を混在させるため、インラインスタイルはスタイルシートの多くの利点を失うことになります.たとえば、スタイルを1つの要素に1回だけ適用する必要がある場合は、この方法を慎重に使用してください.
インラインスタイルを使用するには、関連するラベルでスタイル(style)プロパティを使用する必要があります.Styleプロパティには、任意のCSSプロパティを含めることができます.この例では、段落の色と左外の余白を変更する方法を示します.

This is a paragraph

4.複数のスタイル異なるスタイルシートで同じセレクタによって特定のプロパティが定義されている場合、プロパティ値はより特定のスタイルシートから継承されます.