CSS最適化2-(共通CSS略語構文まとめ)_体験交流

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主な規則は次のとおりです。

カラー
16 進数のカラー値は、各 2 桁の値が同じ場合、たとえば次のように半分に省略できます。
# 000000 は #000 に短縮できます;# 336699 は #369 に短縮できます;

ボックス サイズ
通常は 4 つの書き込み方法があります:

property:value1; は、すべてのエッジが値 value1;
プロパティ: value1 value2; 上下の値が value1、左右の値が value2 であることを意味します
property:value1 value2 value3; 上部の値が value1、左右の値が value2 であることを意味します右と左が value2 で、下の値が value3 です
property:value1 value2 value3 value4; 4 つの値は順番に上、右、下、左を表します
覚えておくと便利な方法は、時計回り、上​​です、右、下、左。マージンとパディングの具体的な適用例は次のとおりです:
margin:1em 0 2em 0.5em;

Border (border)
ボーダーのプロパティは次のとおりです:

border-width:1px ;
border-style:solid;
border-color:#000;
これは 1 つの文に省略できます: border:1px Solid #000;

構文は border:width style color; です。
背景
背景のプロパティは次のとおりです:

background-color:#f00;
background-image:url( background.gif);
background-repeat :no-repeat;
background-attachment:fixed;
background-position:0 0;
background:#f00 url という 1 つの文に短縮できます。 (background.gif) no-repeat fixed 0 0;
構文は、background:color imagerepeatattachmentposition; です。

1 つ以上の属性値を省略できます。省略した場合、属性値はブラウザのデフォルト値が使用されます。デフォルト値は次のとおりです:
色: 透明
画像: なし
繰り返し: 繰り返し
添付ファイル: スクロール
位置: 0% 0%
フォント (フォント)
フォントの属性は次のとおりです:

font-style:italic;
font-variant:small-caps;
font-weight:bold; font-size:1em;
line-height:140% ;
font-family:"Lucida Grande",sans-serif;
一文に短縮できます: font:italic small-capsボールド 1em/140% "Lucida Grande",sans-serif;

フォント定義を短縮する場合は、少なくとも 2 つの値 (font-size と font-family) を定義する必要があることに注意してください。

リスト
デフォルトのドットとシリアル番号をキャンセルするには、 list-style:none; と記述します。

リストの属性は次のとおりです。

リスト-style -type:square;
list-style-position:inside;
list-style-image:url(image.gif);
list-style:square という 1 つの文に短縮できます。内部 URL(image.gif);