目次
1. 命名規則の説明: - TOP
までの定義は、大きいものから小さいものまでの原則に従う必要があります。文書の構造を反映しており、検索エンジンのクエリに適しています。
2. Web ページの外層の重要な部分の CSS スタイルの名前付け: - TOP
3. DIV+CSS 命名リファレンス テーブルに使用されます。 - 上部
ホームページ ウェブフロントエンド htmlチュートリアル CSS スキル DIV + CSS 標準ネーミング collection_html/css_WEB-ITnose

CSS スキル DIV + CSS 標準ネーミング collection_html/css_WEB-ITnose

Jun 21, 2016 am 08:59 AM

Web ページ制作における DIV+CSS 命名規則の標準使用により、最適化効果が向上します。特にチームで作業する場合、共同制作の効率が向上します。具体的には DIV CSS 命名規則 CSS 命名リスト 内容。

一般的に使用される DIV+CSS 命名規則のコレクション、つまり CSS 命名規則

DIV CSS 命名ディレクトリ
  1. 命名規則の説明
  2. 重要な CSS 命名
  3. CSS 命名リファレンス表
  4. 命名スキル

CSS+DIV Web ページ (Xhtml) を開発するとき、最も混乱し、複雑になること CSS 命名 は、特に何に名前を付けるべきか、またどのような名前を付けるのが最善かわからない初心者向けです。

1. 命名規則の説明: - TOP

1)、すべての名前は小文字である必要があります

2)、属性値は二重引用符 ( "")、および class="divcss5"、id="divcss5"

などの値が必要です。3) 各タグには開始点と終了点があり、正しいレベルが必要です。組版は規則的できちんとしています

4)、空の要素には終了タグがあるか、開始タグの後に「/」を追加する必要があります

5)、パフォーマンスと構造は完全に分離されており、コードに含まれるスタイル、フォント、bgColor、ボーダーなどのプレゼンテーション要素

6)、

から

までの定義は、大きいものから小さいものまでの原則に従う必要があります。文書の構造を反映しており、検索エンジンのクエリに適しています。

7)、各テーブルとフォームに一意の構造タグ ID を追加します

8)、画像に alt タグを追加します

9)、英語の命名規則を使用してみてください

10) 一目で理解できる単語でない限り、単語を省略しないようにしてください。

DIVCSS5 では、一般的な CSS 命名方法と DIV CSS 命名方法が導入されています。

2. Web ページの外層の重要な部分の CSS スタイルの名前付け: - TOP

コート ラップ -------------- ----最外層の

ヘッダーで使用 ----------------ヘッダー

メインコンテンツ main で使用 ----- --- ----メインコンテンツ (中央) の場合

左側に main-left ------------- 左レイアウト

main-right に右 - ----------右レイアウト

ナビゲーション バー ナビゲーション ------------------Web メニュー ナビゲーション バー

コンテンツコンテンツ ---------------Web ページの中央の本文に使用

下部フッター --------------- ---下部の

3. DIV+CSS 命名リファレンス テーブルに使用されます。 - 上部

以下は、CSS スタイルの命名と CSS ファイルの命名リファレンス テーブル、DIV CSS 命名です。コレクション:

CSS スタイルの名前付け 説明
Web ページの公開名付け
#wrapper ページ周辺機器コントロール全体のレイアウト幅
#container または #content コンテナ、最外層に使用
#layout レイアウト
#head, #header ヘッダー部
#foot, #footer フッターセクション
#nav メインナビゲーション
# subnav 二次ナビゲーション
#menu メニュー
#submenu サブメニュー
#sideBar サイドバー
#sidebar_a、#sidebar_b 左列または右列
#main ページ本文
#tag タグ
#msg #message ヒント
#tips ヒント
# vote 投票
#friendlink フレンドリンク
#title タイトル
#summary 概要
#loginbar ログインバー
#searchInput 検索入力ボックス
#hot ホットホットスポット
#search 検索
#search_output 検索出力と検索結果は類似しています
# searchBar 検索バー
#search_results 検索結果
#copyright 著作権情報
#branding 商標
#logo ウェブサイトのロゴ
#siteinfo ウェブサイト情報
#siteinfoLegal 法的声明
#siteinfoCredits 信頼性
#joinus 参加してください
#partner パートナー
#service サービス
#regsiter 登録
arr/arrow arrow
#guild ガイドライン
#sitemap サイトマップ
#list リスト
#homepage ホームページ
#subpage セカンダリページのサブページ
#tool, #toolbar ツールバー
#drop ドロップダウン
#dorpmenu ドロップダウンメニュー
#status ステータス
#scroll スクロール
.tab タブページ
.left .right .center 左、中央、右
.news ニュース
.download ダウンロード
.banner 広告バナー (トップ広告バナー)
電子貿易関連
.products 製品
.products_prices 商品価格
.products_description 商品説明
.products_review 製品レビュー
.editor_review 編集者レビュー
.news_release 最新製品
.パブリッシャー メーカー
.スクリーンショット サムネイル
.faqs よくある質問
.keyword キーワード
.blog ブログ
.forum フォーラム
CSS文件命名 说明
master.css,style.css 主要的
module.css 模块
base.css 基本共用
layout.css 布局,版面
themes.css 主题
columns.css 专栏
font.css 文字、字体
forms.css 表单
mend.css 补丁
print.css 打印
CSS ファイルの名前 説明

master .css、 style.css

main module.css モジュール

css

基本的に共有

layout.css

レイアウト、レイアウト

主題.css

テーマ

columns.css

font.css

テキスト、フォント

forms.css フォーム

mend.css

パッチ

print.css Print CSS 命名に関するその他の手順: DIV+CSS 命名の概要: 関係ありません「.」 (小文字のピリオド) を使用して記号で始まる名前を選択するか、「#」 (ポンド記号) を使用して記号で始まる名前を選択するかは関係ありませんが、 に従うことをお勧めします。 Main、重要 、 特別な 、 最も外側の ボックスには、選択記号「#」 (シャープ記号) で始まる名前が付けられ、その他のボックスには名前が付けられます。 「.」(小文字のピリオド) 選択記号を使用した名前付けでは、名前付き CSS セレクター呼び出しを HTML で再利用することも検討してください。 通常、最も一般的に使用されるメイン名は、wrap (コート、最外層)、header (ヘッダー、ヘッド)、nav (ナビゲーション バー)、menu (メニュー)、title (列タイトル、一般的な調整 h1h2h3h4 タグ) です。が使用されます)、コンテンツ (コンテンツ領域)、フッター (フッター、下部)、ロゴ (ロゴ、h1 タグとともに使用できます)、バナー (広告バナー、通常は上部)、copyRight (著作権)。その他は必要に応じて選択して使用できます。 DIVCSS5 の推奨事項: メイン、重要、および最も外側のボックスには「#」 (シャープ記号) 選択記号で始まる名前を付け、その他のボックスは「.」 (小文字のピリオド) 選択記号で始まる名前を付ける必要があります。シンボル。 2. CSS スタイル ファイルの名前は次のとおりです Main master.css Layout、layoutlayout.css 列 columns.css テキスト font.css 印刷スタイル print.css テーマ Themes.css 4. 英語ネーミングスキル : - TOP 一般的に使用されていないものに遭遇した場合は、翻訳ツールを使用して翻訳し、英語の名前を付けることができます。 Google オンライン翻訳ツールの使用をお勧めします: http://translate.google.cn/ Google 翻訳ツール 紹介: http :// www.divcss5.com/css-tool/t346.shtml CSS を HTML に参照する方法について知っておく必要があるかもしれません 上記は要約ですDIV+CSS の命名規則は合格すると思います。標準化された CSS 命名は、将来の Web サイトのページのメンテナンスに便利です。 転載する場合は、記事の出典と出典URLを明記してください: http://www.divcss5.com/jiqiao/j4.shtml
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles