CSS-ネットワーク プログラミング_html/css_WEB-ITnose

CSS の概要

CSS は、Web ページの表示効果を定義するために使用されるカスケード スタイル シートです。 HTML コード内のスタイル定義の重複を解決し、後続のスタイル コードの保守性を向上させ、Web ページの表示効果を高めることができます。簡単に言うと、CSS は Web ページのコンテンツと表示スタイルを分離し、表示機能を向上させます。
それでは、CSS と HTML は Web ページのコードでどのように組み合わされるのでしょうか?スタイル属性、スタイルタグ、インポート、リンクの 4 つのメソッドを使用します。

CSSとHTMLを組み合わせる4つの方法

☆ 1.スタイル属性メソッド
このメソッドはまだHTMLに似ているため、ほとんど使用されません。
一般的には後者の3種類を使用します。

<p style="background-color:#FF0000; color:#FFFFFF">    p标签段落内容。 </p>

☆ 2. スタイルタグメソッド

<style type=”text/css”> p { color:#FF0000;}</style>

☆ 3. インポートメソッド

<style type="text/css"> @import url(myDiv.css)</style>

☆ 4. リンクメソッド

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" /> 

関連構文

☆ スタイルの優先順位

上から下へ、外側から内側へ。優先順位は低いものから高いものへと続きます。 ——要するに、大まかには後からロードするということですが、細かい優先順位の問題もあります（これについては後述します）。

☆CSSコード形式

セレクター名 {属性名: 属性値; 属性名: 属性値;…….}

属性はセミコロンで区切る
属性と属性値は直接使用可能 コロン接続
If属性に複数の値がある場合、複数の値はスペースで区切られます。

セレクター

はCSSが動作するタグを指定するもので、そのタグの名前がセレクターです。意味: どのコンテナを選択するか (ラベル自体がデータをカプセル化するコンテナです)。

☆セレクターには次の 3 種類があります:

1) HTML タグ名セレクター。使用するタグ名はhtmlです。
(つまり、HTML内のタグを直接使用します)
2) クラスセレクター。実際には、タグ内の class 属性が使用されます。
(先頭に # を追加)
3) ID セレクター。実際には、タグ内の id 属性が使用されます。
(前に: .)

各タグは class 属性と id 属性を定義します。ラベルの操作を容易にするためにラベルを識別するために使用されます。
定義では、複数のタグの class 属性値は同じにすることができますが、id 値は JavaScript でよく使用されるため、一意である必要があります。

☆セレクターの優先順位 タグ名セレクター < クラスセレクター < スタイル属性
拡張セレクター

☆関連セレクター このセレクターを使用して、さまざまなタグを入れることができます。同じタグでも異なるスタイルが表示されます。例:

p { color:#00FF00;}p b { color:#FF000;}<p>P标签<b>湖南城市学院</b>段落样式</p><p>P标签段落</p> 

P タグを設定します。

Pタグ内にbタグを設定します。

☆セレクターの組み合わせ

同じスタイルで複数のセレクターを定義します。たとえば、「div のラベル」と「クラス名 cc の領域」に同じスタイルを設定したい場合は、次の組み合わせセレクターを定義できます:

.cc, div b{/*不同选择器之间用逗号分开*/ background-color:#0000ff; color:#fff;} 

id="cc" のラベルとその下の領域を設定します。 div ラベル b ラベル。

☆擬似要素セレクター

実際、HTML には擬似要素と呼ばれる事前定義されたセレクターがいくつかあります。

形式: タグ名: 擬似要素。クラス名タグ名。クラス名: 疑似要素。

ハイパーリンク a タグ内の疑似要素:

a:link ハイパーリンクがクリックされていない状態。

a:visited 訪問後のステータス。

a:hover カーソルがハイパーリンクに移動した（クリックされていない）状態。
a:active ハイパーリンクがクリックされたときの状態。

段落 p タグ内の疑似要素:

p:first-line 段落のテキストの最初の行。

p:first-letter 段落の最初の文字。

カスタム疑似要素:

:focus フォーカスのある要素 (実際にはクリック後の監視に少し似ています)

div:hover{ background-color:#f00; color:#fff; }

CSS ボックスモデル

◇ボーダー (ボーダー)

上ボーダー-上 下ボーダー-下
左ボーダー- left
right border-right

◇パディング: 内側マージン

top パディング-上 bottom パディング-下
左パディング-左
右パディング-右

◇外側のパッチ (マージン) ): 外側のマージン

上マージン-上 下マージン-下
左マージン-左
右マージン-右

border (境界線)—この要素コンテンツの閉じた形状の境界線

Paddings: inner Margins - 境界線間の距離要素と独自のコンテンツのテキスト

マージン: 要素の境界線と別の要素の境界線 (境界線) の間の距離

☆CSS レイアウト - フローティング

◇ float : none | left | none : デフォルト値。オブジェクトはフロートしません

左: テキストがオブジェクトの右側に流れます

(このオブジェクトは左に流れます)
右: テキストがオブジェクトの左側に流れます
(このオブジェクトは右に流れます)

◇クリア: なし | 左 | 両方
: デフォルト値。浮遊オブジェクトは両側で許可されます

left : 浮遊オブジェクトは左側で許可されません

right : 浮遊オブジェクトは右側で許可されません
both : 浮遊オブジェクトは許可されません

(フローティングオブジェクトが許可されておらず、このオブジェクトの行を占有する必要があるフローティングオブジェクトがたまたま存在する場合、オブジェクトはフローティングオブジェクト用のスペースを空けるために移動し、重ならないようにします)

☆CSSレイアウト - 位置
◇ 位置 : 固定 | 相対
: デフォルト値。特別な配置はなく、オブジェクトは HTML の配置ルールに従います。
絶対: オブジェクトをドキュメント フローの外にドラッグし、左、右、上、下およびその他のプロパティを使用して、最も多くの位置設定を使用して、最も近い親オブジェクトを基準とした絶対位置を実行します。そのような親オブジェクトが存在しない場合は、body オブジェクトが使用されます。そして、そのカスケードは z-index 属性を通じて定義されます。
修正: サポートされていません。オブジェクトの位置決めは絶対方式に従います。しかし、従うべき規範がいくつかあります。
相対: オブジェクトは積み重ねることはできませんが、左、右、上、下、その他のプロパティに従って通常のドキュメント フロー内でオフセットされます。

absolute — 絶対的な位置決め。
オブジェクトが絶対配置を使用する場合、それは実際には別のレベルに浮いている (重なっている) オブジェクトと等価であり、元のレベルでそのオブジェクトが占める位置は他のモジュールによってカバーされます。

relative — 相対的な位置決め。
オブジェクトが相対位置を使用する場合、それは別のレベルに浮いている (重なっている) オブジェクトと同等ですが、元のレベルでの位置は他のモジュールによってカバーされません。

☆CSS レイアウト - グラフィックとテキストの混合
☆CSS レイアウト - 画像署名
(これら 2 つのメソッドは、絶対配置または相対配置のボックス モデルを使用して実際に実装されます)

CSS についての知識はたくさんあります。もっと詳しく書いてください。API を見ればすぐにわかります。基本的な構文は非常に多くあります~~