[CSS Note 8] CSS コードの省略形。使用する帯域幅が少なくなります。

1. ボックスモデルのコードの略称
ボックスモデルを語るとき、上下左右の4方向にマージン(margin)、パディング(padding)、ボーダー(border)が設定されていることを覚えておいてください。時計回りに設定します:右上、左下。マージンとパディングの具体的な適用例は次のとおりです。

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

には通常、次の 3 つの省略方法があります。

1. のように、top、right、bottom、および left の値が同じ場合。次のコード:

margin:10px 10px 10px 10px;

は、次のように短縮できます:

margin:10px;

2. 次のコードのように、top とbottom の値が同じで、left と right の値が同じ場合:

margin:10px 20px 10px 20px;

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

margin:10px 20px;

3. 次のコードのように、左と右の値が同じ場合:

margin:10px 20px 30px 20px;

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

margin:10px 20px 30px;

注:パディングとボーダーの省略方法はマージンと同じです。

2. カラー値の省略
設定したカラーが16進数のカラー値の場合、それぞれの2桁の値が同じであれば、その半分を省略することもできます。

例 1:

p{color:#000000;}
可以缩写为：
p{color: #000;}
例子2：
p{color: #336699;}
可以缩写为：
p{color: #369;}

3. フォントの省略形
Web ページのフォント CSS スタイル コードにも、独自の省略形メソッドがあります。以下は、Web ページのフォントを設定するためのコードです。コードは実際には 1 つの文に短縮できます:

body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; }

注:

1. この短縮形を使用するには、少なくとも font-size 属性と font-family 属性、およびその他の属性 (font-weight、 font-style、font-varient、line-height) 指定しない場合は、デフォルト値が自動的に使用されます。

2. 省略する場合は、font-sizeとline-heightの間に「/」を斜めに追加します。

一般に、中国語の Web サイトには英語が比較的少ないため、次の略語コードがより一般的に使用されます:

body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }

フォント サイズ、行間隔、中国語フォント、および英語フォントの設定があるだけです。

上記は [CSS Note 8] CSS コードの省略形であり、より少ない帯域幅を使用します。関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。