CSS記述仕様

CSS 記述仕様 [転送]

1. ブラウザーの互換性を実現するために、ブラウザー要素のデフォルト属性をリセットするには、Reset を使用します。 /**内側と外側の余白を明確にする **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 構造要素 構造要素*/ dl, dt, dd, ul, ol, li, /*リスト要素 リスト要素*/PRe, /* テキスト書式設定要素 テキスト書式設定要素*/ form, fieldset, legend, button, input, textarea, /* フォーム要素 フォーム要素*/ th, td, /* テーブル要素 テーブル要素*/ img/* img elements 画像要素*/ { border:medium none; margin: 0; } /**デフォルトのフォントを設定します **/body,input, select, textarea { font: 12px/1.5 '宋体' ,tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } /**リスト要素をリセット **/ ul , ol { リストスタイル: なし } /**ハイパーリンク要素をリセット **/a { テキスト装飾: なし; カラー:#333;} a:hover { テキスト装飾: 下線色:#F40; *画像要素をリセット **/img{ border:0px;} /**テーブル要素をリセット **/ table { border-collapse: crash; border-spacing: 0; }

2. コードの省略形 li { font-family:Arial、Helvetica、sans-serif; フォントサイズ: 1.2em; パディングトップ: 5px; パディング左: 5px; : 1.2em/1.4em Arial, Helvetica, sans-serif;padding:5px 0 10px 5px; }

4. ページ上の親要素の複数の子要素が同じスタイルを使用する場合は、次のようにするのが最適です。同じスタイルが親要素に定義されており、これらの CSS スタイルを継承できるようになります。 こうすることで、コードを適切に保守し、コードの量を減らすことができます。元のコードは次のようになります。 #container li{ font-family:Georgia, serif; } #container h1{font-family:Georgia, serif; font- family:Georgia, serif; }

5. 共通のスタイルがある場合は、複数の CSS セレクターを 1 つに結合できます。 そうすることで、コードが簡潔に保たれるだけでなく、時間とスペースも節約されます。例: h1{ フォントファミリー:Arial、Helvetica、sans-serif; } h2{ font-family:Arial、Helvetica、sans-serif; : Arial, Helvetica, sans-serif; font-weight:normal; を h1, h2, h3{ font-family:Arial, Helvetica, font-weight:normal; に組み合わせることができます。コードメモ

7. コード内のプロパティをアルファベット順に並べ替えると、変更箇所をより速く見つけることができます。 :#666; フォント:1.2em/1.4em Arial、Helvetica、sans-serif; 高さ:10px 5px; パディング:5px 0 10px 5px; } 9 を選択します。 CSS の一部の属性では、異なる属性値が使用されます。効果は似ていますが、たとえば、border:0 では境界線が 0px に設定される点が異なります。 . ですが、border のデフォルト値に従って、ブラウザはまだ border-width/border-color をレンダリングします。つまり、メモリ値が占有されています。 Border:none は境界線を「none」に設定します。これは、ブラウザーが「none」を解析するときに、レンダリング アクションを実行しません。つまり、メモリ値を消費しません。したがって、 border:none を使用することをお勧めします。同様に、display:none はレンダリングせずにオブジェクト ブラウザを非表示にし、メモリを占有しません。そして可視性：隠された意志。

10. @import の代わりに を使用します。まず、@import は XHTML タグに属しておらず、以前のブラウザーと互換性がなく、ウェブサイトのパフォーマンスへの影響。詳細については、「高パフォーマンスの Web サイト設計: @import を使用しない」を参照してください。したがって、 @import

の使用は避けてください。 11. 外部スタイル シートを使用する この原則は、常に良い設計慣行です。外部ファイルを使用すると、保守と変更が簡単になるだけでなく、さらに重要なことに、CSS ファイルをブラウザーにキャッシュできるため、ページ速度が向上します。 HTML ドキュメントに組み込まれた CSS は、リクエストごとに HTML ドキュメントとともに再ダウンロードされます。したがって、実際のアプリケーションでは、CSS コードを HTML ドキュメントに組み込む必要はありません:

12. CSS 式 (Expression) の使用を避ける CSS 式は、CSS プロパティを動的に設定する強力な (ただし危険な) 方法です。

13. コードの圧縮 Web サイトのプロジェクトをインターネットにデプロイする場合は、CSS を圧縮してコメントとスペースを削除し、Web ページの読み込みを高速化することを検討する必要があります。コードを圧縮するには、YUI Compressor などのツールを使用して、CSS コードを合理化し、ファイル サイズを削減し、読み込み速度を向上させることができます。 PHP 中国語 Web サイト (www.php.cn) にご注意ください。