CSS 構文、セレクターの作成方法と使用方法

CSS入門

必要な基礎知識

学習を続ける前に、次の知識の基本を理解しておく必要があります:

· CSSは、Cascading Style Sheets (Cascading Style Sheets)の略です

· スタイルの定義どうやってHTML要素を表示するには

・スタイルは通常スタイルシートに格納されます・コンテンツとプレゼンテーションの分離の問題を解決するためにHTML 4.0にスタイルが追加されました

・スタイルシートは文書を定義するために使用されます。コンテンツ。 <h1>、<p>、<table>などのタグを使うことで、「これはタイトルです」「これは段落です」「これは表です」といった情報を表現するのがHTMLの本来の目的です。」。同時に、ドキュメントのレイアウトは、書式設定タグを使用せずにブラウザーによって完成されます。

スタイルシートで作業効率が大幅に向上

スタイルシートは、HTML 3.2のfontタグやcolor属性と同じように、HTML要素の表示方法を定義します。スタイルは通常、外部の .css ファイルに保存されます。外部スタイルシートを使用すると、単純な CSS ドキュメントを編集するだけで、サイト内のすべてのページのレイアウトと外観を同時に変更できます。

CSS は、複数のページのスタイルやレイアウトを同時に制御できるため、WEB デザインの分野における画期的な技術と言えます。 Web サイト開発者は、各 HTML 要素のスタイルを定義し、必要な数のページに適用できます。グローバル更新を行うには、スタイルを変更するだけで、サイト内のすべての要素が自動的に更新されます。

複数のスタイルが 1 つにカスケードされます

スタイルシートを使用すると、スタイル情報を複数の方法で指定できます。スタイルは、個々の HTML 要素、HTML ページのヘッダー要素、または外部 CSS ファイルで指定できます。同じ HTML ドキュメント内で複数の外部スタイルシートを参照することもできます。

カスケード順序

同じ HTML 要素が複数のスタイルで定義されている場合、どのスタイルが使用されますか? 一般に、すべてのスタイルは、次のルールに従って新しい仮想スタイルシートにカスケードされ、番号 4 が最も高い優先順位を持ちます。

1. ブラウザのデフォルト設定

2. 外部スタイルシート（<head>タグ内にあります）

4. インラインスタイル（HTML要素内）

したがって、インラインスタイル (HTML 要素内) が最も優先されます。つまり、<head> タグ内のスタイル宣言、外部スタイルシート内のスタイル宣言、またはブラウザー内のブラウザースタイル宣言よりも優先されます。。

CSS 基本構文

CSS 構文

CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。

selector {宣言 1; 宣言 2; ... 宣言 N }

セレクターは通常、スタイルを変更する必要がある HTML 要素です。

各宣言は属性と値で構成されます。

プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

selector {property: value}

次のコード行は、h1 要素内のテキストの色を赤として定義し、フォントサイズを 14 ピクセルに設定します。

この例では、h1 がセレクター、color と font-size が属性、red と 14px が値です。

h1 {color:red; font-size:14px;}

QQ图片20161013141452.png

以下の図は、上記のコードの構造を示しています。

ヒント: 宣言を囲むには中括弧を使用してください。

値のさまざまな記述方法と単位

英語の単語 red に加えて、16 進数の色の値 #ff0000:

p { color: #ff0000 }

バイトを節約するために、短い形式の CSS を使用できます:

p { color: #f00; }

2 つの方法で RGB 値を使用することもできます:

p { color: rgb(255,0,0); { color: rgb(100%,0%,0%); }

RGB パーセントを使用する場合は、値が 0 の場合でもパーセント記号を記述する必要があることに注意してください。ただし、他の場合にはこれを行う必要はありません。たとえば、サイズが 0 ピクセルの場合、単位に関係なく 0 は 0 であるため、0 の後に px 単位を使用する必要はありません。

引用符を忘れずに記述してください

ヒント: 値が複数の単語の場合は、値に引用符を追加します:

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

複数の宣言:

ヒント: 複数の宣言を定義する場合は、各宣言をセミコロンで区切る必要があります。以下の例は、赤いテキストを含む中央揃えの段落を定義する方法を示しています。セミコロンは英語では区切り文字であり、終端文字ではないため、最後のルールではセミコロンは必要ありません。ただし、経験豊富な設計者のほとんどは、各ステートメントの末尾にセミコロンを追加します。これにより、既存のルールにステートメントを追加または削除するときにエラーが発生する可能性が最小限に抑えられます。次のように:

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

次のように、1 行に 1 つの属性のみを記述する必要があります。これにより、スタイル定義の読みやすさが向上します。整列: 中央;

色: 黒;

フォントファミリー: arial;

}

スペースと大文字/小文字

ほとんどのスタイルシートには複数のルールが含まれており、ほとんどのルールには複数の宣言が含まれています。複数の宣言と空白を使用すると、スタイルシートの編集が容易になります。

body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif ;
}

スペースが含まれているかどうかは、XHTML とは異なり、CSS がブラウザーでどのように機能するかには影響しません。例外が 1 つあります。HTML ドキュメントを操作する場合、クラス名と ID 名は大文字と小文字が区別されます。

CSS の高度な構文

セレクターのグループ

セレクターをグループ化して、グループ化されたセレクターが同じ宣言を共有できるようにすることができます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。

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

CSS 派生セレクター

派生セレクター

は、その位置にある要素のコンテキストに基づいてスタイルを定義します。マークアップをより簡潔にします。

CSS1 では、この方法でルールを適用するセレクターは、コンテキストに依存してルールを適用または回避するため、コンテキストセレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも同じことを行います。

派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、HTML コードをよりクリーンにすることができます。

たとえば、リスト内のstrong要素を通常の太字ではなく斜体にしたい場合は、次のように派生セレクターを定義できます:

li Strong {
font-style: italic;
font-weight:normal ;
}

<strong> とマークされた青いコードのコンテキストに注意してください:

<p><strong>リストに含まれていないため、斜体ではなく太字で表示されています。私にはうまくいきません</strong></p>

<ol>
<li><strong>私の斜体。これは、strong 要素が li 要素の内側にあるためです。 </strong></li>
<li>私は普通のフォントです。 </li>
</ol>

上記の例では、li 要素内の強い要素のみが斜体でスタイル設定されています。強い要素に対して特別なクラスや ID を定義する必要はありません。コードはより簡潔になります。 S 以下の CSS ルールを見てください:

Strong {

Color: red;

}
Hh2 {
Color: red;
} 影響する HTML:

<p>この段落で強く強調されている単語は<strong>赤色</strong>です。</p>
<h2>この小見出しも赤色です。</h2>
<h2>強く強調されている単語は赤色です。この小見出しで強調されている単語は<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 ドキュメント内で 1 回だけ使用できます。その理由を知るには、「XHTML: Web サイトのリファクタリング」を参照してください。

ID セレクターと派生セレクター

最新のレイアウトでは、派生セレクターの作成に ID セレクターがよく使用されます。

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

上記のスタイルは、ID を持つ要素内に表示される段落にのみ適用されますサイドバーのこの要素は div または table セルである可能性が最も高くなりますが、table またはその他のブロックレベル要素である可能性もあります。 <em></em> や <span></span> などのインライン要素にすることもできますが、インライン要素 <span> 内では使用できないため、このような使用は違法です。 ;p> (理由を忘れた場合は、「XHTML: Web サイトのリファクタリング」を参照してください)。

1 つのセレクターで複数の用途

サイドバーとしてマークされた要素がドキュメント内で 1 回しか出現できない場合でも、この 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 ;

ここで、ページ内の他の p 要素と明らかに異なるのは、サイドバー内の p 要素が特別に扱われていることです。同時に、ページ内の他のすべての h2 要素と明らかに異なるのは、h2 要素がサイドバーも特別な処理が施されています。

個別のセレクター选择 ID セレクターは、派生セレクターの作成に使用されない場合でも、独立して再生できます。ルールに従って、サイドバーの ID を持つ要素にはピクセル幅の黒い点線の境界線があり、その周囲に 10 ピクセルのパディングが存在します。古いバージョンの Windows/IE ブラウザでは、このセレクターが属する要素を明確に定義しない限り、このルールが無視される可能性があります:

div#sidebar {

border: 1px dotted #000;

}

CSS クラスselector

CSS では、クラスセレクターはピリオドで表示されます:

.center {text-align: center}

上記の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。

以下の HTML コードでは、h1 要素と p 要素の両方にセンタークラスがあります。これは、両方が「.center」セレクターのルールに従うことを意味します。 <h1 class="center">

この見出しは中央揃えになります

</h1>

<p class="center">
この段落も中央揃えになります

< ;/p>

注: クラス名の最初の文字として数字を使用することはできません。 Mozilla や Firefox では動作しません。

id と同様に、クラスも派生セレクターとして使用できます:

.fancy td {
color: #f60; 大きな要素内の表のセルには、灰色の背景にオレンジ色のテキストが表示されます。 (fancy という名前のより大きな要素は table または div である可能性があります。)

要素はクラスに基づいて選択することもできます:

td.fancy {

上記の例では、クラス名ファンシーウィル灰色の背景にオレンジ色になります。

クラス fancy はテーブル要素に何度でも割り当てることができます。ファンシーでマークされたセルは、背景がグレーのオレンジ色になります。 fancy という名前のクラスが割り当てられていないセルは、このルールの影響を受けません。また、ファンシークラスの段落はオレンジ色の背景ではなく、ファンシーとしてマークされた他の要素はこのルールの影響を受けないことにも注意してください。これはすべてこのルールの記述方法によるもので、効果はファンシーとしてマークされたテーブルセル (つまり、td 要素を使用してファンシークラスを選択する) に限定されます。

CSSの作成方法

スタイルシートの挿入方法

スタイルシートが読み込まれると、ブラウザはそれに応じてHTMLドキュメントをフォーマットします。スタイルシートを挿入するには 3 つの方法があります:

外部スタイルシート

多くのページにスタイルを適用する必要がある場合、外部スタイルシートが理想的な選択肢になります。外部スタイルシートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、<link> タグを使用してスタイルシートにリンクします。 <link> タグは (ドキュメントの) 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 では機能しません。

内部スタイルシート

単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用する必要があります。次のように、<style> タグを使用してドキュメントの先頭に内部スタイルシートを定義できます。

<head>
<style type="text/css">
hr {color: sienna; }
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

インラインスタイル

プレゼンテーションとコンテンツを組み合わせることで、インラインスタイルはスタイルシートの利点の多くを失います。たとえば、スタイルを要素に 1 回だけ適用する必要がある場合など、この方法は注意して使用してください。

インラインスタイルを使用するには、関連するタグ内で style 属性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。この例は、段落の色と左マージンを変更する方法を示しています:

<p style="color: sienna; margin-left: 20px">
これは段落です
</p>

複数のスタイル

一部のプロパティが異なるスタイルシートの同じセレクターによって定義されている場合、プロパティ値はより具体的なスタイルシートから継承されます。

たとえば、外部スタイルシートには h3 セレクターの 3 つのプロパティがあります:

h3 {
color: red;
text-align: left;
font-size: 8pt;
}

一方、内部スタイルシートには For h3 セレクターの 2 つの属性:

h3 {
text-align: right;
font-size: 20pt;
}

内部スタイルシートを持つこのページが同時に外部スタイルシートにリンクされている場合、その後、 h3 が取得します。スタイルは次のとおりです:

color: red;
text-align: right;
font-size: 20pt;
つまり、color 属性は外部スタイルシートから継承され、テキストの配置は-alignment) とフォントサイズ (font-size) は、内部スタイルシートのルールに置き換えられます。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS测试</title> <style> body{ background-color:yellow; } h1{ text-align:center; color:green; } p{ font-family:"微软雅黑"; font-size:40px; text-align:center; } </style> <body> <h1>春晓</h1> <p> 春眠不觉晓 </p> <p> 处处闻啼鸟 </p> <p> 夜来风雨声 </p> <p> 花落知多少 </p> </body> </html>

提出するリセットコード

自動運転