HTML詳細シリアル化(6)

コラムリンクlink

次のコラムで紹介します

このコラムはフロントエンドを独学で学ぶ旅であり、コードは純粋に手作業で作成され、ダークホースコースに従って学習し、私自身の理解をいくつか加え、コードとメモに適切な変更を加えました
。皆さんのお役に立てれば幸いです。同時に、私を監督し、私が書いたコードに提案を与え、お互いに学び合ってください。

始める

CSS プロパティ

コードを簡素化し、問題を特定して問題を解決します。
継承
カスケード
優先度

継承

子はデフォルトで親のテキスト コントロール プロパティを継承します。

知らせ

ラベルに独自のスタイルがある場合、その独自のスタイルが有効になり、継承されません。

カスケード

特徴

同じプロパティが上書きされます。後の CSS プロパティは前の CSS プロパティをオーバーライドします。
異なるプロパティが重ねられます。異なる CSS プロパティが有効になります。

優先度

重みとも呼ばれ、タグで複数のセレクターが使用される場合、異なるタイプのセレクターの一致ルールに基づきます。

ルール

セレクターの優先順位が高いスタイルが有効になります

公式

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

知らせ

選択したタグの範囲が広いほど、優先度は低くなります。

オーバーレイ計算

セレクターによる場合はウェイト重畳計算が必要となります

式 (それぞれとの間にキャリーはありません)

インライン スタイル、ID セレクターの数、クラス セレクターの数、ラベル セレクターの数

ルール

1、从左到右依次比较个数，同一级个数多的优先级高，如果个数相同，则向
	后比较!important权重最高
2、继承权重最低

エメットのライティング分析

コードの略語。略語 VScode を入力すると、対応するコードが自動的に生成されます。
HTML
CSS: ほとんどの略語は、属性単語の最初の文字です。
背景画像
Web ページでは、背景画像は装飾的な画像効果を実現するために使用されます。

属性名

背景画像(bgi)

属性値

URL (背景画像の URL)

知らせ

背景画像はデフォルトでタイル状に表示されます

背景画像のタイリング方法

属性名

背景リピート（bgr）

属性値

属性	意味
繰り返し禁止	タイル張りではない
繰り返す	タイリング (デフォルト)
リピート-x	水平方向に並べて表示
繰り返します	垂直方向に並べて表示

背景画像の位置プロパティ

属性名

背景位置（bgp）

属性値

横方向位置 配置方向位置

キーワード

キーワード	意味
左	左側
右	右
中心	中央に
上	上
ボタン	底

座標 (数値 + pz、正と負の両方)

知らせ

キーワードの値は逆順に記述できます。
キーワードは 1 つだけ記述でき、その他の方向はデフォルトで中央に配置されます。横方向を示す数値は 1 つの値のみ記述でき、縦方向は中央に配置されます。

背景画像のスケーリング

効果

背景画像のサイズを設定する

属性名

バックグロサイズ（bgz）

共通のプロパティ値

キーワード	意味
カバー	背景画像は背景領域を完全に覆うように比例的に拡大縮小され、背景画像の一部が表示されない場合があります。
含む	背景画像は背景領域に完全に収まるように比例的に拡大縮小され、背景領域が部分的に空白になる場合があります。
割合	ボックスのサイズに基づいて画像サイズを計算します

数値 + 単位 (px)

背景画像を修正

効果

背景は要素のコンテンツと一緒にスクロールしません

属性名

背景添付（bga）

属性値

修理済み

背景の複合プロパティ

属性名

背景(背景)

属性値

背景色、背景画像、背景画像の並べ方、背景画像位置/背景画像ズーム、背景画像固定（スペース区切り、順序区別なし）

ディスプレイモード

ラベル（要素）の表示方法

効果

Web ページをレイアウトするときに、ラベルの表示モードに従ってコンテンツを配置する適切なラベルを選択します

ブロックレベル要素

位置

1 行のみで
、幅は親の 1000% にデフォルト設定され
、幅と高さの属性を追加すると有効になります。

インライン要素

位置

1 つの行に複数の行が共存する

サイズ

サイズはコンテンツによって引き伸ばされ、
幅と高さは影響しません

インラインブロック要素

位置

1 つの行に複数の行が共存する

サイズ

幅と高さの属性の設定が有効になり、
デフォルトのサイズがコンテンツによって拡大されます。

表示モードを切り替える

属性名

画面

キーワード	意味
属性値	効果
ブロック	ブロックレベル
インラインブロック	インラインブロック
列をなして	線の内側