CSS フロントエンドの知識ポイントのまとめ（必読）

1. CSS の概念: (カスケーディング スタイル シート)

利点: 1. コンテンツとプレゼンテーションを分離します。 (xhtml を使用すると、Web ページのコンテンツをプレゼンテーションから分離できます)

2. 統一された表現

3. 豊富なスタイル

4. Webページのコードを削減する

5. ウェブページから独立したCSSを使用する

2. セレクター

1. タグセレクター

タグ名 {属性:属性値;}

2. クラスセレクター

.クラス名{属性:属性値;}

<タグ名 class="クラス名">タグの内容</タグ名>

3. IDセレクター

#ID名{属性:属性値;}

4. ユニオンセレクター

タグ名,.クラス名,#ID名{属性:属性値;}

5. 子孫セレクター

子孫セレクターは、最初に外側のタグを記述し、その後に内側のタグをスペースで区切って記述します。タグがネストされると、内側のタグは外側のタグの子孫になります。

P span{属性:属性値;}

<span> タグは <p> タグ内にネストされます。

<span タグは <p> タグの子孫であり、2 つはスペースで区切られます。

6. 交差点セレクター（注意：交差点セレクターの間にはスペースはありません）これにより、特定のタグを決定できます。

タグ名.クラス名{}

7. グローバルセレクター

*{スタイル;}

CSS 内のコメントは /* comment */ の形式でのみ記述できます。

3. HTMLにCSSスタイルを導入する方法

1. インラインスタイル、

<h1 style="font-size:18px"></h1>

2. 埋め込み、

スタイルを頭に書き込む

<スタイル タイプ="text/css">

H1{フォントサイズ:18px;}

</スタイル>

3. インポートとリンク（外部 CSS スタイル）

リンク:

<link href=”style.css” rel=”スタイルシート” type=”text/css”/>

輸入：

<style type="text/css"> @import"style.css";</style>

2 つの違いは、リンクでは最初にスタイルが読み込まれ、次にページが読み込まれるのに対し、インポートではその逆である点です。

4. スタイルの優先

基本セレクター間: IDセレクター > クラスセレクター > タグセレクター

スタイルシート間: インライン スタイル > 埋め込みスタイル > 外部スタイル

CSS スタイル間: 同じセレクター内に同一の宣言が 2 つある場合、後者の宣言が前の宣言を上書きします。

5. ボックスモデル

ボックスモデルの合計サイズ = border-width-padding + margin + コンテンツサイズ（幅または高さ）

6. 浮動資産

フロート: 値 (左、右、なし、継承 (IE ではサポートされていないため、非推奨))

float 属性と組み合わせて使用​​される別の属性は clear です。これは、要素のどの側に他のフローティング要素を許可しないかを決定するために使用されます。clear 属性には、次に示すように 5 つの値があります。

左では左側にフローティング要素を配置できません

右: 右側にはフローティング要素を配置できません

両方: フローティング要素は左側または右側には配置できません

デフォルト値は「なし」で、フロート要素が両側に表示される。

継承: clear 属性の値を親要素から継承することを指定します。IE ブラウザはこれをサポートしていないため、推奨されません。一般的に、フロートをクリアする場合は、both 属性値がよく使用されます。つまり、次のようになります。

クリア:両方;

7. ポジショニング属性:

1. 絶対位置指定

position:absolute; z-index:2;(重ね順)

background-color: 背景色。透明は透明な背景色を示します

background-attachment: 背景画像がコンテンツとともにスクロールするかどうかを決定します。固定の場合は fixed に設定し、スクロールする場合は scroll に設定します。

2.相対的な配置: position:relative;

8. コントロール要素の表示モード

1. 表示モード 表示: 値

2. ボックス内のオーバーフローを処理する: overflow: value

3. カーソルの形状を設定します: カーソル: ポインター (小さな手)

4.ハイパーリンクのスタイル:

a:link{color:#ff0000;} //未訪問のリンク

a: 訪問済み{color:#00CC00}//訪問済みリンク

a:hover{color:#000FF}//マウスポインタをリンクに移動する

a:active{color:#FF00FF}//選択されたリンク

定義されるスタイルは、linkàvisitedàhoveràactive である必要があります。

経験: インライン タグはブロック レベル タグに含めてその子要素にすることができますが、その逆は当てはまりません。

display:block; ブロックレベル要素に変換します。

以上、CSSフロントエンドの知識ポイント（必読）のまとめが編集者が皆さんにシェアする内容の全てです。参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/izhongwei/archive/2016/06/09/5572443.html