CSS Web ページレイアウトのヒントのまとめ-CSSチュートリアル-php.cn

CSS Web ページレイアウトのヒントのまとめ

云罗郡主

リリース： 2018-11-24 15:13:05

転載

2636 人が閲覧しました

この記事は CSS Web ページのレイアウトに関するヒントをまとめたもので、困っている人は参考にしていただければ幸いです。

CSS Web ページレイアウトのヒントのまとめ

CSS Web ページのレイアウトには多くのテクニックがあります。ここでは、初心者に適した CSS Web ページレイアウトのヒントをまとめています。これは、より実践的な参考値になるでしょう:

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

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

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

初心者はこのような状況に遭遇する可能性があります: 同じラベル属性が設定されていると、IE に表示されるのが普通です。 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> には language 属性がありません: <script type=”text/JavaScript”><p>14.タイトル、タイトルのテキストはタイトルです。タイトルに必ずしもテキストを表示する必要がない場合もあります。<h1>タイトルの内容は<h1><span>タイトルの内容<p>##に変更されます。 # 15. 完璧な単一ピクセルのアウトラインテーブル (IE5、IE6、IE7 および FF1.0.4 以降でテストに合格可能) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">Example Source Code</pre><div class="contentsignin">ログイン後にコピー</div></div><p> コードは次のとおりです: </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"><p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”></pre><div class="contentsignin">ログイン後にコピー</div></div><p><NOBR&gt ; たとえば、次の行があります。テキストが非常に長いため、表に 1 行で表示できません。 </NOBR></p><p>19. IE のコメントによってテキストの重複の問題が発生する可能性がある場合は、コメントを次のように変更できます。 </p><p>サンプルソースコード</p><p>コード</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><!–[if !IE]>Put your commentary in here…<![endif]–></pre><div class="contentsignin">ログイン後にコピー</div></div><p>20. CSS を使用して外部フォントを呼び出す方法</p><p>構文: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">@font-face{font-family:name;src:url（url）；sRules}</pre><div class="contentsignin">ログイン後にコピー</div></div><p>値: </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}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式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/></script>

以上がCSS Web ページレイアウトのヒントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。