htmlとDIV+CSSの命名規則のまとめと共有（集）

Web ページ制作における DIV+CSS 命名規則の使用を標準化すると、特にチームで作業する場合に最適化効果が向上し、共同制作の効率が向上します。具体的な DIV CSS 命名規則と CSS 命名規則については、この記事に記載されています。

一般的に使用される DIV+CSS 命名規則、つまり CSS 命名規則の包括的なコレクションです

CSS+DIV Web ページ (Xhtml) を開発するとき、最も混乱し複雑になるのは CSS 命名です。特にそれを知らない初心者にとっては、CSS 命名規則です。何に名前を付けるか、どのように名前を付けるかが最善の方法です。

1. 命名規則の説明

1. すべての名前は小文字にするのが最適です

2. 属性の値は二重引用符 ("") で囲み、class="helloweb" のような値にする必要があります。 , id ="helloweb"

3. 各タグには開始と終了があり、正しいレベルが必要です。また、レイアウトは規則的で整っていなければなりません

4. 空の要素には終了タグを付けるか、「/」を追加する必要があります。 " 開始タグ "

の後に。 5. コードには、スタイル、フォント、bgColor、ボーダーなどのパフォーマンス要素は含まれません。

6.

に従う必要があります。 小さいという原則はドキュメントの構造を反映しており、検索エンジンのクエリに役立ちます。

7. 各テーブルとフォームに固有の構造タグ ID を追加します

8. 画像に alt タグを追加する利点は、画像にエラーが発生したときに alt をユーザーに反映できることです

9。英語の命名原則を使用する

10. 一目で理解できる単語でない限り、単語を省略しないようにしてください

以下では、一般的な CSS の命名方法と DIV CSS の命名方法を紹介します。

2. Web ページの外層の重要な部分の CSS スタイルの命名

コートラップ ------------------最外側の

ヘッダーに使用 -- --- ----------頭の部分に使用します

メインコンテンツ main -----------本文の内容（中）に使用します

main-left --- -- --------左レイアウト

右メイン-右 -----------右レイアウト

ナビゲーションバーナビ------------- - ---Web ページのメニュー ナビゲーション バー

コンテンツ --------------Web ページの中央の本文に使用されます

下部のフッター ------------ --- --下の方へ

3. DIV+CSSネーミングリファレンステーブル

以下はCSSスタイルネーミングとCSSファイルネーミングリファレンステーブル、DIV CSSネーミングコレクションです:

①CSSスタイルネーミング手順Webページパブリックネーミング #ラッパーページ周辺制御 全体のレイアウト 幅 #コンテナ または #コンテンツコンテナ
② 一番外側の #レイアウトレイアウト #ヘッド、 #ヘッダーヘッダー部 #フット、 #フッターフッター部 #navmainナビゲーション #subnavセカンダリナビゲーション #menuメニュー #submenu submenu #sideBar サイドバー #sidebar_a、#sidebar_b 左列または右列 #メイン ページ本文 #タグ ラベル #メッセージ #メッセージ プロンプト情報 #ヒント ヒント #投票投票 #フレンドリンク フレンドリーな接続 #タイトル タイトル;

③ #概要概要 #ログインバー ログイン バー # searchInput 検索入力ボックス #ホットホットスポット #検索検索 #search_output 検索出力と検索結果が類似 #searchBar 検索バー #search_results 検索結果 #copyright 著作権情報 #ブランディング

④商標 #ロゴ ウェブサイトロゴ ロゴ #siteinfo ウェブサイト情報 # siteinfoLegalLegal Statement # siteinfoCreditsReputation #joinus参加してください #パートナー パートナー #サービス サービス #登録者登録 arr/arrow arrow #ギルド ガイド #サイトマップ サイト マップ #リスト リスト #ホームページ ホームページ #サブページ セカンダリ ページ サブページ #ツール, #ツールバー ツール 記事 #ドロップ ドロップダウン #ドルメニュー ドロップ-down menu

⑤#status ステータス #scroll スクロール.tab タブページ.左.右.中央左、中央、右.ニュース news.ダウンロード ダウンロード.バナー 広告バナー (トップ広告バナー) 電子貿易関連 .products 製品 .products_prices製品価格 .products_description 製品説明 .products_review 製品レビュー .editor_review 編集者レビュー .news_release 最新製品 .出版社 メーカー .スクリーンショット サムネイル .FAQ よくある質問 .キーワード キーワード .ブログ ブログ .forum フォーラム

⑥ CSS ファイルの命名 説明 master.css、style .css main module.css module Base.css 基本的には、layout.css レイアウト、レイアウトテーマを共有します。css テーマ columns.css 列 font.css テキスト、フォントフォーム.css フォーム mend.css patch print.css Print

その他の指示CSS 命名:

DIV+CSS 命名概要: 記号で始まる名前を選択するのに「.」 (小文字のピリオド) を使用するか、または最初の名前を選択するのに「#」 (シャープ記号) を使用するかは関係ありません。メイン ボックス、重要ボックス、特別ボックス、および最も外側のボックスには選択記号「#」 (シャープ記号) で始まる名前を付け、その他のボックスには「.」で始まる名前を付けることが最善です。 (小文字のピリオド) 選択記号と、HTML 内で繰り返し呼び出される CSS セレクターの命名も考慮する必要があります。

通常、最も一般的に使用されるメイン名は次のとおりです:wrap (コート、最外層)、header (ヘッダー、ヘッダー)、nav (ナビゲーション バー)、menu (メニュー)、title (列タイトル、通常は h1h2h3h4 タグで使用されます)
、 content (コンテンツ領域)、footer (フッター、下部)、logo (ロゴ、h1 タグとともに使用可能)、banner (広告バナー、通常は上部)、copyRight (著作権)。その他は必要に応じて選択して使用できます。

推奨事項: メイン、重要、および最も外側のボックスには、「#」 (シャープ記号) 選択記号で始まる名前を付け、その他のボックスは、「.」 (小文字のピリオド) 選択記号で始まる名前を付ける必要があります。

2. CSS スタイル ファイルの名前は次のとおりです:

main master.css

layout、layout.css

columns.css

text font.css

print style print.css

主題.css

4. 英語のネーミングスキル

一般的に使用されていないものに遭遇した場合は、翻訳ツールを使用して翻訳し、英語で名前を付けることができます。

以上がhtmlとDIV+CSSの命名規則のまとめと共有（集）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。