不能用'_'下划线来命名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的一种情况，具体解决方案的还得各位见招拆招了