HTML 5コードの略語

1719 ワード

ボックスモデルコードの概要
ボックスモデルの外側ピッチ(margin)、内側ピッチ(padding)、およびボーダー(border)設定の上下左右4方向のピッチは、時計回りに設定されます.上下左上です.marginの例を示します.
margin:10px 15px 12px 14px;/*    10px、    15px、    12px、    14px*/

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、leftとrightの値が同じ場合、次のコードのようにします.
margin:10px 20px 30px 20px;

省略可能:
margin:10px 20px 30px;

padding、borderの略語方法はmarginと一致している.
カラー値の省略形
色の値は16進数で、2桁が同じ場合は例1を省略できます.
p{color:#000000;}

以下に省略できます.
p{color: #000;}

例2:
p{color: #336699;}

以下に省略できます.
p{color: #369;}

フォントの略語
次は、Webページのフォントを設定するコードです.
body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"  ",sans-serif;
}

このような複数の行のコードは、実際には1つに略すことができます.
body{
    font:italic  small-caps  bold  12px/1.5em  "  ",sans-serif;
}

注意:
1、この略語を使用するには、少なくともfont-sizeとfont-familyのプロパティを指定し、font-weight、font-style、font-variant、line-heightなどの他のプロパティは、指定されていない場合はデフォルト値を自動的に使用します.
2、略語でfont-sizeとline-heightの間に「/」を入れて斜めに担ぐ.
一般的には、中国語のサイトでは英語が少ないので、以下の略語コードがよく使われています.
body{
    font:12px/1.5em  "  ",sans-serif;
}

文字、行間隔、中国語フォント、英語フォントの設定があるだけです.