前端要學css3;HTML5、CSS3是前端工程師必須要學會。現在移動端的興起,導致web前端開發的技術逐變向css3和html5轉變,所以css3一定要學。
CSS3是CSS(層疊樣式表)技術的升級版本,于1999年開始制訂,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3 把很多以前需要使用的圖片和腳本來實現的效果,甚至動畫效果,現在只需要短短幾行代碼就能搞定。比如:圓角、圖片邊框、文字陰影和盒陰景、漸變、個性化字體、多圖片背景、變形處理(旋轉、縮放、傾斜、移動)、過渡、動畫、多欄布局、媒體查詢等。還有選擇器,簡化了前端開發工作人的設計過程,加快頁面載入速度。
CSS3的優點
1、減少開發成本與維護成本
在CSS3出現之前,開發人員為了實現一個圓角效果,往往需要添加額外的HTML標簽,使用一個或多個圖片來完成,而使用CSS3只需要一個標簽,利用CSS3中的border-radius屬性就能完成。
這樣,CSS3技術能把人員從繪圖、切圖和優化圖片的工作中解放出來。如果后續需要調整這個圓角的弧度或者圓角的顏色,使用CSS2.1,需要從頭繪圖、切圖才能實現,使用CSS3只需修改border-radius屬性值就可快速完成修改。
CSS3提供的動畫特性,可讓開發者在先實現一些動態按鈕或者動態導航時遠離JavaScript,讓開發人員不需要花費大量的時間去寫腳本或者尋找合適的腳本插件來適配一些動態網站效果。
2、提高頁面性能
很多CSS3技術通過提供相同的視覺效果而成為圖片的“替代品”,換句話說,在進行Web開發時,減少多余的標簽嵌套以及圖片的使用數量,意味著用戶要下載的內容將會更少,頁面加載也會更快。
另外,更少的圖片、腳本和Flash文件能夠減少用戶訪問Web站點時的HTTP請求數,這是提升頁面加載速度的最佳方法之一。而使用CSS3制作圖形化網站無需任何圖片,極大地減少了HTTP的請求數量,并且提升了頁面的加載速度。
例如CSS3的動畫效果,能夠減少對JavaScript和Flash文件的HTTP請求,但可能會要求瀏覽器執行很多的工作來完成這個動畫效果的渲染,這有可能導致瀏覽器響應緩慢致使用戶流失。
因此,在使用一些復雜的特效時需要考慮清楚。其實很多CSS3技術能夠在任何情況下都大幅提高頁面的性能。
更多web開發知識,請查閱 HTML中文網 !!