以下是几种常用前缀

-webkit-
-moz-
-ms-
-o-
-khtml-（现在基本都没有用了，被-webkit-取代）
举例来说，一个CSS3圆角的代码是：

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
CSS3前缀+标准代码的顺序

既然CSS3代码中（暂时）需要写上这么多前缀，那么他们的顺序是如何的呢？

结论:是先写私有的CSS3属性，再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

下面的例子获取div中 style 属性的内容。

<script type="text/javascript">
$(function(){ 
    $(".show").each(function(i){
        var v = $(this).attr("style");
        alert(v);
    });
});
</script>
<div class="show" style=" font-size:14px; color:#03C;">test1</div>
<div class="show" style=" font-size:16px; color:#009;">test2</div>
<div class="show" style=" font-size:18px; color:#000;">test3</div>

例如：当前根元素html的font-size为100%，那么根据下边的参照表可以看出，其px值为16，那么我们如果要转换一个块元素的px为rem，就可以有以下写法

注：1000为需要转换元素块的宽度

1000除以16值为62.5rem

http://blog.csdn.net/xudanna/article/details/16946293

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

/* 不推荐: 无意义 */ #yee-1901 {}
/* 不推荐: 与样式相关 */ .button-green {}.clear {}
/* 推荐: 特殊性 */ #gallery {}#login {}.video {}
/* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

/* 不推荐 */ #navigation {}.atr {}
/* 推荐 */ #nav {}.author {}
类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

/* 不推荐 */ul#example {}div.error {}
/* 推荐 */#example {}.error {}

命名时需要注意的点：

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
不允许通过1、2、3等序号进行命名
避免class与id重名
id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
class用于标识某一个类型的对象，命名必须言简意赅。
尽可能提高代码模块的复用，样式尽量用组合的方式
规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。

1、常用id的命名：

(1) 页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2) 导航

导航：nav
主导航：mainbav
子导航：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 { }

推荐使用下面的：

语法：
text-overflow ： clip | ellipsis

取值：
clip：
不显示省略标记（…），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（…）

说明：
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

Firefox 浏览器

@-moz-document url-prefix() {
.selector {
property: value;
}
}

支持所有Gecko内核的浏览器 (包括Firefox)

*>.selector { property: value; }

Webkit 内核浏览器

@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector {
property: value;
}
}

Opera 浏览器

html:first-child>b\ody Selector {property:value;}

IE 浏览器

IE 浏览器针对不同的版本有不同个Hack方式。

IE 9

:root Selector {property: value\9;}

IE 9-

Selector {property: value\9;}

IE 8

Selector {property: value/;}

或：
@media \0screen {
Selector {property: value;}
}

IE 8+

Selector {property: value\0;}

IE 7

*+html Selector{property:value;}

或：
*:first-child+html Selector {property:value;}

IE 7-

Selector {*property: value;}

IE6

Selector {
_property: value;
}

或者：
*html Selector {
property: value;
}

http://developer.51cto.com/art/201506/479564.htm

img { max-width: 100%;} /*针对图片*/
object { max-width: 100%;} /*针对视频*/
img, object { max-width: 100%;} /*针对图片和视频*/

可以通过本站看一下图片缩放效果。如：http://zhoumo123.cn/category/web

例如，下面3个样式分别定义段落字体颜色为黑色，超链接显示为下划线，一级标题显示为粗体效果。

p{ color:black;}
a{ text-decoration:underline;}
h1{ font-weight:bold;}

使用标签选择器时，应该考虑该类型选择器的优缺点。

优点：能够快速为页面中同类型的标签统一样式。

缺点：不能设计差异化样式，有时候会相互干扰。

例如，如果在网页样式表中定义如下样式，把所有div元素对象都定义为宽度为774px。

div{ width:774px;}

那么当用div进行布局时，就需要重新为页面中每个div对象定义宽度，因为在页而中并不是每个div元素对象的宽度都显示为774px，否则将是件非常麻烦的事情。

那么在什么情况下选用标签选择器呢？

如果希望为标签定义默认样式时，可以使用标签选择器。例如，使用ul元素时，它会自动缩进，并自带列表符号，有时这种样式会给列表布局带来麻烦，此时可以选择ul元素作为标签选择器，并清除预定义样式。

ul{
margin:0px;
list-style:none;
}

如果希望统一文档中标签的样式，也可以使用标签选择器。例如，在下而样式表片段中通过body标签选择器统一文档字体大小、行高和字体，通过table标签选择器统一表格的字体样式，通过a标签选择器清除所有超链接的下划线，通过img标签选择器清除网页图像的边框，当图像嵌入a元素中，即作为超链接对象时会出现边框，通过input标签选择器统一输入表单的边框为浅灰色的实线。

对于div、span等通用结构元素，不建议使用标签选择器，因为通用结构元素的应用范围广泛，使用标签选择器会相互干扰。