1. CSS の略語を使用する 略語を使用する
と、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 略語の主なルールについては、ここでは説明しませんので「一般的な CSS 略語構文の概要」を参照してください。
2. 値が 0 でない場合は、単位を明確に定義します。
サイズの単位を定義するのを忘れるのは、CSS 初心者によくある間違いです。 HTML では width="100" と記述するだけで済みますが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を定義しない場合の例外は、行の高さと 0 の値の 2 つだけです。また、単位の後には他の値を指定する必要があります。値と単位の間にスペースを入れないように注意してください。
3. 大文字と小文字の区別
XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。
class と id の値も HTML と XHTML で大文字と小文字が区別されます。大文字と小文字を混合して記述する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。
4. class および id の前に要素の修飾をキャンセルします
。要素の class または id を定義するために記述する場合、ID はページ内で一意であり、class はページ内で複数回使用できるため、前の要素の修飾を省略できます。 。要素を修飾することは意味がありません。例えば：
div#content { /* 宣言 */ }
fieldset.details { /* 宣言 */ }
#content { /* 宣言 */ } として記述できます
.details { /* 宣言 */ }
これにより、バイト数が節約されます。
5. デフォルト値
通常、padding のデフォルト値は 0、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイル シートの先頭ですべての要素のマージンとパディングの値を 0 に定義できます。
* {
マージン:0;
パディング:0;
6.
CSSでは、親要素に定義されている色やフォントなどの属性値を子要素が自動的に継承するため、
継承可能な値を繰り返し定義する必要がありません。
子要素に直接継承できるため、定義を繰り返す必要はありません。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。
7.
同じ要素の定義が複数ある場合、最も近い (最小レベルの) 定義が優先されます。たとえば、Update: Lorem ipsum dolor set というコードがあります。
CSS ファイルでは、要素 p とクラス「update」を定義しました。
p {
マージン:1em 0;
フォントサイズ:1em;
色:#333;
}
。アップデート {
フォントの太さ:太字;
カラー:#600;
}
これら 2 つの定義のうち、class が p よりも近いため、class="update" が使用されます。詳細については、W3C の「セレクターの特異性の計算」を参照してください。
8. 複数のクラス定義
ラベルは同時に複数のクラスを定義できます。例: まず 2 つのスタイルを定義します。最初のスタイルの背景は #666、2 番目のスタイルの境界線は 10 ピクセルです。
.one{幅:200px;背景:#666;}
.two{border:10px ソリッド #F00;}
ページのコードでは、次のように
CSS 初心者は、子孫セレクターの使用が効率に影響を与える理由の 1 つであることを知りません。サブセレクターは、多くのクラス定義を保存するのに役立ちます。次のコードを見てみましょう。
。引用符は必要ないため、バイト数を節約するために、背景画像のパスに引用符を追加しないことをお勧めします。例えば：
背景:url("images/***.gif") #333;
これは、background:url(images/***.gif) #333; のように記述することができます。
引用符を追加すると、ブラウザー エラーが発生することがあります。
11. グループ セレクター (グループ セレクター)
一部の要素タイプ、クラス、または ID に共通の属性がある場合、グループ セレクターを使用して、複数の繰り返し定義を避けることができます。これにより、かなりのバイトを節約できます。
たとえば、すべてのタイトルのフォント、色、マージンを定義するには、次のように記述できます。
h1、h2、h3、h4、h5、h6 {
フォントファミリー:「Lucida Grande」、Lucida、Arial、Helvetica、サンセリフ;
色:#333;
マージン:1em 0;
}
使用中に独立したスタイルを定義する必要がある個々の要素がある場合は、次のように新しい定義を追加するか、古い定義を上書きできます。
h1 { フォントサイズ:2em }
h2 { フォントサイズ:1.6em }
CSS を使用してリンクの複数の状態スタイルを定義する場合は、正しい順序で
リンク スタイル
を指定します。:link :visited :hover :active。抽出された最初の文字は「LVHA」で、「LoVe HAte」（好きか嫌いか）として覚えられます。なぜそのように定義されているのでしょうか? Eric Meyer の「Link Specificity」を参照してください。
ユーザーがキーボード コントロールを使用する必要があり、現在のリンクのフォーカスを知る必要がある場合は、:focus 属性を定義することもできます。 :focus 属性の効果は、フォーカスされた要素に :hover 効果を表示させる場合は、:hover 効果を置き換える場合は :focus を記述する位置によっても異なります。 :hover の後に :focus を置きます。
13. フロートのクリア
非常に一般的な CSS の問題は、位置決めにフローティングが使用されている場合、下位のレイヤーがフローティング レイヤーで覆われているか、レイヤー内にネストされているサブレイヤーが外側のレイヤーの範囲を超えていることです。
通常の解決策は、フローティング レイヤーの背後に div や br などの追加要素を追加し、そのスタイルをclear: Both として定義することです。この方法は少し突飛ですが、幸いなことに、それを解決する良い方法があります。この記事「構造マークアップなしでフロートをクリアする方法」を参照してください (注: このサイトはこの記事をできるだけ早く翻訳します)。
上記の 2 つの方法は、フローティング オーバーフローの問題を非常にうまく解決できますが、レイヤーまたはレイヤー内のオブジェクトを本当にクリアする必要がある場合はどうすればよいでしょうか?簡単な方法は、オーバーフロー属性を使用することです。この方法はもともと「フロートの単純なクリア」で公開され、「クリアランス」および「フロートの超簡単なクリア」で広く議論されています。
上記の明確な方法のどれがより適切であるかは、特定の状況によって異なるため、ここでは説明しません。さらに、フロートの適用については、いくつかの優れた記事で明確に説明されています。「フロートのチュートリアル」、「フロートの内容」、および「フロートのレイアウト」を読むことをお勧めします。
14. 水平方向のセンタリング (センタリング)
これは単純なテクニックですが、次のような初心者の質問が多すぎるため、もう一度言う価値があります: CSS を水平方向にセンタリングするにはどうすればよいですか?レイアウトがレイヤー (コンテナー) に含まれている場合は、次のように要素の幅を定義し、水平方向のマージンを定義する必要があります。
次のように水平方向の中央に配置するように定義できます。
＃包む {
width:760px; /* レイヤーの幅に変更します*/
マージン:0 自動;
}
しかし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、text-align 属性を使用するという非常に便利な方法を使用します。このような：
体 {
テキスト整列:中央;
}
＃包む {
width:760px; /* レイヤーの幅に変更します*/
マージン:0 自動;
テキスト整列:左;
}
最初の本文の text-align:center; ルールは、IE5/Win の本文のすべての要素が中央に配置されることを定義し (他のブラウザーはテキストを中央に配置するだけです)、2 番目の text-align:left; は #warp でテキストを中央に配置することを定義します。左。
15. CSS のインポートと非表示
古いブラウザでは CSS がサポートされていないため、一般的なアプローチは @import テクニックを使用して CSS を非表示にすることです。例えば：
@import url("main.css");
ただし、この方法は IE4 では機能せず、しばらく頭が痛くなりました。後で次のように書きました。
@import "main.css";
このようにして、IE4 で CSS を非表示にすることができます。笑、これで 5 バイトも節約できます。 @import構文の詳しい説明を知りたい場合は、こちら「centricleのCSSフィルターチャート」をご覧ください。
16. IE の最適化
IE ブラウザのバグに対していくつかの特別なルールを定義する必要がある場合があります。ここでは、Microsoft がリリースしようとしているものに関係なく、CSS のサポートが向上しているかどうかに関係なく、そのうちの 2 つだけを使用します。 IE7 ベータ版では、両方の方法が最も安全です。
1. アノテーション方法 (a) IE で CSS 定義を非表示にします。子セレクターを使用できます。
html>ボディp {
/* 定義内容 */
}
(b) 以下の記述方法はIEブラウザのみで理解可能（他のブラウザからは隠蔽されます）
* html p {
/* 宣言 */
}
(c) 場合によっては、IE/Win をアクティブにして IE/Mac を非表示にしたい場合は、「バックスラッシュ」トリックを使用できます。
/* */
* html p {
宣言
}
/* */
2. 条件付きコメントの方法 CSS Hacks よりもテストしやすいと思うもう 1 つの方法は、Microsoft のプライベート属性の条件付きコメント (条件付きコメント) を使用することです。この方法を使用すると、メインのスタイル シートの定義に影響を与えることなく、IE 用にいくつかのスタイルを個別に定義できます。このような：
17. デバッグスキル: レイヤーの大きさはどれくらいですか?
CSS エラーをデバッグするときは、タイプライターのように CSS コードを 1 行ずつ分析する必要があります。通常、レイヤーがどれだけのスペースを占めるかが明らかになるように、問題のレイヤーに背景色を定義します。一般的には可能な border の使用を推奨する人もいますが、問題は、border によって要素のサイズが大きくなる場合があり、border-top と boeder-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全です。
問題を引き起こすことが多いもう 1 つのプロパティは、アウトラインです。アウトラインはボーダーのように見えますが、要素のサイズや位置には影響しません。アウトライン属性をサポートしているブラウザはわずかで、私が知っているのは Safari、OmniWeb、Opera だけです。
18. CSS コードの書き方 CSS コードを書くとき、インデント、改行、スペースなどについては、誰もが独自の書き方の習慣を持っています。継続的に練習した結果、次のような書き方を採用することにしました。
セレクター1、
セレクター2 {
プロパティ:値;
}
ユニオン定義を使用するときは、通常、各セレクターを個別の行に記述して、CSS ファイル内で見つけやすくします。最後のセレクターと中括弧 { の間にスペースを追加します。また、各定義を属性値の直後に記述します。スペースは追加しないでください。