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

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

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

3、-續(xù)2CSS 3目前還處于發(fā)展中，一些屬性還沒有成為W3C（World Wide Web Consortium ）的標(biāo)準(zhǔn)，因此在使用這些屬性時建議加上各瀏覽器生產(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語法selector property: value; property: value; property: value 9.2 css語法-續(xù)1css語法中需要注意：選擇器具有多種形式屬性和屬性值用冒號分割不同的聲明要使用分號分割最后一個聲明可以不使用分號p font-style: italic; font-weight: normal 9.3 css尺寸在css中，尺寸單位分為兩類：相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字體相對

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

6、其余都和em一樣。%：百分比，它是一個更純粹的相對長度單位，可以變動。它描述的是相對于父元素的百分比值。如50%，則為父元素的一半。9.4 css選擇器當(dāng)我們對頁面內(nèi)的元素進(jìn)行樣式設(shè)置時，首先要選中想要進(jìn)行樣式設(shè)置的一個或一些元素，然后進(jìn)行樣式定義。常用的選擇器如下。元素選擇器Id選擇器類選擇器派生選擇器子元素選擇器相鄰兄弟選擇器屬性選擇器偽類選擇器偽元素選擇器組合選擇器9.4.1 元素選擇器每一個html元素都可以成為一個選擇器。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)識一個元素時，就會賦予它一個id標(biāo)識，以便在對整個文檔進(jìn)行處理時能夠很快地找到這個元素。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 類選擇器用類選擇器可以把相同的元素分類定義成不同的樣式。在定義類選擇器時，在自定義類名稱的前面加一個句點“.”。設(shè)置樣式的元素通過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類格式化 我將被pFontTwo類格式化9.4.4 派生選擇器派生選擇器可以對某種元素包含關(guān)系（如元素1里包含元素2）進(jìn)行樣式定義。這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義。.pFont .sFont font-size: 1em; font-weight: normal; font-style: italic; font-family: 黑體 我將被sFont類格式化 我不會被格式化 我也將被sFont類格式化div b font-size: 2em; font-weight: normal; font-style: italic; font-

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

11、 這里會不會被格式化？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 屬性選擇器對帶有指定屬性的 HTML 元素設(shè)置樣式?？梢詾閾碛兄付▽傩缘?HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。選擇器描述Eattribute

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

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屬性選擇器中的一種。如果希望選擇有某個屬性的元素，而不論這個屬性值是什么，就可以使用這個屬性選擇器.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其余形式的屬性選擇器，請大家自己練習(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 偽類選擇器CSS 偽類用于向某些選擇器添加特殊的效果。語法如下：selector : pseudo-class property: value a:link color: #FF0000 /* 未訪問的鏈接 */ a:visited color: #00FF00 /* 已訪問的鏈接 */ a:hover color: #FF00FF /* 鼠

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

18、式2提示：在 css 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的提示：在 css 定義中，a:active 必須被置于 a:hover 之后，才是有效的9.4.8 偽類選擇器 :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 偽類選擇器-續(xù)2在css 3版本中增加了很多

19、有用的偽類選擇器，如下表所示。偽類名稱例子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 偽類選擇器 :last-child 會不會選中 會不會選中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 偽類選擇器 :only-child 會不會選中 會不會選中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 偽類選擇-demo 1 2 3 4 5 6 7 8 9 10 9.4.8 偽類

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 偽類選擇器 :nth-child(n):nth-child()可以選擇某個的一個或多個特定的子元素。:nth-child(length) /*參數(shù)是具體數(shù)字*/:nth-child(n) /*參數(shù)是n,n從0開始計算*/:

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

24、其中n是一個簡單的表達(dá)式，n取值是從“0”開始計算的，如果在實際應(yīng)用中直接這樣使用的話，將會選中所有子元素，比如說，在我們的例子中，在li中使用:nth-child(n),那么將選中所有的li。.demo li:nth-child(2n) background: lime.demo li:nth-child(2n+1) background: lime9.4.8 偽類選擇器 :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 偽類選擇器 :nth-last-child(n):nth-last-child ()選擇器和:nth-child()很相似，只是從最后一個元素開始算，來選擇特定元素。.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 偽類選擇器 :empty:empty是用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒

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

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