Web 標準を使用して Web サイトを構築する 7 日目: CSS を始める

XHTMLのコード仕様を理解したら、CSSレイアウトを実行する必要があります。まずはCSSの基礎知識をご紹介します。すでに慣れている場合は、このセクションをスキップして次のセクションに直接進んでください

CSS は Cascading Style Sheets の略です。これは、Web ドキュメントにスタイルを追加するための単純なメカニズムであり、プレゼンテーション層のレイアウト言語に属します。

1. 基本的な構文仕様

一般的な CSS ステートメントの分析:

p {COLOR: #FF0000; BACKGROUND: #FFFFFF}

ここで、「p」は「selector」と呼ばれます (セレクター) 、「p」のスタイルを定義することを示します。

スタイル宣言は一対の中括弧「{}」で記述されます。

COLOR と BACKGROUND は「プロパティ」(PROPERTY) と呼ばれ、セミコロンが使用されます。異なる属性間は「;」で区切ります。

「#FF0000」と「#FFFFFF」は属性の値です。

2. カラー値

カラー値は、例:

color : rgb(255,0,0)

のように RGB 値で記述することも、上記の例と同様に 16 進数で記述することもできます。

カラー: #FF0000

。 16 進値がペアで繰り返される場合、同じ効果で省略できます。たとえば、#FF0000 は #F00 と書くことができます。ただし、重複しない場合は省略できません。たとえば、#FC1A1B には 6 桁の数字を入力する必要があります。

3. フォントを定義する

Web 標準では、次のフォント定義方法を推奨しています:

Body { font-family: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、Song Empire、sans-serif ; }

リストされた順序でフォントを選択します。ユーザーのコンピュータに Lucida Grande フォントが含まれている場合、ドキュメントは Lucida Grande として指定されます。そうでない場合は Verdana フォントとして指定され、Verdana がない場合は Lucida フォントとして指定されます。

Lucida Grande フォントは Mac OS X に適しています。

Verdana フォントはすべての Windows システムに適しています。

Lucida は UNIX ユーザーに適しています

「Song Ti」は簡体字中国語ユーザーに適しています。

リストされたフォントがどれも利用できない場合は、デフォルトのサンセリフ フォントが確実に呼び出されます。

4.

複数の要素のスタイル属性が同じ場合、要素をコンマで区切ってステートメントを呼び出すことができます:

p, td, li { font-size : 12px }

5.

派生セレクターを使用して、要素内のサブ要素のスタイルを定義できます。たとえば、次のようになります。 li 太字スタイルの下でサブ要素の斜体を定義します。

6.idセレクター

CSSの使用 レイアウトは主にレイヤー「div」を使用して実装され、divのスタイルは「idセレクター」を通じて定義されます。たとえば、最初にレイヤーを定義します

それからスタイルシートで次のように定義します:

#menubar {MARGIN: 0px ;BACKGROUND: #FEFEFE;COLOR: #666;}

ここで、「menubar」は定義した ID 名です。先頭の「#」記号に注目してください。

ID セレクターは派生もサポートしています。例:

#menubar p { text-align : right; margin-top : 10px }

このメソッドは主にレイヤーとそのレイヤーを定義するために使用されます。はより複雑で、複数の派生要素があります。

6. カテゴリセレクター

CSS でドットを使用してカテゴリーセレクターの定義を示します。例:

.14px {color : #f60 ;font-size:14px ;}

ページでは、class="カテゴリ名" メソッドを使用して呼び出します:

14px size font

このメソッドは比較的シンプルで柔軟です。必要に応じていつでもページを作成および削除できます。

7. リンクのスタイルを定義する

リンクのスタイルを定義するには、CSS で 4 つの疑似クラス、つまり、a:link、a:visited、a:hover、a: active が使用されます。例:

a :link{フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c00 ;}

a:visited {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #c30 ;}

a:hover {フォントの太さ : 太字 ;テキスト装飾 : 下線 ;カラー : #f60 ;}

a:active {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #F90 ;}

上記のステートメントは、それぞれ「リンク、訪問済みリンク、マウスオーバー、マウスクリック」のスタイルとして定義されています。上記の順番で書かないと、予想と異なる表示になる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。

はは、こんなに読んだら、ちょっとめまいを感じます。実際には、CSS には他にもたくさんの文法仕様があります。結局のところ、私たちは段階的に進めているだけで、そうなることはできません。一口で太ります:)

上記は、Web の使用に関する標準的な Web サイト構築 7 日目: CSS の紹介です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。