div CSS 命名規則 (譲渡)_html/css_WEB-ITnose

Web ページをデザインするために CSS レイアウトの一部を使用しましたが、名前付けが少し混乱していることがわかりました。影響はありませんが、ソース ファイルは示しません。他のものもありますが、スタジオがチームと協力してプロジェクトを完成させる場合もあります。他の人のコードも調べてみると、この種の名前付けが広く使用されていることがわかりました。私自身の経験も追加しました。この記事を読む人にとって役立つことを願っています。

命名規則

一般的に使用される CSS の命名規則:

Header: ヘッダー
Content: コンテンツ/コンテナ
Tail: フッター
Navigation :nav
Sidebar: サイドバー
Column: 列
ページ周辺機器コントロール全体のレイアウト幅: ラッパー
左右中央: 左右中央

すべて小文字を使用名前付けに複数の単語が必要な場合は、「-」を使用して単語を区切ります (user-list など)

共通のコード構造:

div: 主にレイアウト、分割ページ構造に使用されます
ul/ol: unowned/ に使用されます。順序付きリスト
span: には特別な意味はなく、植字の補助として使用できます。たとえば、

ソース コードの例 [www.mb5u.com]

(4.23)Tianhuan.com 6 周年 Tianhuan.com 6 周年 Tianhuan.com 6 周年 6

安心のテンプレート - Mb5u.com 次に、CSS でスパンを浮動右として定義して、日付とタイトルを両面に表示する効果

h1-h6: タイトル
h1-h6 重要度に応じて
h1 最も重要なタイトルを降順で並べます

label: フォームをより親しみやすく、またフォームのレイアウトを支援するために、例:

ソース コードの例 [www.mb5u.com]

< ;label for="user-password">password

fieldset & legend: fildset フォームの外側に設定され、凡例はフォームの内容を説明するために使用されます。例:

ソース コードの例 [www.mb5u.com]

title

; パスワード

dl,dt; dd: このタグは、ページの最初の行がタイトル/簡単な説明に似ており、その後に

Example Source Code [www.mb5u.com]

< などの具体的な説明が続く場合に使用する必要があります。 ;dl>

CSS とは?

CSS はスタイルシートと呼ばれる技術です。カスケード スタイルシートと呼ぶ人もいます。

XHTML とは何ですか?

XHTML は、HTML に似ていますが、わずかながら重要な違いがいくつかある XML ベースのマークアップ言語です。こうやって見ると、XHTML は HTML と似た役割を持つ XML です。 本質的に、XHTML は、XML の能力 (ある程度) と HTML の単純さ (ほとんど) を組み合わせたブリッジング (移行) テクノロジです。

X #xcol


これは、垂直レイアウトの XHTML 構造です。c-smx は Web ページに 3 つの列があることを意味し、c-sm は 2 つの列があることを意味します。 c-m は列を表します。

3 列のレイアウトは 2 つの層に分割する必要があります。最初の層は #subcol と #main で、2 番目の層は #maincol と #xcol です。
カスタムの名前付け:

w3c Web サイトに記載されている内容に従って、意味のある名前を付けるのが最善です

例: 重要なニュースが強調表示されます (赤など)

2 つのタイプがあります

ソース コードの例 [www. mb5u.com]

.red{color:red}
. important-news{color:red}

Mb5U.com-template fear-free


明らかに、2 番目のタイプの方が伝える意味はより明確です。曖昧な意味を独自のカスタム名として使用しないようにしてください。