HTML5+CSS3網(wǎng)頁設計實例教程-第7章-CSS3概述_第1頁
HTML5+CSS3網(wǎng)頁設計實例教程-第7章-CSS3概述_第2頁
HTML5+CSS3網(wǎng)頁設計實例教程-第7章-CSS3概述_第3頁
HTML5+CSS3網(wǎng)頁設計實例教程-第7章-CSS3概述_第4頁
HTML5+CSS3網(wǎng)頁設計實例教程-第7章-CSS3概述_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第7章CSS3概述本章概述本章的學習目標主要內(nèi)容第2頁本章概述過去,Web頁面的許多視覺效果都是由標記元素來描述,直接把邏輯標記與物理標記混合在一起,HTML就是這樣的標記語言。然而,嚴格的(X)HTML變體則不允許出現(xiàn)用于描述外觀的元素與特性,標記語言只是用于描述結構。描述外觀的工作則交給用層疊樣式表(CascadingStyleSheet,CSS)語法編寫的樣式表來完成。標記與樣式之間的職責區(qū)分為Web頁面的開發(fā)、維護,甚至運行性能都帶來了諸多益處,而這種解決方案與僅僅使用標記相比,優(yōu)勢巨大。第3頁本章的學習目標了解CSS演變歷史掌握CSS規(guī)則及概念掌握如何應用CSS描述Web頁面外觀了解CSS3的新增特性第4頁主要內(nèi)容7.1CSS基礎7.2添加CSS規(guī)則的位置7.3CSS屬性7.4CSS3新增特性7.5一個基本實例7.6本章小結第5頁7.1CSS基礎CSS演變歷史CSS的版本CSS規(guī)則繼承CSS演變歷史過去15年,W3C的級聯(lián)樣式表（或稱層疊樣式表）規(guī)范已經(jīng)從CSS1規(guī)范發(fā)展到了CSS2規(guī)范,前者于1996年12月17日成為W3C推薦,而后者于2011年6月7日成為W3C推薦,雖然很早之前就已經(jīng)開始創(chuàng)建CSS3。第6頁CSS的版本第7頁常用CSS版本介紹CSS版本描

述CSS1經(jīng)典的CSS的應用引入了text、list、box、margin、border、color和background特性。CSS1最初是在1996年定義的，Web瀏覽器幾乎支持CSS1中的每一項功能，但是一些使用較少的功能也的確存在一些問題，例如white-space、letter-spacing、display等等。CSS1中的一些問題在InternetExplorer7瀏覽器之前的舊版本的瀏覽器中更明顯CSS2這個版本以定位和媒體功能著稱，特別是print樣式表功能。CSS2的許多方面，例如音頻樣式表，從來沒有廣泛實施過，并且在CSS規(guī)范后面的版本中取消了CSS2.1這個版本是CSS?2的修訂版，修改了前面版本的一些錯誤，并且更符合多數(shù)瀏覽器供應商能夠實現(xiàn)功能的實際。注意，這個版本刪除的許多CSS2的功能在CSS?3的模塊中都可以找到。這個版本是用于研究和使用CSS規(guī)范的推薦版本CSS3CSS的模塊化規(guī)范。不同的模塊的擴展、完善了以往CSS版本的各個方面。例如，對CSS3顏色模塊解決了色彩校正，透明度等功能；CSS3字體模塊增加了文字效果、調整它們的顯示，甚至下載自定義字體。另外，還有一些模塊是新添加的，如漸變(Transitions)和動畫(Animations)模塊，和其他已經(jīng)陳舊的不再使用的功能則被拋棄，或者將被拋棄。不管是什么情況，當談到CSS3，應認真核對和測試對CSS3Web站點的支持情況CSS規(guī)則CSS以將規(guī)則與網(wǎng)頁中出現(xiàn)元素相關聯(lián)的方式工作。這些規(guī)則控制元素中的內(nèi)容應如何渲染。第8頁CSS規(guī)則組成第9頁主要內(nèi)容7.1CSS基礎7.2添加CSS規(guī)則的位置7.3CSS屬性7.4CSS3新增特性7.5一個基本實例7.6本章小結第10頁7.2添加CSS規(guī)則的位置將CSS規(guī)則放在一個獨立文件中，這種方式被稱為“外部樣式表”(externalstylesheet)。除此之外，CSS規(guī)則還可以出現(xiàn)在HTML文檔內(nèi)的兩個位置:位于一個<style>元素內(nèi)，該元素位于文檔的<head>元素中位于一個可以帶有style特性的元素中，作為style特性的值第11頁用<link>元素鏈入外部樣式表<link>元素用于在網(wǎng)頁中描述兩個文檔之間的關系。例如,可以在HTML頁面中使用其指定應該用于設置該頁面風格的樣式表。<link>元素在HTML頁面中還起到其他的作用,例如,為對應頁面指定一個RSS訂閱。這種鏈接類型與<a>元素不同,因為兩個文檔是自動關聯(lián)的,用戶不必通過單擊任何東西激活鏈接。第12頁用<style>元素導入外部樣式表<style>元素位于<head>元素內(nèi),用于在網(wǎng)頁內(nèi)包含樣式表規(guī)則,而非鏈接某個外部文檔。有時,它還被用于需要在單一頁面中包含某些額外規(guī)則,而且這些規(guī)則不必應用于網(wǎng)站內(nèi)共享同一樣式表的全部其他頁面的情況。使用外部樣式表實例導入外部樣式表實例鏈入外部樣式表實例第13頁使用外部樣式表實例的頁面瀏覽效果外部樣式表的優(yōu)勢能夠免于在每一頁中重復相同的樣式規(guī)則。能夠僅通過修改一個樣式表完成多個頁面外觀的改變,而不必修改每個單一頁面。當網(wǎng)站訪問者從網(wǎng)站中第一個使用外部CSS的頁面下載該文件后,后續(xù)頁面加載速度會更快。樣式表可以作為樣式模板,幫助不同作者實現(xiàn)相同的文檔風格,而不必了解每一條樣式設定。因為網(wǎng)頁不包含樣式規(guī)則,不同的樣式表可以與相同文檔關聯(lián)。樣式表可以導入并使用來自其他樣式表的樣式,從而允許模塊化開發(fā)并獲得良好的可重用性。如果移除樣式表,可以使網(wǎng)站對于視覺障礙者具有更好的易訪問性,因為你不再控制字體與配色方案。第14頁第15頁主要內(nèi)容7.1CSS基礎7.2添加CSS規(guī)則的位置7.3CSS屬性7.4CSS3新增特性7.5一個基本實例7.6本章小結第16頁7.3CSS屬性使用CSS設置網(wǎng)頁樣式需要創(chuàng)建規(guī)則，而這些規(guī)則包含了兩個部分:一個是選擇器，用于指定規(guī)則應用的元素；另一個是屬性，用于控制這些元素的呈現(xiàn)。因此，如果頁面中有一個部分需要設置某種顏色或尺寸，那么就需要使用正確的選擇器瞄準頁面中的該部分，并使用正確的屬性來相應改變其外觀。第17頁主要內(nèi)容7.1CSS基礎7.2添加CSS規(guī)則的位置7.3CSS屬性7.4CSS3新增特性7.5一個基本實例7.6本章小結7.4CSS3新增特性CSS3模塊化方式CSS3新增屬性及偽類CSS3的優(yōu)點第18頁CSS3模塊化方式CSS演進的一個主要變化就是W3C決定將CSS3分成一系列模塊。隨著CSS普及率不斷上升,對添加規(guī)范的呼聲也在增加。除了將許多的更新加入龐大的規(guī)范之外,更容易和更有效的方法是更新規(guī)范里的單個條目。模塊就能以更及時、更簡便的方式更新CSS,從而能夠更靈活、更及時地演進整個規(guī)范。第19頁CSS3新增屬性及偽類CSS3新增屬性背景和邊框文本效果2/3D轉換動畫用戶界面css3新增偽類:nth-child(n):這個偽類用于選擇是父元素的第n個子元素的元素。:nth-last-child(n):選擇是父元素的倒數(shù)第n個子元素的元素。:only-child:選擇是父元素的唯一子元素的元素。:last-child:選擇是父元素的最后一個元素的元素。:nth-of-type(n):選擇同類的，是父元素的第n個子元素的元素。第20頁CSS3的優(yōu)點CSS3中定義的新屬性通過默認背景更新進入瀏覽器,以確保標準支持以相同速度增加。隨著CSS3不斷演進,作為設計者的工作將變得越來越簡單。流水線設計改進了工作流程,將直覺方面推給瀏覽器,這樣就不用在Photoshop上花更多時間,也不用在寫標記或CSS上花更多時間了。第21頁第22頁主要內(nèi)容7.1CSS基礎7.2添加CSS規(guī)則的位置7.3CSS屬性7.4CSS3新增特性7.5一個基本實例7.6本章小結第23頁7.5一個基本實例本例使用單獨的文件保存CSS規(guī)則,而HTML頁面則包含指向該文件的鏈接,即所謂的“樣式表”(stylesheet)。。關聯(lián)樣式表后的頁面效果第24頁主要內(nèi)容7.1CSS基礎7.2添加CSS規(guī)則的位置7.3CSS屬性7.4CSS3新增特性7.5一個基本實例

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論