HTML+CSS学習メモ(13)

ボックスモデルのコード略語

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

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

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

1. 上、右、下、左の値の場合次のコードのように、

margin:10px 10px 10px 10px;

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

margin:10px;

2. 上部と下部の値が同じである場合、次のコードのように、left と right の値は同じです:

margin:10px 20px 10px 20px;

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

margin:10px 20px;

3. left と right の値が同じ場合

margin:10px 20px 30px 20px;

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

margin:10px 20px 30px;

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

カラー値の省略形

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

例 1:

p{color:#000000;}

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

p{color: #000;}

例 2:

p{color: #336699;}

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

p{color: #369;}

フォントの省略形

Web ページのフォント CSS スタイル コードにも独自の省略形メソッドがあります。次のコードは 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. この短縮方法を使用する場合、少なくともフォントを指定する必要があります。 size および font-family 属性、およびその他の属性 (font -weight、font-style、font-varient、line-height など) は、指定されていない場合、自動的にデフォルト値を使用します。

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

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

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

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

公式アカウント QR コード