http://www.blog.ce.cn/sp1/zhangnan/14493583725.shtml
CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.
一,简写
简写主要是为了书写方便快捷,代码减少提高网页的下载速度.并不是所有的css都可以简写.一般可以简写的如下
(1) font
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
可以简写成
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
要注意顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值
(2) border
border-width:1px;
border-style:solid;
border-color:#000;
可以简写为 border:1px sollid #000
要注意顺序不能改变.(关于颜色值的简写:如果颜色值从第一位起每两位是重复的那可以简写为一个.比如:#335566可以简写成#356 #000000可以简写成#000)
(3)margin & padding
margin和padding的简写规则相同,只拿margin举例
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
上述情况四个方向的值相同可直接写成margin:10px
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
上述情况四个方向的值不同可简写成margin:10px 20px 30px 40px 即第一个值是margin_top,最后一个值是margin_bottom的顺时针的顺序
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
上述情况四个方向中想对应的两个方向值相同.可以简写成margin:10px 20px 注意要把10px放前面
如果是数字值为0可以不加单位.否则所有的数字值必须加上单位.比如10px
(4) background
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
可以简写成
background:#fff url(bg.gif) no-repeat fixed left top;
注意顺序不能改变
(5)list-style
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
可以简写成list-style:square outside url(bullet.gif);
注意顺序不能改变
二,命名规范
在WEB标准中关于css的命名规范 是为了更容易的找到我们所定义的css,
因为我们所做的页面可能程序员和其他制作人员也要看.所以进行规范对于我们之间的
配合和以后的修改
命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔
常用代码结构：
div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助
h1-h6：标题
h1-h6 根据重要性依次递减
h1位最重要的标题
常用的CSS命名规则：
外 套： wrap(页面外围控制整体布局宽度)
主导航： mainnav
子导航： subnav
页 脚： footet
整个页面： content
页 眉： header
页 脚： footer
商 标： label
标 题： title
主导航： mainbav（globalnav）
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
旗 志： logo
标 语： banner
菜单内容1： menu1 content
菜单容量： menu container
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadcrumb(即页面所处位置导航提示）
容器： container
内容： content
搜索： search
登陆： Login
功能区： shop(如购物车，收银台)
当前的 current
三,样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
http://www.starow.net/wangzhansheji/css_jianxiefangfa.html
渡虎谷：常用的CSS简写方法
前两天我写的一篇文章里说过，要提高网站执行效率，就要从各种细节入手。其中，CSS的简写在节省代码方面虽然没有table布局改为div那么客观，不过也是一个不能忽略的方面。下面总结一下CSS的一些简写方法：
外补丁(margin)的简写：
比如：margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成：margin:10px 20px;
或者：margin:10px 20px 10px 20px;
再或者：margin:10px 20px 10px;
注意：简写后的顺序是“上-左右-下”，“上-右-下-左”，“上下-左右”
内补丁(padding)的简写：同上
颜色的简写：
比如：color:#FFFFFF
可以写成：color:#FFF
或者：color:white
边框的简写：
比如：border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成：border:1px solid :#FFFFFF;
或者写成：border:1px solid :#FFF;
背景的简写：background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以写成：background:#FFF url(background.gif) no-repeat fixed 0 0;
字体的简写：
font-style:normal; font-weight:bold; font-size:12px; line-height:120%; font-family:”宋体”,”Arial”;
可以写成：font:normal bold 12px/120% “宋体”,”Arial”;
链接统一定义：
为了避免每个链接都要给出css来定义，可以用这样的伪类来定义：
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}
用body来定义网页：
body{
margin:0 auto;
padding:0; border:0;
font-size:12px; text-align:center;
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;
}
margin:0 auto;的意思就是网页居中，很多初学者都不知道div+css如何使网页居中，其实就这么简单。
padding:0; border:0;是定义所有的内补丁和边框为0，当然你特殊声明的除外。
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;是定义网页文字的字体，默认会按照这个顺序来显示。如果出现英文的话，英文的默认字体 是Arial。
不要忽视这么一点代码，如果你不注意的话，会使css文件大很多。。比如没经过简写的css有15K，那么通过简写后的CSS文件可能只有13K了。可千万别小看这2K，记住~
http://w1w1.blogchina.com/w1w1/6003319.html
css简写用法说明
用了这么多年css（经验也算丰富），总觉得该写点什么。理论性太强的暂时写不了，只好先从简单直白的 入手。css简写（css shorthand）就符合这个条件。
简单的说，css简写就是在等效的前提下，把多句css代码简化成一句。在我看来，简写css的好处有三：一 是写起来方便（就像键盘快捷键）；二是简化代码；三是帮助你熟悉和深刻理解css。
闲话少说，书归正传。能够简写的css属性主要有以下几个：
font简写：
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）
不过使用这种简写需要注意几点：要使简写定义有效必须至少提供 font-size 和 font-family 这两个属性 ；同时font-weight, font-style 以及 font-varient 这几个属性如果不做设定的话将默认为normal。
background简写：
background:#fff url(bg.gif) no-repeat fixed left top;
等效于：
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
顺序：background-color | background-image | background-repeat | background-attachment |
background-position
margin&padding简写：
margin:1px 0 2em -20px;
等效于：
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;
顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border 简写：
border:1px solid #000;
等效于：
border-width:1px;
border-style:solid;
border-color:#000;
border-top / border-right / border-bottom / border-left 简写：
border-top:1px solid #000;
等效于：
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
list-style 简写：
list-style:square outside url(bullet.gif);
等效于：
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
顺序：list-style-type | list-style-position | list-style-image
同时使用两个Class定义
一般我们只会给内容块指定一个Class，实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如 ：[p class="text side"]...[/p]
多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件 中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在 class="text side"这 里排列的顺序来进行覆盖）
CSS border的缺省值
通常我们定义border属性都会提供color,width,style这些属性。比如 border: 3px solid #000 。不过实 际上必须要提供的属性只有style。如果你只写 border: solid 的话，其他的属性自动使用缺省值。如果缺省 值可以满足你的要求，你完全可以省略这两项属性。
!important会被IE忽略
在css中，任何后面标有!important的语句将获得绝对的优先权，例如：
margin-top: 3.5em !important; margin-top: 2em
除IE以外所有浏览器中的顶部边界都是3.5em，而IE为2em，有时候这一点很有用，尤其在使用相对边界值时 ，可以显示出IE与其他浏览器的细微差别。
图片替换的技巧
举例来说，你想在每一页的顶部使用“Buy widgets”的标题，为了美观你使用了少见的字体那么你就得用 图片来显示了：
[h1][img src="widget-image.gif" alt="Buy widgets"][/h1]
这样当然没错，但是有证据显示搜索引擎 对真实文本的重视远超过alt文本，因此，我们得用另一种方法：[h1][span]Buy widgets[/span][/h1] ，那你 的漂亮字体怎么办呢？下面的css可以帮上忙：
h1{background: url(widget-image.gif) no-repeat;}
h1  span{position: absolute;left:-2000px;}
现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css，文本被定位于屏幕左侧-2000像素处。
CSS技巧
1、忘记定义尺寸的单位是普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确 的单位，比如：width:100px width:100em。 只有两个例外情况可以不定义单位：行高和0值。2、当在XHTML中 使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。3、 取消class和id前的元素限定。div#content { /* declarations */ }fieldset.details { /* declarations */ } ，可以写成#content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字 节。 4、通常padding的默认值为0，但是在不同的浏览器默认值可能不同，可以在样式表一开始就先定义所有 元素的margin和padding值都为0，象这样：* { margin:0; padding:0; }。5、一个标签可以同时定义多个 class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。.one {width:200px;background:#666;}.two{border:10px solid #F00;} ，在页面代码中，我们可以这样调用 [div class=one two][/div]，这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样 做是可以的，你可以尝试一下。6、字体变形命令。text-transform 命令很有用，它有3个值：text- transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成 全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网 页上也看不到。
在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这 个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。
首先，在导航代码中使用CSS类：
然后分别为每一页的Body指定一个id，和上面类同名。如。
然后设计CSS如下：
#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}
这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。 其他页也是如此。
关于css简写就先写到这里，大家有什么问题欢迎与我交流。
http://wyk.net.ru/blog/article.asp?id=628
css简写用法说明
作者:kai 日期:2007-01-09
闲话少说，书归正传。能够简写的css属性主要有以下几个：
font
程序代码
简写：
[code]
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于：
程序代码
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）
background
简写：
程序代码
background:#fff url(bg.gif) no-repeat fixed left top;
等效于：
程序代码
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
顺序：background-color | background-image | background-repeat | background-attachment | background-position
margin & padding
简写：
程序代码
margin:1px 0 2em -20px;
等效于：
程序代码
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;
顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border
简写：
程序代码
border:1px solid #000;
等效于：
程序代码
border-width:1px;
border-style:solid;
border-color:#000;
顺序：border-width | border-style | border-color
这三句也是简写，等于是把四边的样式合而为一了。（关于四边的问题，下文有详细说明）
border-top / border-right / border-bottom / border-left
简写：
程序代码
border-top:1px solid #000;
等效于：
程序代码
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
（和border一样）
list-style
简写：
程序代码
list-style:square outside url(bullet.gif);
等效于：
程序代码
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
顺序：list-style-type | list-style-position | list-style-image
关于四边
有很多样式都涉及到了四边的问题，这里统一说明。
四边的简写一般如下：
程序代码
padding:1px 2px 3px 4px;
等效于：
程序代码
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
顺序：top | right | bottom | left
不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”（顺时针方向）。
如果四边的值省略一个，只写三个:
程序代码
padding:1px 2px 3px;
则等效于：
程序代码
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
（省略的“左”值等于“右”）
如果四边的值省略两个：
程序代码
padding:1px 2px;
则等效于：
程序代码
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
（省略的“下”值等于“上”）
如果只有一个值：
程序代码
padding:1px;
则等效于：
程序代码
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
关于css简写就先写到这里，大家有什么问题欢迎与我交流。
扫一扫
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
