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标准
过渡型DTD（XHTML 1.0 Transitional）是比较理想的选择。因为这种DTD允许使用描述性的元素和属性，也比较容易通过W3C的代码校验。
| 定义文档类型：过渡型（Transitional） |
xmlns是XHTML NameSpace的缩写，中文翻译为命名空间。命名空间是收集元素类型和属性名字的一个详细DTD，如果不指明各自的命名空间，机会出现语义混淆现象。
| 声明命名空间 |
编码类型：GB2312
| 语法规范 |
| 1、 XHTML对大小写敏感，所有的元素和属性都必须小写。 2、 所有的属性必须用引号””括起来。 3、 XHTML要求有严谨的结构，因此所有的标签都必须合理嵌套 4、 所有的属性必须被赋值 5、 所有的特殊符号都用编码表示，例如小于号必须被编码为“<” 6、 不要在注释内容中使用“--”， “--”只能出现在XHTML注释的开头和结结。 7、 XHTML规范废除了name属性，而使用id属性作为统一的名称。 |
| コードコメント仕様の例 |
< ; div id="ヘッダー"> ; Content
, CSS ドキュメント調整:
|
CSS
| 1. スタイル シートのリセット: ブラウザーのスタイルをリセットします 2. ベース スタイル シート: ページのパブリック レイアウト スタイル | 3. 小さなモジュールと小さなセクションのスタイル シートの作成。
|
CSS |
| 1.ブラウザスタイル、ページ共通レイアウトスタイル、小さなモジュール、小さなセクション スタイルシートはすべては style.css という 1 つのファイルに書き込まれます。 |
| 各セクションはコメント付きで説明されており、将来のメンテナンスに非常に便利です。
|
| #id1{ } #id1 .class{ } | /* id2 コメントの説明*/
| #id2 .class{ }
3. 属性の構成: レイアウト内の属性の重要性に応じて、最初にレイアウト属性を宣言してから、ボックス モデルの属性、最後にタイポグラフィのプロパティを定義します。
|
優先関係によって整理
| float |
| ステップ 2: 必要に応じて、次のような属性のボックス モデル属性 (要素の形状を決定) を宣言します: 幅 高さ マージン パディング 境界線 背景… ステップ 3: 必要に応じて最後に宣言します レイアウト属性(要素のコンテンツ表示を決定)、次のような属性: color font-size font-weight text-align…
4. 属性の配置順序: A の属性は準拠: a{} |
a:visited{}
a:active{}
この並べ替え順序
5. CSS 命名規則:
CSS の命名規則は、特定の規則に従う必要があります。簡単に言えば、後のメンテナンスとコミュニケーションを容易にするために、直感的で、簡潔で、一目瞭然である必要があります。
命名规则
| 1、区別要大小写:在命名CLASSとID時全部使用小文字母 2、 要注意 合法性：CSS命名以字母最初は、数字、文字、アンダースコア、コネクタを接続できます。 3. セマンティック定義は明確で理解しやすいものです。CSS の名前付けキーワードは意味を伝える必要があり、名前は目的と関連情報を反映しており、短くて冗長な情報が含まれていない必要があります。 |
| 6. CSS 命名方法: 次の表は一般的な命名例です:
|
名前
| 説明 ... | コンテナ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| コンテナ | サイト | サイト コンテンツ | コンテンツブロック
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ナビゲーション | コラム | バー |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| メイン | 左 | 左
| レイアウト | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| レイアウト
| センター
| センター
| サイドバー | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| サイドバー
| 右
| 右
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
