CSS3實踐之路(一):CSS3之我觀

CSS 的英文全稱Cascading Style Sheets,中文意思是級聯樣式表,通過設立樣式表,可以統一地控制HMTL中各DOM元素的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表,可以擴充精確指定網頁元素位置,外觀以及創建特殊效果的能力。

CSS的W3官方網址是:www.w3.org/TR/CSS/,在這個《CSS3實踐之路》中這官方資料是我主要參考資料,此外W3School的CSS3學習網址也是我這個系列的主要資料來源,也會有人問既然網站上有這么多學習資料,為什么我還出這么一個CSS的學習系列,因為一些好的學習HTML5和CSS3的網站都國外網站,雖然國內也有相關的學習網站,但上面的資源大多是一個一個的特效,并沒有比較系統的學習資料,為了提高國內網頁設計水平、拉近與國際網頁設計水平的距離這一崇高理想微笑,本人不才,特準備這一CSS3的學習系列以饗網友,不足之處還望廣大網友海涵,多多支持。眨眼

接下來概括下這個系列要講的內容:

1. 盒子模型(Box Model)

2. 顏色(Color)

3. 背景與邊框(Backgrouds and Borders)

4. 文本特效(Text Effects)

5. 2D和3D轉換(2D/3D Transformations)

6. 動畫(Animations)

7. 多列布局(Multiple Column Layout)

8. 用戶界面(User Interface)

9. 選擇器(Selectors)

每講一個功能屬性,我都會附上比較好的示例,來加深對CSS3的理解。上面列出的內容只是本人目前想到必須要講的內容,以后隨著本系列的深入可能會講更多的內容,本人在學習CSS3某些新效果(2D/3D Transformations? && Gradient)時,更像是定義富媒體(flash&&Sliverlight)外觀,此外在講CSS3的同時,會講些CSS以前版本的內容。

雖然CSS3還未正式發布,但其規則制定地非常詳細了,發布只是個時間問題,由于各瀏覽器對它的支持不盡統一,而我們要設計的網頁必須要兼容瀏覽器,參考這個網址(http://www.w3schools.com/cssref/css3_browsersupport.asp)來查看目前各瀏覽器對CSS3的支持情況。

下面表格顯示各種瀏覽器前綴

瀏覽器前綴
Internet Explorer -ms-
Firefox-moz-
Google Chrome -webkit-
Safari-webkit-
Opera -o- -xv-(-xv-用于voice相關的)

?

如果是開發簡體中文網頁,瀏覽器的兼容性更不好做,因為國內有很多”套子瀏覽器”(就是那些用別人瀏覽器的內核,而只是換了一些外表),而這些瀏覽器基本上都是使用IE內核,而文檔渲染模式(至少默認的)為IE7,可能還有一些更古板的國內瀏覽器還是IE6模式,這些情況對國內的前端設計者來說真是悲劇,所以我敢說國內網站從技術運用上來說要比國外的網站慢很多年,在IT業的其它方面也是一樣的,很多IT新技術、新創意都是在國外火了,才拿到國內來應用的,比如說團購網站,哎,中國人一直在模仿。。。

說了這么多,接下來展示一個CSS3按鈕的示例,來更大的激發網友們對CSS3的興趣:


這些是運用CSS3的border-radius、box-shadow和gradient(只有moz和webkit支持)制作出來的效果,當然這在支持CSS3的瀏覽器中觀看,本人測試過在以下瀏覽可以看到效果:

IE9 、Firefox4以上、Google Chrome 10以上、Safari5以上 、Opera10.5以上。

下一章我將詳細講解盒子模型(Box Model)和邊框。

轉載于:https://www.cnblogs.com/Wenwang/archive/2011/11/01/2231076.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275208.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275208.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275208.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

18個項目必備的JavaScript代碼片段——數組篇

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以加我微信 ruochuan12 參與,目前近3000人參與,0-5年工作經驗的都可以參與學習。1.chunk轉換二維數組將數組(array)拆分成多個數組,并將這些…

美學評價_卡美學的真正美

美學評價In collectible card games like Hearthstone, Legends of Runeterra, and Magic: The Gathering, the aesthetic of the cards is indubitably one of the greatest highlights for many, if not all players. Although the game loop is reliant on physically build…

好程序員web前端分享CSS Bug、CSS Hack和Filter學習筆記

為什么80%的碼農都做不了架構師?>>> CSS Bug、CSS Hack和Filter學習筆記 1)CSS Bug:CSS樣式在各瀏覽器中解析不一致的情況,或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug. 2)CSS Hack: CSS中,Hack是指一種兼容CSS在不同…

as3 淺復制 深復制

基元數據類型:boolean、int、uint、number、string 兩種復雜數據類型:array、object 當數組元素全部是基元數據類型時,即全部是值類型時,是沒有淺復制和深復制的區別。 當數組元素全部是復雜數據類型,即引用類型時&…

碎片化學前端,促進技術提升,我推薦這些

大家好,我是若川。眾所周知,關注公眾號可以了解學習掌握技術方向,學習優質好文,落實到自己項目中。還可以結交圈內好友,讓自己融入到積極上進的技術氛圍,促進自己的技術提升。話不多說,推薦這些…

ux和ui_設計更好的結帳體驗-UX / UI案例研究

ux和uiPlated Cuisine is a food ordering and delivery app for Plated Cuisine Restaurant founded and managed by Rayo Odusanya.Plated Cuisine是由Rayo Odusanya創建和管理的Plated Cuisine Restaurant的食品訂購和交付應用程序。 A short background about Rayo Rayo O…

Django中ajax發送post請求,報403錯誤CSRF驗證失敗解決辦法

今天學習Django框架,用ajax向后臺發送post請求,直接報了403錯誤,說CSRF驗證失敗;先前用模板的話都是在里面加一個 {% csrf_token %} 就直接搞定了CSRF的問題了;很顯然,用ajax發送post請求這樣就白搭了&…

如何在EXCEL中添加下拉框

篩選主要是將已有列的信息以下拉框的形式顯示出來 選中數據欄中的篩選按鈕即可生成 如果是想添加未有信息則如下圖步驟 首先,選擇你要出現下拉的區域,在數據欄中的選擇數據有效性 然后,下面對話框中,有效性條件中按如下設置即可&a…

每次新增頁面復制粘貼?100多行源碼的 element-ui 的新增組件功能教你解愁

1. 前言大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以點此加我微信ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。已進行三個月了,很多小伙伴表示收獲頗豐。想學源碼,極力推薦之前我…

原子設計_您需要了解的有關原子設計的4件事

原子設計重點 (Top highlight)Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a syst…

深度學習 Caffe 初始化流程理解(數據流建立)

之前在簡書的文章,搬遷過來 ^-^ 本文是作者原創,如有理解錯誤,懇請大家指出,如需引用,請注明出處。 #Caffe FeatureMap數據流的建立 ##用語解釋 FeatureMap: 輸入的圖片信息或者經過多層處理后的圖片信息。weights: 只…

C#中的Clipboard與ContextMenuStrip應用舉例

今天,突然想起了怎樣在一個文本中實現復制、剪切與粘貼的功能,并給這些功能添加右鍵的快捷方式。于是,就用自己的VS2008寫了一個簡單的小應用,以熟悉C#中剪貼板與快捷菜單的使用。 首先,我們不難發現,剪貼板…

控制臺ui_設計下一代控制臺UI

控制臺ui游戲UX (GAMES UX) Yesterday’s Sony presentation showed us the final look of the PlayStation 5, as well as an impressive of next-gen games that will be released with it. What we didn’t get to see, however, is the new operating system and it’s use…

寫給前端新手看的一些模塊化知識

大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以點此加我微信ruochuan12 進群參與,每周大家一起學習200行左右的源碼,共同進步。已進行三個月了,很多小伙伴表示收獲頗豐。一、 為什么需要模塊化以前沒有模塊化時…

重學前端學習筆記(八)--JavaScript中的原型和類

筆記說明 重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的專欄學習【原文…

代碼實現照片素描_我的代碼素描之旅

代碼實現照片素描In 2018 I started the process of consistently creating and posting my code sketches online. These are small animations I make with code and post on instagram. Through these sketches I tried to visually express my ideas using color, animatio…

GCC參數詳解

轉自:http://www.cnblogs.com/fence/archive/2009/12/18/1627138.html GCC參數詳解 gcc and g分別是gnu的c & c編譯器 gcc/g在執行編譯工作的時候,總共需要4步1.預處理,生成.i的文件[預處理器cpp]2.將預處理后的文件不轉換成匯編語言,生成文件.s[編…

真效率神器,UI稿智能轉換成前端代碼,準確率極高

大家好,我是若川。在這充滿網絡促銷活動的幾個月,倍感壓力的,除了你的口袋,是否還有程序員的發量呢?每年的雙十一、雙十二購物狂歡節,各大電商平臺都會上線讓消費者充滿購買欲望的活動頁面,而這…

PPT圖標的正確使用和插入與編輯形狀

PPT圖標的正確使用和插入與編輯形狀 通過圖標可以以符號的形式直觀地傳遞信息。 一,實戰:在銷售工作計劃中插入圖標 PowerPoint 2016中提供了多種類型的圖標,用戶可根據需要在幻燈片中插入所需的圖標。 二,實戰:更改銷…

幾個用于序列化的代碼片段

參考JavaScriptSerializer,一般用來做JSON格式化http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptserializer.aspx http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptconverter.aspxDataContractSeria…