25 div+css プログラミングのヒントとコツ

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

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

3. 互換性を調整するための愚かな方法 (IE と Mozilla): 初心者は次のような状況に遭遇する可能性があります。同じタグ属性を IE で A に設定すると正常に表示されますが、Mozilla では正常に表示するには B に設定する必要があります (またはその逆)。 一時的な解決策: セレクター {属性名: B !important; 属性名: A}

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. タイトルはタイトルであり、タイトルのテキストはタイトルのテキストです。タイトルに必ずしもテキストを表示する必要がない場合もあるので、<h1>タイトル コンテンツ</h1> は <h1><span>タイトル コンテンツ</span></h1> に変更されます。

15. 完璧な 1 ピクセル境界テーブル (IE5、IE6、IE7、FF1.0.4 以降でテスト可能) table{border-collapse:collapse;} td{border:#000 solid 1px;}

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

17. 絶対配置の場合、マージン値を使用すると、要素自体の位置を基準とした配置を実現できます。これは、ウィンドウの端を基準とした top や left などの属性を使用した配置とは異なります。絶対配置の利点は、他の要素がその存在を無視できることです。

18. テキストが長すぎる場合、長い部分は省略記号として表示されます。IE5 および FF では無効ですが、非表示にすることができます。IE6 では有効です。<DIV STYLE="width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis"> <NOBR>たとえば、表の 1 行に収まらないほど長いテキスト行がある場合などです。</NOBR>

19. IE でコメントによってテキストが重複する問題が発生する場合は、コメントを次のように変更できます: <!?[if !IE]>ここにコメントを入力してください…<![endif]?>

20. CSS を使用して外部フォントを呼び出す方法。構文: @font-face{font-family:name;src:url(url);sRules} 値: name: フォント名。フォントファミリプロパティの任意の可能な値 url(url): OpenTypeフォントファイルを指定するには、絶対または相対URLアドレスを使用します sRules: スタイルシート定義

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

22. A タグを定義するときに注意すべき小さな問題: a{color:red;} を定義すると、A の 4 つの状態のスタイルが表されます。マウスが置かれたときの状態を定義したい場合は、a:hover を定義するだけです。他の 3 つの状態は、A で定義されているスタイルです。 a:link が 1 つだけ定義されている場合は、他の 3 つの状態も必ず定義してください。

23. すべてのスタイルを省略する必要はありません。スタイルシートで 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 のスタイルも変更する必要があります。

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

25. よく使われる CSS スタイル:
-1) 漢字を両端揃えにする: text-align:justify; text-justify:inter-ideograph;

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

-3) 固定幅の中国語文字（単語）改行：table-layout:fixed; word-break:break-all;（IE5以上）FFではできません。

-4) <acronym title=”プロンプトを表示するテキストを入力してください” style=”cursor:help;”>テキスト</acronym>効果を確認するには、前のテキストにマウスを置きます。この効果は多くの海外のウェブサイトで見られますが、中国ではまれです。

-5) 画像を半透明に設定します: .halfalpha { background-color:#000000;filter:Alpha(Opacity=50)} テストは IE6 と IE5 では合格しましたが、FF では失敗しました。これは、このスタイルが IE 専用であるためです。

-6) FLASH 透過: swf を選択し、ソース コード ウィンドウを開き、</object> の前に <param name=”wmode” value=”transparent”> と入力します。上記は IE のコードです。 FIREFOXの場合は、同様のパラメータwmode="transparent"を<embed>タグに追加します。

-7) Web ページを作成するときに、マウスを画像の上に置くと画像が明るくなるという効果をよく使用します。画像置換テクニックまたは次のフィルターを使用できます: .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }