XHTML&CSS標準化 document_html/css_WEB-ITnose

XHTML&CSS标准化文档

 20100329更新

目 录

第一章 XHTML标准... 2

一、    XHTML文档结构... 2

1、     定义文档类型：... 2

2、     声明命名空间：... 2

3、     编码类型：... 2

二、       XHTML书写规范... 3

1、     语法规范：... 3

2、     注释规范：... 3

第二章 CSS标准化及CSS框架... 4

一、       CSS文档统筹与编码规范... 4

1、     CSS文档统筹：... 4

2、     CSS书写的规范：... 5

3、     属性的组织：... 6

4、     A属性排列顺序：... 6

5、     CSS命名规则：... 7

6、     CSS命名方法：... 7

二、       Reset CSS. 10

三、       清除浮动方法... 11

第三章 通用规范... 12

一、       文档结构和命名规范... 12

1、     Style文件命名规范：... 13

2、     Images规范：... 13

3、     Javascript规范：... 14

第四章 项目制作完成... 15

一、    代码的优化（制作部分）... 15

二、    夸浏览器兼容性... 16

1、     测试代码在各主流浏览器兼容性：... 16

三、    项目的上传... 16

第五章 页面制作中的SEO规范... 17

一、       页面制作中的SEO规范... 17

附录：设计规范... 18

一、       页面设计尺寸... 18

二、       字体规定... 18

三、       字号规定... 18

四、       行高规定... 18

五、       图片尺寸规范... 19

六、       文本颜色... 20

七、       切图规则... 20

 

 

第一章 XHTML标准

一、 XHTML文档结构

1、 定义文档类型：

过渡型DTD（XHTML 1.0 Transitional）是比较理想的选择。因为这种DTD允许使用描述性的元素和属性，也比较容易通过W3C的代码校验。

 

定义文档类型：过渡型（Transitional）

 

2、 声明命名空间：

xmlns是XHTML NameSpace的缩写，中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD，如果不指明各自的命名空间，机会出现语义混淆现象。

 

声明命名空间

3、 编码类型：

编码类型：GB2312

二、 XHTML书写规范

1、 语法规范：

语法规范

1、 XHTML对大小写敏感，所有的元素和属性都必须小写。 2、 所有的属性必须用引号””括起来。 3、 XHTML要求有严谨的结构，因此所有的标签都必须合理嵌套 4、 所有的属性必须被赋值 5、 所有的特殊符号都用编码表示，例如小于号必须被编码为“<” 6、 不要在注释内容中使用“--”， “--”只能出现在XHTML注释的开头和结结。 7、 XHTML规范废除了name属性，而使用id属性作为统一的名称。

2. コメント仕様:

コードコメント仕様の例 ​​

< ; div id="ヘッダー"> ; Content , CSS ドキュメント調整:

CSS

ドキュメント調整 (製品カテゴリ)

3. 小さなモジュールと小さなセクションのスタイル シートの作成。 ドキュメント調整 (ページクラスの公開)

1. スタイル シートのリセット: ブラウザーのスタイルをリセットします 2. ベース スタイル シート: ページのパブリック レイアウト スタイル

CSS

2. CSS の記述仕様:

1.ブラウザスタイル、ページ共通レイアウトスタイル、小さなモジュール、小さなセクション スタイルシートはすべては style.css という 1 つのファイルに書き込まれます。

各セクションはコメント付きで説明されており、将来のメンテナンスに非常に便利です。

コードコメント仕様

/*d1 コメント説明*//* id2 コメントの説明*/ #id2{ }

#id1{ } #id1 .class{ }

#id2 .class{ } 3. 属性の構成: レイアウト内の属性の重要性に応じて、最初にレイアウト属性を宣言してから、ボックス モデルの属性、最後にタイポグラフィのプロパティを定義します。

優先関係によって整理

ステップ 1: 必要に応じて、次の属性などのレイアウト属性を宣言します (要素の表示を決定します)。 表示位置…a:link{}

float

ステップ 2: 必要に応じて、次のような属性のボックス モデル属性 (要素の形状を決定) を宣言します: 幅 高さ マージン パディング 境界線 背景… ステップ 3: 必要に応じて最後に宣言します レイアウト属性(要素のコンテンツ表示を決定)、次のような属性: color font-size font-weight text-align… 4. 属性の配置順序: A の属性は準拠: a{}

a:visited{}

a:hover{}

a:active{}

この並べ替え順序

5. CSS 命名規則:

CSS の命名規則は、特定の規則に従う必要があります。簡単に言えば、後のメンテナンスとコミュニケーションを容易にするために、直感的で、簡潔で、一目瞭然である必要があります。

CSS

命名规则

1、区別要大小写:在命名CLASSとID時全部使用小文字母 2、 要注意 合法性：CSS命名以字母最初は、数字、文字、アンダースコア、コネクタを接続できます。 3. セマンティック定義は明確で理解しやすいものです。CSS の名前付けキーワードは意味を伝える必要があり、名前は目的と関連情報を反映しており、短くて冗長な情報が含まれていない必要があります。

6. CSS 命名方法: 次の表は一般的な命名例です:

一般的なレイアウト名:

名前コンテナサイトナビメイン

説明 ...
コンテナ	サイト	コンテンツ	コンテンツブロック
ナビゲーション	コラム	バー
メイン	左	左	レイアウト
レイアウト	センター	センター	サイドバー
サイドバー	右	右	ロゴロゴバナー広告バナーログインログイン登録者ショップツール/ツールバータブソースsite_mapabout_usパートナーガイド投票投票参加ヘッダーヘッダーフッター 一般的なモジュール名: 名前 説明 名前 説明 ログインバー ログインバー 登録 検索 検索 カート リスト リスト ツールバー サービス サービス タブ ホット ホットスポット ソース ニュース ニュース サイトマップ ダウンロード ダウンロード 私たちについて 著作権 著作権 パートナー フレンドリンク フレンドリンク ガイド ジョイナス フッター ホームページ ホームページ クラスの一般名: タイトルラベルnotenote概要概要メッセージbtnフォームカウント 名前 説明 名前 でスクリプト タイトル 現在 現在 ラベル 仕様 特別 赤 赤 送信 送信 プロンプトメッセージ テキストボックス テキストボックス ステータス ステータス ドロップ ドロップ ヒント ヒント ボタン スクロール スクロール フォーム アイコン アイコン 統計s arr/arrow arrow crumb ナビゲーション cor/corner corner/rounded b readcrumb ナビゲーションのヒント 左ナビゲーションサブメニューサイドバリコン 一般的なナビゲーション名: 名前 説明 名前 説明 ナビ ナビゲーション メニュー メニュー mainnav/globalnav メインナビゲーション トップナビ トップナビゲーション サブナビ サブナビゲーション サイドバー サイドナビゲーション 左サイドバー 右サイドバー 右ナビゲーション サブメニュー ドロップメニュー ドロップメニュー サイドナビゲーションアイコン menucontainえー メニューコンテナ よく使用されるファイル 名前: 名前説明名前master.csslayout.css列。cssfont.css テキスト スタイル ファイルselect { margin: 継承; * IE6/7 での ol の数字の誤った配置を修正 */ 説明 メインファイル 主題.css 本文ファイル レイアウト、レイアウトファイル Base.css 基本的な公開ファイル 列ファイル モジュールファイル forms.css フォームファイル ... , CSSリセット CSSリセットとは、ブラウザのスタイルをリセットすることを指します。さまざまなブラウザでは、CSS セレクターにいくつかのデフォルト値が使用されます。たとえば、h1 に値が設定されていない場合、特定のサイズが表示されます。ただし、すべてのブラウザが同じ値を使用するわけではないため、Web ページのスタイルが各ブラウザで一貫して動作するように CSS リセットが使用されます。 CSS コードをリセットします。 CSS リセット html、body、div、span、アプレット、オブジェクト、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a , abbr, 頭字語, 住所, 大きい, 引用する, コード, デル, dfn, em, フォント, 画像, イン, kbd, q, s, サンプ, 小さい, ストライク, サブ, sup, tt, var, dl, dt, dd 、ol、ul、li、フィールドセット、フォーム、ラベル、凡例、テーブル、キャプション、tbody、tfoot、tad、tr、th、td { マージン: 0; フォントの太さ: 0; : 継承; フォントスタイル: 継承; フォントファミリー: 継承; : フォーカス { アウトライン: 0; } } { list-style: none; } input, textarea, select, button { font-size: 100%; } ol { margin-left:2em; } リセット CSS コードをサーバーにアップロードしたreset.cssとして保持することをお勧めします。すべての設計および製造担当者は、この文書を一律に参照するものとします。管理者は、必要に応じてこのファイルを保守および更新できます。 (クラスページを公開し、style.css に CSS Reset コードを記述します。) 3. Clear Flow メソッド/* IE7 ハック */ コード内で ClearFix メソッドを使用して、Float をクリアします。従来の方法では、無駄な空の div を追加すると、ドキュメントの構造が破壊されます。 clearfixを使用する方法、フローティングの親メニューをクリアする必要がある場合、クラス属性Clearfix / * == clearfix == */ .clearfix:after { /*/*/ content: "."; /* IE8 ハック */ 表示: ブロック; クリア: 両方; 可視性: 非表示 } .clearfix { 表示: インラインブロック; } /* IE-mac、IE5、IE6 */ * html .clearfix { 高さ: 1%; } ClearFix使用法 class="clearfix"> 第 3 章 一般仕様と命名規則 ドキュメント構造仕様 1. スタイルファイルの命名仕様: スタイルファイルの命名仕様については、第 2 章で詳しく説明します 2。 画像 命名規則css次の命名規則に従ってください。 . ページ内の他の写真画像は絶対アドレス付きの画像を参照しており、カットされません。 画像 画像のカット仕様 1.画像の出力形式としてjpg、gif、pngを使用します。 Javascript 2. カット画像のサイズは特定のプロジェクトに応じて決定され、画像を可能な限り最適化する必要があります。 3. CSS 背景画像出力は PNG 8 です。 PNG 8 はアニメーションをサポートしないことを除いて GIF のすべての機能を備えていますが、アルファ透明性と優れた圧縮をサポートするという点で GIF よりも多くの利点があります。したがって、ほとんどの場合、GIF の代わりに PNG8 を使用する必要があります (非常に小さな画像を除き、GIF の方が圧縮率が高くなります)。 4. 同じタイプの画像の CSS スプライトを最適化します。 http リクエストを減らします。 3. Javascript 仕様: 仕様 1. jquery フレームワークを統合して、一般的に使用される JavaScript ライブラリと使用ドキュメントを確立します 2. Js 命名規則: jquery-XXXX.pack.js (XXXX はカスタム関数モジュールの名前) 第 4 章プロジェクトの制作が完了しました 1. コードの最適化 (制作部分) 1. CSS コードを整理し、ドキュメント構造を最適化します: l セレクターの先頭行を記述し、すべての属性を 1 行にまとめます。 l 外部スタイル シートを使用し、