CSS入門チュートリアル_基本チュートリアル

CSSとはCascading Style Sheetsの略称です。これは、Web ドキュメントにスタイルを追加するための単純なメカニズムであり、プレゼンテーション層のレイアウト言語に属します。
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、Song Nursing、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 Strong { font-style : italic; font-weight :normal;}
これは、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="カテゴリ名" のメソッドを使用して次を呼び出します:
14 ピクセル サイズのフォント
このメソッドは比較的シンプルで柔軟であり、いつでも作成および削除できます。ページのニーズに応じた時間。
7. リンク スタイルを定義します。
リンク スタイルを定義するために CSS で 4 つの疑似クラスが使用されます。つまり、a:link、a:visited、a:hover、a:active です。次に例を示します。
a :link{フォントの太さ : 太字 ;テキストの装飾 : なし ;カラー : #c00 ;}
a:visited {フォントの太さ : 太字 ;テキストの装飾 : なし ;カラー : #c30 ;}
a :hover {フォントの太さ : 太字 ;テキスト装飾 : 下線 ;カラー : #f60 ;}
a:active {フォントの太さ : 太字 ;テキスト装飾 : なし ;カラー : #F90 ;}
上記ステートメントはそれぞれ「リンク、訪問リンク、マウスオーバー時、マウスクリック時」のスタイルを定義しています。上記の順番で書かないと、予想と異なる表示になる場合がありますのでご注意ください。 「LVHA」の順序であることに注意してください。