CSS コードの簡略化された略語についての簡単な説明

今日多くの人が使用している CSS コードは非常に冗長です。実際、その多くは簡略化および省略できます。
今回はCSSコードの簡易略語について、私の知っている範囲でお話します。

1. すべての CSS コードで使用する必要があるのは 1 つのスタイル タグだけです。各段落にスタイル タグを追加する必要はありません。例:
body{background:url("") 繰り返し固定!重要;}

.bodybg{background:url("") 繰り返しなし スクロールなし!重要;}

は簡略化して次のようにマージできます:

body{background:url("") 繰り返し固定!重要;}
.bodybg{background:url("") 繰り返しなし スクロールなし!重要;}

ブログの各部分の背景を変更したり、フォントを変更したりするのと同じようにブログの各部分の色やテンプレートの幅の変更、マウス、スクロールバーなどのCSSコードをスタイルタグにマージできます。


2. 色: 各 2 桁の値が同じ場合は、半分に省略できます。たとえば、

Black #000000 は #000 に省略できます。 #fff に短縮できます。
赤 #ff0000 は #f00 に短縮できます。
青 #0000ff は #00f に短縮できます。
#336699 は #369 に短縮できます。

黒、白、赤、青、緑、黄色などのいくつかの一般的な色。コードを思い出せない場合は、対応する英語の黒、白、赤、青、緑、黄色などを使用できます。彼らを代表するために。

3. 同じロゴの複数の属性を制御する場合、複数の属性を中括弧で囲み、異なる属性をセミコロンで区切ることができます。たとえば、大きな背景とスクロール バー:

body {background:url("")repeat fixed! important;}
body {SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR -シャドウ-カラー: #fff;
スクロールバー-3Dライト-カラー: #000;
スクロールバー-矢印-カラー: #000;
スクロールバー-トラック-カラー: #EDF6F5;
スクロールバー-ダークシャドウ-カラー: #000;}

はい 簡略化され次のように統合されました:

body {background:url("")repeat fixed! important;
SCROLLBAR-FACE-COLOR: #EDF6F5;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #000; 同じ属性コントロールを結合することもでき、各識別子はカンマで区切られます。例:

.bodytop{background:#transparent;}
.bodybg{background:#transparent;}

は簡略化して次のようにマージできます:

.bodytop,.bodybg{background:#transparent;}
.bodytop {display: none;}
.bodyBottom{display:none;}

は簡略化して次のようにマージできます:

.bodytop,.bodyBottom{display:none;}


.feeds .text a{color:#000 ;}
.feeds .function a{color:#000;}
は、次のように簡略化してマージできます:

.feeds .text a,.feeds .function a{color:#000}

たくさんの例を挙げましたが、具体的には、誰もが自分の状況に応じて略語コードを簡素化する必要があります。

現在多くの人がブログに投稿している、ホームページの透明テンプレートのコードのようにしてください:

.logo
{background: #transparent}
.banner
{background: #transparent}
.menu
{background: #transparent}
.bodyBg
{background:#transparent}
.bodyBottom
{background:#transparent}
.feeds .up
{background:#transparent}
.feeds .down
{background:#transparent}
.feeds .function
{background:#transparent}
.feeds .page
{background:#transparent}
.links .up
{background:#transparent}
.links .down
{background:#transparent}
.links .mid
{background:#transparent}
.photo .mid
{background:#transparent}
.label .mid
{background:#transparent}
.calendar .mid
{background:#transparent}
.callboard .up
{背景:#transparent}
.callboard .down
{background:#transparent}
.callboard .mid
{background:#transparent}
.gbook .up
{background:#transparent}
.gbook .down
{background: #transparent}
.links .more
{background:#transparent}
.add .ico
{background:#transparent}
.add
{background:#transparent}

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

.logo,.banner,.menu,
.bodyBg,.bodyBottom,.feeds .up,.feeds .down,.feeds .function,.feeds .page,
.links .up,.links .down,.links 。 mid,.photo .mid,.label .mid,
.calendar .mid,.callboard .up,.callboard .down,.callboard .mid,
.gbook .up,.gbook .down,.links .more,. add .ico,.add
{background :#transparent}


6. 背景

背景の属性は次のとおりです:

background-color:#f00;
background-image:url("");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

は 1 つの文に短縮できます:background:#f00 url("") no-repeat fixed 0 0;

構文は、background:color imagerepeatattachmentposition;


7.Border(ボーダー)

ボーダーのプロパティは以下の通りです。 :

border-width: 1px;
border-color:#000;

は次の 1 つの文に省略できます: border:width style color;


9. フォント (fonts)

フォントの属性は次のとおりです:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size :1em;
line-height:140%;
font- family:"Lucida Grande",sans-serif;

は 1 つの文に短縮できます: font:italic small-caps 太字 1em/140% "Lucida Grande", sans-serif;

フォント定義を省略する場合は、少なくとも font-size と font-family の 2 つの値を定義してください。
10. CSS コードでは、形式が正しい限り、大文字と小文字、改行、空白は考慮されません。

私たちのブログにおける CSS 略語の利点は、コードを簡素化し、冗長性を減らすことができることですが、Web サイトを作成する上で非常に重要です
CSS スタイル シート ファイルの呼び出し速度は、ファイルのサイズに関係します。ファイルが小さいほど、呼び出し速度が速くなり、
特定の面で Web サイトのページの読み込み速度が向上する可能性があり、速度は Web サイトにとって重要な要素です。

そのため、CSS スタイル シート ファイルを作成するときは、余分なスペースなど、コードを省略して簡素化するように努める必要があります。
たとえば、全体的なテンプレート 6「Lock Heart for You」で提供したコード内のコメントは、次のようにする必要があります。可能な限り削除されます。


以下は CSS の省略されたプロパティとそれらが表す一般的なプロパティのリストです:

Background: 背景の添付ファイル、背景の色、背景画像、背景の位置、背景の繰り返し
Border: 境界線の色、境界線のスタイル、境界線の幅
border -bottom (下の境界線): 下の境界線の色、下の境界線のスタイル、下の境界線の幅
border-left (左の境界線): 左の境界線の色、左の境界線のスタイル、左の境界線の幅
border- right (右の境界線): 右の境界線の色、右の境界線のスタイル、右の境界線の幅
border-top (上の境界線): 上の境界線の色、上の境界線のスタイル、上の境界線の幅
cue (音声プロンプト): フロントプロンプト、ポストヒント
font (フォント): フォント、フォントサイズ、フォントスタイル、フォントの太さ、フォントバリアント、行の高さ、フォントサイズの調整、フォントの伸縮
list-style (リストスタイル): リストスタイルの画像、リストスタイルの位置、リストスタイルのタイプ
マージン(空白): 上マージン、右マージン、下マージン、左マージン
outline (アウトライン): アウトラインの色、アウトラインのスタイル、アウトラインの幅
padding (ギャップ): 上マージン、右マージン、下ギャップ、左ギャップ
pause (ポーズ): バックポーズ、フロントポーズ
添付ファイルは、時間内に効果を表示できる非常に使いやすい CSS コード エディターです。
()