《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第4章 CSS3新增選擇器_第1頁
《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第4章 CSS3新增選擇器_第2頁
《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第4章 CSS3新增選擇器_第3頁
《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第4章 CSS3新增選擇器_第4頁
《Web前端技術(shù)（HTML5+CSS3+jQuery）》課件-第4章 CSS3新增選擇器_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第4章CSS3新增選擇器學(xué)習(xí)目標123了解CSS3的新特性掌握CSS3的兄弟選擇器、屬性選擇器掌握CSS3的偽類選擇器、偽元素選擇器4能夠正確使用CSS3新增的選擇器本章架構(gòu)★★★4.1CSS3概述 4.2CSS3兄弟選擇器的應(yīng)用 4.3CSS3屬性選擇器的應(yīng)用 4.4CSS3偽類選擇器的應(yīng)用 4.5CSS3偽元素選擇器的應(yīng)用4.6綜合案例 ★4.1CSS3概述4.1CSS3概述

CSS3是CSS（層疊樣式表）技術(shù)的升級版本，于1999年開始制訂。2001年5月，W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。

CSS3

在早期版本的CSS技術(shù)標準基礎(chǔ)上，新增了一些特性，這些新特性包括：圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。4.1CSS3概述

為了使網(wǎng)頁在視覺上可以達到更好的效果，W3C負責(zé)CSS標準的制定和推動。至今，CSS經(jīng)歷了CSS1、CSS2、CSS2.1、CSS3諸多版本的發(fā)展歷程，CSS3是正在進行中的標準。

1996年12月，CSS1正式推出。到了1999年1月，該推薦標準被重新修訂。CSS1中主要定義了顏色、字體、文本樣式、外邊距、邊框、背景等最基本的樣式。

1998年5月，CSS2正式推出，它定義了許多高級特性（例如：浮動和定位）及一些高級的選擇器（例如：子選擇器、相鄰?fù)x擇器、通用選擇器等）。

2004年2月，CSS2.1正式推出，它在CSS2的基礎(chǔ)上略微做出改動，同時刪除了瀏覽器廠商從未支持的功能。現(xiàn)代瀏覽器基本上都完全支持CSS2.1，但是低于IE8的IE系列瀏覽器還存在一些遺留問題。1CSS3發(fā)展歷程

4.1CSS3概述

自1998年推出CSS2以來，此后的十多年間，CSS基本沒有太大變化。直到2010年，終于推出了全新的版本CSS3。

CSS3是CSS規(guī)范的最新版本，不過，CSS3的標準化工作還在繼續(xù)進行著。CSS3從以往技術(shù)中吸收和借鑒了很多優(yōu)點，并在CSS2.1的基礎(chǔ)上增加了很多強大的功能解決了一些現(xiàn)實的問題，如對圓角、多背景、陰影、動畫等提供原生支持。由于CSS3結(jié)構(gòu)相當(dāng)龐大，因此它不再采用總體結(jié)構(gòu)，而是采用分工協(xié)作的模塊化結(jié)構(gòu)。CSS3被劃分為多個模塊，每個模塊都可以獨立發(fā)布和實現(xiàn)，這樣做的好處是可以加快標準化的進程，避免因某個模塊的小問題，而影響整個標準的完成進度。1CSS3發(fā)展歷程

4.1CSS3概述

1.瀏覽器對CSS3選擇器的支持

除IE9以下的IE瀏覽器版本之外，其他主流瀏覽器已全部支持CSS3選擇器特性。IE6瀏覽器對CSS3選擇器全部不支持，IE7和IE8瀏覽器僅支持少部分。

2.瀏覽器對CSS3屬性的支持

IE9和IE10支持絕大部分CSS3屬性，Opera也只有少數(shù)幾個屬性不支持，Safari、Chrome和Firefox瀏覽器幾乎支持全部的CSS3特性。2瀏覽器對CSS3的支持

4.2CSS3兄弟選擇器的應(yīng)用4.2CSS3兄弟選擇器的應(yīng)用

CSS3新增的兄弟選擇器與CSS2中的相鄰兄弟選擇器是不同的，其作用是：在第一個元素之后，所有的元素2都會被選擇，并且這些元素和第一個元素擁有同一個父元素，兩個元素之間不一定要相鄰。

兄弟選擇器的語法格式：

元素1~元素2{property1:value1;property2:value2;property3:value3;…}4.3CSS3屬性選擇器的應(yīng)用4.3CSS3屬性選擇器的應(yīng)用CSS3新增了三種屬性選擇器，其語法格式及功能如下表所示。屬性選擇器功能描述E{attribute^=value}用于選取帶有以指定值開頭的屬性值的元素E{attribute$=value}用于選取屬性值以指定值結(jié)尾的元素E{attribute*=value}用于選取屬性值中包含指定值的元素，位置不限4.4CSS3偽類選擇器的應(yīng)用4.4CSS3偽類選擇器的應(yīng)用CSS3新增了一系列偽類選擇器，其語法格式及功能如下表所示。偽類名功能描述:root選擇文檔的根元素，在HTML文檔中<html>是根元素:last-child向元素添加樣式，并且該元素是其父元素的最后一個子元素:nth-child(n)向元素添加樣式，并且該元素是其父元素的第n個子元素:nth-last-child(n)向元素添加樣式，并且該元素是其父元素的倒數(shù)第n個子元素:only-child向元素添加樣式，并且該元素是其父元素的唯一子元素:first-of-type向元素添加樣式，并且該元素是同級同類型元素中的第一個元素:last-of-type向元素添加樣式，并且該元素是同級同類型元素中的最后一個元素:nth-of-type(n)向元素添加樣式，并且該元素是同級同類型元素中的第n個元素:nth-last-of-type(n)向元素添加樣式，并且該元素是同級同類型元素中的倒數(shù)第n個元素:only-of-type向元素添加樣式，并且該元素是同級同類型元素中的唯一元素:empty向沒有子元素（包括文本內(nèi)容）的元素添加樣式4.5CSS3偽元素選擇器的應(yīng)用4.5CSS3偽元素選擇器的應(yīng)用CSS3新增了一系列偽元素選擇器，其語法格式及功能如下表所示。偽元素名功能描述:enabled向當(dāng)前處于可用狀態(tài)的元素添加樣式，常用于定義表單或超鏈接樣式:disabled向當(dāng)前處于不可用狀態(tài)的元素添加樣式，常用于定義表單或超鏈接樣式:checked向當(dāng)前處于選中狀態(tài)的元素添加樣式:not(selector)向不是selector元素的元素添加樣式:target向正在訪問的錨點目標元素添加樣式::selection向用戶當(dāng)前選取內(nèi)容所在的元素添加樣式4.6

綜合案例4.6綜合案例

通過“詩歌《雨巷》”綜合案例，進一步深入理解和掌握相關(guān)知識點與技術(shù)點。

本案例的重點內(nèi)容是CSS3新增選擇器的使用，頁面中的文本內(nèi)容節(jié)選自現(xiàn)代詩《雨巷》，該詩的每一行均被不同的

溫馨提示

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

評論

0/150

提交評論