CSS Web レイアウト開発には多くのヒントがありますが、初心者の友人はそれらに慣れていないことがよくあります。 1 つまたは 2 つの小さな問題については、それを理解するのに長い時間がかかる場合があります。この点については 52CSS.com の文書で何度も言及されていますが、多くの友人が依然としてこれらの問題に関して間違いを犯しています。今日はこれらの CSS テクニックを見てみましょう。よく理解していない場合は、52CSS.com で検索すると、さらに多くの知識が得られると思います。
1. Mozilla では ul タグにデフォルトでパディング値がありますが、IE ではマージンのみが値を持ちます。
2. 同じクラス セレクターはドキュメント内で繰り返し出現できますが、ID セレクターは 1 回しか出現できません。 CSS でラベルを定義するには class と id の両方を使用します。この定義を繰り返すと、id の重みが class の重みよりも大きくなるため、id セレクターによる定義が有効になります。
3. 互換性を調整する愚かな方法 (IE と Mozilla):
初心者は、同じラベルの属性が IE では A に設定されていると正常に表示されるのに、Mozilla では B に設定されないと正常に表示されない、または 2 つが逆転する、という状況に遭遇する可能性があります。
一時的な解決策: セレクター {プロパティ名: B !重要; プロパティ名: A} が機能しない場合があります。 52CSS.com でその他のバグ ソリューションを検索できます。
4. ネストされたタグのグループ間にスペースが必要な場合は、外側にあるタグのパディングを定義するのではなく、内側にあるタグの margin 属性に任せます。
5. li タグの前のアイコンには、list-style-image ではなく、background-image を使用することをお勧めします。
6. IE は相続関係と父子関係の違いを区別できません。これらはすべて相続関係です。
7. タグにセレクターを追加する場合は、CSS でセレクターにコメントを追加することを忘れないでください。これを行う理由は、後で CSS を変更するときにわかります。また、注意点としては、あまり夢中にならないことです。
8. ラベルに暗い背景画像と明るいテキスト効果を設定した場合。現時点では、ラベルの背景色を暗い色に設定することをお勧めします。画像が失われるため、テキストは読むことができます。
9. リンクの 4 つの状態を定義するときは、次の順序に注意してください。 リンク訪問中 ホバーアクティブ
10. 内容と関係のない写真の背景はご使用ください。常にプレゼンテーションをコンテンツから分離することを忘れないでください。
11. 定義された色は #8899FF=#89F と省略できます。
12. テーブルは、いくつかの面では依然として役に立ちます。データテーブルに遭遇した場合でも、それを嫌いにならないでください。
13. <script> には language 属性がないため、次のように記述する必要があります: <script type="text/javascript">
14. 完璧な単一ピクセルのアウトライン テーブル (IE5、IE6、IE7、FF1.0.4 以降でテストに合格可能)
テーブル{ボーダー折りたたみ:折りたたみ} td{ ボーダー:#000 ソリッド 1 ピクセル } |
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);sRules} |
価値：
名前: フォント名。 font-family 属性の可能な値 url(url): 絶対または相対 URL アドレスを使用して OpenType フォント ファイルを指定します sRules: スタイルシート定義 |
20. フォームのテキスト ボックス内のテキストを垂直方向の中央に配置するにはどうすればよいですか?
FF で行の高さと高さグループを使用しても効果がない場合は、上部と下部のパディングを定義して目的の効果を実現します。
21. A タグを定義するときに注意すべき小さな問題:
a{color:red;} を定義すると、A の 4 つの状態のスタイルを表します。マウスが置かれている状態を定義したい場合は、他の 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; (ただし、複数行のテキストの切り捨てのみを処理できます) (IE5 以降)できません、隠れるだけです。
理解できないことがたくさんあるとしても、これらのスキルを記録し、頻繁に 52CSS.com にアクセスして確認してください。必ず何かを得ることができます。左側の検索ボックスに興味のあるコンテンツを入力して検索することもできます。コメントを残してCSSのヒントを追加してください。