初心者必見のCSS命名ルール

以下のエディターでは、CSS の命名規則について簡単に説明します (初心者必読)。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

Header: ヘッダー
Content: コンテンツ/コンテナ
Tail: フッター
Navigation: nav
Sidebar: サイドバー
Column: 列右中央
ログインバー
ロゴ: logo
広告: バナー
ページ本文：main
ホットスポット：hot
ニュース：ニュース
ダウンロード：download
サブナビゲーション：subnav
メニュー：menu
サブメニュー：submenu
検索：検索
フレンドリーリンク：friendlink
フッター：フッター
著作権：copyright joinus
ガイド: ギルド
サービス: サービス
登録: 登録者
ステータス: ステータス
投票: 投票
パートナー: パートナー



コメントの書き方



/* フッター */
コンテンツエリア
/* フッター終了 */

IDネーミング

container:container

header:header
content:content/container
page body:main

footer:footer

navigation:nav sidebar:sidebar column:column ページ周辺機器コントロール全体のレイアウト幅:ラッパー左右中央




IDの命名

ページ構造

コンテナ:コンテナ ヘッダー:ヘッダー コンテンツ:コンテンツ/コンテナ

メインページ:メイン

フッター:フッター ナビゲーション: ナビサイドバー: サイドバー 列: 列 ページ周辺コントロール全体のレイアウト幅: ラッパー

左右中央

ナビゲーション



ナビゲーション: nav
メインナビゲーション: mainbav
サブナビゲーション: subnav

トップナビゲーション: topnav

側面ナビゲーション: サイドバー 左ナビゲーション: 左サイドバー 右ナビゲーション: 右サイドバー メニュー: メニュー サブメニュー: サブメニュー

タイトル: タイトル

概要: 概要



機能


ロゴ: ロゴ
広告: バナー
ログイン: ログイン
ログインバー: ログインバー

登録: regsiter

検索: 検索リボン: ショップタイトル: タイトル 参加: ジョイナス ステータス: ステータス
ボタン: btn
スクロール: スクロール
タブ: タブ
記事リスト: リスト
プロンプトメッセージ: msg
現在: 現在
ヒント: ヒント
アイコン: アイコン
メモ: メモ
ガイド: ギルド
サービス: サービス
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
投票: 投票
パートナー: パートナー
フレンドリー リンク: リンク
著作権: copyright



クラスの名前付け



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

(2) フォント サイズ、「font+font size」を名前として直接使用します。たとえば、.font12px { font-size: 12px; .font9pt {font-size: 9pt; }(3) 配置スタイル、

.left { float:left; }
.bottom { float:bottom; など、配置ターゲットの英語名を使用します。
.barnews { }
.barproduct { }

1. 常に小文字を使用してください

3.下線;

4. 一目で理解できる場合を除いて、単語を省略しないようにします。
メインの master.css

モジュール module.css

基本的な .css
tables.css
columns.css

font.css

Forms.css patch mend.css print.css 上記はエディターが提供したものです CSS の命名規則についての簡単な説明 (初心者必読) を皆さんにサポートしていただけると幸いです。 PHP中国語ウェブサイト~

以上が初心者必見のCSS命名ルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。