検索
ホームページ見出しよく使用される CSS 命名規則のまとめ、非常に実用的 (コレクション)

CSS の名前付けは、小文字の英単語または組み合わせで名前が付けられ、単語は "-" で接続されます。一般的に使用される CSS の名前付け仕様には、テキストの名前付け仕様、ページ構造の名前付け仕様、ナビゲーションの名前付け、および関数の名前付けが含まれます。

CSS の名前付けでは、通常、小文字の英単語または名前の組み合わせが使用され、単語は「-」で区切られ、一目で理解できる簡単な単語以外は省略されません。次に、CSS で一般的に使用される命名規則を記事内でいくつか紹介します。皆様のお役に立てれば幸いです。

よく使用される CSS 命名規則のまとめ、非常に実用的 (コレクション)

[推奨コース: CSS チュートリアル]

テキストの命名規則

index.css: 通常、スタイルの作成に使用されます。ホーム ページの

head.css: ヘッド スタイル。複数のページ ヘッダーが同じデザイン スタイルを持つ場合に使用されます。

base.css: 共有スタイル。

style.css: 独立したページで使用されるスタイル ファイル。

global.css: ページ スタイルの基礎となるグローバル パブリック スタイル。ページに含める必要があります。

layout.css: レイアウト、レイアウト スタイル。一般的なタイプが多数ある場合に使用され、一般にホームページ ページと製品ページで使用されます。

module.css: モジュール。製品ページに使用されます。他のスタイルと一緒に使用できます。

master.css: メイン スタイル シート

columns.css: 列スタイル

themes.css: メイン スタイル

forms.css: フォーム スタイル

mend.css: パッチ、上記のスタイルに基づいた非公開化パッチ。

ページ構造の名前:

page: ページ全体を表し、最も外側のレイヤーに使用されます。

wrap: coat、すべての要素をまとめてラップする周辺パッケージ。最外層に使用されます。

wrapper: ページ周辺機器全体のレイアウト幅を制御します。最外層に使用されます。

コンテナ: コンテナ全体、最も外側の

head に使用、ヘッダー: ヘッダー領域、ヘッダーに使用

nav: ナビゲーション バー

content: コンテンツ、最も重要Web サイトのコンテンツ領域。Web ページの中央の本文に使用されます。

main: Web サイトのメイン領域 (最も重要な位置を示します)。中央のメイン コンテンツに使用されます。

列: 列

サイドバー: サイドバー

フッター、フッター: フッター、フッター。 Web サイト上の一部の追加情報配置領域 (または名前付き著作権) は下部で使用されます。

ナビゲーションの名前付け:

nav、navbar、navigation、nav-wrapper:ナビゲーション バーまたはナビゲーション パッケージ。水平ナビゲーションを表します。

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

mainbav: メイン ナビゲーション

subnav: サブ ナビゲーション

sidebar: サイド ナビゲーション

leftsidebar または sidebar_a: 左側のナビゲーション

rightsidebar または sidebar_b: 右のナビゲーション

title: タイトル

summary: 概要

menu:メニュー、領域には一般リンクとメニューが含まれます

submenu: サブメニュー

drop: ドロップダウン

dorpmenu: ドロップダウン メニュー

links: リンク メニュー

関数の名前:

logo: Web サイトのロゴをマークします

banner: スローガン、広告バナー、トップ広告バナー

login : ログイン、(ログイン フォーム: form-login など)

loginbar: ログイン バー

register: 登録

tool、ツールバー: ツールバー

search : search

searchbar: 検索バー

searchlnput: 検索入力ボックス

shop: 現在のリボンを示します

#icon: 小さなアイコン

label: 商標

homepage:ホームページ

subpage:第 2 レベルのページのサブページ

hot:ホット スポット

list:記事リスト、(例: ニュース リスト: list -news)

scroll: スクロール

tab: タグ

sitemap: サイト マップ

msg または message: プロンプト メッセージ

current : 現在の

joinus: 参加

status: ステータス

btn: ボタン (例: 検索ボタンは次のように記述できます: btn -search)

tips : ヒント

note: メモ

ギルド: ガイド

arr、矢印: マーク矢印

サービス:サービス

ブレッドクラム: (つまり、ページの場所のナビゲーション プロンプト)

download:ダウンロード

vote:投票

siteinfo:Web サイト情報

partner:パートナー

link, friendslink:フレンドリーリンク

copyright:著作権情報

siteinfoCredits:クレジット

siteinfoLegal:法的情報

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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ヘンタイを無料で生成します。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 中国語版

SublimeText3 中国語版

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

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境