フロントエンド仕様2-CSS仕様_html/css_WEB-ITnose

CSS仕様

Indent

タブインデント（スペース4個相当）を使用する

セレクタと{, パラメータ1の間にはスペースが必要

プロパティ名以下：不可 スペースを含む: と属性値の間にはスペースが必要です。

例

リスト属性値が 1 行にある場合は、その後にスペースを入れる必要があります。

スペースを使用するか、スタイル値の後に改行を入れて、論理的にグループ化することをお勧めします。

例:

Selector

コレクション内で選択し、複数のセレクターがある場合、(メンテナンスを容易にするため) 宣言を別の行に記述することをお勧めします

例

>, + ,- セレクターの両側にはスペースを残します

例

属性セレクターの値は二重引用符で囲む必要があります

同じクラスの属性定義は同じ行に記述する必要があります ( を参照) -1)

例

属性定義はセミコロン (特に最後のセミコロン) で終わる必要があります

必要に応じて、id セレクターとクラス セレクターを修飾するために型セレクターを追加しないでください。

注: パフォーマンスとメンテナンスに一定の影響があります

例

1. レンダリング パフォーマンスを最適化するには、ユニバーサル要素タグの代わりにクラスを使用します。 (下の図の 891 行目と 895 行目を比較してください)

2. セレクターのネスト レベルは 3 レベルを超えず、後ろの制限条件はできるだけ正確にすることをお勧めします。 (参考1)

3. 頻繁に出現するコンポーネントでは、一部の属性セレクター ([class^="..."] など) の使用を避けます。ブラウザのパフォーマンスは、これらの状況によって影響を受ける可能性があります。

4. 子孫セレクターは必要な場合にのみ使用してください

上記 1 と 2 の例

属性の省略形

可能な場合は、省略形を使用するようにしてください。

属性を書き換える必要がある場合は、不必要な属性の省略を避けるようにしてください。

例では次のような状況は避けるべきです:

using using use using through through using through through out through out through out through out through ‐ ‐ の方へ ‐‐‐‐‐‐ ,

フォーマットモデル関連のプロパティには、次のものが含まれます。上 / 右 / 下 / 左 / フロート / 表示 / オーバーフローなど

ボックス モデル関連のプロパティには、ボーダー / マージン / パディング / 幅 / 高さなどがあります。

タイポグラフィ関連のプロパティには、フォント / 行の高さ / テキストなどがあります。 -align / Word-wrap など wビジュアル関連の属性には、背景 / カラー / トランジション / リスト スタイルなどが含まれます。モジュール内でオンライン テキスト エディタを使用して、属性の定義を変更してみてください)

z-インデックス

現時点で使用するのはそれほど複雑ではありません。この属性を使用するときにマークするだけです

値と単位

Value (パラメータ 1)

0 から 1 までの小数の場合は、整数部分の0は省略しても良いのでしょうか？

url() 内のパスは引用符で囲まれていません

out-through ‐‐‐‐‐ URL(bg.png);

を使用して を使用してto to ;

カラー

RGB カラー値 は 16 進表記 #RRGGBB を使用する必要があります。

アルファ（透明）付きの色情報値には rgba() を使用します。

使用できる場合は省略形を使用してください

色の名前は使用できません。rgb()

16 進数の記号記号が同じであることを確認してください。 (大文字推奨)

2D 位置 (background-position)

background-position の両方向の値を指定する必要があります。 デフォルトは 0% 0% であるため、一方向の値のみが与えられ、他の方向はデフォルトで中央の属性値になります。

Text

font-family 属性は英語である必要があります

例: font-family: "Microfoft YaHei"; font-size 属性

x

理由: Windows のテキスト表示効果が低く、識別が困難

font-weight

属性値は数値で表されます。 (100 ~ 900)

実際には、それぞれ 400 と 700 のファイルのみが、Normal と Bold に相当します。

600 属性値をサポートするブラウザはすでに存在します。 (1:フォントの話参照)

行の高さは、font-size の値に基づいて計算されるため、相対値を使用する必要があります。

その他

属性プレフィックス

互換性属性は、長いものから短いものまでコロンで記述されます。