CSS 構(gòu)文、セレクターの作成方法と使用方法
CSS入門
必要な基礎(chǔ)知識
學(xué)習(xí)を続ける前に、次の知識の基本を理解しておく必要があります:
· CSSは、Cascading Style Sheets (Cascading Style Sheets)の略です
· スタイルの定義どうやってHTML要素を表示するには
? スタイルは通常スタイルシートに格納されます? コンテンツとプレゼンテーションの分離の問題を解決するためにHTML 4.0にスタイルが追加されました
? スタイルシートは文書を定義するために使用されます。コンテンツ。 <h1>、<p>、<table>などのタグを使うことで、「これはタイトルです」「これは段落です」「これは表です」といった情報を表現(xiàn)するのがHTMLの本來の目的です。 」。同時に、ドキュメントのレイアウトは、書式設(shè)定タグを使用せずにブラウザーによって完成されます。
スタイルシートで作業(yè)効率が大幅に向上スタイルシートは、HTML 3.2のfontタグやcolor屬性と同じように、HTML要素の表示方法を定義します。スタイルは通常、外部の .css ファイルに保存されます。外部スタイル シートを使用すると、単純な CSS ドキュメントを編集するだけで、サイト內(nèi)のすべてのページのレイアウトと外観を同時に変更できます。
CSS は、複數(shù)のページのスタイルやレイアウトを同時に制御できるため、WEB デザインの分野における畫期的な技術(shù)と言えます。 Web サイト開発者は、各 HTML 要素のスタイルを定義し、必要な數(shù)のページに適用できます。グローバル更新を行うには、スタイルを変更するだけで、サイト內(nèi)のすべての要素が自動的に更新されます。
複數(shù)のスタイルが 1 つにカスケードされますスタイル シートを使用すると、スタイル情報を複數(shù)の方法で指定できます。スタイルは、個々の HTML 要素、HTML ページのヘッダー要素、または外部 CSS ファイルで指定できます。同じ HTML ドキュメント內(nèi)で複數(shù)の外部スタイルシートを參照することもできます。
カスケード順序同じ HTML 要素が複數(shù)のスタイルで定義されている場合、どのスタイルが使用されますか? 一般に、すべてのスタイルは、次のルールに従って新しい仮想スタイル シートにカスケードされ、番號 4 が最も高い優(yōu)先順位を持ちます。
1. ブラウザのデフォルト設(shè)定
2. 外部スタイルシート（<head>タグ內(nèi)にあります）
4. インラインスタイル（HTML要素內(nèi)）
したがって、インライン スタイル (HTML 要素內(nèi)) が最も優(yōu)先されます。つまり、<head> タグ內(nèi)のスタイル宣言、外部スタイル シート內(nèi)のスタイル宣言、またはブラウザー內(nèi)のブラウザー スタイル宣言よりも優(yōu)先されます。 。
CSS 基本構(gòu)文
CSS 構(gòu)文
CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構(gòu)成されます。
selector {宣言 1; 宣言 2; ... 宣言 N }
セレクターは通常、スタイルを変更する必要がある HTML 要素です。
各宣言は屬性と値で構(gòu)成されます。
プロパティは、設(shè)定するスタイル屬性です。各屬性には値があります。プロパティと値はコロンで區(qū)切られます。
selector {property: value}
次のコード行は、h1 要素內(nèi)のテキストの色を赤として定義し、フォント サイズを 14 ピクセルに設(shè)定します。
この例では、h1 がセレクター、color と font-size が屬性、red と 14px が値です。
h1 {color:red; font-size:14px;}
以下の図は、上記のコードの構(gòu)造を示しています。
ヒント: 宣言を囲むには中括弧を使用してください。
値のさまざまな記述方法と単位
英語の単語 red に加えて、16 進(jìn)數(shù)の色の値 #ff0000:
p { color: #ff0000 }
バイトを節(jié)約するために、短い形式の CSS を使用できます:
p { color: #f00; }
2 つの方法で RGB 値を使用することもできます:
p { color: rgb(255,0,0); { color: rgb(100%,0%,0%); }
引用符を忘れずに記述してください
ヒント: 値が複數(shù)の単語の場合は、値に引用符を追加します: p {font-family: "sans serif";}
複數(shù)の宣言:
ヒント: 複數(shù)の宣言を定義する場合は、各宣言をセミコロンで區(qū)切る必要があります。以下の例は、赤いテキストを含む中央揃えの段落を定義する方法を示しています。セミコロンは英語では區(qū)切り文字であり、終端文字ではないため、最後のルールではセミコロンは必要ありません。ただし、経験豊富な設(shè)計者のほとんどは、各ステートメントの末尾にセミコロンを追加します。これにより、既存のルールにステートメントを追加または削除するときにエラーが発生する可能性が最小限に抑えられます。次のように: p {text-align:center;color:red;}
色: 黒;
フォントファミリー: arial;}
スペースと大文字/小文字
ほとんどのスタイルシートには複數(shù)のルールが含まれており、ほとんどのルールには複數(shù)の宣言が含まれています。複數(shù)の宣言と空白を使用すると、スタイル シートの編集が容易になります。
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif ;
}
スペースが含まれているかどうかは、XHTML とは異なり、CSS がブラウザーでどのように機能するかには影響しません。例外が 1 つあります。HTML ドキュメントを操作する場合、クラス名と ID 名は大文字と小文字が區(qū)別されます。
CSS の高度な構(gòu)文
セレクターのグループ
セレクターをグループ化して、グループ化されたセレクターが同じ宣言を共有できるようにすることができます。グループ化する必要があるセレクターを區(qū)切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。
h1,h2,h3,h4,h5,h6 {
color: green;
}
CSS 派生セレクター
派生セレクター
は、その位置にある要素のコンテキストに基づいてスタイルを定義します。マークアップをより簡潔にします。
CSS1 では、この方法でルールを適用するセレクターは、コンテキストに依存してルールを適用または回避するため、コンテキスト セレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも同じことを行います。
派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設(shè)定できます。派生セレクターを賢明に使用することで、HTML コードをよりクリーンにすることができます。
たとえば、リスト內(nèi)のstrong要素を通常の太字ではなく斜體にしたい場合は、次のように派生セレクターを定義できます:
li Strong {
font-style: italic;
font-weight:normal ;
}
<strong> とマークされた青いコードのコンテキストに注意してください:
<p><strong>リストに含まれていないため、斜體ではなく太字で表示されています。私にはうまくいきません</strong></p>
<ol>
<li><strong>私の斜體。これは、strong 要素が li 要素の內(nèi)側(cè)にあるためです。 </strong></li>
<li>私は普通のフォントです。 </li>
</ol>
上記の例では、li 要素內(nèi)の強い要素のみが斜體でスタイル設(shè)定されています。強い要素に対して特別なクラスや ID を定義する必要はありません。コードはより簡潔になります。 S 以下の CSS ルールを見てください:
Strong {
Color: red;}
Hh2 {
Color: red;
} 影響する HTML:
<p>この段落で強く強調(diào)されている?yún)g語は<strong>赤色</strong>です。</p>
<h2>この小見出しも赤色です。</h2>
<h2>強く強調(diào)されている?yún)g語は赤色です。この小見出しで強調(diào)されている?yún)g語は<strong>青</strong>です。</h2>
CSS IDセレクター
IDセレクター
IDセレクターは、特定のIDスタイルでマークされた特定のHTML要素を指定できます。
idセレクターは「#」で定義されます。
次の 2 つの ID セレクター。最初のものは要素の色を赤として定義でき、2 つ目は要素の色を緑として定義できます:
#red {color:red;}
#green {color :green;}
以下のHTMLコードでは、id屬性が赤色のp要素は赤色で表示され、id屬性が緑色のp要素は緑色で表示されています。
<p id="red">この段落は赤色です。 </p>
<p id="green">この段落は緑色です。 </p>
注: id 屬性は、各 HTML ドキュメント內(nèi)で 1 回だけ使用できます。その理由を知るには、「XHTML: Web サイトのリファクタリング」を參照してください。
ID セレクターと派生セレクター
最新のレイアウトでは、派生セレクターの作成に ID セレクターがよく使用されます。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上記のスタイルは、ID を持つ要素內(nèi)に表示される段落にのみ適用されますサイドバーのこの要素は div または table セルである可能性が最も高くなりますが、table またはその他のブロック レベル要素である可能性もあります。 <em></em> や <span></span> などのインライン要素にすることもできますが、インライン要素 <span> 內(nèi)では使用できないため、このような使用は違法です。 ;p> (理由を忘れた場合は、「XHTML: Web サイトのリファクタリング」を參照してください)。
1 つのセレクターで複數(shù)の用途
サイドバーとしてマークされた要素がドキュメント內(nèi)で 1 回しか出現(xiàn)できない場合でも、この ID セレクターは派生セレクターとして何度も使用できます:
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight:normal;
font-style: italic;
余白: 0 ;
ここで、ページ內(nèi)の他の p 要素と明らかに異なるのは、サイドバー內(nèi)の p 要素が特別に扱われていることです。同時に、ページ內(nèi)の他のすべての h2 要素と明らかに異なるのは、h2 要素がサイドバーも特別な処理が施されています。
個別のセレクター 選擇 ID セレクターは、派生セレクターの作成に使用されない場合でも、獨立して再生できます。ルールに従って、サイドバーの ID を持つ要素にはピクセル幅の黒い點線の境界線があり、その周囲に 10 ピクセルのパディングが存在します。古いバージョンの Windows/IE ブラウザでは、このセレクターが屬する要素を明確に定義しない限り、このルールが無視される可能性があります:
div#sidebar {
border: 1px dotted #000; }
CSS クラスselector
.center {text-align: center}
上記の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。
以下の HTML コードでは、h1 要素と p 要素の両方にセンター クラスがあります。これは、両方が「.center」セレクターのルールに従うことを意味します。 <h1 class="center">
この見出しは中央揃えになります</h1>
<p class="center">
この段落も中央揃えになります
注: クラス名の最初の文字として數(shù)字を使用することはできません。 Mozilla や Firefox では動作しません。
id と同様に、クラスも派生セレクターとして使用できます:
.fancy td {
color: #f60; 大きな要素內(nèi)の表のセルには、灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前のより大きな要素は table または div である可能性があります。)
要素はクラスに基づいて選択することもできます:
td.fancy {
上記の例では、クラス名 ファンシーウィル灰色の背景にオレンジ色になります。
<td class="ファンシー">
クラス fancy はテーブル要素に何度でも割り當(dāng)てることができます。ファンシーでマークされたセルは、背景がグレーのオレンジ色になります。 fancy という名前のクラスが割り當(dāng)てられていないセルは、このルールの影響を受けません。また、ファンシー クラスの段落はオレンジ色の背景ではなく、ファンシーとしてマークされた他の要素はこのルールの影響を受けないことにも注意してください。これはすべてこのルールの記述方法によるもので、効果はファンシーとしてマークされたテーブル セル (つまり、td 要素を使用してファンシー クラスを選択する) に限定されます。
CSSの作成方法
スタイルシートの挿入方法
スタイルシートが読み込まれると、ブラウザはそれに応じてHTMLドキュメントをフォーマットします。スタイル シートを挿入するには 3 つの方法があります:
外部スタイル シート
多くのページにスタイルを適用する必要がある場合、外部スタイル シートが理想的な選択肢になります。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全體の外観を変更できます。各ページは、<link> タグを使用してスタイル シートにリンクします。 <link> タグは (ドキュメントの) head にあります:
<head>
<linkrel="stylesheet" type="text/css" href="mystyle.css" />
< /head>
ブラウザは、ファイル mystyle.css からスタイル宣言を読み取り、それに応じてドキュメントをフォーマットします。
外部スタイルシートは、任意のテキストエディタで編集できます。ファイルには HTML タグを含めることはできません。スタイル シートは .css 拡張子を付けて保存する必要があります。以下はスタイルシート ファイルの例です:
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
屬性値と単位の間にスペースを入れないでください。 「margin-left: 20px」の代わりに「margin-left: 20 px」を使用すると、IE 6 でのみ機能し、Mozilla/Firefox または Netscape では機能しません。
內(nèi)部スタイル シート
単一のドキュメントに特別なスタイルが必要な場合は、內(nèi)部スタイル シートを使用する必要があります。次のように、<style> タグを使用してドキュメントの先頭に內(nèi)部スタイル シートを定義できます。
<head>
<style type="text/css">
hr {color: sienna; }
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
インライン スタイル
プレゼンテーションとコンテンツを組み合わせることで、インライン スタイルはスタイル シートの利點の多くを失います。たとえば、スタイルを要素に 1 回だけ適用する必要がある場合など、この方法は注意して使用してください。
インライン スタイルを使用するには、関連するタグ內(nèi)で style 屬性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。この例は、段落の色と左マージンを変更する方法を示しています:
<p style="color: sienna; margin-left: 20px">
これは段落です
</p>
複數(shù)のスタイル
一部のプロパティが異なるスタイル シートの同じセレクターによって定義されている場合、プロパティ値はより具體的なスタイル シートから継承されます。
たとえば、外部スタイルシートには h3 セレクターの 3 つのプロパティがあります:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
一方、內(nèi)部スタイルシートには For h3 セレクターの 2 つの屬性:
h3 {
text-align: right;
font-size: 20pt;
}
內(nèi)部スタイル シートを持つこのページが同時に外部スタイル シートにリンクされている場合、その後、 h3 が取得します。 スタイルは次のとおりです:
color: red;
text-align: right;
font-size: 20pt;
つまり、color 屬性は外部スタイル シートから継承され、テキストの配置は-alignment) とフォント サイズ (font-size) は、內(nèi)部スタイル シートのルールに置き換えられます。
