CSSフロントエンドの知識まとめ

以下は、CSS フロントエンドの知識ポイントの概要です。内容がとても良かったので、参考としてシェアさせていただきます。

1. CSSの概念: (CascadingStyleSheet)

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

を使用してプレゼンテーションから分離できます。1. タグ セレクター

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

2. クラス セレクター

。クラス名 ｛ 属性: 属性値; ｝<タグ名class="クラス名">タグ内容

3.IDセレクター

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

4 . ユニオンセレクター

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

5. 子孫セレクター

を先頭に外側のラベルを書き、 inner label in 以降はスペースで区切ります。タグがネストされている場合、内側のタグは外側のタグの子孫になります。 P span{ 属性: 属性値;}

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

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

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

タグ名 ｛｝

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

*｛ スタイル; CSS 内のコメントは /* comment */ の形式のみ可能です 3. 導入方法CSS スタイルを HTML に追加します1. インライン スタイル、

スタイルをヘッドに記述します

3. スタイルとリンク スタイルをインポートします リンクタイプ:

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

インポートタイプ:

<style type=”text/css”>
H1{font-size:18px；}
</style>

この2つの違いは:リンクは最初にスタイルをロードしてからページをロードしますが、インポートはその逆を行います

4. スタイルの優先順位

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

スタイルシート間: インライン スタイル > 外部スタイル Css スタイル間: 2 つの同一のステートメントは前のステートメントを上書きします。

5. ボックスモデル

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

6. Floating 属性

Float: value (left、right、none、inherit) (IE ではサポートされておらず、推奨されていません))

float 属性と組み合わせて使用​​される別の属性、clear は、要素のどの側が他の浮動要素を許可しないかを決定するために使用されます。以下のような clear 属性:

Left は左側のフローティング要素を許可しません

Right: 右側のフローティング要素を許可しません

Both: 左側と右側の両方のフローティング要素を許可しません

Noneデフォルト値。フローティング要素を両側に表示できます。

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

7. 位置決め属性:

position:absolute; (積み重ね順)

background-color: 背景色。 Transparent は透明な背景色を表します。 background-attachment: 背景画像がクラスのコンテンツとともにスクロールするかどうかを決定します。固定する場合は固定、スクロールするように設定します。

2. . コントロール要素の表示方法

1. 表示方法display: value

2. ボックス内のオーバーフローを処理します: カーソル:ポインター(小さな手)

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

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

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

a:hover{color:#000FF} //マウスポインターが移動リンクへ

a:active{color:#FF00FF}//選択されたリンク定義スタイルは次のようにする必要があります: linkàvisitedàhoveràactive

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

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

以上がCSSフロントエンドの知識まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。