CSS文件及样式命名

一、CSS文件及样式命名

1、CSS文件命名规范

全局样式：global.css；

框架布局：layout.css；

字体样式：font.css；

链接样式：link.css；

打印样式：print.css；

2、CSS样式命名规范

本人建议：用字母、_号工、-号、数字组成，必须 以字母开头，不能为纯数字。为了开发后样式名管理方便 ，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就勤俭了查找样式的光阴，例如：

头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构 的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

下面列出一些常用的命名单词方便 大家应用：（以后大家工作历程中慢慢把自己积累 的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况 了。）

容 器：container/box

头 部：header

主 导 航：mainNav

子 导 航：subNav

顶 导 航：topNav

网站标记：logo

大 广 告：banner

页面中部：mainBody

底 部：footer

菜 单：menu

菜单内容：menuContent

子 菜 单：subMenu

子菜单内容：subMenuContent

搜 索：search

搜索要害字：keyword

搜索领域：range

标签文字：tagTitle

标签内容：tagContent

当前标签：tagCurrent/currentTag

标　 题：title

内 容：content

列 表：list

当前地位：currentPath

侧 边 栏：sidebar

图 标：icon

注 释：note

登 录：login

注 册：register

列 定 义：column_1of3 (三列中的第一列)

column_2of3 (三列中的第二列)

column_3of3 (三列中的第三列)

二、id和class的应用及差别

我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：

ID法子 ：#test{color:#333333}，在页面中调用<div id="test">内容<div>

CLASS法子 ：.test{color:#333333}，在页面中调用<div class="test">内容<div>

id一个页面只可以应用一次，class可以多次引用。

我在页面中用了多个雷同 id在IE中显示也正常，id和class好象没什么差别，用多个雷同 id有什么影响吗？

页面存在多个雷同的ID影响就是不能通过W3的校验。

在页面显示上，目前的涉猎器还都容许你犯这个差错，用多个雷同 ID“一般情况 下”也能正常显示。但是当你需要 用JavaScript通过id来把持这个div，那就会出现差错。

id是一个标签，用于区分不同的结构 和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混合；

class是一个样式，可以套在任何结构 和内容上，就象一件衣服；

概念上说就是不一样的：

id是先找到结构 /内容，再给它定义样式；class是先定义好一种样式，再套给多个结构 /内容。

也就是说建议大家在写XHML+CSS时如果是维一的结构 定位的就用id，否则就用class吧（这样让出非结构 定位的div块的id让程序员自己定义应用）

web标准 盼望大家用严峻的习惯来写代码。

三.应用 css缩写

应用缩写可以赞助 减少你CSS文件的大小，更加容易涉猎。常用的css缩写的首要规矩：

色彩

16进制的色彩 值，如果每两位的值雷同，可以缩写一半，例如：

#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写法子 :

property:value1; 表现所有边都是一个值value1；

property:value1 value2; 表现 top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表现 top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四个值依次表现 top,right,bottom,left

方便 的记忆法子 是顺时针，上右下左。具体利用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下：

border-width:1px;

border-style:solid;

border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下：

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用涉猎器默认值，默认值为：

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

字体(fonts)

字体的属性如下：

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取缔默认的圆点和序号可以这样写list-style:none;

list的属性如下:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

更多属性写法请参考《CSS样式手册》，在线手册地址：http://www.jb51.net/css/

四、明断定义单位，除非值为0

忘怀定义尺寸的单位是CSS新手广泛的差错。在HTML中你可以只写width=100，但是在CSS中，你必须 给一个正确的单位，比如：width:100px width:100em。只有两个例外情况 可以不定义单位：行高和0值。除此以外，其他值都必须 紧跟单位，注意，不要在数值和单位之间加空