您现在的位置: 网页制作教程网 >> 网页制作 >> photoshop教程 >> photoshop精彩实例 >> 正文

CSS设计网页时的一些常用规范

作者:网页教学…

来源:网页教学网

热度:

2008-7-8 13:13:21

CSS命名规范

一.文件命名规范

  全局样式:global.css;
  框架布局:layout.css;
  字体样式:font.css;
  链接样式:link.css;
  打印样式:print.css;

二.常用类/ID命名规范

  页 眉:header
  内 容:content
  容 器:container
  页 脚:footer
  版 权:copyright 
  导 航:menu
  主导航:mainMenu
  子导航:subMenu
  标 志:logo
  标 语:banner
  标 题:title
  侧边栏:sidebar
  图 标:Icon
  注 释:note
  搜 索:search
  按 钮:btn
  登 录:login
  链 接:link
  信息框:manage
  ……

  常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……
  CSS书写规范及方法

一. 常规书写规范及方法

  1. 选择DOCTYPE:

  XHTML 1.0 提供了三种DTD声明可供选择:

  过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

  严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
。完整代码如下:

   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

  框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

  理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

[1] [2] [3] [4] 下一页


我来说两句:

1分 2分 3分 4分 5分
姓名: *


* 请各位网友遵纪守法并注意语言文明。
网站简介 | 联系方式 | 意见建议 | 版权说明
Copyright © 2007 All rights reserved
滇ICP备06006992号