CSSスタイルシート共通Tips集_体験交流

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

・同じクラス セレクターはドキュメント内で繰り返し使用できますが、ID セレクターは 1 回のみ使用できます。クラスと ID の両方を使用して CSS でラベルを定義します。定義が繰り返される場合、ID セレクターの定義シンボルで作られたものは有効です。

・初心者は、同じラベル属性が IE では A に設定すると正常に表示されるが、Mozilla では B に設定しないと正常に表示されなかったり、両者が逆になったりする状況に遭遇することがあります。
一時的な解決策: セレクター {属性名: B !重要 ; 属性名: A;} //IE7 では無効

・ネストされたタグのグループ間にスペースが必要な場合は、それをそのままにしておきます。外側にあるラベルのパディングを定義する代わりに、内側にあるラベルの margin 属性

・li label の前のアイコンには list-style-image の代わりに background-image を使用することをお勧めします
・IEでは相続関係と父子関係の区別ができず、いずれも相続関係です。

・タグにセレクターを追加するときは、CSS でセレクターに注釈を付けることを忘れないでください。将来 CSS を変更するときに、なぜこれを行うのかがわかります。

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

・リンクの 4 つの状態を定義するときは、次の順序に注意してください: リンク訪問中 ホバーアクティブ

・ コンテンツと関係のない画像には背景を使用してください
・定義された色は #8899FF = #89F と省略できます。

・テーブルは、いくつかの点で他のタグよりもはるかに優れたパフォーマンスを発揮します。列揃えが必要な場合にご使用ください。

・<script>には言語属性がありません。<script type="text/javascript"> <br><br>・タイトルはタイトル、本文は次のように記述します。タイトルのテキストはタイトルのテキストです。タイトルに必ずしもテキストを表示する必要がない場合があります。そのため、<h1>タイトルの内容が<h1><span>タイトルの内容に変更されます。<br><br>・パーフェクトシングルピクセル ボーダー テーブル (IE5.0、IE6.0、FF ではテストに合格できます。その他はテストされていません) table {border-collapse:collapse;} td {border:#000 Solid 1px;} <br><br> · ラベルが絶対配置を使用する場合、マージンの負の値が相対配置に影響を与える可能性があります。ページが中央に配置されている場合、left:XXpx 属性は絶対配置を使用するレイヤーには適していません。このレイヤーを相対的に配置するラベルの隣に配置し、マージンに負の値を使用することをお勧めします。<br><br>・絶対配置を使用する場合、マージン値配置を使用すると、ウィンドウの端を基準とした上や左などの属性の配置とは異なり、独自の位置を基準とした配置を実現できます。絶対配置の利点は、他の要素がその存在を無視できることです。 <br><br>一般的に使用されるいくつかの CSS スタイル<br><br>・ 1. 中国語の文字を両端に揃えます: text-align:justify; text-justify:inter-ideograph; <br><br>・ 2 。固定幅の中国語文字の切り捨て: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(ただし、テキストの切り捨ては 1 行でのみ処理でき、複数行では処理できません。) (IE5 以降) <br><br > · 3. 固定幅の漢字 (単語) 改行: table-layout:fixed; word-break:break-all; (IE5 以降) <br><br>· 4.<acronym style="cursor: help" title= "プロンプトが表示されるテキストを入力してください">テキスト マウスを使用して前のテキストを配置し、効果を確認します。この効果は多くの海外の Web サイトで見られますが、国内の Web サイトはほとんどありません。 <br><br>・ 5. 画像を半透明に設定します: .halfalpha {background-color: #000000; filter: Alpha(Opacity=50)} IE6 と IE5 ではテストに合格しましたが、FF では失敗しました。 <br><br>・ 6. FLASH 透明度: swf を選択し、元のコード ウィンドウを開き、 の前に <param name="wmode" value="transparent"> と入力します。Web ページを作成するときにマウスをよく使用します。画像を明るくする効果が画像に表示されます。画像の置換技術を使用することも、次のフィルタを使用することもできます。コードは次のとおりです: <br><br>.pictures img { filter: alpha(opacity=45) ); } < BR>.pictures a:hover img { filter: alpha(opacity=90); } <br><br>・テキストが長すぎる場合、長い部分が楕円で表示されます: IE5では無効ですおよび FF、ただし非表示にすることができ、IE6 で有効<BR><div style="width: 120px; height: 50px; border: 1px sold blue; overflow: hidden; text-overflow:ellipsis"> <BR><NOBR>たとえば、非常に長いテキスト行があり、表の 1 行を表示できません。 <br><br>・タイトル 改行に使用される記号、またはコメントによるテキストの重複問題IE では次のように変更できます: <!--[if ! IE]> <BR>ここにコメントを入力してください... <BR><![endif]--> <br><br>・CSS の使用方法外部フォントを呼び出すには 構文: @font-face { font-family : name ; src: url ( url ); sRules } 値: <BR>name: フォント名。 font-family 属性の可能な値 <BR>url ( url ): 絶対または相対 URL アドレスを使用して OpenType フォント ファイルを指定します。 <BR>sRules: スタイル シート定義 <BR></script>