HTML5 移動開發（CSS3設計移動頁面樣式）

標籤：style   blog   http   color   使用   strong   2014   ar   

1.如何建立CSS樣式表 2.CSS3的卓越特性 3.基於裝置屬性改變樣式的媒體查詢 4.如何使用屬性改變元標籤建立更美觀移動頁面  層疊樣式表是移動WEB開發中的一個重要組成部分，本次分享將學到如何編寫CSS並用它為移動頁面定製樣式，其中包括媒體查詢為特定裝置定製樣式表。此外還將瞭解一些影響行動裝置內容顯示的元標籤  建立好的樣式，可通過三種方法附加到樣式表裡1.內聯到標籤中   【建議在測試的時候這麼做】2.內嵌於HTML的開頭3.放在一個獨立文檔中作為樣式表  【推薦的做法】*能夠提高網站載入速度，載入樣式表後，將其儲存在瀏覽器緩衝中，開啟同一個網站中的其它頁面時不需要重新載入。   使用font屬性的文法為：font: font-style font-variant font-weight font-size/line-height font-family; 為了確保WEB頁面外觀與設想一致，可以使用順序的字型列表，也稱為字型堆棧 在為Web頁面配置之前，需要瞭解Web頁面的行程。文檔中的每一個元素的預設圖案都是方形，即使這個形狀不顯示出來也是如此。最簡單的方法就是使用border屬性為元素加上一個邊框，文法如下：border: 1px solid red; 為盒子模型： 中心為內容地區（width）補白（padding）邊框（border）邊距（margin）   CSS3帶來了以下卓越的新特性：多欄版面配置和網格布局圓角邊框圖形文本及盒陰影非瀏覽器裝置山固定滾動溢出字型及排版修改動畫三維變換  瀏覽器並不直接支援CSS3樣式屬性。大部分Web瀏覽器的做法是在使用新屬性時，需要在屬性前加上相應的關鍵字，以表明它是瀏覽器專用屬性。如下：-moz   Firefox 和 Mozlla-ms     Internet Explorer-wap   WAP 和 Opera-o        Opera-webkit    Chrom 和 Safari在添加了相關瀏覽器專用副檔名後，才可以使用許多CSS3新屬性。 下面就列舉幾個為例： 圓角: css3中的圓角是通過一個名為border-radius的屬性來實現的。幾乎每一個開發人員都在期待CSS圓角，以為人們已經厭倦CSS2 的方塊表現了。border-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radius當然為了相容還要考慮FF與Webkit的副檔名 盒陰影及文字陰影可以使用CSS3屬性text-shadow 和 box-shadow為文字與盒添加陰影text-shadow:horizontal-offset vertical-offset blur-radius color;text-shadow:horizontal-offset vertical-offset blur-radius color;Offset指陰影從原元素出發的位移量。Blur radius 為模糊兩； color為陰影顏色。 透明色：之前我們CSS2.0用的都是 RGB 現在CSS3.0推出了RGBA就是多了一個通道，可以設定透明度了第四位加入一個在0到1之間的數字，0為完全透明，而1為完全不透明。rgba(0, 0, 0, 0.4);