css的书写规范+常用

不能用'_'下划线来命名css选择器

格式化：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    margin:0;
    padding:0;
}

a{
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

em{font-style:normal}

b{font-weight:normal}

strong{font-weight:normal}

font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;
font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;
font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;
font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em

font 属性的值应按以下次序书写(各个属性之间用空格隔开)：

顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

背景
 background-color：#999999； //元素的背景色
 background-image : url("path/bgFile.gif"); //设置背景图像
 background-repeat : repeat-x | repeat-y | repeat | no-repeat; //设置重复方式
 background-attachment : fixed | scroll; //设置背景图片的固定方式
 background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%];  //设置背景的左上角位置,坐标可以是以百分比或固定单位
 background  可以用这个属性把前面几个综合起来进行简写,

background 各个值的次序依次如下：

background-color | background-image  | background-repeat | background-attachment | background-position

CSS书写顺序
　　1.位置属性(position, top, right, z-index, display, float等)
　　2.大小(width, height, padding, margin)
　　3.文字系列(font, line-height, letter-spacing, color- text-align等)
　　4.背景(background, border等)
　　5.其他(animation, transition等)
简写属性，去掉小数点前的0，颜色代码缩写，不使用_ ,一律小写;

作者：词晖
链接：http://www.zhihu.com/question/19586885/answer/48933504
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

CSS命名规范(规则)常用的CSS命名规则

　　头：header

　　内容：content/container

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

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

　　左右中：left right center

　　登录条：loginbar

　　标志：logo

　　广告：banner

　　页面主体：main

　　热点：hot

　　新闻：news

　　下载：download

　　子导航：subnav

　　菜单：menu

　　子菜单：submenu

　　搜索：search

　　友情链接：friendlink

　　页脚：footer

　　版权：copyright

　　滚动：scroll

　　内容：content

　　标签：tags

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　栏目标题：title

　　加入：joinus

　　指南：guide

　　服务：service

　　注册：regsiter

　　状态：status

　　投票：vote

　　合作伙伴：partner

注释的写法:

　　/* Header */

　　内容区

　　/* End Header */

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

　　注册：register

　　搜索：search

　　功能区：shop

　　标题：title

　　加入：joinus

　　状态：status

　　按钮：btn

　　滚动：scroll

　　标籤页：tab

　　文章列表：list

　　提示信息：msg

　　当前的: current

　　小技巧：tips

　　图标: icon

　　注释：note

　　指南：guild

　　服务：service

　　热点：hot

　　新闻：news

　　下载：download

　　投票：vote

　　合作伙伴：partner

　　友情链接：link

　　版权：copyright

注意事项::

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中槓和下划线;

　　4.尽量不缩写，除非一看就明白的单词。

CSS样式表文件命名

　　主要的 master.css

　　模块 module.css

　　基本共用 base.css

　　布局、版面 layout.css

　　主题 themes.css

　　专栏 columns.css

　　文字 font.css

　　表单 forms.css

　　补丁 mend.css

　　打印 print.css

<link rel="stylesheet" type="text/css" href="css">

<script type="text/javascript" src="js"></script>

火狐浏览器 ctrl+shift+m开启3D；ctrl+shift+k控制台

类选择器 class="fa fa-*"　　　　.fa.fa-*

webstorm:

ctrl+shift+r：批量替换

inline-block间距问题：

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

多个input之间空格
1 浮动
2 <input type="text" name="" id=""><input type="text" name="" id=""> 写一行

多个img 标签下多余空白的解决方法

1、将图片转换为块级对象 

即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 

2、设置图片的垂直对齐方式 

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。 

3、设置父对象的文字大小为0px 

即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。 

4、改变父对象的属性 

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。 

5、设置图片的浮动属性 

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。 

6、取消图片标签和其父对象的最后一个结束标签之间的空格 

这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况，具体解决方案的还得各位见招拆招了