【WEB前端】CSS书写规范

　　古语有云：不以规矩，不成方圆。不管是国还是家还是...都得有规矩加以约束。同样，在我们程序猿的代码中也有一定的规矩——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;
/*颜色   背景图    是否平铺   固定于可视区   上对齐/铺满整个盒子*/

6. 关于列表：

list-style-type:square/none;
list-style-position:inside;
list-style-image:url(filename.gif);
/*缩写成：*/
list-style:none inside url(filename.gif);

二、运用4种方法来引入CSS样式

1.link

<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:;
    top:;
    bottom:;
    right:;
    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]的上面,注意:把[]换成<>*/