htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:59 AM

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

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

DIV CSS 命名ディレクトリ

命名規則の説明
重要な CSS 命名
CSS 命名リファレンス表
命名スキル

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 までご連絡ください。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。