ホームページ > 記事 > ウェブフロントエンド > 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);