CSS を記述する最も効果的な方法の 1 つは、略語を使用することです。略語を使用すると、CSS ファイルが小さくなり、読みやすくなります。 CSS プロパティの略語を理解することも、フロントエンド開発エンジニアの基本スキルの 1 つです。今日は CSS プロパティの略語を体系的にまとめました。
色の略語
color の省略形が最も単純で、色の値が 16 進数の場合、各色の値が同じ場合は次のように記述できます。
| 色: #113366 |
と略すことができます
| カラー:#136 |
16 進数の色の値が使用される場合はどこでも、background-color、border-color、text-shadow、box-shadow などの略語を使用できます。
箱のサイズ
ここでは主に margin と padding の 2 つの属性が使用されます。ここでは margin を例に挙げますが、padding も同様です。ボックスには上下左右の 4 つの方向があり、各方向にマージンがあります。
| マージントップ:1px; マージン右:1px; マージンボタン:1px; マージン左:1px; |
これら 4 つの値は一緒に省略できます。
| マージン:1 ピクセル 1 ピクセル 1 ピクセル 1 ピクセル; |
略語の順序は、上→右→下→左です。時計回りの方向。反対側の値が同じ場合は省略できます。
| margin:1px;//4 方向のマージンは同じであり、margin:1px 1px 1px 1px; と同等です。 margin:1px 2px;//上下のマージンは両方とも 1px、左右のマージンは両方とも 2px で、これは margin:1px 2px 1px 2px と同等です margin:1px 2px 3px;//右マージンと左マージンは同じであり、margin:1px 2px 3px 2px; と同等です。 margin:1px 2px 1px 3px;//ここでは上下のマージンはどちらも 1px ですが、ここでは省略形は使用できないことに注意してください。 |
国境
border は比較的柔軟な属性で、border-width、border-style、border-color の 3 つのサブ属性があります。
| ボーダー幅: 数値 + 単位; 境界線のスタイル: なし || 点線 || 開始点 || 境界線の色: 色; |
幅、スタイル、色の順に省略できます。
| ボーダー:5px ソリッド #369; |
場合によっては、境界線をより単純に記述したり、いくつかの値を省略したりすることもできますが、どの値が必要であるかに注意してください。テストすることもできます。
| border:groove red; //この境界線の幅はどれくらいだと思いますか? border:solid; //これはどうなるでしょうか? border:5px; //これでいいですか？ border:5px red; //これでいいですか？ ? border:red; //これでいいですか？ ? ? |
上記のコードからわかるように、境界線のデフォルトの幅は 3 ピクセル、デフォルトの色は黒です。ボーダーの略称にはボーダースタイルが必要です。
各エッジの略語を使用することもできます。
| ボーダートップ:4px ソリッド #333; ボーダー右:3px ソリッド #666; border-bottom:3px ソリッド #666; ボーダー左:4px ソリッド #333; |
各属性の略語を使用することもできます。
| border-width: 1px 2px 3px; //最大4つの値を使用でき、省略規則はボックスサイズの省略形と同様、以下同様 ボーダースタイル: 実線の破線、点線の溝。 境界線の色:赤、青、白、黒; |
概要
アウトラインはボーダーに似ていますが、ボーダーはボックス モデルに影響しますが、アウトラインは影響しないという点が異なります。
| アウトラインの幅: 数値 + 単位; アウトライン スタイル: なし || 点線 || インセット || 実線 アウトラインの色: 色; |
次のように省略できます。
| アウトライン: 1 ピクセルの赤一色; |
同様に、outline の略語では、outline-style も必須で、他の 2 つの値はオプションです。デフォルト値は border と同じです。
背景
バックグラウンドは最も一般的に使用される略語の 1 つであり、次のプロパティが含まれます。
| 背景色: カラー #hex || RGB(% || 0-255) || 背景画像:url(); バックグラウンド-リピート: リピート-x || リピートなし; 背景位置: XY || (上||下||中央) (左||右||中央); 背景添付: スクロールを修正しました。 |
背景を省略すると、CSS の効率が大幅に向上します。
| 背景:#fff url(img.png) 繰り返しなし 0 0; |
背景の略語にもいくつかのデフォルト値があります。
| 背景:透明 なし 左上スクロールを繰り返します。 |
背景プロパティの値は継承されません。宣言できるのは 1 つだけで、他の値にはデフォルトが適用されます。
フォント
フォントの略語は最もよく使用されるものでもあり、効率的な CSS を記述する方法の 1 つでもあります。
フォントには次のプロパティが含まれます。
| フォント スタイル: 通常の斜体 || フォント バリアント:通常の小文字 || フォントの太さ: 通常 || 太字 || (100-900); フォントサイズ: (数字+単位) || (xx-small - xx-large); 行の高さ: 通常 || (数値 + 単位); font-family:name,"その他の名前"; |
フォントの各属性にもデフォルト値があります。これらのデフォルト値を覚えておくことは比較的重要です。
| フォントスタイル: 通常; フォントバリアント:通常; フォントの太さ: 通常; フォントサイズ: 継承; 行の高さ: 通常; フォントファミリー:継承; |
実は、これらの略語の中で最も注意が必要なのはフォントの略語であり、ちょっとした過失が予期せぬ結果を招く可能性があるため、フォントの略語の使用に同意しない人も少なくありません。
ただし、ここに小さなマニュアルがあります。フォントの略語をよりよく理解するのに役立つと思います。
リストスタイル
おそらく最も一般的に使用されるリストの属性は次のとおりです。
| リストスタイル:なし |
数字やドットなどのデフォルトのリスト スタイルをすべてクリアします。
list-style には次の 3 つの属性もあります。
| リスト スタイル タイプ: なし || 円 || 上位ローマ字 || リストスタイルの位置: 内側 || 継承 リスト スタイル イメージ: (URL) なし || |
list-style のデフォルトの属性は次のとおりです。
| リスト スタイル:ディスク外なし |
ピクチャが list-style で定義されている場合、ピクチャの優先順位は list-style-type よりも高くなることに注意してください。次に例を示します。
| list-style:URL 内の円(../img.gif) |
この例では、img.gif が存在すると、先ほど設定した丸記号は表示されません。
PS: 実際、list-style-type には便利なスタイルが多数あります。興味のある方は https://developer.mozilla.org/en/CSS/list-style-type を参照してください。
境界半径(コーナー半径)
Border-radius は CSS3 で新しく追加された属性で、丸い境界線を実装するために使用されます。この属性の現在の欠点は、ブラウザごとにサポートが異なることです。Gecko (firefox) と webkit (safari/chrome) はそれぞれプライベート プレフィックス -moz- と -webkit- を使用する必要があります。さらに混乱するのは、1 つのコーナーの border-radius 属性の記述が 2 つのブラウザ間でさらに異なる場合、多数のプライベート属性を記述しなければならないことです。
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; ボーダー左下の半径:6px; ボーダー左上半径:6px; ボーダー右上半径:6px; |
あれ、もう目がくらんでる？これは、左上の角が丸くならずに、他の 3 つの角が丸くなるという状況を実現するためです。したがって、ボーダー半径については、Shenfei は次の略語を使用することを強く推奨します。
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; 境界半径:0 6px 6px; |
これははるかに簡単です。 PS: 残念ながら、最新の Safari (4.0.5) はまだこの略語をサポートしていません... (@fireyy に感謝)
他に省略できる属性はありますか?皆さんもぜひ一緒に議論してください。