HTML 5コードの略語
1719 ワード
ボックスモデルコードの概要
ボックスモデルの外側ピッチ(margin)、内側ピッチ(padding)、およびボーダー(border)設定の上下左右4方向のピッチは、時計回りに設定されます.上下左上です.marginの例を示します.
1、top、right、bottom、leftの値が同じ場合、次のコードのようにします.
省略可能:
2、topとbottomの値が同じ場合、leftとrightの値が同じ場合、次のコードのようにします.
省略可能:
3、leftとrightの値が同じ場合、次のコードのようにします.
省略可能:
padding、borderの略語方法はmarginと一致している.
カラー値の省略形
色の値は16進数で、2桁が同じ場合は例1を省略できます.
以下に省略できます.
例2:
以下に省略できます.
フォントの略語
次は、Webページのフォントを設定するコードです.
このような複数の行のコードは、実際には1つに略すことができます.
注意:
1、この略語を使用するには、少なくともfont-sizeとfont-familyのプロパティを指定し、font-weight、font-style、font-variant、line-heightなどの他のプロパティは、指定されていない場合はデフォルト値を自動的に使用します.
2、略語でfont-sizeとline-heightの間に「/」を入れて斜めに担ぐ.
一般的には、中国語のサイトでは英語が少ないので、以下の略語コードがよく使われています.
文字、行間隔、中国語フォント、英語フォントの設定があるだけです.
ボックスモデルの外側ピッチ(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;
}
文字、行間隔、中国語フォント、英語フォントの設定があるだけです.