CSS命名规范

最常见的是以px为单位的固定布局，需要定义以px单位的页面通常是栅格布局

那么不了解栅格的朋友可以先看看，"网页的栅格系统设计"

首先保证页面的宽度一定是950px,分成24列，这个时候就要定义24种可能情况的宽度

蓝图的各种列宽定义:

....

.span-22{width:870px;}

.span-23{width:910px;}

.span-24{width:950px;}

但span是行内元素,行内元素不应该定义宽度

因此采用grid-1,grid-2,...grid-24

我们还需要定义些常用到的margin和padding，于是有：

.ml-10{margin-left:10px}

.mr-10{margin-right:10px}

.mt-10{margin-top:10px}

.mb-10{margin-bottom:10px}

.pl-10{padding-left:10px}

.pr-10{padding-right:10px}

.pt-10{padding-top:10px}

.pb-10{padding-bottom:10px}

定义几种全局的高亮颜色.

常见的命名方式是.red或者.hightlight-red...，class中含有颜色的名字这种方式其实不好。

项目中如果需要添加换色的功能，需要用其它颜色的样式表reset之间的样式表，那之前定义的高亮颜色在其它颜色中就不一定适合，而class却还要用原来的，这样就不语义化了。

左浮动，有浮动，居左，居右，居中

.f-l{float:left;}

.f-r{float:right;}

.f-n{float:none;}

各种样式的border

.b1s-1{border:1pxsolid#000;}

.b1d-1{border:1pxdashed#000;}

还有清浮动的

.c-b{clear:both;}

.c-l{clear:left;}

.c-r{clear:right;}

居左，居中，居右，垂直居顶，居中，居底对齐

.ta-l{text-align:left;}

.ta-c{text-align:center;}

.ta-r{text-align:right;}

.va-t{vertical-align:top;}

.va-m{vertical-align:middle;}

.va-b{vertical-align:bottom;}

=============================================

模块：module.css

基本共用：base.css

布局：layout.css

全局：global.css；

主题：themes.css

专栏：columns.css

文字：font.css

表单：forms.css

补丁：mend.css

打印：print.css

头：header　　

内容：content/container　　

尾：footer　　

导航：nav　　

侧栏：sidebar

栏目：column　　

页面外围控制整体布局宽度：wrapper　　

左右中：leftrightcenter　　

登录条：loginbar　　

标志：logo　　

广告：banner　　

页面主体：main　　

热点：hot　　

新闻：news

下载：download　　

子导航：subnav　　

菜单：menu　　

子菜单：submenu　　

搜索：search　　

友情链接：friendlink　　

页脚：footer　　

版权：copyright　　

滚动：scroll　　

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态态：status

投票：vote

合作伙伴：partner

页面结构

容器:container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：leftrightcenter+导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题:title

摘要:summary+功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的:current

小技巧：tips

图标:icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

==================================

两个不同类的属性值有重复之处，刚可以缩写为：

#mainMenu,#subMenu{

background:url(../images/bg.gif);

border:1pxsolid#333;

width:100%;

overflow:hidden;

}

#mainMenu{height:30px;}

#subMenu{height:20px;}

内外侧边框的缩写：

在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：

.btn{

margin-top:10px;

margin-right:8px;

margin-bottom:12px;

margin-left:5px;

padding-top:10px;

padding-right:8px;

padding-bottom:12px;

padding-left:8px;

}

则可缩写为：

.btn{

Margin:10px8px12px5px;

Padding:10px8px12px5px;

}

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：

.btn{

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

缩写为：

.btn{margin:10px5px;}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

.btn{

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

缩写为：

.btn{margin:10px;}

=================================

hack书写规范:

写法一：

IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别!important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

根据上述表达，同一类/ID下的CSS　hack可写为：

.searchInput{

background-color:#333;/*三者皆可*/

*background-color:#666　!important;/*仅IE7*/

*background-color:#999;/*仅IE6及IE6以下*/

}

一般三者的书写顺序为：FF、IE7、IE6.

IE的if条件hack写法：

所有的IE可识别：

<!–[ifIE]>OnlyIE<![endif]–>

只有IE5.0可以识别:

<!–[ifIE5.0]>OnlyIE5.0<![endif]–>

IE5.0包换IE5.5都可以识别:

<!–[ifgtIE5.0]>OnlyIE5.0+<![endif]–>

仅IE6可识别:

<!–[ifltIE6]>OnlyIE6-<![endif]–>

IE6以及IE6以下的IE5.x都可识别:

<!–[ifgteIE6]>OnlyIE6/+<![endif]–>

仅IE7可识别:

<!–[iflteIE7]>OnlyIE7/-<![endif]–>

=====================================

侧栏：　　sidebar

左边栏：　　sidebar-l

右边栏：　　sidebar-r

版权：copyright

摘要：summary

网站信息：siteinfo

法律声明：siteinfo-legal

合作伙伴：partner

=======================================

label：使表单更有亲和力而且还能辅助表单排版，例如：

<labelfor="user-password">密　码</label>

<inputtype="password"name="password"id="user-password"/>

fieldset&legend：

fildset套在表单外，legend用于描述表单内容

=======================================

images(存放图形文件)

flash（存放Flash文件）

style(存放CSS文件)

script（存放Javascript脚本）

link（存放友情链接）

media(存放多媒体文件)等。

=======================================

px一般使用中文宋体12pt

=========================================

当在设计web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：

自上而下小组：top-panel

横向：horizontal-nav

左面：left-side

中心-栏目：center-column

右面：right-col