CSS_Experience 交換におけるマージン、パディング、ボーダー、背景、フォントの省略例

以下に、より一般的に使用される属性の例をいくつか示します。

マージン

margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
コード簡略化: margin:1px

margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
コードの簡略化対象: margin:1px 2px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
コードの簡略化対象: margin:1px 2px 3px

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
コード簡略化: margin: 1px 2px 3px 4px

注: 属性値が 0 の場合、単位を記述する必要はありません。たとえば、0px を 0 として直接書き込む

パディング

パディング 書き方は margin と似ています

padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px ;
コードの簡略化 対象:padding:1px

padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
コードは次のように簡略化されます：padding:1px 2px

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left: 2px;
コードは次のように簡略化されます：padding:1px 2px 3px

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding -left:4px;
コードの簡略化 対象:padding:1px 2px 3px 4px

border

border-width:1px;
border-style:solid;
border -color:#000000;
コードは次のように簡略化されます: border:1px Solid #000

背景

背景-色:#CCFFFF;
背景-画像:url(画像パス);
background-repeat:repeat -x;
background-position:5px 4px;
コードは次のように簡略化されます:background:#CFF url (画像パス)repeat-x 5px 4px
font

font-size :26px;
font-weight:bold;
font-family: "宋体";
コードは次のように簡略化されます: font:26px ボールド "宋体"

color 属性値
Color: #000000;
Color: #ff0000;
コードは次のように簡略化されます: color: #000, color: #f00