div+css 命名リファレンスと CSS 命名規則_html/css_WEB-ITnose

Web ページをデザインするために CSS レイアウトの一部を使用しましたが、名前付けが少し混乱していることがわかりました。影響はありませんが、ソース ファイルは表示しません。他の人にも教えてもらっていますが、スタジオがチームで協力してプロジェクトを完成させるとき、一か所修正するのはかなり面倒なので、ネットで関連するリファレンスを見たことがあります。私は普段他の人のコードを研究しているのですが、このような名前付けが非常に便利であることがわかりました。この記事を読む人にとって役立つことを願って、私自身の経験を追加しました。ヘッド: ヘッダー
コンテンツ: コンテンツ/コンテナー
テール: フッター
ナビゲーション: ナビ
サイドバー: サイドバー
列: 列
ページ周辺コントロール全体のレイアウト幅: ラッパー
左右中央: 左右中央

すべての名前は小文字を使用します。複数の単語が必要な場合は、「-」を使用して単語を区切ります。例: user-list

一般的に使用されるコード構造:

div: 主にレイアウトに使用され、ページ構造を分割します
ul/ol: unowned/ に使用されます。順序付きリスト
スパン: 特別な意味はありません。例:


ソースコード例

(4.23)天HUan.com 6 周年天環.com Sixth AnniversaryTianhuan.com Sixth AnniversaryTianhuan.com Six

次に、日付とタイトルを両側に表示する効果を得るために、CSS でスパンを定義します

h1-h6: title
h1-h6重要度に応じた降順

h1 が最も重要なタイトル

label: フォームをより使いやすくし、フォームのレイアウトを支援する良いものを作成するため:

ソースコードの例

password

fieldset & legend: fildset はフォームの外側に配置されます。フォームの内容を記述するために使用されます。例:

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

パスワード

ページ このタグは、最初の行がタイトル/簡単な説明のように表示され、その後に

サンプル ソース コード

などの詳細な説明が続く場合に使用しますCSS?

> ;

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

XHTML とは何ですか?

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

C #content

M #maincol

X #xcol

これは、垂直レイアウトの XHTML 構造です。c-smx は Web ページに 3 つの列があることを意味します。c-sm は 2 つの列があることを意味します。c-mx は 2 つの列があり、そのうちの 1 つが付加されていることを意味します。c-m は 1 つの列を意味します。 。

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

カスタムの名前付け:
w3c Web サイトによると、意味のある名前を付けるのが最善です
例: 重要なニュースが強調表示されます (赤など)
2 つのタイプがあります

ソースコードの例]

.red {color: red}
. important-news{color:red}
明らかに 2 番目の方がより明確な意味を伝えているため、不明瞭な意味を独自のカスタム名として使用しないようにしてください。