Web程序開(kāi)發(fā)：第9章 CSS基礎(chǔ)

1、 第9章 CSS基礎(chǔ)第9章 CSS基礎(chǔ)9.1 css概述9.2 css語(yǔ)法9.3 css尺寸9.4 css選擇器9.5 css使用方式9.6 css樣式分類(lèi)9.1 css概述CSS（Cascading Style Sheet）即層疊樣式表，簡(jiǎn)稱(chēng)樣式表。要理解層疊樣式表的概念先要理解樣式的概念。樣式就是對(duì)網(wǎng)頁(yè)中的元素（字體、段落、圖像、列表等）屬性的整體概括，即描述所有網(wǎng)頁(yè)對(duì)象的顯示形式（例如，文字的大小、字體、背景及圖像的顏色、大小等都是樣式）。層疊，就是指當(dāng)HTML文件引用多個(gè)CSS文件時(shí)，如果CSS文件之間所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來(lái)處理其樣式對(duì)內(nèi)容的控制。css作用主要體現(xiàn)

2、在以下幾個(gè)方面。 內(nèi)容和樣式的分離，使得網(wǎng)頁(yè)設(shè)計(jì)趨于明了、簡(jiǎn)潔 彌補(bǔ)HTML對(duì)標(biāo)記屬性控制的不足 精確控制網(wǎng)頁(yè)布局，如行間距、字間距、段落縮進(jìn)等屬性 提高網(wǎng)頁(yè)效率，因?yàn)槎鄠€(gè)網(wǎng)頁(yè)同時(shí)應(yīng)用一個(gè)CSS樣式，即減少了代碼的下載，又提高了瀏覽器的瀏覽速度和網(wǎng)頁(yè)的更新速度 CSS還有好多特殊功能，如鼠標(biāo)指針屬性控制鼠標(biāo)的形狀和濾鏡屬性控制圖片的特效等9.1 css概述-續(xù)1CSS的版本主要經(jīng)歷了三個(gè)階段：CSS 1.0CSS 2.1CSS 3.0目前最新的版本是3.0，是伴隨著html5的產(chǎn)生而產(chǎn)生的。在以前的版本的基礎(chǔ)上增加了很多其它樣式。在本課程中，如果是3.0樣式，我們將特別說(shuō)明。9.1 css概述

3、-續(xù)2CSS 3目前還處于發(fā)展中，一些屬性還沒(méi)有成為W3C（World Wide Web Consortium ）的標(biāo)準(zhǔn)，因此在使用這些屬性時(shí)建議加上各瀏覽器生產(chǎn)商的私有前綴。以下是幾種常用的前綴。-webkit：為Chrome/Safari-moz：為Firefox-ms：為IE-o：為Opera -webkit-transform:rotate(-3deg); /*為Chrome/Safari*/ -moz-transform:rotate(-3deg); /*為Firefox*/ -ms-transform:rotate(-3deg); /*為IE*/ -o-transform:rota

4、te(-3deg); /*為Opera*/ transform:rotate(-3deg); /*為nothing*/9.2 css語(yǔ)法selector property: value; property: value; property: value 9.2 css語(yǔ)法-續(xù)1css語(yǔ)法中需要注意：選擇器具有多種形式屬性和屬性值用冒號(hào)分割不同的聲明要使用分號(hào)分割最后一個(gè)聲明可以不使用分號(hào)p font-style: italic; font-weight: normal 9.3 css尺寸在css中，尺寸單位分為兩類(lèi)：相對(duì)長(zhǎng)度單位和絕對(duì)長(zhǎng)度單位。相對(duì)長(zhǎng)度單位按照不同的參考元素，又可以分為字體相對(duì)

5、單位和視窗相對(duì)單位。字體相對(duì)單位有：em、ex、ch、rem；視窗相對(duì)單位有：vw、vh、vmin、vmax幾種。絕對(duì)長(zhǎng)度單位則是固定尺寸，它們采用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實(shí)際應(yīng)用中，我們使用最廣泛的則是em、rem、px以及百分比（%）來(lái)度量頁(yè)面元素的尺寸。px：為像素單位。它是顯示屏上顯示的每一個(gè)小點(diǎn)，為顯示的最小單位。它是一個(gè)絕對(duì)尺寸單位，是不能變動(dòng)的；em：它是描述相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對(duì)長(zhǎng)度單位，可以變動(dòng)。一般瀏覽器字體大小默認(rèn)為16px，則2em = 32px；rem：它是描述相對(duì)于當(dāng)前根元素字體尺寸，除了描述對(duì)象與em不同

6、其余都和em一樣。%：百分比，它是一個(gè)更純粹的相對(duì)長(zhǎng)度單位，可以變動(dòng)。它描述的是相對(duì)于父元素的百分比值。如50%，則為父元素的一半。9.4 css選擇器當(dāng)我們對(duì)頁(yè)面內(nèi)的元素進(jìn)行樣式設(shè)置時(shí)，首先要選中想要進(jìn)行樣式設(shè)置的一個(gè)或一些元素，然后進(jìn)行樣式定義。常用的選擇器如下。元素選擇器Id選擇器類(lèi)選擇器派生選擇器子元素選擇器相鄰兄弟選擇器屬性選擇器偽類(lèi)選擇器偽元素選擇器組合選擇器9.4.1 元素選擇器每一個(gè)html元素都可以成為一個(gè)選擇器。div font-style: italic; font-weight: normal; font-size：12px p color: red; font-wei

7、ght: normal; font-size：75% h6 font-style: italic; background-color:blue; font-size：9px b color: red; font-weight: normal; font-size：80% 9.4.2 Id選擇器在HTML文檔中，需要唯一標(biāo)識(shí)一個(gè)元素時(shí)，就會(huì)賦予它一個(gè)id標(biāo)識(shí)，以便在對(duì)整個(gè)文檔進(jìn)行處理時(shí)能夠很快地找到這個(gè)元素。id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id選擇器以“#”進(jìn)行定義#sidebar font-size: 1em; font-weight: normal; fo

8、nt-style: italic; margin: 0; line-height: 1.5 我將被格式化9.4.3 類(lèi)選擇器用類(lèi)選擇器可以把相同的元素分類(lèi)定義成不同的樣式。在定義類(lèi)選擇器時(shí)，在自定義類(lèi)名稱(chēng)的前面加一個(gè)句點(diǎn)“.”。設(shè)置樣式的元素通過(guò)class屬性進(jìn)行引用。.pFontOne font-size: 1em; font-weight: normal; font-style: italic; font-family: 黑體 .pFontTwo font-size: 2em; font-weight: normal; font-style: italic; font-family: 宋體

9、 我將被pFontOne類(lèi)格式化 我將被pFontTwo類(lèi)格式化9.4.4 派生選擇器派生選擇器可以對(duì)某種元素包含關(guān)系（如元素1里包含元素2）進(jìn)行樣式定義。這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無(wú)定義。.pFont .sFont font-size: 1em; font-weight: normal; font-style: italic; font-family: 黑體 我將被sFont類(lèi)格式化 我不會(huì)被格式化 我也將被sFont類(lèi)格式化div b font-size: 2em; font-weight: normal; font-style: italic; font-

10、family: 宋體 b元素原來(lái)的樣式被覆蓋 這里會(huì)不會(huì)被格式化？9.4.5 子元素選擇器與派生選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。.pFont .sFont font-size: 1em; font-weight: normal; font-style: italic; font-family: 黑體 我將被sFont類(lèi)格式化 這里會(huì)不會(huì)被格式化？.pOne .sOne font-size: 2em; font-weight: normal; font-style: italic; font-family: 宋體 我將被sFont類(lèi)格式化

11、 這里會(huì)不會(huì)被格式化？9.4.6 相鄰兄弟選擇器相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。相鄰兄弟選擇器使用“+”。h1 + p margin-top:50pxdiv p table + ul margin-top:20pxli + li font-weight:bold List item 1 List item 2 List item 39.4.7 屬性選擇器對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式?？梢詾閾碛兄付▽傩缘?HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。選擇器描述Eattribute

12、用于選取帶有指定屬性的元素Eattribute=value用于選取帶有指定屬性和值的元素Eattribute=value用于選取屬性值中包含指定詞匯的元素Eattribute|=value用于選取帶有以指定值開(kāi)頭的屬性值的元素，該值必須是整個(gè)單詞Eattribute=value匹配屬性值以指定值開(kāi)頭的每個(gè)元素Eattribute$=value匹配屬性值以指定值結(jié)尾的每個(gè)元素Eattribute*=value匹配屬性值中包含指定值的每個(gè)元素9.4.7 屬性選擇器-續(xù)1對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。 1 2 3 4 5 6 7 8 9 109.4.7 屬性選擇器-續(xù)2對(duì)帶有指定屬性的

13、HTML 元素設(shè)置樣式。.demo width: 300px; border: 1px solid #ccc; padding: 10px.demo a float: left; display: block; height: 40px; line-height: 40px; width: 40px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; background: #f36; color: green; margin-right: 10px;

14、text-decoration: none.clearfix:after content: ddd; visibility: hidden; clear: both; display: block; height: 0;9.4.7 屬性選擇器-續(xù)3Eattr屬性選擇器是CSS3屬性選擇器中的一種。如果希望選擇有某個(gè)屬性的元素，而不論這個(gè)屬性值是什么，就可以使用這個(gè)屬性選擇器.demo aid background: blue; color:yellow; font-weight:bold.demo ahreftitle background: yellow; color:green9.4.7

15、屬性選擇器-續(xù)4Eattr=value選擇器指定了屬性值“value”。.demo aid=first background: blue; color:yellow; font-weight:bold.demo ahref= title background: yellow; color:green9.4.7 屬性選擇器-續(xù)5其余形式的屬性選擇器，請(qǐng)大家自己練習(xí)，觀察效果。.demo atitle=website background: orange; color:green; font-weight:bold.demo ahref=http:/ background: yellow; col

16、or:green.demo ahref$=png background: orange; color:green; font-weight:bold.demo ahref*=site background: black; color:white9.4.8 偽類(lèi)選擇器CSS 偽類(lèi)用于向某些選擇器添加特殊的效果。語(yǔ)法如下：selector : pseudo-class property: value a:link color: #FF0000 /* 未訪問(wèn)的鏈接 */ a:visited color: #00FF00 /* 已訪問(wèn)的鏈接 */ a:hover color: #FF00FF /* 鼠

17、標(biāo)移動(dòng)到鏈接上 */ a:active color: #0000FF /* 選定的鏈接 */ selector.class : pseudo-class property: value 9.4.8 偽類(lèi)選擇器-續(xù)1在css 1和2版本中常用的偽類(lèi)選擇器，如下表所示。屬性描述css版本:active向被激活的元素添加樣式1:focus向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式2:hover當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式1:link向未被訪問(wèn)的鏈接添加樣式1:visited向已被訪問(wèn)的鏈接添加樣式1:first-child向元素的第一個(gè)子元素添加樣式2:lang向帶有指定 lang 屬性的元素添加樣

18、式2提示：在 css 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的提示：在 css 定義中，a:active 必須被置于 a:hover 之后，才是有效的9.4.8 偽類(lèi)選擇器 :first-child some text some textp:first-child color: red some text. some text. some text. some text.p i:first-child font-weight:bold p:first-child i color:blue 9.4.8 偽類(lèi)選擇器-續(xù)2在css 3版本中增加了很多

19、有用的偽類(lèi)選擇器，如下表所示。偽類(lèi)名稱(chēng)例子css版本:only-childp:only-child3:nth-child(n)p:nth-child(2)3:nth-last-child(n)p:nth-last-child(2)3:last-childp:last-child3:root:root3:emptyp:empty3:enabledinput:enabled3:disabledinput:disabled3:checkedinput:checked3:not(selector):not(p)39.4.8 偽類(lèi)選擇器 :last-child 會(huì)不會(huì)選中 會(huì)不會(huì)選中p:only-chi

20、ld color: red some text. some text.p i:only-child font-weight:bold p: only-child i color:blue 9.4.8 偽類(lèi)選擇器 :only-child 會(huì)不會(huì)選中 會(huì)不會(huì)選中p:last-child color: red p i:last-child font-weight:bold p: last-child i color:blue some text. some text. some text. some text.9.4.8 偽類(lèi)選擇-demo 1 2 3 4 5 6 7 8 9 10 9.4.8 偽類(lèi)

21、選擇器-demo.demo width: 300px; border: 1px solid #ccc; padding: 10px.demo a float: left; display: block; height: 40px; line-height: 40px; width: 40px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-align: center; background: #f36; color: green; margin-right: 10px; text

22、-decoration: none.clearfix:after content: ddd; visibility: hidden; clear: both; display: block; height: 0;.demo li border: 1px solid #ccc; padding: 2px; float: left; margin-right:4px 9.4.8 偽類(lèi)選擇器 :nth-child(n):nth-child()可以選擇某個(gè)的一個(gè)或多個(gè)特定的子元素。:nth-child(length) /*參數(shù)是具體數(shù)字*/:nth-child(n) /*參數(shù)是n,n從0開(kāi)始計(jì)算*/:

23、nth-child(n*length) /*n的倍數(shù)選擇，n從0開(kāi)始算*/:nth-child(n+length) /*選擇大于length后面的元素*/:nth-child(-n+length) /*選擇小于length前面的元素*/:nth-child(n*length+1) /*表示隔幾選一*/特別注意：這里的 n 只能是n，不能是其它字母。 length是整數(shù)9.4.8 偽類(lèi)選擇器 :nth-child(n).demo li:nth-child(3) background: lime.demo li:nth-child(n) background: lime:nth-child(n)，

24、其中n是一個(gè)簡(jiǎn)單的表達(dá)式，n取值是從“0”開(kāi)始計(jì)算的，如果在實(shí)際應(yīng)用中直接這樣使用的話，將會(huì)選中所有子元素，比如說(shuō)，在我們的例子中，在li中使用:nth-child(n),那么將選中所有的li。.demo li:nth-child(2n) background: lime.demo li:nth-child(2n+1) background: lime9.4.8 偽類(lèi)選擇器 :nth-child(n).demo li:nth-child(n+5) background: lime.demo li:nth-child(-n+5) background: lime.demo li:nth-chil

25、d(4n+1) background: lime9.4.8 偽類(lèi)選擇器 :nth-last-child(n):nth-last-child ()選擇器和:nth-child()很相似，只是從最后一個(gè)元素開(kāi)始算，來(lái)選擇特定元素。.demo li:nth-last-child(4) background: lime.demo li:nth-last-child(2n) background: lime.demo li:nth-last-child(2n-1) background: lime9.4.8 偽類(lèi)選擇器 :empty:empty是用來(lái)選擇沒(méi)有任何內(nèi)容的元素，這里沒(méi)有內(nèi)容指的是一點(diǎn)內(nèi)容都沒(méi)

26、有，哪怕是一個(gè)空格。p:empty display: none some text. some text. some text. some text. 9.4.8 偽類(lèi)選擇器 :not(selector)input:not(type=submit) border: 1px solid red否定選擇器 :not(selector)，可以定位不匹配該選擇器的元素。 9.4.9 偽元素選擇器CSS 偽元素用于向某些選擇器設(shè)置特殊效果。語(yǔ)法如下：selector : pseudo-element property: value selector.class : pseudo-element prop

27、erty: value 屬性描述CSS版本:first-letter向文本的第一個(gè)字母添加特殊樣式1:first-line向文本的首行添加特殊樣式1:before在元素之前添加內(nèi)容2:after在元素之后添加內(nèi)容29.4.9 偽元素選擇器 :first-letter:first-letter偽元素用于向文本的首字母設(shè)置特殊樣式。只能用于塊級(jí)元素p:first-letter color:#ff0000; font-size:30px下面的屬性可應(yīng)用于 first-letter 偽元素：fontcolorbackgroundmarginpaddingbordertext-decorationvertical-a