非常に優れた CSS スキルがいくつかありますが、people_Experience 交換では無視されることがよくあります

1. 大文字と小文字の区別
XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。

2. 背景画像のパスに引用符を追加する必要はありません。引用符は必要ないため、バイト数を節約するために、背景画像のパスに引用符を追加しないことをお勧めします。例:

background:url("images/***.gif") #333;

は

background:url(images/**) のように記述できます。 *.gif) #333;

引用符を追加すると、ブラウザー エラーが発生します。


3. リンク スタイルを正しい順序で指定します
CSS を使用してリンクの複数の状態スタイルを定義する場合は、それらが記述される順序に注意してください。正しい順序は次のとおりです。 :リンク :訪問済み :ホバー :アクティブ。抽出された最初の文字は「LVHA」で、「LoVe HAte（嫌いが好き）」と覚えられます。


4. フロートをクリアする
非常に一般的な CSS の問題は、位置決めにフローティングを使用すると、下のレイヤーがフローティング レイヤーで覆われたり、レイヤー内にネストされたサブレイヤーがオーバーレイを超えたりすることです。外側の層 層の範囲。

通常の解決策は、フローティング レイヤーの背後に div や br などの追加要素を追加し、そのスタイルをクリアとして定義することです:両方。この方法は少し突飛ですが、幸いなことにそれを解決する良い方法がありますので、この記事「構造マークアップなしでフロートをクリアする方法」を参照してください (注: このサイトはこの記事をできるだけ早く翻訳します)。

上記の 2 つの方法は、フローティング オーバーフローの問題をうまく解決できますが、レイヤーまたはレイヤー内のオブジェクトを本当にクリアする必要がある場合はどうすればよいでしょうか?簡単な方法は、overflow 属性を使用することです。この方法はもともと「フロートの簡単なクリア」で公開され、「クリアランス」および「フロートの超簡単なクリア」で広く議論されています。

上記のどの明確な方法がより適切であるかは、特定の状況によって異なるため、ここでは説明しません。さらに、フロートの適用については、いくつかの優れた記事で明確に説明されています。「フロートのチュートリアル」、「フロートを含む」、および「フロートのレイアウト」を読むことをお勧めします。


5. 水平方向のセンタリング(センタリング) これは簡単なトリックですが、初心者からの質問が非常に多いため、もう一度言う価値があります: CSS を水平方向にセンタリングするにはどうすればよいですか?要素の幅を定義し、水平方向のマージンを定義する必要があります。レイアウトがレイヤー (コンテナ) に含まれている場合は、次のようになります:
body {
text-align:center;
}
#wrap {
width:760px; /* レイヤーの幅に変更します */
margin:0 auto;
text-align:left;
}

6. デバッグ スキル: レイヤーの大きさはどれくらいですか?
CSS エラーをデバッグするときは、タイプライターのように CSS コードを 1 行ずつ分析する必要があります。通常、レイヤーがどれだけのスペースを占めるかが明らかになるように、問題のレイヤーに背景色を定義します。border の使用を推奨する人もいますが、これは通常は問題ありませんが、問題は、border によって要素のサイズが大きくなる場合があり、border-top と boeder-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全です。