10 の CSS 略語/最適化のヒント_html/css_WEB-ITnose

CSS の略語は、複数行の CSS プロパティを 1 行に省略することを指し、CSS コードの最適化または CSS の略語とも呼ばれます。 CSS 略語の最大の利点は、CSS ファイルのサイズを大幅に削減し、Web サイトの全体的なパフォーマンスを最適化し、読みやすくできることです。

次に、一般的な CSS 省略規則を紹介します。

1. ボックス サイズ

ここでは、主に margin と padding の 2 つの属性に使用されます。例として、margin を取り上げます。そして同じです。ボックスには上下左右の 4 つの方向があり、各方向にマージンがあります:

margin-top:1px;

margin-right:2px;

margin-bottom:3px;

margin-left:4px;

次のように省略できます:

margin:1px 2px 3px 4px ;

構文 margin:top rightbottom left;

//4 方向のマージンは同じであり、margin:1px 1px 1px 1px;

と同等です。

margin:1px;

//上下のマージンは両方とも 1 ピクセル、左右のマージンは両方とも 2 ピクセルで、これは margin:1px 2px 1px 2px;

margin:1px 2px;

//右マージンと左マージンは同じであり、margin:1px 2px 3px 2px;

margin:1px 2px 3px;

//ここでの上下のマージンは両方とも 1px ですが、ここで省略することはできないことに注意してください。

margin:1px 2px 1px 3px;

2. ボーダー (ボーダー)

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

border-width:1px;

border-style:solid;

border-color:#000;

は 1 つの文に省略できます:

border :1px Solid #000;

構文 border:width style color;

3. 背景

背景のプロパティは次のとおりです。 >

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed ;

background-position:0 0;

は、

background:#f00 url(background. gif) no-repeat fixed 0 0 ;

構文は、background:color imagerepeatattachmentposition;

1 つ以上の属性値を省略できます。省略した場合、属性値は次のようになります。ブラウザのデフォルト値を使用します。デフォルト値は次のとおりです。

color: 透明;

image: none;

repeat: 繰り返し;

attachment:scroll;

position:0% 0%;

4. フォント（フォント）

フォントの属性は次のとおりです。

font-style: italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

は 1 つの文に短縮できます:

font:italic small-caps bulled 1em/140%" Lucida Grande",sans-serif;

フォント定義を省略する場合は、少なくとも 2 つの値を定義する必要があることに注意してください: font-sizeそしてフォントファミリー。

5. リスト

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

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

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

は次の 1 つの文に省略できます:

list-style:square inside url(image.gif);

6. カラー (カラー)

16 進数のカラー値は、2 つの数字が同じ値である場合、半分に省略できます。例:

水色: #00ffff —— #0ff

黒: #000000 —— #000

青: #0000ff —— #00f

ダークグレー: #666666 —— #666

フクシア:#ff00ff —— #f0f

ライトグレー: #cccccc —— #ccc

ライム: #00ff00 —— #0f0

オレンジ: #ff6600 —— #f60

赤: #ff0000 —— #f00

白: #ffffff —— #fff

黄色: #ffff00 —— #ff0

7. 属性値は 0

CSS 属性値が 0 の場合、次のように記述します。単位を追加する必要がない場合 (px/em など)、次のように記述できます:

padding:10px 5px 0px 0px;

これを試してください:

padding:10px 5px 0 0;

8. 最後のセミコロン

のように、最後の属性値の後のセミコロンは記述する必要はありません。 #nav{

border -top:4px Solid #333;

font-style:normal;

font-variant:normal;

font-ウェイト: ノーマル;

}

は次のように省略できます:

#nav{

border-top:4px Solid # 333;

フォント スタイル : 通常;

フォント バリアント:通常;

フォントの太さ: 通常

}

9. Font-weight )

次のように記述できます:

h1{

font-weight:bold;

}

p {

font-weight:normal;

}

は、

h1{

font-weight:700;

}

p{

font-weight:400;

}

十、フィレット半径 (border-radius)

border-radius は、CSS3 で新しく追加された属性で、丸い境界線を実装するために使用されます。

-moz-border-radius-bottomleft:6px;

-moz-border-radius-topleft:6px;

-moz-border-radius-topright:6px ;

-webkit-border-bottom-left-radius:6px;

-webkit-border-top-left-radius:6px;

-webkit-border- top-right-radius:6px;

border-bottom-left-radius:6px;

border-top-left-radius:6px;

border-top- right-radius:6px;

は次のように省略できます:

-moz-border-radius:6px 6px 0;

-webkit-border - radius:6px 6px 0;

border-radius:6px 6px 0;

構文 border-radius:topleft toprightbottomrightbottomleft;

[記事ソース:怠け者ギャラリー】

出典: Code Jun (daimajun.com) | この記事の共有を歓迎します。転載する場合は出典を明記してください。