13 CSS 記述基準_html/css_WEB-ITnose

1. ブラウザーの互換性を実現するために、ブラウザー要素のデフォルト属性をリセットするには、リセットを使用します。
/**内側と外側の余白を明確にする **/
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 要素 画像要素*/
{ border:medium margin: 0; padding: 0; }
/**デフォルトのフォントを設定します **/body,button, input 、select、textarea
{ font: 12px/1.5 '宋体'、tahoma、Srial、helvetica、sans-serif }
h1, h2, h3, h4, h5, h6 { font-size: 100% }
em{ font-style:normal;} /**リスト要素をリセット **/
ul, ol { list-style: none; }
/**ハイパーリンク要素をリセット **/a
{ text-decoration: none; }
a:hover { text-decoration: 下線; color:#F40; }
/**画像要素をリセット **/img{ border:0px;}
/**テーブル要素をリセット **/
table { border-collapse:崩壊; border-spacing: 0; }

2. 良い名前付けの習慣

li{

font-family:Arial、Helvetica、sans-serif;

line-height; : 1.4em;
padding-bottom:10px;
padding:5px 0 10px 5px;
親の子要素が複数ある場合ページ上の要素は同じスタイルを使用します。親要素に同じスタイルを定義するのが最善です。
これらの CSS スタイルを継承させます。
これにより、コードを適切に保守し、コードの量を減らすことができます。元のコードは次のようになります。
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container{ font-family:Georgia, serif }

5. 複数のセレクターの使用
共通のスタイルがある場合は、複数の CSS セレクターを 1 つにマージできます。
これにより、コードが簡潔になるだけでなく、時間とスペースも節約されます。例:
h1{ font-family:Arial、Helvetica、sans-serif;

h2{ font-family:Arial、Helvetica、sans-serif; } font -family:Arial, Helvetica, sans-serif; }

h1, h2, h3{ font-family:Arial, Helvetica, font-weight:normal; に結合できます。

6. 適切なコードコメント

7. CSS コードを並べ替えます

コード内のプロパティをアルファベット順に並べ替えることができる場合、変更をより速く見つけることができます:

/*** スタイル プロパティはアルファベット順に並べ替えられます ***/

div{
カラー:#666; フォント:1.2em/1.4em Arial、Helvetica、サンセリフ;
マージン:10px 5px;
幅:30%; 10;
}
9. より適切なスタイル属性値を選択する

CSS の一部の属性は、効果は似ていますが、パフォーマンスに違いがあります。
違いは、border:0 が境界線を設定することです。ページには表示されませんが、境界線のデフォルト値に従って、ブラウザーは境界線の幅/境界線の色をレンダリングします。つまり、メモリ値が占有されています。

そして、 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 サイト プロジェクトをインターネットに展開する場合は、Web ページの読み込みを高速化するために CSS を圧縮し、コメントとスペースを削除することを検討する必要があります。コードを圧縮するには、YUI Compressor などのツールを使用できます

CSS コードを合理化し、ファイル サイズを削減して読み込み速度を向上させるために使用します