24 のよく整理された CSS テクニック_体験交流

この側面は多くの文書で何度も言及されていますが、これらの問題に関して間違いを犯している友人は依然として多くいます。今日はこれらの CSS テクニックを見てみましょう。よく読んでください。十分に理解できていないかもしれません。必要な知識を検索して拡張することができます。多くのことを得ることができると思います。

1. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持ちます。
2. 同じクラス セレクターはドキュメント内で繰り返し出現できますが、ID セレクターは 1 回しか出現できません。 CSS でラベルを定義するには class と id の両方を使用します。定義を繰り返すと、id の重みが class の重みよりも大きいため、id セレクターでの定義が有効になります。
3. 互換性を調整する愚かな方法 (IE と Mozilla):
初心者はこのような状況に遭遇する可能性があります。IE では同じラベルの属性が A に設定されている場合は正常ですが、Mozilla では表示する必要があります。通常表示するには B に設定するか、この 2 つを反転します。
一時的な解決策: セレクター {属性名: B !重要; 属性名: A} が機能しない場合があります。 jb51.net でその他のバグ ソリューションを検索できます。
IV. ネストされたタグのグループ間にスペースが必要な場合は、外側にあるタグのパディングを定義するのではなく、内側にあるタグの 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”> <br> 14. 完全な単一ピクセルのアウトライン テーブル (IE5、IE6、IE7、FF1 の場合)。 0.4 以降はテストに合格できます) <br> table{ border-collapse:collapse; } <br> td{ border:#000 Solid 1px; } <br> 以下も参照できます: <br> テーブルの境界線に関連する CSS構文 <br><br> CSS はテーブル td のデフォルトの間隔を削除し、1px の細線テーブルを作成します <br><br> Web 標準に準拠した細線テーブルを実装します <br><br> 15. 負のマージン値タグ内で使用可能 絶対配置は相対配置の役割を果たします。ページが中央に配置されている場合、left:XXpx 属性は絶対配置を使用するレイヤーには適していません。このレイヤーを相対的に配置する必要があるラベルの隣に配置し、マージンに負の値を使用することをお勧めします。 <br> 16. 絶対配置を使用する場合、マージン値配置を使用すると、ウィンドウの端を基準とした上や左などの属性の配置とは異なり、独自の位置を基準とした配置を実現できます。絶対配置の利点は、他の要素がその存在を無視できることです。 <br> 17. テキストが長すぎる場合は、長い部分を省略記号に変更して表示します。IE5、FF は無効ですが、非表示にすることができます。IE6 は有効です。<br> <DIV STYLE=”width:120px;height: 50px;border: 1px sold blue;overflow:hidden;text-overflow:ellipsis"><br> <NOBR> は、たとえば、非常に長く、表に 1 行で表示できないテキスト行です。 <br> 18. IE では、コメント バンドが原因である可能性があります。テキストが繰り返される場合、コメントを次のように変更できます。<br> <!–[if !IE]>ここにコメントを入力してください…<![endif] ]–> <br> 19. CSS を使用して外部フォントを呼び出す方法 <br> 構文: <br> @font-face{font-family:name;src:url(url);sRules} <br> 値: <br> 名前: フォント名。 font-family 属性の可能な任意の値 <br> url (url): 絶対または相対 URL アドレスを使用して OpenType フォント ファイルを指定します <br> sRules: スタイル シート定義 <br> 20.フォーム テキストは垂直方向に中央揃えになっていますか? <br> FF で行の高さと高さグループを使用しても効果がない場合は、上部と下部のパディングを定義して目的の効果を実現します。 <br> 21. A タグを定義するときに注意すべき小さな問題: <br> a{color:red;} を定義すると、それは A の 4 つの状態を表します。マウスの位置を定義したい場合、上記の状態に対して、 a:hover を定義するだけで済みます。他の 3 つの状態は、A で定義されたスタイルです。a:link が 1 つだけ定義されている場合は、他の 3 つの状態も忘れずに定義してください。 <br> 22. すべてのスタイルを省略する必要はありません。<br> スタイル シートが p{padding: 1px 2px 3px 4px} のように定義されている場合、上部に 5px のパディングが付いた別のスタイルが後続のプロジェクトに追加されます。下部に 5 ピクセルのパディング、フィラー 6 ピクセル。必ずしも p.style1{padding:5px 6px 3px 4px} と記述する必要はありません。 p.style1{padding-top:5px;padding-right:6px;} のように書くことができます。このように書くと元のものほど良くないと感じるかもしれませんが、それについて考えたことはありますか?メソッドは繰り返しスタイルを定義します。また、元の下部と左のパディング値が何であるかを調べる必要はありません。以前のスタイル P が将来変更されると、定義した p.style1 のスタイルも変更されます。 <br> 23. Webサイトの規模が大きくなればなるほど、CSSのスタイルも多くなりますので、命名ルールも含めて十分な準備と計画を立ててから始めてください。ページブロック分割、内部スタイル分類など<br> 24. 固定幅の中国語文字の切り捨て: overflow: hidden; text-overflow: ellipsis; White-space: nowrap; (ただし、複数行ではなく、1 行のテキストの切り捨てのみを処理できます。) (IE5 および上）FFではできません、隠すだけです。 <br><br> あまり理解できなくても問題ありません。これらのスキルを記録し、頻繁に jb51.net にアクセスすると、必ず何かを得ることができます。左側の検索ボックスに興味のあるコンテンツを入力して検索することもできます。コメントを残してCSSのヒントを追加してください。 <br></script>