互聯網 - 大數據

CSS3媒體支持

在css3中允許我們在不改變內容的情況下，在樣式中選擇一種頁面的布局以精確的適應不同的設備，從而改善用戶體驗

可以利用meta標簽在頁面中指定瀏覽器在處理本頁面時按照多少像素的窗口寬度來進行，指定方法如下所示

<meta name="viewport" content="width=600px" />

CSS可以通過設置media來決定該樣式所適用的設備，如screen、tv、print、speech、handheld、all等

<style media="all">
<link media="print" href="xxx.css">

CSS3則可以基于更多的視覺屬性來設置，例如高、寬、高寬比、分辨率、設備的尺寸等等。

<style media="screen and (min-width:600px) and (max-width:900px)">

 具體來說，Media Queries的使用方法如下所示：

在Media Queries中可以指定的值與該值所代表的設備類型如下所示：

在Media Queries中具體設備特征的說明如下所示：

使用and關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式

使用多條語句來將同一樣式應用于不同的設備類型和設備特性中

可以在表達式中加not關鍵字或only關鍵字，not關鍵字表示對后面的表達式執行取反操作

only關鍵字的作用是讓那些不支持Media Queries 但是能夠讀取Media Type的設備的瀏覽器將表達式的樣式隱藏起來

給文字添加陰影

讓文本自動換行

對于西方文字來說，瀏覽器會在半角空格或連字符的地方自動換行，而不會在單詞的當中突然換行。當中文當中含有標點符號的時候，瀏覽器總是不可能讓標點符號位于一行文字的行首。

在css3中可以使用word-break屬性來決定自動換行的處理方法

讓長單詞與URL地址自動換行

        div {
            word-wrap:break-word;
        }

使用服務器端字體

webfonts是一項非常早的CSS技術，通過下載字體文件，可以讓頁面渲染特定的字體。

使用@font-face屬性顯示客戶端本地的字體時，需要將字體文件路徑的URL屬性值修改為local()形式的屬性值，并且在local后面的括號中寫入使用的字體

在format屬性值中聲明字體文件的格式（使用TrueType文件格式時將format屬性值設定為truetype，使用OpenType格式時將format屬性值設定為opentype。TrueType的文件擴展名為ttf，OpenType格式的文件擴展名為otf  在IE中使用服務器端字體時，只能使用微軟自帶的Embedded OpenType字體文件，文件擴展名為eot）

英文字體不錯，通常在100k以下。但中文字體太大，往往都在3M~5M，甚至更大。TTF/OTF字體非常好找，EOT比較難下載。

在線轉換： http://www.fontsquirrel.com/

對于中文字體，如果僅僅只是需要幾個固定的字（例如導航），可以自行裁剪字庫。類似的小工具很多，例如FontCreator等

在@font-face屬性中，可以指定的屬性值如下所示：

這里說一下font-size-adjust屬性的使用，其實使用方法很簡單，但卻需要使用每個字體自帶的一個aspect值（比例值）

引用《HTML5與css3權威指南》中介紹的一種瀏覽器對于aspect值的計算方法

CSS3盒相關樣式

1、width和height屬性只能使用在block類型的元素上，對inline類型的元素根據不起作用

2、默認情況下table元素屬性block類型的，所以不能與其它文字處于同一行中，但是如果將table元素修改為inline-table類型就可以讓表格與其它文字處于同一行中

3、將元素指定為run-in或compact類型時，如果元素后面還有block類型的元素，run-in類型的元素將被包含在block類型的元素內部，而compact類型的元素將被放置在block類型的元素左邊

4、css3中所有與表格相關的元素及其所屬類型如下所示

各瀏覽器對于各種盒類型的支持情況

超出部分以顯示省略號

        div {
            white-space:nowrap;/*使得盒右端的內容不能換行顯示，這樣一來盒中的內容就在水平方向上溢出了*/
            overflow:hidden;/*超出div元素部分的文字將會被隱藏起來*/
            text-overflow:ellipsis;/*在div元素的末尾出現一個省略號*/
        }

盒相關的屬性box-shadow、box-sizing

box-shadow使用方法跟text-shadow是一模一樣的。

box-sizing:可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內部的補白區域，以及邊框的寬度與高度

使用box-sizing屬性的目的是控制元素的總寬度，如果不使用該屬性，樣式中默認使用的是content-box屬性值，它只對內容的寬度做一個指定，卻沒有對元素的總寬度進行指定，有些場合下利用border-box屬性值會使得頁面布局更加方便

CSS3中其它一些重要細節問題

1）可能認為設置顏色值的alpha通道和opacity沒有特別大的區別，事實上，需要同時對背景色和文字顏色都使用alpha通道才能達到使用opacity的效果

opacity : 0.6;  /* 標準瀏覽器和IE9 */
filter : alpha(opacity=0.6);  /* IE6 7 8 */

color : rgba(255,100,20,0.6);
background: hsla(10,0,50%,0.4);

2）如果將顏色值指定為transparent，則會將背景、文字或邊框等的顏色設定為完全透明，相當于使用了值為0的alpha通道（在css3中可以在一切指定顏色值的屬性中指定transparent值）

3）大家都知道css2中用outline屬性來使得元素周圍繪制一條輪廓線，具體使用方法如下所示

在默認情況下，對帶有邊框的元素來說，使用outline屬性將緊貼著邊框外圍繪制一條輪廓線，如果我們想讓輪廓線向外偏離幾個像素呢，css3新增的outline-offset屬性就起這個效果，使用很簡單，就是為其指定一個帶像素單位的整數值即可，如果指定為正整數，則向外偏移，如果指定為負整數，則向內偏移

4）css3的resize發展允許用戶通過拖放的方式來修改元素的尺寸（主要用于使用overflow屬性的任何容器元素中）

可以為resize屬性指定的值分為如下幾種

5）在css3中，可以利用initial屬性值取消對元素的樣式指定，但是在個別情況下，對元素使用initial屬性值后的顯示結果并不等于將該元素的樣式設定直接刪除后的結果（因為追加了initial屬性值的樣式設定后，元素的字號和字體粗細均使用css中對字號和字體粗細屬性設定的默認值，并不考慮瀏覽器對元素追加了什么樣式）