珠峰培訓css3講義-第一部分css3基礎

1、歡迎大家來到珠峰培訓學習移動端開發(fā)CSS3基礎知識及實戰(zhàn)練習珠峰培訓2015年10月09日第一章：CSS3的發(fā)展簡介1、CSS3的發(fā)展2、CSS3的優(yōu)勢3、CSS3的兼容檢測4、CSS3的兼容處理：漸進增強與優(yōu)雅降級CSS3的發(fā)展css3不是一門新的語言，它只是在css2.1的基礎上增加了一些強大的新功能:*強大的css3選擇器*拋棄圖片的視覺效果(盒子圓角、陰影、漸變背景)*背景的變革*盒模型的變化*css3過渡動畫的應用效果*媒體特性與Responsive布局*.使用CSS3的優(yōu)勢* 減少開發(fā)與維護的成本* 提高頁面的整體性能* css3實現的效果更佳的流暢，增強用戶的體驗性CSS3的兼容

2、檢測* 目前主流的瀏覽器Chrome、Safari對于css3支持的比較的好，緊隨其次的是Firefox和Opera，IE9也支持了部分，IE10及以上目前對于css3的支持也在逐步的加強* 移動端IOS、安卓系統(tǒng)上的大部分瀏覽器(基本上都是webkit內核的)對于css3的支持還是比較的不錯的* /專門檢測兼容性的網站漸進增強與優(yōu)雅降級*漸進增強：開發(fā)的時候，首先保證核心的功能都實現，讓任和低端的瀏覽器都能看到站點的內容；然后考慮使用非必要的css和js增強功能， 為高版本瀏覽器提供更好的體驗*優(yōu)雅降級：在設計的時候，首先考慮低版本用戶是否看到所有的內容，

3、然后在為高版本的進行設計；這樣就可以為不同級別的設備和用戶， 提供不那么完美的應用了；第二章：CSS3常用選擇器* 基本選擇器* 層次選擇器* 偽類選擇器：動態(tài)偽類選擇器、目標偽類選擇器、UI元素狀態(tài)偽類選擇器、結構偽類選擇器、* 屬性選擇器偽類選擇器所有的在IE9及以上都支持，在移動端我們可以有效去使用 詳細可以參考附件-選擇器.html選擇器簡單的應用第二章：CSS3新增常用樣式*css3邊框css3背景和顏色的漸變css3文字和文本css3顏色特性* 一些其他常用的樣式CSS3邊框*border-color制作三角符號border-radius的語法和練習box-shadow的語法和練習

4、:陰影類型(inset內陰影、不寫是糊半徑、陰影擴展半徑、陰影顏色影)、x軸偏移、y軸偏移、陰影模* 使用border-colors制作立體漸變框(只有火狐支持)* border-image的使用(自己回去查找練習即可)參考附件-2、常用屬性-(1、2、 3、4)CSS3背景* 常用的基本屬性：background-color、background-image、background-repeat、background-attachment、background-position.* 新增加的屬性：background-origin:指定繪制背景圖片的起點background-clip:指定背景

5、圖片展示的范圍background-size:指定背景圖片的尺寸大小.* gradient:背景顏色的線性漸變(linear-gradient)和徑向漸變(radial-gradient)CSS3背景練習* 制作全屏背景圖(background-size的應用)* 藝術字效果的實現(background-clip:text的應用)* 圖片的模糊度處理(filter:blur)，以及css3中filter的其他應用CSS3文本處理*嵌入web字體:參考圖解css3這本書第15章學習即可,項目中為了節(jié)省資源文件，基本上很少使用*實現文本陰影:text-shadow*溢出文本處理:text-overflow*css3文本換行:word-wrapnormal:默認值，瀏覽器只在半角空格或者連字符的地方換行break-word:將內容在邊界內換行(不截斷英文單詞換行)，除了不截斷英文單詞，我們還可以繼續(xù)使用word-break強制指定換行的規(guī)則-normal:默認值，自己根據語言的規(guī)則換行;br