《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种方式

  1. head部分

    <link href="css.css" rel="stylesheet" media="mediaType and (expr)" />
    
  2. css文件首行

    @import url("css.css") mediaType and (expr);
    
  3. 样式规则内部

    @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+]都支持,当然,只对英文单词有效,中文无效

五.边框样式

  1. border-radius:[IE9+]支持

  2. border-image:效果很诱人,[IE11+]支持,虽然可以用JQ插件勉强支持,但效果也很勉强,更多信息请查看张鑫旭博客:CSS3 border-image详解、应用及jQuery插件

  3. box-shadow:[IE9+]支持,具体用法请查看W3School:CSS3 box-shadow 属性

六.透明度

  1. opacity : 0.0 – 1.0; [IE9+]支持,IE8部分支持

  2. color : rgba(r, g, b, a); [IE9+]支持

七.渐变

线性渐变/放射渐变,[IE10+]支持,具体用法请查看CSS-Tricks

八.变换、过渡、动画

有几个很相似的属性,区别如下:

  • transform:变换。2D/3D变换、平移、旋转、倾斜、缩放

  • translate:平移。2D变换的子属性

  • transition:过渡。由事件触发,如hover、active等等

  • animation:动画。定义keyframes,再用animation应用动画

用这些东西可以实现常见的酷炫效果,例如:

  1. 过渡可以让简单动画平滑进行,比如鼠标悬停时链接文本“飘”向右边,div宽度缓慢增大至指定值等等

  2. 3D变换可以显示背面,比如鼠标进入,出现图片翻转效果

  3. 变换可以实现绶带效果,比如常见的右上角斜向fork me on githup,具体实现请查看博客园:给你的博客加上“Fork me on Github”彩带

九.flex布局

有一篇非常强大的完整教程:前端开发博客:CSS3弹性盒模型flexbox完整版教程

十.在线资源

  • Can I Use:[IE8+]以及其它浏览器对CSS/HTML5属性支持性

  • Modernizr:检测浏览器对HTML5和CSS3特性支持的JS库,优雅降级的不二选择

  • 代码生成工具:

  • 免费字体:Fontsquirrel:大量可以免费下载的英文字体

  • CSS3教程/文档:CSS3 Info,国外论坛,文章更新得比较慢,好像有点没落了

  • CSS3新技术:MDN,源码免登录下载

参考资料

  • 《THE BOOK OF CSS3》

  • 前辈博文若干

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

code