《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;
}

示例：

span.shadow1 { text-shadow : 0 -2px 3px #fff, 0 -4px 3px #aaa, 0 -6px 6px #666, 0 -8px 9px #000; } span.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); } span.shadow3 { background-color : #565656; color : #333; text-shadow : 0 1px 0 #777, 0 -1px 0 #000; } .show { background-color : #fafafa; display : block; font-weight : bold; font-size : 60px; padding : 0.2em; }

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 插件](http://www.zhangxinxu.com/wordpress/2010/01/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》
前輩博文若干