Web ページのカットと CSS の考慮事項_html/css_WEB-ITnose

1. Web ページのカット

1) Web ページのカット タイプは、背景 (bg)、リスト項目のシンボル (li)、コンテンツに挿入された画像 (pic)、ボタン (btn)、アイコンなどとして要約できます。アイコ）。

2) CSS背景を読み込んだ画像を1つの画像に結合することをお勧めします。これにより、サーバーへのリクエストが減少します。これにより、ページの読み込み速度が向上します。

3) JPG 形式で保存されるページ先頭の大きな画像を除き、他のすべての画像は GIF 形式でなければなりません

2. CSS 関連事項:

1) すべての xhtml コードは小文字です。

2) 各タグには開始と終了が必要で、終了タグがない場合はタグの後に「/」を追加します。 例: 、

3) すべての属性は引用符 "" で囲む必要があります。

4) 文書タイプを宣言する必要があり、文書タイプの悪用は禁止されています。

5) すべての

6) コードのインデントは正しく使用する必要があります。インデントする場合は、タブ (キーボードの TAB キー) を使用します。インデントなし、ランダムなインデント、およびインデントにスペースを使用することは禁止されています。

7) CSS によって読み込まれる背景画像には事前定義された幅と高さが必要です。また、ページの読み込み速度を向上させるために、パスは訪問者のコンピューターのキャッシュから直接読み込まれる絶対パスである必要があります。

8) コードには、スタイル、フォント、bgColor、border、b などのパフォーマンス要素が含まれないように、パフォーマンスと構造を完全に分離する必要があります。

9)

から

までの定義は、大きいものから小さいものへの原則に従い、ドキュメントの構造を反映し、検索エンジンのクエリを容易にする必要があります。継承を使用します。そうしないと、パーソナリティの定義が無効になります。

10) フォントの略称は、スタイル 太さ サイズ 行高さ フォント (フォント: 斜体太字 12px/30px 「simsun」) です。

11) クラスおよび ID セレクター、ID は同じページ内でのみ使用でき、繰り返し適用することはできません。

12) ページのレイアウトと重要なセクションにコメントを追加します。例:

13) 画像に alt タグを追加して、検索エンジンのクエリを容易にします。

14) すべてのタグは適切にネストされている必要があります。

15) ページの実装中に定期的に発生する問題がいくつかあります。それは、3 ピクセルのバグ、二重のフローティングマージン、およびテキストのオーバーフローのバグです。異なるブラウザで発生する可能性のある問題を避けるために、できる限り合理的なレイアウトを使用してください。 CSS ハッキングは可能な限り避ける必要があります。

16) 継承を可能な限り合理的に使用する利点は、コード構造が明確であるため、他の修飾子がページ構造を識別しやすくなり、CSS コードの繰り返し定義が減ることです。

17) Web サイトでは、ユーザーが文字の大きなセクションを入力することがよくあります。そのため、テキストが正常に折り返されず、レイアウトが崩れます。この場合、次のスタイルを参照する必要があります: word-wrap。 :break-word; overflow:hidden; もちろん、width 属性値が必要です。

18) テキストが長すぎる場合、省略記号スタイルは次のように表示されます:

white-space: nowrap; text-overflow:ellipsis; overflow:hidden;

19) 完全なフォームには以下を含める必要があります:

< ;fieldset>
< ;legend>

20) ul ol に加えて、次も使用できます。ページ上のリスト要素の dl dt dd の組み合わせ。

21) 複数のスタイル定義を合理的に使用すると、スタイルの再利用性を効果的に高めることができます。

22) どのタグがブロック要素とインライン要素であるかを知る必要があります。一般に CSS 要素はブロック (block) とインライン (inline) に分けることができます。これらの要素の属性を理解すると、CSS を深く理解するのに役立ちます。

23) CSS 属性の推奨される記述順序に従います:

表示属性:

display || 可視性
リストスタイル: リストスタイルタイプ || リストスタイル画像
位置
上 || 右下 || 左
z-index
float

width

max-width || min-height

overflow | クリップ
マージン : マージン-右 || マージン-左
パディング-右 || アウトライン : アウトライン色|| アウトライン スタイル || アウトライン幅
ボーダー
背景 : 背景画像 || 背景-添付ファイル
テキスト プロパティ:

カラー
フォント-スタイル || フォントの太さ || フォントファミリー
フォント : 小さなキャプション |オーバーフロー

テキスト整列

テキストインデント

行高さ

空白
垂直整列
カーソル