CSSの略

ボックスモデルコードの概要
スピーカーモデルでは、外側距離(margin)、内側エッジ距離(padding)、ボーダー設定の上下左右4方向のエッジ距離が時計回りに設定されていることを覚えています.具体的にmarginとpaddingに適用する例は以下の通りである.

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;

、leftとrightの値が同じ場合、次のコードのようにします.

margin:10px 20px 30px 20px;

省略可能:

margin:10px 20px 30px;

注意:padding、borderの略語方法はmarginと一致しています.
カラー値の省略形
色のcssスタイルについても略語できますが、設定した色が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、この略語を使用するには、少なくともfont-sizeとfont-familyのプロパティを指定し、font-weight、font-style、font-variant、line-heightなどの他のプロパティは、指定されていない場合、自動的にデフォルト値を使用します.2、略語でfont-sizeとline-heightの間に「/」を入れて斜めに担ぐ.一般的には、中国語のサイトでは英語が少ないので、以下の略語コードがよく使われています.

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

文字、行間隔、中国語フォント、英語フォントの設定があるだけです.
カラー値
Webページでの色の設定は非常に重要で、フォント色(color)、バックグラウンド色(background-color)、ボーダー色(border)などがあり、色の設定方法もいろいろあります.
1、英文コマンドの色

p{color:red;}

2、RGB色
これはphotoshopのRGB色と一致し、R(red)、G(green)、B(blue)の3色の割合で配色される.

p{color:rgb(133,45,200);}

各項の値は、0~255の整数であってもよいし、0%~100%のパーセンテージであってもよい.次のようになります.

p{color:rgb(20%,33%,25%);}

3、16進数色
この色の設定方法は現在一般的に使われている方法で、原理はRGBの設定でもあるが、各項目の値は0-255から16進数00-ffになっている.

p{color:#00ffff;}

長さの値
長さ単位をまとめると、px(画素)、em、%パーセンテージによく使われていますが、実はこの3つの単位は相対単位であることに注意してください.
1、画素
画素はなぜ相対単位なのか.画素はディスプレイ上の小さな点を指すため(CSS仕様では「90画素=1インチ」とする).実際にはブラウザがディスプレイの実際の画素値を使用することに関係しており、現在では多くの設計者が画素(px)を単位として使用する傾向にある.
2、em
この要素のフォントのfont-size値です.要素のfont-sizeが14 pxの場合、1 em=14 pxです.font-sizeが18 pxの場合、1 em=18 pxになります.次のコードがあります.

p{font-size:12px;text-indent:2em;}

上記のコードは、段落の最初の行の24 pxインデント(すなわち、2つのフォントサイズの距離)を実現することができる.
次に、特殊な状況に注意します.
ただしfont-sizeに単位emを設定すると、計算の基準はpの親要素のfont-sizeに基づいています.次のコードがあります.

p{font-size:14px}
span{font-size:0.8em;}
       。

その結果、spanのフォント「例」のフォントサイズは11.2 px(14*0.8=11.2 px)であった.
3、パーセント

p{font-size:12px;line-height:130%}

行の高さ(行間隔)をフォントの130%(12*1.3=15.6 px)に設定します.