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の前に要素制限を解除する
要素のクラスまたは ID を定義するために記述する場合、ID はページ内で一意であり、クラスはページ内で複数回使用できるため、前の要素修飾を省略できます。要素を修飾することは意味がありません。例えば：
div#content { /* 宣言 */ }
fieldset.details { /* 宣言 */ } |
次のように書くことができます
#content { /* 宣言 */ }
.details { /* 宣言 */ } |
これにより、バイト数が節約されます。
5. デフォルト値
通常、padding のデフォルト値は 0 で、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイル シートの先頭ですべての要素のマージンとパディングの値を 0 に定義できます。
6. 継承可能な値を繰り返し定義する必要がない
CSSでは、親要素で定義した色やフォントなどの属性値を子要素が自動的に継承し、繰り返し定義することなく子要素に直接継承することができます。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。
7. 最近の第一原理
同じ要素の定義が複数ある場合、最も近い (最小レベルの) 定義が優先されます。たとえば、次のコードがあります。
更新: Lorem ipsum dolor セット
CSS ファイルでは、要素 p と classupdate を定義しました。
p {
マージン:1em 0;
フォントサイズ:1em;
色:#333;
}
。アップデート {
フォントの太さ:太字;
カラー:#600;
} |
これら 2 つの定義のうち、class が p より近いため、class=update が使用されます。詳細については、W3C の「セレクターの特異性の計算」を参照してください。
8. 複数のクラス定義
タグは同時に複数のクラスを定義できます。例: まず 2 つのスタイルを定義します。最初のスタイルの背景は #666、2 番目のスタイルの境界線は 10 ピクセルです。
.one{幅:200px;背景:#666;}
.two{border:10px ソリッド #F00;}
ページ コードでは、次のように呼び出すことができます。最終的な表示効果は、この div に #666 の背景と 10 ピクセルの境界線の両方が含まれることです。はい、これは可能です、試してみてください。
9. 子孫セレクターを使用する
CSS 初心者は、サブセレクターの使用が効率に影響を与える理由の 1 つであることを知りません。サブセレクターは、多くのクラス定義を保存するのに役立ちます。次のコードを見てみましょう。
〈ディビジョンID=サブナビ〉
〈ウル〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉項目 1 〈/a〉〈/li〉
〈li class=subnavitemslmctt〉 〈a href=# class=subnavitemslmctt〉 項目 1 〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 項目 1 〈/a〉 〈/li〉
〈/div〉 |
このコードの CSS 定義は次のとおりです。
div#subnav ul { /* いくつかのスタイル */ }
div#subnav ul li.subnavitem { /* いくつかのスタイル */ }
div#subnav ul li.subnavitem a.subnavitem { /* いくつかのスタイル */ }
div#subnav ul li.subnavitemselected { /* いくつかのスタイル */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* いくつかのスタイル */ } |
上記のコードを次のメソッドに置き換えることができます
〈ul id=サブナビ〉
〈li〉 〈a href=#〉 項目 1 〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 項目 1 〈/a〉 〈/li〉
〈li〉 〈a href=#〉 項目 1 〈/a〉 〈/li〉
|
スタイル定義は次のとおりです。
#subnav { /* いくつかのスタイル */ }
#subnav li { /* いくつかのスタイリング */ }
#subnav a { /* いくつかのスタイリング */ }
#subnav .sel { /* いくつかのスタイリング */ }
#subnav .sel a { /* いくつかのスタイリング */ } |
サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。
10. 背景画像のパスに引用符を追加する必要はありません。引用符は必要ないため、バイト数を節約するために背景画像のパスに引用符を追加しないことをお勧めします。例えば：
| 背景:url(images/***.gif) #333; |
次のように書くことができます
| 背景: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 } |
12. リンク スタイルを正しい順序で指定します。
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 を非表示にすることです。例えば：
ただし、この方法は IE4 では機能せず、しばらく頭が痛くなりました。後で次のように書きました。
このようにして、IE4 で CSS を非表示にすることができます。笑、これで 5 バイトも節約できます。 @import構文の詳しい説明を知りたい場合は、こちら「centricleのCSSフィルターチャート」をご覧ください。
16. IEの最適化
場合によっては、IE ブラウザのバグに対して特別なルールを定義する必要があります。ここでは、CSS のサポートが Microsoft の方が優れているかどうかに関係なく、そのうちの 2 つだけを使用します。最も安全です。
1. アノテーションの方法
(a) IE で CSS 定義を非表示にするには、子セレクターを使用できます。
(b) 以下の記述方法はIEブラウザのみで理解可能（他のブラウザからは隠蔽されます）
(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 ファイル内で見つけやすくします。最後のセレクターと中括弧 { の間にスペースを追加します。また、各定義を属性値の直後に記述します。スペースは追加しないでください。
私は各属性値の後にセミコロンを追加することに慣れていますが、ルールでは最後の属性値の後にセミコロンを記述する必要はありませんが、新しいスタイルを追加する場合は、セミコロンとセミコロンの追加を忘れがちです。エラーが発生するため、追加した方がよいでしょう。
最後に、読みやすくするためにスペースと改行を使用して、閉じ中括弧 } を単独で行に記述します。
