ホームページ > 記事 > ウェブフロントエンド > div+css 命名リファレンスと CSS 命名規則_html/css_WEB-ITnose
Web ページをデザインするために CSS レイアウトの一部を使用しましたが、名前付けが少し混乱していることがわかりました。影響はありませんが、ソース ファイルは表示しません。他の人にも教えてもらっていますが、スタジオがチームで協力してプロジェクトを完成させるとき、一か所修正するのはかなり面倒なので、ネットで関連するリファレンスを見たことがあります。私は普段他の人のコードを研究しているのですが、このような名前付けが非常に便利であることがわかりました。この記事を読む人にとって役立つことを願って、私自身の経験を追加しました。ヘッド: ヘッダー
コンテンツ: コンテンツ/コンテナー
テール: フッター
ナビゲーション: ナビ
サイドバー: サイドバー
列: 列
ページ周辺コントロール全体のレイアウト幅: ラッパー
左右中央: 左右中央
すべての名前は小文字を使用します。複数の単語が必要な場合は、「-」を使用して単語を区切ります。例: user-list
一般的に使用されるコード構造:
div: 主にレイアウトに使用され、ページ構造を分割します
ul/ol: unowned/ に使用されます。順序付きリスト
スパン: 特別な意味はありません。例:
ソースコード例
h1 が最も重要なタイトル
label: フォームをより使いやすくし、フォームのレイアウトを支援する良いものを作成するため:
ソースコードの例
fieldset & legend: fildset はフォームの外側に配置されます。フォームの内容を記述するために使用されます。例:
ソース コードの例 [www.52css.com]
ページ このタグは、最初の行がタイトル/簡単な説明のように表示され、その後に
サンプル ソース コード
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 番目の方がより明確な意味を伝えているため、不明瞭な意味を独自のカスタム名として使用しないようにしてください。