整合实用的CSS样式代码片段

1.基础样式（便于搜索引擎）

CSS

background: url(../images/journalism.gif) left 0px no-repeat;
transparent
color: #FFF;   白色字体 选项卡变色
font-weight: bold;加粗
cursor:pointer; 把鼠标放上会变成小手
border-radius: 10px;边框线变成圆角
border-bottom-style:dotted; 虚线
box-shadow: -2px 0px 35px 10px #DBDBDB;阴影
onFocus="this.value='';鼠标点击 默认值消失
white-space:pre-wrap;word-wrap : break-word ; 自动换行
resize:none; 删除多行文本框拖拽
background-position:left top 50%;背景图靠左 垂直居中
width: 245px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;设置文本缩略

2.常用浏览器的兼容写法

CSS

background-color: #CC00FF;      火狐
background-color: #FF0000\9;    ie8
*background-color: #0066FF;    ie7 
_background-color: #009933;   ie6

3.老版本IE去除杂项的方法

Markup

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

4.正则表达式去除所有href标签内的链接（仿站神器）

Markup

href=\"\S*\"

5.自适应屏幕各分辨率的适配写法

CSS

从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

6.自适应手机头部标签

Markup

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

7.调用本地自体

CSS

@font-face {
  font-family: apple;
  src: url('../fonts/apple.ttf');
}
font-family: "apple"

8.去除浏览器自带的样式

CSS

-webkit-appearance: none;