古语有云：不以规矩，不成方圆。不管是国还是家还是...都得有规矩加以约束。同样，在我们程序猿的代码中也有一定的规矩——W3C标准，但是我今天不会讲那么高深的道理，我只想说说，我近些日子在开发中所总结出来的CSS一些书写规范：
一、善用css缩写规则
1. 边距（4边）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px（省略 左等于右）
1px 2px (省略 上等于下)
1px（四边都相同）
2. 缩写（border）特定样式：
border:1px solid #ffffff;/*粗细 样式 颜色*/
border-width:0 1px 2px 3px;/*上、右、下、左*/3. 关于文字的缩写规则：
font-style:italic; /*斜体形式*/
font-variant:small-caps/normal; /*变体样式：小型大写字母/正常*/
font-weight:bold;/*粗体*/
font-size:12px;/*字体大小*/
line-height:1.2em(120%)/1.5em(150%);/*行高*/
font-family:arrial,sans-serif,verdana;/*字体样式*/
/*缩写成：*/
font:italic small-caps bold 12px/1.5emarrial,sans-serif;
/*注意：Font-size和Line-height用斜杠组合在一起不能分开写。*/4. 关于背景图片的：
background:#FFF url(log.gif) no-repeat fixed top/cover;
/*颜色 背景图 是否平铺 固定于可视区 上对齐/铺满整个盒子*/5. 关于列表：
list-style-type:square/none;
list-style-position:inside;
list-style-image:url(filename.gif);
/*缩写成：*/
list-style:none inside url(filename.gif);二、运用4种方法来引入CSS样式
<link rel=”stylesheet” type=”text/css”href=”a.css”>
/*rel 关系 type 数据类型 href 路径*/
/*部分浏览器支持候选样式,关键字:alternate:*/
<link rel=”stylesheet” type=”text/css”href=”a.css”>
<link rel=”alternate stylesheet”type=”text/css” href=”b.css”>
<link rel=”alternate stylesheet”type=”text/css” href=”c.css”>2.内部样式块
<style rel="stylesheet" type="text/css">
h1{
color:red;
}
</style>3.@import url{a.css
注意:此指令必须放在<style>容器中,并且在所有样式之前
建议放在一个html注释中,<!– –>浏览器会不显示注释内的内容,而import等css代码能正常工作
4.内联样式
<p style=”color:red;”>使用情景:
行内样式=>本地调试
内部样式=>单页面样式
外联样式=>企业大型项目 便于后期维护
三、选择器
选择器是css的一个基本概念，基本规则如下：
1.规则结构：h1 {color:red;}选择器 {属性:值;}
这是元素选择器，基本可以包括所有html的元素
属性值可以包括多个元素，如：border：1px solid red;
2.常用语法
2-1.分组：选择器和声明都可以分组:
h1,h2,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割
2-2类选择器,即通过class=”stylename”应用的声明
定义:.stylename{color:red;}
注意:在html中可以使用多类选择:如class=”cn1 cn2 cn3″
3.ID选择器,即与id属性对应的样式
定义:#a{color:red;} ->这个定义对用id=”a”的元素
4.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法
1)父子结构,跟文档结构图对应(后代/子代选择器)
如p span{border:1px solidred;}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.
一些特殊应用(IE7支持):
(1) p > span{},匹配所有p下所有的span
(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签
2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)
语法:img[alt]{border:1pxsolid;}
表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,
也可以与具体值对应:如:img[alt=”摄影”]{};
属性选择器中的高级应用,特殊匹配:
(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应
(2)[class^=”a”],以a开头的
(3)[class$=”a”],以a结束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a(a-)开头的
(6)[class="a"] 选择所有class属性等于'a'的某元素
3)伪类和伪元素
日常使用中主要是<a>标签的几个伪类:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红
以上语法组合使用,就能实现定位准确、简单间接的样式了
注：尽量使用子选择器减少id和class的定义
四、选择器优先级:
初级:ID选择器>class选择器>元素选择器>通配符选择器(*)
注:优先级相同时，会按代码执行顺序进行样式覆盖
后代选择器扩展优先级:
1.当ID选择器个数不相等，ID选择器个数多的优先级较高
2.当ID选择器个数相等时，就比Class选择器个数，个数多的优先级较高
3.当Class选择器个数相等时，就比元素选择器，个数多的优先级较高
选择器基本原则:
精准控制元素=>越精准的优先级越高=>精准度一样时，遵循上面的规则
注:!important会提升优先级，但是不建议使用
样式优先级:
行内样式>内部样式=外联样式(也就是说，内部和外联样式的优先级遵循选择器优先级)
五、CSS的命名规范
1. id的命名
(1)页面结构
容器: container 页头：header
内容：content/container 页面主体：main
页尾：footer 导航：nav
侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
2.导航
导航：nav 主导航：mainnav
子导航：subnav 顶导航：topnav
边导航：sidebar 左导航：leftsidebar
右导航：rightsidebar 菜单：menu
子菜单：submenu 标题: title
摘要: summary
3.功能
标志：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
2. class的命名
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
一律小写;尽量用英文;不加中杠和下划线;2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:mainContent）;尽量不缩写，除非一看就明白的单词.
3. 主要的站点css文件
主要的 master.css 模块 module.css
基本共用 base.css（root.css） 布局，版面 layout.css
主题 themes.css 专栏 columns.css
文字 font.css 表单 forms.css
补丁 mend.css 打印 print.css
六、如果文字过长,则将过长的部分变成省略号显示
<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap”>七、并不是所有样式都要简写
当样式表前定义了如p{padding:1px2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{paddingtop:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义
了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。(此种方法对后期修改样式很重要)
八、几个常用到的CSS细节处理上的样式
1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;
2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行，不过只能
处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
万能强制换行：white-space:normal;word-break:break-all
禁止换行：white-space:nowrap
强制换行：word-wrap:break-word; word-break: normal;
.AutoNewline{
/*word-break: break-all; 方法一必须*/
/*word-wrap:break-word;overflow:hidden; 方法二*/
/*word-wrap:break-word; word-break: normal;方法三 */
word-wrap:break-word; word-break:break-all;
}
.NoNewline{
/*word-break: keep-all; 方法一必须*/
white-space:nowrap;
}3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
4）<acronym title=”输入要提示的文字”style=”cursor:help;”>文字</acronym>
用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：
.halfalpha {
background-color:#000000;filter:Alpha(Opacity=50)；
}
/*在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；*/6）FLASH透明：
选中swf,打开原代码窗口，在</object>前输入<paramname=”wmode” value=”transparent”>
以上是针对IE的代码。针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.pictures img {
filter: alpha(opacity=45);
}
.pictures a:hover img {
filter: alpha(opacity=90);
}8）层在浏览器中居中对齐问题
body {
text-align: center;
}
#content {
text-align: left;
width: 700px;
margin: 0 auto;
}9)单行内容在层中垂直对齐问题
#content{
height:19px;
line-height:19px;
}/*缺点是要内容不要换行。*/10）层在浏览器中垂直居中对齐问题
缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下
其实解决的思路是这样的：
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid red;
}除了上述思路，还有其他方法：
/*1.固定盒子宽高，将margin的值通过计算写死*/
/*2.定位一：*/
div{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}/*(不支持IE7以下)*/
/*3.vertical-align*/
div{
margin:auto;
text-align:center;
line-height:XXpx;
}
div > p{
vertical-align:middle;
}
/*4.flex弹性盒模型:*/
div{
display:flex;
justify-content:center;
align-items:center;
}
/*5.box弹性盒模型:*/
div{
display:-webkit-box;
-webkit-box-pack:center;
-weibkit-box-algin:center;
}
/*6.table布局居中*/
/*7.font-size居中*/
div{
text-algin:center;
}
div > p{
display:inline-block;
vertical-algin:middle;/*(IE6,IE7)*/
}
/*8.定位2：*/
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} /* 50%为自身尺寸的一半 */11）CSS控制图片自适应大小
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}九、使用float属性的元素要注意的问题
1. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
2. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
3. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。
4. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
5. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
十、浏览器的兼容性问题（针对FF/IE6/IE7）
1.CSS hack:区分IE6，IE7，firefox，区别FF，IE7，IE6：
div{
background:green !important;
background:orange;
*background:blue;
}
/*IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
另外再补充一个，下划线”_“,IE6支持下划线，IE7和firefox均不支持下划线。于是大家还可以这样来区分firefox，IE7，IE6*/注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
2.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法
div{
margin:30px!important;
margin:28px;
}
/*注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：*/
div{
maring:30px;
margin:28px;
}
/*重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;*/3.条件性注释来选择不同的浏览器（比CSS hack简洁）
<!–[if IE 6]->
<link rel=”stylesheet” type=”text/css”href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>4.区分IE8
.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
/*IE8兼容IE7
[metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/]
在[title]的上面,注意:把[]换成<>*/