CSS の略語と最適化のヒントを 10 個まとめました-CSSチュートリアル-php.cn

CSS の略語と最適化のヒントを 10 個まとめました

巴扎黑

リリース： 2017-05-21 10:49:26

オリジナル

1335 人が閲覧しました

略語の最大の利点は、CSS ファイルのサイズを大幅に削減し、Web サイト全体のパフォーマンスを最適化し、読みやすくできることです。最適化を好む友人は、以下の CSS 略語ルールを紹介します。皆さんのお役に立てば幸いです

CSS 略語は、複数行の CSS プロパティを 1 行に省略することを指し、CSS コード最適化または CSS 略語とも呼ばれます。 CSS

略語の最大の利点は、CSS ファイルのサイズを大幅に削減し、Web サイトの全体的なパフォーマンスを最適化し、読みやすくできることです。以下に一般的な CSS 省略規則を紹介します:

1. ボックスサイズ

これは主に、margin と padding の 2 つの属性に使用されます。ここでは、margin を例に挙げますが、padding も同様です。

ボックスには上下左右の 4 つの方向があり、各方向にマージンがあります:

margin-top:1px; 
margin-right:2px; 
margin-bottom:3px; 
margin-left:4px;

ログイン後にコピー

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

margin:1px 2px 3px 4px;

ログイン後にコピー

構文マージン: 右上下左下

//四个方向的边距相同，等同于margin:1px 1px 1px 1px; 
margin:1px; 
//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px 
margin:1px 2px; 
//右边距和左边距相同，等同于margin:1px 2px 3px 2px; 
margin:1px 2px 3px; 
//注意，这里虽然上下边距都为1px，但是这里不能缩写。 
margin:1px 2px 1px 3px;

ログイン後にコピー

次に、ボーダー

ボーダーの属性は次のとおりです。

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

ログイン後にコピー

は 1 つの文として省略できます。

文法: width style color;

3 、背景 (背景)

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

border:1px solid #000;

ログイン後にコピー

は 1 つの文に省略できます:

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

ログイン後にコピー

構文は、background:color imagerepeatattachmentposition です。 1 つ以上の属性値を省略できます。省略した場合、属性値にはブラウザのデフォルト値が使用されます:

background:#f00 url(background.gif) no-repeat fixed 0 0;

ログイン後にコピー

IV.フォントは次のとおりです。

color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0%

ログイン後にコピー

は 1 つの文に短縮できます:

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

ログイン後にコピー

フォント定義を短縮する場合は、少なくとも 2 つの値 (font-size と font-family) を定義する必要があることに注意してください。

5. リスト

デフォルトのドットとシリアル番号をキャンセルするには、 list-style:none; と書くことができます。

list の属性は次のとおりです:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

ログイン後にコピー

は 1 つの文に短縮できます。

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif);

ログイン後にコピー

6. カラー(Color)

16進数のカラー値で、各2桁の値が同じ場合は半分に省略できます。例:

list-style:square inside url(image.gif);

ログイン後にコピー

7. 属性値は 0

です記述原則は、CSS 属性値が 0 の場合、単位を追加する必要はありません (例: px/em)。、次のように記述できます

:

Aqua: #00ffff ——#0ff 
Black: #000000 ——#000 
Blue: #0000ff ——#00f 
Dark Grey: #666666 ——#666 
Fuchsia:#ff00ff ——#f0f 
Light Grey: #cccccc ——#ccc 
Lime: #00ff00 ——#0f0 
Orange: #ff6600 ——#f60 
Red: #ff0000 ——#f00 
White: #ffffff ——#fff 
Yellow: #ffff00 ——#ff0

ログイン後にコピー

これを試してください:

padding: 10px 5px 0px 0px;

ログイン後にコピー

8. 最後のセミコロン

次のように、最後の属性値の後のセミコロンは記述する必要はありません。

padding: 10px 5px 0 0;

ログイン後にコピー

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

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal; 
}

ログイン後にコピー

E 、 nine, font-weight border-radius)

border-radius は、css3 で新しく追加された属性で、丸い境界線を実装するために使用されます。

#nav{ 
border-top:4px solid #333; 
font-style: normal; 
font-variant:normal; 
font-weight: normal 
}

ログイン後にコピー

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

h1{ 
font-weight:bold; 
} 
p{ 
font-weight:normal; 
}

ログイン後にコピー

構文 border-radius:topleft toprightbottomrightbottomleft

以上がCSS の略語と最適化のヒントを 10 個まとめましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。