CSSフロントエンドの知識まとめ_html/css_WEB-ITnose

1. CSS の概念: (CascadingStyleSheet)

利点: 1. コンテンツとパフォーマンスの分離。 (Web ページのコンテンツは、1. タグ セレクター

タグ名 ｛ 属性: 属性値; ｝

2. クラス セレクター

. クラス名 ｛ 属性: 属性値; ｝

< を使用してプレゼンテーションから分離できます。 ; タグ名 class = "クラス名" > タグの内容タグ名>

3. ID セレクター

#ID 名｛属性: 属性値;｝

タグ名、。クラス名, #ID名｛ 属性: 属性値;｝

5. 子孫セレクター

子孫セレクターは、外側のラベルを前に、内側のラベルを後ろにスペースで区切って書きます。タグがネストされている場合、内側のタグは外側のタグの子孫になります。

P span{ 属性: 属性値;}

タグ内にネストされています。

タグの子孫であり、スペースで区切られています

6. 交差セレクター (注意: 交差セレクターの間にスペースはありません) これは間違いなく特定のタグである可能性があります

タグ名. クラス名 ｛｝

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

*｛Style; ｝

CSS のコメントは

の形式でのみ使用できます 3. CSS スタイルを HTML メソッドに導入します

1.インライン、

2. 埋め込み、

先頭にスタイルを記述する

H1{font-size:18px;}

3. インポート タイプとリンク タイプ、(外部 CSS スタイル)

リンク タイプ:

< ;link href=”style.css ” rel=”stylelensheet” type=”text/css”/>

Import:

2 つの違いは、リンクは最初にスタイルを読み込み、次にページを読み込みます。

4. スタイルの優先順位

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

スタイル間シート: インライン スタイル>インライン スタイル>外部スタイル

CSS スタイル間: 同じセレクター内で、2 つの同一のステートメントの場合、後者のステートメントは前の 1 つのステートメントを上書きします、

ボックス モデル

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

6. Float 属性

Float: value (left、right、none、inherit) (IE サポートおよび非推奨)

組み合わせて使用​​される別の属性float 属性は、要素のどちらの側が他の浮動要素を許可しないかを決定するために使用されます。clear 属性には次の 5 つの値があります:

左側では浮動要素は許可されません

右: 浮動要素は右側では使用できません

両方: 浮動要素は左側と右側の両方で使用できません

デフォルト値はありません。浮動要素は両側に表示できます

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

Clear: Both; order)

background-color: 背景色。透明とは、透明な背景色を意味します。

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

2. 相対位置: 位置: 相対;要素の表示方法

1. 表示モードの表示: 値

2. ボックス内のハンドル オーバーフロー: 値

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

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

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

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

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

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

定義されたスタイルは次のとおりです: linkàvisitedàhoveràactive

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

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