1. 基本的な文法仕様
典型的な CSS ステートメントを分析します。
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
このうち「p」は「セレクター」と呼ばれ、「p」のスタイルを定義したいことを示しています。
スタイル宣言は、中括弧「{}」のペアで記述します。
COLOR と BACKGROUND は「プロパティ」と呼ばれ、異なるプロパティはセミコロン「;」で区切られます。
「#FF0000」と「#FFFFFF」は属性の値です。
2. カラー値
カラー値は、例: color : rgb(255,0,0) のように RGB 値で書き込むことも、上記の例 color:#FF0000 のように 16 進数で書き込むこともできます。 16 進値がペアで繰り返される場合、同じ効果で省略できます。例: #FF0000 は #F00 と記述できます。ただし、重複しない場合は省略できません。たとえば、#FC1A1B には 6 桁の数字を入力する必要があります。
3. フォントを定義する
Web 標準では、次のフォント定義方法が推奨されています。
body { font-family : "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、宋体、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. セレクターの派生
派生セレクターを使用して、要素内の子要素のスタイルを定義できます。次に例を示します。
listrong { フォントスタイル : イタリック : 標準;
これは、li の下の強いサブ要素に対して、太字ではない斜体スタイルを定義するためです。
6.IDセレクター
CSSによるレイアウトは主にレイヤー「div」を使用して実装され、divのスタイルは「idセレクター」を通じて定義されます。たとえば、最初にレイヤーを定義します
<div id="メニューバー"></div>
次に、スタイルシートで次のように定義します。
#menubar {マージン: 0px;背景: #FEFEFE;カラー: #666;}
ここで、「menubar」は定義した ID 名です。先頭の「#」記号に注目してください。
ID セレクターは、次のような導出もサポートしています。
#menubar p { text-align : right : 10px;
このメソッドは主に、より複雑で複数の派生要素を持つレイヤーと要素を定義するために使用されます。
6. カテゴリセレクター
CSS でドットを使用して、カテゴリ セレクターの定義を示します。次に例を示します。
.14px {カラー: #f60 ;フォントサイズ:14px ;}
ページで、 class="カテゴリ名" メソッドを使用して次を呼び出します。
<span class="14px">14 ピクセル サイズのフォント</span>
この方法は比較的シンプルで柔軟であり、ページのニーズに応じていつでも作成および削除できます。
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 には他にもたくさんの文法仕様があります。結局のところ、私たちはそれを段階的に進めているので、太ることは不可能です。一口で:)