CSS スキル DIV + CSS 標準ネーミング collection_html/css_WEB-ITnose
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 | 打印 |
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

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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

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