DIV+CSS_html/css_WEB-ITnose でよく使用される基本的な知識

CSS 命名規則

1.ファイル命名規則

グローバル スタイル: global.css;
フォント スタイル: font.css;
印刷スタイル: print.css;共通のクラス/ID 命名規則

ヘッダー: header
コンテンツ: content
コンテナ: コンテナ
フッター: footer
著作権: copyright
ナビゲーション: menu
メインナビゲーション: mainMenu
サブナビゲーション: subMenu
ロゴ: logo
スローガン: バナー
title:タイトル
sidebar:サイドバー
icon:アイコン
note:メモ
search:検索
ボタン:btn
login:ログイン
link:リンク
情報ボックス:管理
...

よく使われるクラスの命名一般的な英単語を標準として使用し、理解しやすくし、適切な場所に注釈を付けます。二次クラス/ID の命名には、複合書き込みモードが採用され、最後の単語の最初の文字は大文字にする必要があります。たとえば、「検索ボックス」は「searchInput」、「検索アイコン」は「searchIcon」、 「検索ボタン」「searchBtn」など。

CSS の記述仕様とメソッド

1. DOCTYPE を選択します:

XHTML 1.0 では、次の 3 つの DTD 宣言から選択できます:

非常に緩やかな要件を持つ DTD で、続行できます。 HTML4.01 ロゴを使用します (ただし、xhtml の記述方法に準拠する必要があります)。完全なコードは次のとおりです。


XML/HTML コード


厳密: 厳密な DTD の場合、プレゼンテーション層の識別子と属性 (
など) は使用できません。完全なコードは次のとおりです。

XML/HTML コード

Frameset (フレームセット): フレーム ページ用に特別に設計された DTD。ページにフレームが含まれている場合は、この DTD を使用する必要があります。完全なコードは次のとおりです。

XML/HTML コード

理想的な状況はもちろん厳密な DTD ですが、Web 標準に慣れていないデザイナーのほとんどにとって、現時点では移行 DTD (XHTML 1.0 Transitional) が理想的な選択です (このサイトを含め、Transitional DTD も使用されます)。この DTD ではプレゼンテーション層の識別子、要素、属性も使用できるため、W3C コード検証に合格することも容易になります。

DTD については、次を参照してください:

http://www.chinaz.com/Design/Pages/0Z515A12007.html

2. 言語と文字セットを指定します:

ドキュメントの言語を指定します:


XML/ HTML コード


ブラウザで正しく解釈され、W3C コード検証に合格するには、すべての XHTML ドキュメントが必要です。使用するコーディング言語:

XML/HTML コード

標準 XML ドキュメント言語定義:

XML/HTML コード

古いブラウザ用の言語定義:

XML /HTML code

文字セットを改善するために、「utf-8」の使用を推奨します。

3. スタイルシートの呼び出し:

外部スタイルシートの呼び出し:

ページ内メソッド: ページコードの先頭領域にスタイルシートを直接記述します。 例:

XML/HTML コード