您的位置:首页 > Web前端 > CSS

div+css命名规范

2014-11-25 14:03 260 查看
命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如content-title.

(二)对于一个网站样式表的命名,没有很标准的一个规则,我们为了方便其他人浏览和修改,定义了以下主要命名项的规则:

1.
div+css命名规范

页头:header

登录条:loginBar

标志:logo

侧栏:sideBar

广告:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

友情链接:friendLink

页脚:footer

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

版权:copyRight产品管理

2.
CSS的Id命名规范
外套:wrap

主导航:mainNav00

子导航:subnav

页脚:footer

整个页面:content

页眉:header

页脚:footer

商标:label

标题:title

主导航:mainNav(globalNav)

顶导航:topnav

边导航:sidebar

左导航:leftsideBar

右导航:rightsideBar

旗志:logo

标语:banner

菜单内容1:menu1Content

菜单容量:menuContainer

子菜单:submenu

边导航图标:sidebarIcon

注释:note

面包屑:breadCrumb(即页面所处位置导航提示)

容器:container

内容:content

搜索:search

登陆:login

功能区:shop(如购物车,收银台)

当前的:current

3.
css样式文件命名
首页:index.css

主要的:master.css

布局版面:layout.css

专栏:columns.css

文字:font.css

打印样式:print.css

主题:themes.css

通用:basic.css

CSS调用

与上述同理:

1. 非特殊情况下样式文件必须外链至
…之间;非特殊情况下JavaScript文件必须外链至页面外部;

2. 引入样式文件或JavaScript文件时, 不可略去默认类型声明, 写法如下:

"
stylesheet" href=""type="text/css" />


"


"
type="text/javascript">
3.引入JS插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

版本二:
http://www.cnblogs.com/luluping/archive/2009/08/08/1542020.html 一.文件命名规范

全局样式: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:

XHTML1.0提供了三种DTD声明可供选择:

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

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

。完整代码如下:

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

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

关于DTD您可以参考:
http://www.div-css.net/search.asp?SearchContent=文档类型&searchType=title
2.指定语言及字符集:

为文档指定语言:

为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:

常用的语言定义:

标准的XML文档语言定义:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: