用CSS 3將我們帶入下一個(gè)高度

2020-03-24 16:18:07

字體：大中小

供稿：網(wǎng)友

“CSS 3 不是新事物，更不是只是圍繞border-radius屬性實(shí)現(xiàn)的圓角。它正耐心的坐在那里，已經(jīng)準(zhǔn)備好了首次登場，呷著咖啡，等著瀏覽器來鋪上紅地毯。你看，瀏覽器需要跟上了……”–謹(jǐn)以此文紀(jì)錄ISD WEBTEAM 09年Q2力作：CSS 3.0 參考手冊(cè) (中文版) 背景蘇昱的《樣式表中文手冊(cè)》為代表的CSS2.0參考資料伴隨了國內(nèi)眾多web設(shè)計(jì)師們走過了近10年的時(shí)光，這種影響是深遠(yuǎn)的，但隨著CSS技術(shù)的不斷發(fā)展，設(shè)計(jì)師們多受傳統(tǒng)資料的影響，不能超脫現(xiàn)有的籬笆，給自己背上了沉重的包袱。你是否已注意到CSS 3已經(jīng)蓄勢待發(fā)？你是否渴望開始使用它們卻又不知從何下手呢？正當(dāng)CSS 3新特性備受期待的時(shí)候，我們的CSS3.0 中文參考手冊(cè)就應(yīng)運(yùn)而生了……什么是CSS 3？CSS 是 Cascading Style Sheet 的縮寫。譯作「層疊樣式表」。是用于(增強(qiáng))控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。
CSS3.0 則表示下一版本的CSS，3.0是版本號(hào)。CSS 3給我們帶來了什么驚喜？CSS3.0對(duì)于我們Web設(shè)計(jì)人員來說不只是新奇的技術(shù)，更重要的是這些全新概念的web應(yīng)用給我們的設(shè)計(jì)更多的無限可能性，也極大的提高了我們的開發(fā)效率。我們將不必再依賴圖片或者 Javascript 去完成圓角、多背景、用戶自定義字體、3D動(dòng)畫、漸變、盒陰影、文字陰影、透明度等提高Web設(shè)計(jì)質(zhì)量的特色應(yīng)用。CSS 3 .0的出現(xiàn)，讓代碼更簡潔、頁面結(jié)構(gòu)更合理，性能和效果得到兼顧。使用說明本手冊(cè)服務(wù)對(duì)象為網(wǎng)頁重構(gòu)師或前端開發(fā)工程師。本手冊(cè)根據(jù)W3C工作草案進(jìn)行翻譯，存在一定的不確定因素，最終解釋權(quán)歸ISD WEBTEAM所有。本手冊(cè)的編排參考css3.info的CSS Preview將CSS 3 屬性分為邊框、背景、顏色、文本、用戶界面、基礎(chǔ)盒模型、內(nèi)容、其它模塊、高級(jí)選擇器九大類。兼容性列表暫時(shí)提供Internet Explorer、FireFox、Opera、Safari、Chrome的正式版瀏覽器兼容性。私有屬性列表中，使用Gecko引擎的瀏覽器有Firefox，私有屬性以-moz-開始；webkit引擎的瀏覽器有Safari、Chrome，以-webkit-開始；Presto引擎的瀏覽器有Opera，以-o-開始，以及Internet Explorer，以-ms-開始，目前只有IE8支持-ms-前綴。針對(duì)每個(gè)屬性制作的示例除了@font face因涉及字體版權(quán)取自微軟的示例，其它均為團(tuán)隊(duì)成員結(jié)合自身的沉淀制作，由于手冊(cè)篇幅的局限性，也許有些示例難以理解，后續(xù)我們將對(duì)這部分示例單獨(dú)以文章詳細(xì)分析。繼承性，鑒于W3C工作草案未對(duì)繼承性有較清晰的說明，本期未對(duì)繼承性有測試，暫不具備參考價(jià)值。如下載的CHM文件打不開，可以嘗試右鍵點(diǎn)擊CHM文件，然后在“屬性”中“解除鎖定”。本手冊(cè)主要用于交流，限于時(shí)間緊張，且為業(yè)余深耕夜作，錯(cuò)誤和遺漏難免，望大家在使用中多多反饋。我們會(huì)不斷的完善和升級(jí)本手冊(cè)。這里提供手冊(cè)V1版，以月為單位不定期更新。 CSS 3.0 參考手冊(cè) (中文版) 預(yù)覽：不管你是第一次準(zhǔn)備去認(rèn)識(shí)CSS 3，還是已經(jīng)略知皮毛，CSS 3.0 參考手冊(cè) (中文版)將有助你更好的學(xué)習(xí)和理解CSS 3 。還等什么？猛擊http://webteam.tencent.com/css3/下載吧！總結(jié)CSS 3 屬性不僅可以極大的提高我們的工作效率，讓一些最耗時(shí)的CSS任務(wù)不費(fèi)吹灰之力就能搞定，并且可以使用更簡潔和更輕量的代碼標(biāo)簽。雖然一些屬性尚未被廣泛的支持，但這并不意味著我們不能為使用高級(jí)瀏覽器的用戶提供更好的體驗(yàn)。CSS 3 能讓我們的優(yōu)化工作有了新的突破。當(dāng)你已經(jīng)完成了圖片合并、代碼精簡等優(yōu)化工作之后，正在焦頭爛額不知道還要做啥的時(shí)候，可以嘗試把用戶進(jìn)行拆分，去尋求更深層次的突破。例如針對(duì)一些高級(jí)瀏覽器使用圓角屬性，在IE瀏覽器使用條件注釋（或者h(yuǎn)ack），那么是不是可以在保證效果的同時(shí)，讓網(wǎng)頁更快的呈現(xiàn)在使用高級(jí)瀏覽器的用戶面前呢？如果我們的網(wǎng)站在各個(gè)瀏覽器里的一個(gè)差異不影響美觀和網(wǎng)站的可用性，它就應(yīng)該是被考慮的。如果我們繼續(xù)浪費(fèi)大量的時(shí)間和精力以使每個(gè)細(xì)節(jié)絕對(duì)一致(而不是采用更靈活的和未來導(dǎo)向的方案)，用戶將沒有升級(jí)他們的瀏覽器的任何動(dòng)機(jī)，我們也就不能更早、更廣泛的使用它們。我相信隨著時(shí)間的推進(jìn)和更多瀏覽器的支持，CSS 3 將越來越受歡迎，它將為web設(shè)計(jì)師們帶來無窮的能量。Web設(shè)計(jì)師們，還等什么？讓我們一起來感受CSS 3 的能量，用CSS 3 將我們帶入下一個(gè)高度吧！特別鳴謝項(xiàng)目過程中，我們也遇到了很多難點(diǎn)，W3C未正式發(fā)布CSS 3 ，工作草案不斷更新，存在諸多不確定因素，中文資料匱乏，涉及多個(gè)瀏覽器多個(gè)版本的瀏覽器兼容性測試，測試過程繁瑣等等，項(xiàng)目組成員都逐步克服，感謝大家在平時(shí)需求壓力也比較大的時(shí)候還能保持著很高的激情參與到CSS 3 項(xiàng)目中來，在公司加完班，回家了還忙著翻譯、測試瀏覽器兼容性等等，有時(shí)候CSS3項(xiàng)目群里討論的聊天記錄到凌晨1、2點(diǎn)…正因?yàn)橛辛丝蓯鄣哪銈儯?xiàng)目才能如此順利的進(jìn)行，他們是：html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：css中相對(duì)定位和絕對(duì)定位的介紹與使用

下一篇：HTML中如何使用CSS？