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-heightoverflow | クリップ
マージン : マージン-右 || マージン-左
パディング-右 || アウトライン : アウトライン色|| アウトライン スタイル || アウトライン幅
ボーダー
背景 : 背景画像 || 背景-添付ファイル
テキスト プロパティ:
カラー
フォント-スタイル || フォントの太さ || フォントファミリー
フォント : 小さなキャプション |オーバーフロー
テキストインデント
行高さ空白
垂直整列
カーソル

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

Vueアプリケーションを開発するときに、ルーターフォルダーの下にindex.jsファイルにvuerouterを登録する必要性があるため、ルーティング構成で問題が発生することがよくあります。特別...
