専門家が CSS Web ページ レイアウトに関する 25 の実践的なヒントを共有します

この記事は、CSS Web ページのレイアウトに関する実践的なヒントを提供します。必要な方は参考にしていただければ幸いです。

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

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

3. 互換性を調整する愚かな方法 (IE と Mozilla): 初心者はこのような状況に遭遇する可能性があります。IE では同じラベル属性が A として表示されるのが通常ですが、Mozilla では表示する必要があります。通常表示するには B に設定する必要があり、そうでない場合は 2 つが反転します。

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

4. ネストするタグのグループ間にスペースがある場合は、マージン属性をそのままにします。外側にあるラベルのパディング

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

6. IE は継承関係と親子関係の違いを区別できません。これらはすべて継承関係です。

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

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

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

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

11. 略語 #8899FF=#89F

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

13. <script> には、次のように記述する必要があります: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;script type=”text/javascript”&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div></p>14。はタイトル、タイトルのテキストはテキストです。タイトルに必ずしもテキストを表示する必要がない場合があるため、以下は引用部分です: <p></p><h1>タイトルの内容</h1><h1><span>タイトルの内容</span>に変更します。 &lt ;/h1><p></p>15. 完璧な単一ピクセルのアウトライン テーブル (IE5、IE6、IE7 および FF1.0.4 以降でテストに合格可能) 以下は引用部分です: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">table{border-collapse:collapse;} td{border:#000 solid 1px;}</pre><div class="contentsignin">ログイン後にコピー</div></div></p>16. ラベルが絶対配置を使用する場合、負のマージン値は相対配置に影響を与える可能性があります。ページが中央に配置されている場合、left:XXpx 属性は絶対配置を使用するレイヤーには適していません。このレイヤーを相対的に配置する必要があるラベルの隣に配置し、マージンに負の値を使用することをお勧めします。 <p></p>17. 絶対配置を使用する場合、マージン値配置を使用すると、ウィンドウの端を基準とした上や左などの属性の配置とは異なり、独自の位置を基準とした配置を実現できます。絶対配置の利点は、他の要素がその存在を無視できることです。 <p></p>18. テキストが長すぎる場合は、長い部分を省略記号に変更して表示します。IE5、FF は無効ですが、非表示にすることができます。IE6 は有効です。<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">&lt;DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div></p><NOBR&gt ; たとえば、次の行があります。テキストが非常に長いため、表に 1 行で表示できません。 </NOBR><p></p>19. IE のコメントによってテキストの重複の問題が発生する可能性がある場合は、コメントを <p></p><!–[if !IE]> に変更できます。コメントをここに入力してください…<![endif]–><p></p>20. CSS を使用して外部フォントを呼び出す方法<p></p>構文: <p></p>@font-face{ font-family :name;src:url(url);sRules} 値: <p></p>name: フォント名。 font-family 属性の可能な値 <p></p>url (url): 絶対または相対 URL アドレスを使用して OpenType フォント ファイルを指定します <p></p>sRules: スタイル シート定義 <p></p>21 . フォーム内のテキスト ボックスでテキストを垂直方向に中央揃えにする方法は? <p></p>行の高さと高さのグループ化を使用しても FF で効果がない場合は、上下のパディングを定義して目的の効果を得ることができます。 <p></p>22. A タグを定義するときに注意すべき小さな問題: <p></p>{color:red;} を定義すると、それは A の 4 つの状態を表します。マウスオーバー状態を定義するには、a:hover を定義するだけです。他の 3 つの状態は、A で定義されたスタイルです。 <p></p>a:link が 1 つだけ定義されている場合は、他の 3 つの状態も忘れずに定義してください。 <p></p>23. すべてのスタイルを省略する必要はありません: <p></p>p{padding:1px 2px 3px 4px} がスタイル シートの前に定義されている場合、<p></p>後続のプロジェクトで上部のパディングが 5 ピクセル、下部のパディングが 6 ピクセルのスタイル。 <p></p>必ずしも p.style1{padding:5px 6px 3px 4px} と記述する必要はありません。 <p></p> は p.style1{padding-top:5px;padding-right:6px;} のように書くことができます。<p></p>このように書くとオリジナルほど良くないと感じるかもしれませんが、考えたことはありますか?、<p></p>あなたの記述方法ではスタイルが繰り返し定義されており、下部パディングと左パディングの元の値を見つける必要はありません。 <p><p>如果以后前一个样式P变了话，你定义的p.style1的样式也要变。</p><p>24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。</p><p>25、几个常用到的CSS样式：</p><p>1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;</p><p>2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。</p><p>3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。</p><p>4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。</p><p>5）图片设为半透明：。halfalpha { background-color:#000000;filter:Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；</p><p>6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。</p><p>针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”</p><p>7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.pictures img { filter: alpha（opacity=45）； } .pictures a:hover img { filter: alpha（opacity=90）； }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>以上就是对CSS网页布局实用小技巧的全部介绍，如果您想了解更多有关<a href="http://www.php.cn/course/list/14.html" target="_self">CSS3教程，请关注PHP中文网。<p><br/><p> </script>

以上が専門家が CSS Web ページ レイアウトに関する 25 の実践的なヒントを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。