初心者のためのCSS+div Webページレイアウトテクニック [転送]_html/css_WEB-ITnose

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

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

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

初心者はこのような状況に遭遇する可能性があります: IE では同じラベル属性が A に設定されるのが通常ですが、Mozilla では A に設定されなければなりません。 . Bになるか、両者を逆にした場合のみ正常に表示されます。

一時的な解決策: セレクター {属性名: B !重要; 属性名: A}

4. ネストするタグのグループ間にスペースが必要な場合は、タグを定義する代わりに、タグの内側に余白を残します。外側のラベルのパディング

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

6. IE は相続関係と父子関係の違いを区別できません。それらはすべて相続関係です。

7. タグにセレクターを追加するときは、CSS でセレクターにコメントを追加することを忘れないでください。 これを行う理由は、後で CSS を変更するときにわかります。

8. ラベルに暗い背景画像と明るいテキスト効果を設定した場合。現時点では、ラベルの背景色を暗い色に設定することをお勧めします。

9. リンクの 4 つの状態を定義するときは、順序に注意してください: Link Visited Hover Active

10. コンテンツと関係のない画像には背景を使用してください

11. 定義の色は省略できます。 8899FF=#89F

12. 一部の点では他のタグよりもパフォーマンスが優れています。列揃えが必要な場合にご使用ください。

13. <script> は次のように記述する必要があります: <script type=”text/javascript”></script>

14. タイトルはタイトルのテキストです。タイトルのテキストです。場合によっては、タイトルに必ずしもテキストを表示する必要はないため、

タイトルの内容

が

タイトルの内容

に変更されます

15。単一ピクセルの境界テーブル (IE5、IE6、IE7、FF1.0.4 以降でテストに合格可能)

table{border-collapse:collapse;}
td{border:#000 Solid 1px;}

16 負のマージン値ラベルが絶対配置を使用する場合、 left:XXpx 属性は絶対配置を使用するレイヤーには適していません。このレイヤーを相対的に配置する必要があるラベルの隣に配置し、マージンに負の値を使用することをお勧めします。

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

18. テキストが長すぎる場合は、長い部分を省略記号に変更して表示します: IE5、FF は無効ですが、非表示にすることができます。IE6 は有効です

たとえば、表に 1 行では表示できない非常に長いテキスト行があります。

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

ここにコメントを入力してください…

20. CSS を使用して外部フォントを呼び出す方法

構文:
@font-face{font-family:name;src:url(url);sRules}
値:
name:フォント名。 font-family 属性の可能な値
url (url): 絶対または相対 URL アドレスを使用して OpenType フォント ファイルを指定します
sRules: スタイル シート定義

21. テキスト ボックス内のテキストを垂直方向の中央に配置する方法形状？

FF で行の高さと高さグループを使用しても効果がない場合は、上部と下部のパディングを定義して目的の効果を達成する方法があります。

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)Textマウスを使用して前のテキストを配置し、効果を確認します。この効果は多くの海外の Web サイトで見られますが、国内の Web サイトはほとんどありません。

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

6) FLASH 透明度: swf を選択します。元のコード ウィンドウを開き、 の前に を入力します。 上記は IE のコードです。

FIREFOX の場合も、同様のパラメーター wmode=”transparent” を タグに追加します

7) Web ページを作成するときに、画像の上にマウスを置くと画像を明るくすることができます。画像を置き換えるテクニックを使用することもできます:

.pictures img {
filter: alpha（opacity=45） }
.pictures a:hover img {
filter: alpha（opacity=90） ; }

転載: http://blog.sina.com.cn/s/blog_68d663140100w2pl.html