CSS の高度な使い方（実戦で活用）

1. ul タグには、Mozilla ではデフォルトでパディング値がありますが、IE ではマージン値のみがあります。

2. 同じクラスセレクターはドキュメント内で繰り返し出現できますが、IDセレクターは 1 回しか出現できません。タグの CSS を定義するために class と id の両方を使用する場合、定義が重複していると、id の重みが class よりも大きいため、id セレクターによって行われた定義が有効になります。

3. 互換性を調整する愚かな方法 (IE と Mozilla):

初心者は次のような状況に遭遇する可能性があります。同じタグ属性が IE では A に設定すると正常に表示されますが、Mozilla では正常に表示するには B に設定する必要があります (またはその逆)。
一時的な解決策: セレクター {属性名: B !important; 属性名: A} が機能しない場合があります。 52CSS.com でさらに多くの BUG ソリューションを検索できます。

4. ネストされたタグのグループにスペースが必要な場合は、外側のタグのパディングを定義するのではなく、内側のタグの margin 属性にスペースを残します。

5. li タグの前のアイコンには、list-style-image ではなく background-image を使用することをお勧めします。

6. IE は継承関係と親子関係の違いを区別できません。すべて継承関係です。

7. タグにセレクターを無茶苦茶追加する場合は、CSS でセレクターをコメント化することを忘れないでください。将来 CSS を変更するときに、なぜこれを行うのかがわかります。また、注意点として、あまり夢中になりすぎないようにしてください。

8. ラベルに暗い背景画像と明るいテキスト効果を設定した場合。この時点では、ラベルの背景色を暗い色に設定することをお勧めします。画像が失われるため、テキストの可読性も維持できます。

9. リンクの4つの状態を定義する順序に注意してください: リンク訪問済みホバーアクティブ

10. コンテンツに関係のない画像は背景を使用してください。プレゼンテーションとコンテンツを常に分離することを忘れないでください。

11. 色を定義するには、#8899FF=#89F と省略できます。

12. テーブルは、いくつかの面ではまだ便利です。データテーブルに遭遇したときに、それを嫌わないでください。

13. <script> には言語属性がないので、次のように記述する必要があります: <script type="text/javascript">

14. 完璧な単一ピクセルフレームラインテーブル（IE5、IE6、IE7、FF1.0.4以上でテスト可能）

コードをコピー

コードは次のとおりです。

テーブル{ 境界線の折りたたみ:折りたたみ; }
td{ 境界線:#000 実線 1px; }

15. ラベルが絶対配置を使用する場合、負の余白値は相対配置に影響を与える可能性があります。ページが中央に配置されている場合、絶対配置を使用するレイヤーは left:XXpx 属性の使用に適していません。良い方法は、このレイヤーを相対的に配置されるラベルの横に配置し、負のマージン値を使用することです。

16. 絶対的な配置を行う場合、マージン値を使用すると、ウィンドウの端を基準とした上、左、その他の属性の配置とは異なり、自身の位置を基準とした配置を実現できます。絶対配置の利点は、他の要素がその存在を無視できることです。

17. テキストが長すぎる場合、長い部分は省略記号として表示されます。IE5 および FF では無効ですが、非表示にすることができます。IE6 では有効です。

<DIV STYLE=”幅:120px;高さ:50px;境界線:1px 青一色;オーバーフロー:非表示;テキストオーバーフロー:省略記号”>
<NOBR>たとえば、表の 1 行に収まらないほど長いテキスト行があります。</NOBR>

18. IE でコメントによってテキストが重複する問題が発生する場合は、コメントを次のように変更できます。

コードをコピー

コードは次のとおりです。

<!–[if !IE]>ここにコメントを記入してください…<![endif]–>

19. CSSで外部フォントを呼び出す方法

文法：

@font-face{フォントファミリー:名前;src:url(url);sルール}

価値：

name: フォント名。 font-familyプロパティの可能な値
url(url): 絶対または相対URLアドレスを使用してOpenTypeフォントファイルを指定します
sRules: スタイルシートの定義

20. フォーム内のテキストボックス内のテキストを垂直方向に中央揃えにするにはどうすればよいでしょうか?
FF で line-height および height グループを使用しても効果がない場合、解決策としては、目的の効果を達成するために上部と下部のパディングを定義します。

21. A タグを定義する際に注意すべき小さな問題:

a{color:red;} を定義すると、A の 4 つの状態のスタイルを表します。マウスを置いたときの状態を定義する場合は、a:hover を定義するだけで済みます。他の 3 つの状態は、A で定義されているスタイルです。 a:link が 1 つだけ定義されている場合は、他の 3 つの状態も必ず定義してください。

22. すべてのスタイルを省略する必要はありません。

スタイルシートでp{padding:1px 2px 3px 4px}と定義すると、後続のプロジェクトでは上部に5pxのパディング、下部に6pxのパディングがあるスタイルが追加されます。 p.style1{padding:5px 6px 3px 4px}と書く必要はありません。 p.style1{padding-top:5px;padding-right:6px;} と記述できます。これではオリジナルほど良くないと感じるかもしれませんが、自分の書き方はスタイル定義を繰り返していると思ったことはありませんか？また、下パディングと左パディングの元の値を調べる必要もありません！以前のスタイル P が将来変更された場合、定義した p.style1 のスタイルも変更する必要があります。

23. ウェブサイトが大きくなるほど、CSS スタイルも増えます。始める前に、命名規則など、十分な準備と計画を立ててください。ページブロック分割、内部スタイル分類など

24. 固定幅の漢字の切り捨て: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (ただし、1 行のテキストの切り捨てのみ処理でき、複数行の切り捨ては処理できません。) (IE5 以上) FF では処理できず、非表示のみになります。

<<: パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体

>>: CSS3 のエラスティックレイアウトでの em の使用の概要: 1em は何ピクセルですか?