《The Book of CSS3》学习笔记
一.浏览器前缀
E{
-moz-name : value; /* Firefox */
-ms-name : value; /* IE */
-o-name : value; /* Opera */
-webkit-name : value; /* WebKit */
name : value; /* 适应未来标准方式 */
}
二.媒体查询
1.使用媒体查询的3种方式
-
head部分
<link href="css.css" rel="stylesheet" media="mediaType and (expr)" />
-
css文件首行
@import url("css.css") mediaType and (expr); -
样式规则内部
@media mediaType and (expr) { /* styles */ }
2.mediaType的取值
只有all（没有意义，不如不加）、screen和print是浏览器厂商广泛支持的，可选值还有：
-
braille：盲文
-
embossed：盲文打印
-
handheld：手持设备，并不好用
-
projection：投影设备
-
speech：演讲
-
tty：显示等宽字体的设备，比如电传打字机
-
tv：电视
所以算上前三个广泛支持的，一共有10个可选值
3.expr的取值
最常用的是min-[device-]width和max-[device-]width，例如：
@media screen and (min-width : 800px) {
/* 当浏览器窗口宽度>=800px时应用该样式 */
}
/*
* 一般分界值：
* 480px以下 ~ 手机浏览器
* 800px以上 ~ 桌面浏览器
* 480px到800px ~ 平板上的浏览器
*/
此外还有orientation方向、device-aspect-radio宽高比、device-pixel-radio像素比等等其它属性，更多信息请查看前端观察：media type与media query
4.构造复杂表达式
用and和only可以构造复杂表达式
-
(expr1) and (expr2)：与
-
only (expr)：用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表，更多信息请查看博客园：Media Queries详解
-
mediaType1 (), mediaType2 ()：或
5.支持性
[IE9+]支持CSS3标准，但对于非标准的属性，比如device-pixel-ratio，IE11都只是部分支持，更多支持性差异请查看Can I use
三.使用网络字体
最安全的字体引入方式：
@font-face {
font-family : "font";
src : url("font.eot");
src : local(" "), /* 注意引号包裹了一个空格，也可以是其它单个字符 */
url("font.woff") format("woff"),
url("font.ttf") format("truetype"),
url("font.svg#font") format("svg");
}
还有类似的方式，请查看Fontspring
有好用的@font-face生成器，可以转字体格式并生成CSS代码，请查看Fontsquirrel
四.文字效果
1.立体效果
主要用text-shadow属性实现，[IE10+]支持，语法如下：
text-shadow : xOffset yOffset blur-radius color;
具体代码：
.shadow1 {
text-shadow :
0 -2px 3px #fff,
0 -4px 3px #aaa,
0 -6px 6px #666,
0 -8px 9px #000;
}
.shadow2 {
color : #fff;
text-shadow :
0 2px rgba(0, 0, 0, 0.4),
0 4px rgba(0, 0, 0, 0.4),
0 6px rgba(0, 0, 0, 0.4),
0 8px 0 rgba(0, 0, 0, 0.4);
}
.shadow3 {
background-color : #565656;
color : #333;
text-shadow : 0 1px 0 #777, 0 -1px 0 #000;
}
示例：
shadow1：黯羽轻扬 shadow2：黯羽轻扬 shadow3：黯羽轻扬
P.S.超大号的字体立体效果比较好，小字阴影效果看不清
2.控制文字溢出
text-overflow : clip/ellipsis ~ 截断/省略号（...），例如：
p {
/* 要想在一行显示省略号，下面3个属性缺一不可 */
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden;
}
支持性：[IE8+]支持
3.控制长单词自动换行
word-wrap : normal/break-word ~ 不换行，会顶破容器/自动换行
支持性：[IE6+]都支持，当然，只对英文单词有效，中文无效
五.边框样式
-
border-radius：[IE9+]支持
-
border-image：效果很诱人，[IE11+]支持，虽然可以用JQ插件勉强支持，但效果也很勉强，更多信息请查看张鑫旭博客：CSS3 border-image详解、应用及jQuery插件
-
box-shadow：[IE9+]支持，具体用法请查看W3School：CSS3 box-shadow 属性
六.透明度
-
opacity : 0.0 – 1.0; [IE9+]支持，IE8部分支持
-
color : rgba(r, g, b, a); [IE9+]支持
七.渐变
线性渐变/放射渐变，[IE10+]支持，具体用法请查看CSS-Tricks
八.变换、过渡、动画
有几个很相似的属性，区别如下：
-
transform：变换。2D/3D变换、平移、旋转、倾斜、缩放
-
translate：平移。2D变换的子属性
-
transition：过渡。由事件触发，如hover、active等等
-
animation：动画。定义keyframes，再用animation应用动画
用这些东西可以实现常见的酷炫效果，例如：
-
过渡可以让简单动画平滑进行，比如鼠标悬停时链接文本“飘”向右边，div宽度缓慢增大至指定值等等
-
3D变换可以显示背面，比如鼠标进入，出现图片翻转效果
-
变换可以实现绶带效果，比如常见的右上角斜向fork me on githup，具体实现请查看博客园：给你的博客加上“Fork me on Github”彩带
九.flex布局
有一篇非常强大的完整教程：前端开发博客：CSS3弹性盒模型flexbox完整版教程
十.在线资源
-
Can I Use：[IE8+]以及其它浏览器对CSS/HTML5属性支持性
-
Modernizr：检测浏览器对HTML5和CSS3特性支持的JS库，优雅降级的不二选择
-
代码生成工具：
-
CSS3Please：自动填充浏览器前缀，还可以在线测试CSS3效果
-
CSS Gradient Generator：快速生成渐变
-
-
免费字体：Fontsquirrel：大量可以免费下载的英文字体
-
CSS3教程/文档：CSS3 Info，国外论坛，文章更新得比较慢，好像有点没落了
-
CSS3新技术：MDN，源码免登录下载
参考资料
-
《THE BOOK OF CSS3》
-
前辈博文若干
<原创>
