一般的に使用される CSS の略語と syntax_Experience 交換のもう 1 つの実用的なコレクション

なぜ CSS の略語を使うのか?

WEB標準のWebページをデザインする場合、大量のCSS構文を記述する必要がありますが、通常、Dreamweaverソフトウェアの「CSSスタイル」パネルから対応するCSSコードを自動生成できます。

しかし、このソフトウェアによって生成された CSS コードは明確で理解しやすいものの、バー スタイルの定義について CSS が明確に説明しているため、CSS コードを読むのは長くて複雑に見えます。時間が経つとCSSコードのバイト数も増えていきます…これは効率と完成度を追求する人にとっては耐え難いことです。

たとえば、要素のパディング サイズを定義するときは、パディングを使用します。上、右、下、左のパディングに異なる要件がある場合、ソフトウェアによって生成されるコードは次のようになります。


.t1 {
パディングトップ: 3ピクセル;
パディング右: 20ピクセル;
パディングボトム: 3ピクセル;
パディング左: 20ピクセル;
}


簡単に書​​くと

コードをコピー コードは次のとおりです。

.t2 {
padding: 3px 20px 3px 20px;
}

padding の 4 つの辺の値が対応します上（上）、右（右）、下（下）、左（左）へ。もちろん、この例は次のように省略することもできます。

コードをコピー コードは次のとおりです。

.t3 {
パディング: 3px 20px 3px;
}

左がない場合のデフォルト値は右の値、下がない場合のデフォルト値は上の値であるため、この例の最も単純なものは次のようになります:
.t4 {
padding: 3px 20px;
}

(もちろん、padding の値が 1 つだけの場合は、上、右、下、左が同じであることを意味します。)
<style type="text/css"> <!-- .t1 { パディングトップ: 3px; パディング右: 20px; パディングボトム: 3px; パディング左: 20px; } .t2 { パディング: 3px 20px 3px 20px; } .t3 { パディング: 3px 20px 3px; } .t4 { パディング: 3px 20px; } スパン{ 境界線: 1px 実線 #CCCCCC; } --> </スタイル> <span class="t1">カンブルース <span class="t2">cnrose <span class="t3">クンジェームス <span class="t4">www.cnbruce.com </style>
[Ctrl A すべて選択 注:外部 Js を導入する必要がある場合は、それを更新して実行する必要があります]
上記の例の長い 4 行のコードは 1 行の導入コードに凝縮されています。これが CSS 省略形の利点です。

もちろん、他の人の CSS の経験を学ぶと、多くの同様の CSS 略語も目にします。しかし、自分自身が理解していないと、これらの CSS の手法や経験をどのように学べばよいのかわかりません。したがって、一般的に使用される CSS 略語構文を理解し、習得する必要があります。

一般的に使用される CSS 省略構文
1、背景
背景の属性は次のとおりです:
背景色: #FFCCFF;
背景画像: url(/images /2007-6 .jpg);
背景-リピート: 繰り返しなし;
背景-添付: 固定;
背景-位置: 中央下;

CSS コードは次のように省略できます。


背景:#FCF URL (/images/2007-6.jpg) リピートなし固定中央下;



背景: 背景色、背景画像、背景リピート、背景添付、背景水平位置、背景の垂直位置

背景色「#FFCCFF」は、16 進カラー値の「#FCF」と省略することもできます。各 2 桁の値 (RRGGBB) が同じ場合、半分 (RGB) に短縮できます。同時に、背景画像を二重引用符で囲む必要はありません。