導入のA、CSS方式
1、CSS入門
インターネットは今、三層のフロントエンドです。
HTML：HTML。意味構造の説明ページの観点から。
CSS：カスケーディングスタイルシート。美的観点からページスタイルを担当。
JS：JavaScriptの。インタラクティブな動作の説明ページの観点から
CSS：カスケーディングスタイルシート、カスケーディングスタイルシート。
CSSの役割は、様々なスタイル、ページの定義を追加するためのHTMLページのタグを表示することです。
簡単に言えば：CSSのWebコンテンツの表示スタイルと分離し、表示を改善しました。最新バージョンは、CSS CSS3、である私たちが学んでいるCSS2.1です。
2.なぜ使用CSS
- HTML欠陥
（1）様々なデバイスに適応することができません
（2）十分な大きさでなければならない知性ブラウザが必要です
（3）別個のデータと表示
（4）は、強力な十分ではありません
- CSSの利点
（1）表示データ別々
（2）ネットワークトラフィックを削減
サイト全体の視覚効果と一致（3）
（4）現像効率は、（還元カップリング、HTML、CSS書き込むための責任者を記述するための責任者）を改善しました
例えば、それだけで再びそれを書き、今のCSSを持って、100回の書き込みをすることを実現することであるならば百ページ、HTMLに表示するパターンがあります。さて、HTMLだけで完全に多種多様なスタイルを提供するために、CSSをデータといくつかのコントロールを提供します。
導入の3、CSS方式
（1）ラインパターン、次の例：
< 本部> < p型スタイル= "色：緑" >私は段落</ p型> </ DIV >
（2）接触パターン、次の例：
< スタイルタイプ= "テキスト/ cssの" > / * 私たちのCSSコードを記述* / スパン{ 色：イエロー; } </ スタイル>
（3）外部スタイル（リンクタイプとリードインタイプ）
<！ - 链接式- > < リンクのrel = "スタイルシート" のhref = "./ index.css" > <！ - 式のインポート- > < スタイルタイプ= "テキスト/ CSS" > @import URL（」./ index.css'）; </ スタイル>
二、CSSセレクタ
図1に示すように、基本的なセレクタ
（1）タグセレクタ
タグに関係なくラベルリザーバ深部の等DIV、ULはLi、P、等のすべてのラベル要素を選択するセレクタと、そう「共通」ことではなく、チェックその全てではなく一つを選択することができます「特徴」
用法：タグ名{色：赤;}
（2）IDセレクタ
同じページIDを繰り返すことができない、
任意のラベルは、IDを設定することができ、
文字のIDの命名は、下線付きの番号を有していてもよい- AAおよびAAとの間の敏感な厳密な区別は、二つの異なるプロパティ値です。
用法：#ID名{色：赤;}
（3）クラスセレクタ
いわゆるクラス：クラスclassとidがタグのいずれかに非常によく似ているクラスに追加することができますが、クラスが分類の概念に属し、繰り返すことができ、
同じタグはスペースで区切って複数のクラスを、運ぶことができる;
遊びのカテゴリ、特定の「パブリック・クラス」の概念が存在しなければなりません。
使用法：。クラス名{色：赤;}
要約：
（1）ページを終了しますクラスを使用しようとして行ってはいけません。ラベルは、複数のクラス、共通セットのスタイルを運ぶ必要があります。
各クラスラベルの複数使用を可能にするために、一般的概念、できるだけ小さくなるように（2）。
特別な状況でIDを使用することができる以外は（3）可能な限りクラスと同様に、IDは一般に要素IDによって取得される、すなわちJS、JSに使用されます。
2、シニアセレクタ
（1）子孫セレクタ
使用スペースは、名前が示すように、親要素の子孫は（息子、孫、ひ孫を含む）、子孫のセレクターを示しています。
用法：.containerのP {色：赤。}
（2）子孫セレクタ
用途>子孫セレクタを表します。例えばDIV> pについて、単に子孫（孫を含んでいない....）素子Pを選択し、現在のdiv要素を表します。
用法：.container> P {色：赤。}
（3）およびセット（組み合わせ）セレクタ
複数のセレクタを分離するために、カンマを使用して。複数のラベルで選択したページを表示します。いくつかの共通要素、及びセレクタを使用して設定することができます。
用法：H3、{色：赤;}
（4）セレクタの交点
ラベル要素を選択しながら2つのセレクタを使用して、ラベルは最初のタグセレクタである必要があり、第2のセレクタラベルはクラスでなければなりません。
用法：div.active {色：赤;}
3、属性セレクタ
文字通り属性セレクタ、選択された現在のラベルの属性に応じてタグ。
プレス属性選択要素は、要素（タグ）をフォーマット設定するProperty要素（タグ）によって指定された属性または属性値を有することができます。
使用法：
NO1、第1のセレクタ（セレクタ要素の属性を調べること）
NO2が、その後、属性の名前を入力します（要素の名前は、プロパティを確認するために）
角カッコ[]、オブジェクト属性とターゲットを取り囲みます。
NO3、適切な属性セレクタを選択し、セレクタの属性は次のとおりです。
-
-
- [プロパティ名]一致する特定のプロパティは、どのような特定のプロパティの値を聞きません
- [属性名=「値」]要素予選の属性値が選択されます
- [属性名〜=「値」は本明細書で完全な単語ではなく、単語の一部と一致する必要があり（属性値は、異なる属性値との間のスペースで区切られ、他の要素を含んでいてもよい）を選択する要素の属性値の値を含みます。
- [属性名| =「値」]（フロントパイプ記号|、またはいない文字L）、属性値は、開始時又は付加価値で要素が選択されるであろう値に等しいです。ハイフンを入力しないでください
- [属性名^ =「値」]の値は、属性値が選択される元素の（完全な単語、または単語の一部として）ここで始まる表します
- [属性名$ =「値」]（完全な単語として、または単語の一部）最終値にこの属性の値を表す要素が選択されます
- [属性名* =「値」]はプロパティ値が選択されますここで値の少なくとも1つの元素を含んでいることを示し、値の必要性は、完全な単語のプロパティ値ではありません
-
図4に示すように、擬似クラスセレクタ
擬似クラスセレクタは、通常、擬似クラスセレクタラベルを使用して、ハイパーリンクのラベルを使用して、我々は「愛憎のガイドライン」愛のHATEに従わなければなりません。
次のように使用方法は以下のとおりです。
/ *ラベル/ Lの*色によってアクセスされていません
：リンク{色：緑;}
ラベルの色の後に/ *訪問します* /
：訪問{色：黄色;} V
/ *ホバー時にラベルの色* / H
：ホバー{色：赤;}
/ *色のマウスは、いつラベル* / Aをクリックします
A：アクティブ{色：青;}
ホバーホバーは、他の場所で使用することができます
/ *スパンサスペンションフォントスタイル内の変更* / スパン：ホバー{ 赤色; フォントサイズ：は24px; テキスト装飾：下線; } < スパン>アレックス</ スパン>
効果：
図5に示すように、ダミーセレクタ要素
擬似要素はいくつかの特別な要素の位置を選択するために使用することができます
、段落スタイルが定義されています
- ：最初の文字のイニシャル（ブロック要素のみ）
P：最初の文字{色：黄色;フォントサイズ：30px;}
- ：最初の行の最初の行
P：最初のライン{背景色：緑;}
元素のB、前部及び後部
- ：部分正面要素（以下、直後の開始タグ）の前に
P：前{内容： 'アレックス';}
- ：（ラベルのフロントエンドに対する）部分最後尾の要素の後
P：{コンテンツの後： '＆'; 赤色; フォントサイズ：40ピクセル; }
前と後の一般的なコンテンツは、コンテンツによって前または後の位置にいくつかのコンテンツを追加し、このスタイルの使用と組み合わせる必要があります。
コンテンツは、CSSを追加することによって追加されているので私はこの部分をチェックすることはできません。
6は、（）あなたが紹介CSS3セレクタn番目の子を与える（IE8以前のブラウザではサポートされません）
/ * *最初の要素を選択/
DIV UL李：最初の子{
フォントサイズ：20ピクセル;
赤色;
}
/ *最後の要素を選択します* /
DIV UL李：最後の子{
フォントサイズ：20ピクセル;
色：黄色;
}
/ *最初から指定した要素の現在の値を確認してください* /
DIV ULリチウム：n番目の子（3）{
フォントサイズ：30px;
色：紫;
}
/ * Nは、すべてを選択表し、表現が選択されていない場合00から出発して、n個存在しなければなりません* /
DIV ULリチウム：n番目の子（N）{
フォントサイズ：40ピクセル;
赤色;
}
/ *偶数* /
DIV UL李：n番目の子（2N）{
フォントサイズ：は50px;
カラー：ゴールド;
}
/ * *奇数/
DIV UL李：n番目の子（2N-1）{
フォントサイズ：は50px;
色：黄色;
}
/ *すべてのいくつかのインタレースの色の変化の色の変化
4色の変化の間隔が5N + 1であり、セパレータ3色の変化は、4N + 1であります
* /
DIV ULリチウム：n番目の子（5N + 1）{
フォントサイズ：は50px;
赤色;
}
第三に、継承とラミネートプロパティCSS
継承とラミネートプロパティ：CSSは、2つの主要な機能を備えています
1、相続
オブジェクト指向言語の概念は、オブジェクト指向言語で継承された特性を継承存在します：親クラスのプロパティとメソッドを継承します。だから今、私たちの研究CSS、CSSがプロパティに設定されています。メソッドのレベルを必要とするわけではありません。
継承：親にいくつかのプロパティを設定し、子供は私たちのCSSに継承され、親の財産を継承します。
注意：一部のプロパティを継承することができます： 色、font- *、テキスト- *、LINE-* 。メインレベルは、ラベル要素のテキストです。
いくつかの要素のプロパティボックスしかし、位置決め要素（浮動、絶対配置、固定された位置）を継承することができません。
注：特別の事情があるラベル、ラベルを設定すると、継承を使用していないフォントの色を選択する必要があります。
図2に示すように、積層特性（カバレッジ）
レイヤード：小さなラベルの重量オフメジャーレーベルのカバーへの権利は、はっきり、吹き飛ばされることです。
重量：誰の権利の主要なブラウザは属性誰が表示されます。
要約：
（1）ライン> ID>クラス>タグ*****
1000年> 100> 10> 1（比較重量）
label要素で（2）の外観は、その重量の属性ショーに大きい（ID、クラス、タグの数）をカウントする、選択された場合は、選択されていません。
後発として大として（3）重量;
（4）継承され、その量は、選択されたラベルに匹敵0でない属性。
（5）プロパティが（より深くある）近接の原則ことを保証するために、継承されている場合は、
（6）右より重い行く、近くにタグを選択し、プロパティを継承しています。
3、 ！の重要な使用
！重要：無限の重みを設定（IE6はサポートされていません）。
！重要なのは体重への承継の権利に影響を与えることはありません、だけで選択された要素に影響します。使用しないでください！重要、それを使用してページのレイアウトに影響を与えますので。
使用方法：{スタイルセレクター：値重要;!}
第四に、ボックスモデル
CSSでは、「ボックスモデルは」デザインやレイアウトに用いられる用語であり、ウェブページ上のほぼ正方形のボックスの一部が表示されます。私たちは、ボックスモデルと呼ばれるこのボックスと呼ばれます。
二つのボックスモデル：IEモデルとスタンダードモデル。ここでは、標準モデルのいくつかを強調しました
1、概略的なボックスモデル
2、ボックスモデルのプロパティ
幅内容：幅
高さ：の内容の高さ
パディング：パディング、距離の内容との国境
境界線の幅は、ボックスを参照：ボーダー
マージン：距離の最寄りのボックスとの国境に近いマージン、箱
私たちは、広い高402 * 402箱を行うとしたら？答えは1万です。
3、ボックスモデル計算
ボックスセットのパディング、ボーダー、幅、高さ、マージン（我々は最初のセットではないマージン、マージンピットを行う必要があり、私は後で説明します）の場合
-------------------------------------------------- --------
ボックス=幅+ 2 *パディング+ 2 *ボーダーの真の幅
箱の真の高さ=高さ+ 2 *パディング+ 2 *ボーダー
---------------------------------------------------------------
那么在这里要注意了。标准盒模型，width不等于盒子真实的宽度。
另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。