正文
2.用css的expression判断表达式
input{ background-color:expression(this.type=="text"?'#FFC':'');}
3.用javascript脚本实现(觉得没必要，省略...)
css3设置字体
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
网页字体设置
font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); /* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}
参考地址：《css学习笔记 - 网页中导入特殊字体@font-face属性详解》
css强制性换行
div{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
}
CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)
:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”
css3实现背景颜色渐变
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色
IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0 代表竖向渐变 1 代表横向渐变
css3的RGB颜色和HSL颜色， IE8不识别rgba写法
其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。
color:rgb(254,2,8);
其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);
如果需要设置透明背景 则可以用到他们：
background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，但IE8低版本浏览器不支持。
初始化em，u的斜体
em,u{font-style: normal;}
媒体查询功能
一般写法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}
应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：
@media (max-width: 960px){
body{
background: #000;
}
}
其中css2的媒体查询：
我们想知道移动设备是不是纵向放置的显示屏，可以这样写：
我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：
但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。
下面的写法是实现尺寸等于480px：
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
/*自己添加的样式*/
}
其中对于-webkit-min-device-pixel-ratio作如下解释：
-webkit-min-device-pixel-ratio为1.0
1. 所有非Retina的Mac
2. 所有非Retina的iOS设备
3. Acer Iconia A500
4. Samsung Galaxy Tab 10.1
5. Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3
-
Google Nexus 7
-webkit-min-device-pixel-ratio为1.5
1. Google Nexus S
2. Samsung Galaxy S II
3. HTC Desire
4. HTC Desire HD
5. HTC Incredible S
6. HTC Velocity
7. HTC Sensation
-webkit-min-device-pixel-ratio为2.0
1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 所有Retina displays 的MAC
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. HTC One X
样式实现三角形
div{
position:absolute;
left:50%;
bottom:0;
margin-left:-10px;
width:0;
height:0;
border-width:10px;
border-style:solid dashed dashed dashed;
border-color:transparent transparent #71151c transparent;
}
css3水平垂直居中
div{
display: box;
display: -webkit-box;
display: -moz-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)
-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。
现在规范中支持的效果有：
- grayscale 灰度 值为0-1之间的小数
- sepia 褐色 值为0-1之间的小数
- saturate 饱和度 值为num
- hue-rotate 色相旋转 值为angle
- invert 反色 值为0-1之间的小数
- opacity 透明度 值为0-1之间的小数
- brightness 亮度 值为0-1之间的小数
- contrast 对比度 值为num
- blur 模糊 值为length
- drop-shadow 阴影
用法是标准的CSS写法，如：
-webkit-filter: blur(2px);
使用方法：（配合动画使用）
.jaguar-con-show img.jaguar-con-imglast{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.jaguar-con-show img.jaguar-con-imglast{
-webkit-filter: blur(3px) brightness(.6);
-moz-filter: blur(3px) brightness(.6);
