div+css 命名規則_html/css_WEB-ITnose

div+css 命名規則

2009-04-15 11:48

共通のコード構造:

div: 主にレイアウト、分割ページ構造に使用されます
ul/ol: unordered /Ordered に使用されますリスト
span: には特別な意味はなく、組版の補助として使用できます。例:

(4.23)Hermit Tofu Shop

次に定義します。 CSSでspanを使用して右にフローティングし、日付とタイトルを両側に表示する効果を実現します

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

label: Inフォームをより使いやすくし、フォームのレイアウトにも役立つ便利な機能:

passwordパスワード" name=" パスワード" id="user-password" /> フィールドセットと凡例: フィールドセットはフォームの外側に設定され、凡例はフォームの内容を説明するために使用されます。例:

title >

dl,dt,dd: ページの最初の行がタイトル/簡単な説明のように表示され、その後に詳細が表示されます。例:

CSS とは?

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

XHTML とは何ですか?

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

C #content

S #subcol

M #maincol

X #xcol

これは、Web ページが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 番目の方がより明確な意味を伝えているため、不明瞭な意味を独自のカスタム名として使用しないようにしてください

よく使用される CSS 命名規則:

Header: header Content: content /container Tail: footer Navigation: nav サイドバー: サイドバー

コラム: コラム ページ周辺コントロール 全体レイアウト幅: ラッパー 左右中央: 左右中央

ログインバー: ログインバー ロゴ: ロゴ 広告: バナー ページ本文: メイン ホットスポット: ホット

ニュース: ニュース ダウンロード: ダウンロード サブナビゲーション: subnav メニュー: menu

サブメニュー: submenu 検索: 検索 フレンドリーリンク: friendslink フッター: footer

著作権: copyright スクロール: スクロール コンテンツ: content タブ: tab

記事リスト: list プロンプト情報: msg Tips:tips Column title:title

Join:joinus Guide:guild Service:service Registration:regsiter

Status:status Vote:vote Partner:partner

(2) Comments:

/* Footer */

Content area

/* End Footer */

(3) IDネーミング:

(1) ページ構造

Container:container Header: header Content: content/container

Navigation:

サイドバー：mainbav サブナビゲーション: subnav

トップナビゲーション: topnav サイドナビゲーション: サイドバー 左側のナビゲーション: leftsidebar

右ナビゲーション: rightsidebar メニュー: メニュー サブメニュー: サブメニュー

タイトル: タイトル 概要: 概要

(3) 機能

ロゴ：ロゴ 広告：バナー ログイン：ログイン ログインバー：loginbar

登録：regsiter 検索：検索 リボン：shop

タイトル：タイトル 参加：joinus ステータス：ステータス ボタン：btn

スクロール：scrollタブページ: タブ 記事リスト: リスト ヒント情報: msg

現在: 現在のヒント: ヒント アイコン: アイコン 注: note

ガイド: ギルド サービス: サービス ホットスポット: ホット ニュース: ニュース

ダウンロード: ダウンロード 投票: vote パートナー:パートナー

フレンドリーリンク: link 著作権: copyright

(4) クラス命名:

(1) 色:

.red { color: red }

などの色の名前または 16 進コードを使用します。 f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) フォントサイズは、

.font12px { font-size : など、名前として直接使用します。 12px; }

.font9pt {font-size: 9pt; }

(3) 配置スタイル、

.left { float:left; }

.bottom { float; など:bottom ; }

(4) タイトル バーのスタイル。名前には 'カテゴリ + 関数' メソッドを使用します。例:

.barnews { }

.barproduct { }

Notes::

1. 常に小文字。

2 . 英語を使うようにしましょう

3. ダッシュやアンダーラインは付けないでください

Main master.css モジュール module.css 基本的に。共有base.css

レイアウト、レイアウト レイアウト.css テーマ.css 列 列.css

テキスト font.css フォーム.css パッチ mend.css print print.css