css樣式表基礎(chǔ)學(xué)習(xí)課件

1、本章要點(diǎn)本章要點(diǎn)nCSS基礎(chǔ)nCSS樣式n盒模型n定位與浮動(dòng)n列表n網(wǎng)頁(yè)布局與排版css為什么出現(xiàn)？HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容,然而隨著互聯(lián)網(wǎng)的發(fā)展，用戶對(duì)網(wǎng)頁(yè)的展現(xiàn)要求越來越高。新的 HTML 標(biāo)簽和屬性大量涌現(xiàn)，在一個(gè)頁(yè)面中用于修飾頁(yè)面的標(biāo)簽大大增多，因此創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層變得越來越困難。為了解決這個(gè)問題，萬(wàn)維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出 STYLES（樣式）。2.1 CSS基礎(chǔ)基礎(chǔ)2.1.1 CSS簡(jiǎn)介2.1 CSS基礎(chǔ)基礎(chǔ)2.1.1 CSS簡(jiǎn)介 CSS的全稱是“Cascad

2、ing Styles Sheets”，中文稱層疊樣式表，簡(jiǎn)稱樣式表。用于控制網(wǎng)頁(yè)樣式并允許將樣式與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。CSS是1996年由W3C審核通過，并且推薦使用的。CSS可將網(wǎng)頁(yè)的內(nèi)容與表現(xiàn)形式分開，使網(wǎng)頁(yè)的外觀設(shè)計(jì)從網(wǎng)頁(yè)內(nèi)容中獨(dú)立出來單獨(dú)管理。要改變網(wǎng)頁(yè)的外觀時(shí)，只需更改CSS樣式。css版本目前的最新版本是3.0，主流是css2.0，有部分瀏覽器如IE9提供了很好的css3.0的支持。2.1.2 在HTML中引入CSS的方法在HTML中有四種引入CSS樣式的方式：內(nèi)嵌樣式、內(nèi)部樣式表、鏈入外部樣式表、導(dǎo)入外表樣式表。（1）內(nèi)嵌樣式這是一個(gè)段落內(nèi)嵌樣式的使用是直接將在HTML

3、標(biāo)記里加入style參數(shù)。而style參數(shù)的內(nèi)容就是CSS的屬性和值，如下所示：（2）內(nèi)部樣式表是在標(biāo)簽中插入 標(biāo)簽，用法：pcolor:red;font-size:60;font-family:隸書 （3）鏈入外部樣式表是把樣式表保存為一個(gè)樣式表.css文件中，然后在頁(yè)面中用標(biāo)記鏈接到這個(gè)樣式表文件，標(biāo)簽必須放到頁(yè)面的區(qū)內(nèi)，如下所示： 在p.css文件中：在標(biāo)簽中pcolor:red;font-size:60;font-family:隸書 （4）導(dǎo)入式導(dǎo)入時(shí)與鏈入式都是講一個(gè)外部的css文件引入到html文件中。導(dǎo)入外部樣式表是指在內(nèi)部樣式表的里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用import，如下

4、所示：css樣式表如前所示在標(biāo)簽中 import url(p.css“); 注意：注意：導(dǎo)入外部樣式表必須在樣式表的開始部分，在其他內(nèi)部樣式表上面。 二者的區(qū)別：（1）鏈入式先引入樣式在加載內(nèi)容，導(dǎo)入時(shí)先加載內(nèi)如，后引入樣式。（2）在一個(gè)頁(yè)面中如僅需要引入一個(gè)css樣式，則采用 鏈入式；如果需要引入多個(gè)，則先使用鏈入式引入一個(gè)總 目錄，再采用導(dǎo)入時(shí)引入各個(gè)樣式；如果采用javascript來動(dòng)態(tài)決定引入的目錄，則采 用鏈入式。想一想？想一想？當(dāng)同時(shí)使用多種樣式引入方式，html頁(yè)面元素如何決定取哪個(gè)效果？ CSSCSS選擇器：選擇器：CSS 選擇器由三部分構(gòu)成：選擇器、屬性和值：selecto

5、r property: value例如：p color: #ff0000; 選擇器的作用：選擇器的作用：在HTML語(yǔ)言中，通過選擇器來控制HTML標(biāo)簽樣式。2.2 CSS基礎(chǔ)語(yǔ)法基礎(chǔ)語(yǔ)法聲明 使用規(guī)范：使用規(guī)范：每條聲明由一個(gè)屬性和其值組成。屬性和值被冒號(hào)分開。如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。例如：p text-align:center; color:red; 注意： CSS語(yǔ)言對(duì)所有屬性和值都有相對(duì)嚴(yán)格的要求，如果聲明的屬性在CSS規(guī)范中不存在，或者某個(gè)屬性的值不符合改屬性的要求，都不能使該語(yǔ)句生效。2.2.1標(biāo)記選擇器：整體控制 標(biāo)記選擇器是最常見的CSS選擇器。一個(gè)H

6、TML頁(yè)面有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的CSS樣式。因此，每一種HTML標(biāo)簽的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。2.2.2類選擇器：精確控制 類選擇器就是使頁(yè)面中的某些標(biāo)簽（可以是不同的標(biāo)簽）具有相同的樣式。類選擇器的名稱可以是任意英文單詞或者英文開頭與數(shù)字的組合，一般根據(jù)其功能和效果命名。class選擇器將匹配所有class=“”的元素。 注：注： 1、類選擇器經(jīng)常配合標(biāo)記選擇器使用；例如：樣式： pcolor:red; .onecolor:blue; 使用：2、可以同時(shí)使用兩種類選擇器， 中間以空格隔開：class=“one two”2.2.3 id選擇

7、器：控制特殊的網(wǎng)頁(yè)元素可以在HTML頁(yè)面中id參數(shù)指定某個(gè)單一元素，id選擇符是用來對(duì)這個(gè)單一元素定義單獨(dú)的樣式，具有唯一性。定義id選擇符時(shí)在id名稱前加“#”， 定義語(yǔ)法如下：id選擇器將匹配所有id=“”的元素。 注意： id 屬性只能在每個(gè) HTML文檔中出現(xiàn)一次。 id 選擇器不能結(jié)合使用，因?yàn)?id 屬性不允許有以空格分隔的詞列表。如這樣的寫法是完全錯(cuò)誤的。2.2.42.2.4群選擇器群選擇器當(dāng)幾個(gè)選擇器樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，選擇器之間用逗號(hào)分隔，這樣可以精簡(jiǎn)代碼?？梢园讶哼x擇器看成是幾個(gè)選擇器的并集。只要選擇器屬于并集都可以運(yùn)用該樣式。h1,h2,h2,h3,h5

8、,h6 color: green p,h2,h5 font-weight: bold; color: red;復(fù)合選擇器復(fù)合選擇器2.2.52.2.5交集選擇器交集選擇器 交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中兩者各自元素范圍的交集。其中，第一個(gè)選擇器必須是標(biāo)記選擇器，第二個(gè)必須是類選擇器或id選擇器，而且必須連續(xù)書寫。例如：p.special color: red;/* 紅色 */font-size:30; /* 字體大?。?0 */注意：交集選擇器必須是對(duì)此標(biāo)簽中，具有某種id或class樣式的規(guī)定，不針對(duì)其子標(biāo)簽。代碼： 感遇其一 作者：張九齡蘭葉春葳蕤，桂華秋皎潔 樣式：s

9、pan#p2color:yellow;/*正確*/ /*錯(cuò)誤p#p2color:yellow;*/2.2.6偽類選擇器偽類選擇器可以看做是一種特殊的類選擇器，偽類用于向某些選擇器添加特殊的效果。它的最大的用處就是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。偽類和類不同，是CSS已經(jīng)定義好的，不能象類選擇器一樣隨意用別的名字，根據(jù)上面的語(yǔ)法可以解釋為對(duì)象（選擇器）在某個(gè)特殊狀態(tài)下（偽類）的樣式。這里的選擇器可以是標(biāo)記選擇器，也可以是交集選擇器。2.2.7派生選擇器派生選擇器派生選擇器（派生選擇器（descendant selectordescendant selector）又稱為后代選擇器。）又稱

10、為后代選擇器。派生選擇器可以控制某元素后代的元素樣式。一般寫法是派生選擇器可以控制某元素后代的元素樣式。一般寫法是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，之間用空格分把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，之間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。p strongfont-style:italic;font-weight:normal;color:red;派生選擇器加強(qiáng)的部分派生選擇器派生選擇器的使用非常廣泛，不僅標(biāo)記選擇器可以以這種方式組合，類選擇器和id選擇器也可以采用這種方式進(jìn)行多層嵌套。.special strong

11、 font-style: italic; color: red; #one strongcolor: blue;td .one strongcolor: yellow;font-size:30px; 派生選擇器有一個(gè)易被忽視的方面，即派生選擇器所產(chǎn)生的影響不僅限于元素的“直接后代”，會(huì)影響到它的所有后代。例如：派生選擇器加強(qiáng)最內(nèi)層的部分派生選擇器2.2.8子選擇器 如果不希望任意的后代元素都被選擇，而只選擇某個(gè)元素的子元素，可以使用子選擇器（Child selector）。子元素選擇器使用大于號(hào)連接，只選擇某元素的“直接”后代。p spanfont-style:italic;color:red

12、;2.2.9屬性選擇器CSS2引入了屬性選擇器，屬性選擇器可以為擁有指定屬性的 HTML 元素設(shè)置樣式。titlecolor:red;ahref color:blue;ahreftitle color:yellow;【例例2-92-9】屬性選擇器屬性選擇器-title -title attribute_selector.htmlattribute_selector.html上例中屬性選擇器只是選擇了具有某種屬性的元素，而不論屬性值為多少。接下來介紹只選擇有特定屬性值的元素。 【例2-10】屬性選擇器匹配 attribute_selector_match.htmlEattr=value：指定屬性

13、名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“”不能不寫；Eattr=“value”：指定了屬性名，并且有屬性值，屬性值是以value開頭的。2.2.10 CSS2.2.10 CSS繼承繼承如果將各個(gè)HTML標(biāo)簽看作是一個(gè)個(gè)容器，其中被包含的小容器會(huì)繼承包含它的大容器的風(fēng)格。如果將大容器看成是父標(biāo)簽，小容器是子標(biāo)簽的話，CSS繼承是指父元素的樣式同樣適合于子元素，而且子標(biāo)簽可以增加自己的樣式。代碼：代碼：css的繼承屬性樣式：樣式：pcolor:red;font-size:30;strongfont-size:50;繼承的局限性：

14、并非所有的CSS屬性都可以繼承。文本相關(guān)屬性、列表相關(guān)屬性、顏色相關(guān)屬性是可以繼承的。但是，border屬性是用來設(shè)置元素邊框的，不能被繼承。邊框類屬性如border，margin，padding之類都是不能被繼承的。繼承有時(shí)也會(huì)引起錯(cuò)誤。例如定義bodycolor: red;，有些瀏覽器會(huì)使表格之外的顏色變成紅色，表格卻不會(huì)改變，這時(shí)，可以定義為body, table, th, tdcolor:red;使表格內(nèi)的文字都會(huì)變成紅色。2.2.11層疊層疊 CSS全稱叫做“層疊樣式表”，層疊是CSS中很重要的性質(zhì)。可以將層疊理解成遇到樣式“沖突”時(shí)如何采用何種樣式。注意：注意： 樣式優(yōu)先級(jí)規(guī)則：行

15、內(nèi)樣式id樣式類型樣式標(biāo)記樣式標(biāo)記樣式是做整體控制的，類型樣式是某種元素做精準(zhǔn)控制的，id樣式是對(duì)某一個(gè)特定元素做特殊控制的，行內(nèi)樣式僅對(duì)它所指定的一個(gè)元素產(chǎn)生影響。簡(jiǎn)單的說，越特殊的樣式優(yōu)先級(jí)越高。 【例2-11】層疊 cascading_style.html2.3 CSS樣式樣式屬性屬性描述描述background-color設(shè)置背景顏色background-image設(shè)置為背景圖像background-position設(shè)置背景圖像的起始位置background-repeat 設(shè)置背景圖像是否重復(fù)以及如何重復(fù)background-attachment 設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余

16、部分滾動(dòng)2.3.1 背景 CSS2中背景有5個(gè)主要屬性：1 1、背景色（、背景色（background-colorbackground-color）background-color: red; background-color: rgb(255, 0, 0); background-color: #ff0000; 該屬性被默認(rèn)設(shè)置為“transparent”，即透明2 2、背景圖片（、背景圖片（background-imagebackground-image） background-image屬性設(shè)置背景圖片。 該屬性被默認(rèn)設(shè)置為“none”，表示無(wú)背景圖。若想引入背景圖片則使用URL（圖片文

17、件的地址），地址可以使用相對(duì)路徑，也可以使用絕對(duì)路徑。如：background-image: url(bg_01.jpg); /*圖片和樣式表位于相同目錄下*/ background-image: url(./image/bg_02.jpg); /*圖片位于上級(jí)目錄的image目錄下*/ 3 3、背景重復(fù)（、背景重復(fù)（background-repeatbackground-repeat） background-repeat: repeat; /*圖片在橫向和縱向上平鋪*/ background-repeat: no-repeat; /*圖片不重復(fù)平鋪*/ background-repeat:

18、repeat-x; /*圖片在橫向上平鋪*/ background-repeat: repeat-y; /*圖片在縱向上平鋪*/ 該屬性被默認(rèn)設(shè)置為repeat，在使用該屬性前必須先設(shè)置好背景圖片。4 4、背景定位（、背景定位（background- positionbackground- position） 該屬性值有三類選擇。一種是用關(guān)鍵詞表示，x軸上的關(guān)鍵詞有l(wèi)eft，right，center，y軸上的關(guān)鍵詞有top，bottom，center。如： background-position: top right; /*圖像放置在元素的右上角*/ 第二種方式是由數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值

19、。長(zhǎng)度值指的是距元素左上角的偏移。 background-position:50px 50px; /*圖像放置在元素左上角向右50px，向下50px的位置*/第三種方式是百分?jǐn)?shù)表示。如： background-position:50% 50%; 指的是中心位置，也就是將圖片的中心位置和元素的中心位置對(duì)齊。思考？若百分比為100% 100%？若百分比為60% 20%？5 5、背景滾動(dòng)（、背景滾動(dòng)（background- attachmentbackground- attachment）設(shè)置背景圖片是否跟著頁(yè)面內(nèi)容進(jìn)行滾動(dòng)。該屬性有三個(gè)值，scroll（滾動(dòng)），fixed（固定） 和 inheri

20、t（繼承）。6 6、背景簡(jiǎn)寫屬性（、背景簡(jiǎn)寫屬性（backgroundbackground）background： background-color屬性值 background-image屬性值 background-repeat屬性值 background-attachment屬性值 background-position屬性值一種綜合的寫法：background: color image repeat attachment position如果不設(shè)置其中的某個(gè)值，也不會(huì)出問題，如果省略值的話，就使用屬性的默認(rèn)值。默認(rèn)值為：background:transparent none repeat

21、 scroll 0% 0%。 2.3.2 2.3.2 字體字體屬性屬性描述描述font 簡(jiǎn)寫屬性，作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中 font-family 設(shè)置字體系列 font-size 設(shè)置字體的尺寸 font-style 設(shè)置字體風(fēng)格 font-variant 以小寫 大寫字體或者正常字體顯示文本 font-weight 設(shè)置字體的粗細(xì) CSS2中字體有6個(gè)主要屬性：1 1、字體系列（、字體系列（font-familyfont-family） font-family 屬性用來設(shè)置文本使用哪種類型的字體?；菊Z(yǔ)法為：在 CSS 中，有兩種不同類型的字體系列名稱： l通用字體系列

22、- 擁有相似外觀的字體系統(tǒng)組合（比如 “Serif” 或 “Monospace”） ；l特定字體系列 - 具體的字體系列（比如 Times 或 Courier） font-family : 黑體, 隸書;（1 1）使用通用字體系列）使用通用字體系列 如果希望文檔使用一種 sans-serif 字體，但是并不關(guān)心是哪一種字體，以下就是一個(gè)合適的聲明： body font-family: sans-serif; （2 2）指定字體系列）指定字體系列 h2font-family:宋體; h4font-family:隸書, Times New Roman;/*按順序匹配*/注意： 當(dāng)指定多種字體時(shí)，用

23、“，”分隔每種字體名稱。 當(dāng)字體的名稱之間有空格或超過一個(gè)單詞時(shí)，應(yīng)該使用 把該字體名稱括起來，如Times New Roman。 2、字體大?。?、字體大?。╢ont-size） 用具體字號(hào)表定義字體大小，可以取下列數(shù)值之一：xx-small, x-small, small, medium, large, x-large, xx-large。使用長(zhǎng)度單位來設(shè)置字體大小，常用px和ptp font-size:14px; p font-size:14pt; pxpx是一個(gè)點(diǎn)，是一個(gè)點(diǎn)，它不是自然界的長(zhǎng)度單位，誰(shuí)能說出一個(gè)“點(diǎn)”有多長(zhǎng)多大么？可以畫的很小，也可以很大。如果點(diǎn)很小，那畫面就清晰，我們稱

24、它為“分辨率高”，反之，就是“分辨率低”。所以，“點(diǎn)”的大小是會(huì)“變”的，也稱為“相對(duì)長(zhǎng)度”。默認(rèn)的顯示設(shè)置中，把文字定義為96DPI，這樣的定義，說明了：1px1/96英寸。 ptpt全稱為全稱為pointpoint，但中文不叫“點(diǎn)”，確切的說法是一個(gè)專用的印刷單位“磅”，大小為1/72英寸。所以它是一個(gè)自然界標(biāo)準(zhǔn)的長(zhǎng)度單位，也稱為“絕對(duì)長(zhǎng)度”。 因此就有這樣的說法，pixel是相對(duì)大小，而point是絕對(duì)大小。 瀏覽器默認(rèn)的字體大小為：瀏覽器默認(rèn)的字體大小為：12px(12px(中文中文),16(),16(英文英文) ) 使用em來設(shè)置字體大小 p font-size:1em /*1em=

25、16px*/“em”是一個(gè)相對(duì)的大小，我們可以設(shè)置1em1em，0.5em0.5em等， “em”還可以指定到小數(shù)點(diǎn)后三位，比如“1.365em”。這里相對(duì)指的是相對(duì)于父元素的相對(duì)于父元素的font-sizefont-size。例如：如果在一個(gè)設(shè)置字體大小為“16px”，那么的后代元素將繼承它的字體大小，除非重新在后代元素中進(jìn)行顯式設(shè)置。如果將其子元素的字體大小設(shè)置為“0.75em”，那么其字體大小計(jì)算出來后就相當(dāng)于“0.75 X 16px = 12px”； 使用百分比來設(shè)置字體大小 h1 font-size: 300%; h2 font-size: 200%; 3 3、字體風(fēng)格（、字體風(fēng)格（

26、font-stylefont-style） font-style:normal; /*設(shè)置使用正常字*/ font-style:italic; /*設(shè)置使用斜體字*/ font-style:oblique; /*設(shè)置使用傾斜字*/ 斜體（italic）是一種意大利字體風(fēng)格，而傾斜（oblique）文本則是真正的傾斜字體，由于中文傾斜不好看，所以不常用傾斜顯示。 4 4、字體粗細(xì)（、字體粗細(xì)（font-weightfont-weight） font- weight:normal; /*設(shè)置使用正常字*/ font- weight:bold; /*設(shè)置使用粗體字*/ 注意：1、其值lighter可

27、以使字體變得細(xì)一個(gè)級(jí)別，boder可以粗一個(gè)級(jí)別。2、粗細(xì)可以指定范圍：100-900。3、normal的值為400，bold的值為700。5 5、字體轉(zhuǎn)為大寫屬性（、字體轉(zhuǎn)為大寫屬性（font-variantfont-variant） font-variant:normal; /*大小寫正常不轉(zhuǎn)換*/ font-variant:small-caps; /*小寫轉(zhuǎn)成大寫*/font-variant:inherit ; /*規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值*/ 6 6、字體簡(jiǎn)寫屬性（、字體簡(jiǎn)寫屬性（fontfont） font 簡(jiǎn)寫屬性將所有字體屬性合寫為一行。font:

28、font-style屬性值 font-variant屬性值 font-weight屬性值 font-size屬性值 line-height屬性值 font-family屬性值font: style variant weight font-size line-height family 知識(shí)回顧：1、背景屬性屬性描述描述background-color設(shè)置背景顏色background-image設(shè)置為背景圖像background-position設(shè)置背景圖像的起始位置background-repeat 設(shè)置背景圖像是否重復(fù)以及如何重復(fù)background-attachment 設(shè)置背景圖像是否固

29、定或者隨著頁(yè)面的其余部分滾動(dòng)2、文字、文字屬性屬性描述描述font 簡(jiǎn)寫屬性，作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中 font-family 設(shè)置字體系列 font-size 設(shè)置字體的尺寸 font-style 設(shè)置字體風(fēng)格 font-variant 以小寫 大寫字體或者正常字體顯示文本 font-weight 設(shè)置字體的粗細(xì) 2.3.3 2.3.3 文本文本 通過文本屬性，可以改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)等。1 1、文本顏色（、文本顏色（colorcolor）2 2、字體對(duì)齊（、字體對(duì)齊（text-aligntext-align）該屬性有四種取值，默認(rèn)為

30、lefttext-align:left; /*左對(duì)齊*/text-align:right; /*右對(duì)齊*/text-align:center; /*居中*/text-align:justify; /*兩端對(duì)齊*/3、文本縮進(jìn)（、文本縮進(jìn)（text-indent）text-indent:1cm; /*文本縮進(jìn)1cm*/text-indent:20px; /*文本縮進(jìn)20像素*/text-indent: -2em; /* text-indent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。*/ text-indent 屬性文本段落首行縮進(jìn)距離。該屬性

31、最常見的用途是將段落的首行縮進(jìn)。該屬性值可以是百分比數(shù)字或者長(zhǎng)度值，該長(zhǎng)度可以為負(fù)值。如：4、文本修飾（、文本修飾（text-decoration）text-decoration :none; /*沒有任何畫線*/text-decoration :underline; /*下畫線*/ text-decoration :overline; /*上畫線*/ text-decoration :line-through; /*刪除線*/ text-decoration :blink; /*閃爍（需要特定的瀏覽器支持）*/ text-decoration 屬性設(shè)置文本的裝飾方式，即文本的畫線方式。該屬性

32、有5個(gè)值，其中默認(rèn)值為none。例如：a text-decoration: none;5、字體轉(zhuǎn)換（、字體轉(zhuǎn)換（text-transform）text-transform: none; /*文本不做任何改動(dòng)*/text-transform: uppercase; /*文本全部為大寫字母*/text-transform: lowercase; /*文本全部為小寫字母*/text-transform: capitalize; /*文本中的每個(gè)單詞以大寫字母開頭*/該屬性值值有4個(gè)，默認(rèn)的屬性值為none。6、文本方向（、文本方向（direction）direction: ltr; /*從左到右顯示

33、文本*/direction: rtl; /*從右到左顯示文本*/該屬性值有2個(gè)，默認(rèn)值為ltr，表示從左到右顯示文本。如果想顯示為我國(guó)古代文字的書寫方式，需要使用writing-mode屬性。書寫次序?qū)傩詴鴮懘涡驅(qū)傩?語(yǔ)法：writing-mode：書寫模式屬性值該屬性值有2個(gè)：tb-rl（從上到下，從右到左顯示文本）；lr-tb（從上到下，從左到右顯示文本）7、文本行高（、文本行高（line-height）line-height:16px; /*行高為16像素*/line-height:2; /*行高為當(dāng)前字號(hào)乘以2*/line-height:200%; /*行高為當(dāng)前字號(hào)的200%*/該屬

34、性值默認(rèn)為normal，屬性值可以使用數(shù)字，也可以使用長(zhǎng)度值，還可以使用百分比。8、字間距（、字間距（letter-spacing）letter-spacing:16px; /*字符間隔為16像素*/letter-spacing:-3px; /*字符間隔減少3px*/ letter-spacing屬性設(shè)置字符間的間隔。該屬性定義了在文本字符框之間插入多少空間。該屬性值默認(rèn)為normal，值為 0，屬性值也可以使用長(zhǎng)度值，當(dāng)長(zhǎng)度值為負(fù)值時(shí)表示減少字符間隔。9 9、單詞間距（、單詞間距（word-spacingword-spacing） word-spacing屬性與letter-spacing屬

35、性非常相似，word-spacing屬性設(shè)置單詞之間的間隔，而letter-spacing屬性設(shè)置的是字母間的間隔。該屬性值默認(rèn)為normal(相當(dāng)于值為 0)，屬性值也可以使用長(zhǎng)度值，當(dāng)長(zhǎng)度值為負(fù)值時(shí)表示減少單詞間隔。對(duì)于中文來說，漢字間沒有word-spacing ，只有l(wèi)etter-spacing。10、空白處理（、空白處理（white-space） white-space 屬性設(shè)置應(yīng)該如何處理在元素內(nèi)的空隙。該屬性影響瀏覽器處理字之間和文本行之間的空白符的方式。該屬性值有5個(gè)，默認(rèn)值為normal。注意：經(jīng)測(cè)試，IE 8 以及更早版本的瀏覽器不支持pre，pre-wrap和pre-li

36、ne屬性。vertical-align :baseline; /*默認(rèn)，元素放置在父元素的基線上；*/ vertical-align :top; /*元素的頂端與行中最高元素的頂端對(duì)齊；*/ vertical-align :middle; /*元素在垂直方向上居中對(duì)齊； */vertical-align :bottom; /*元素的頂端與行中最低的元素的頂端對(duì)齊； */2.3.2.11 垂直對(duì)齊（垂直對(duì)齊（vertical-align）vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線在垂直方向上進(jìn)行對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。在表

37、單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。該屬性值有10個(gè)，默認(rèn)值為baseline。vertical-align :text-top; /*元素的底端與父元素字體的頂端對(duì)齊； */vertical-align :text-bottom; /*元素的底端與父元素字體的底端對(duì)齊； */vertical-align :sub; /*垂直對(duì)齊文本的下標(biāo)； */vertical-align :super; /*垂直對(duì)齊文本的上標(biāo)； */vertical-align :length; /*當(dāng)前位置與頂部的距離；*/ vertical-align :%; /*使用 line-height

38、屬性的百分比值來排列此元素，允許使用負(fù)值*/ css之之border CSS 邊框?qū)傩栽试S你規(guī)定元素邊框的樣式和顏色,CSS 邊框?qū)傩钥梢员粦?yīng)用于任何元素。border簡(jiǎn)寫屬性。作用是在一個(gè)聲明中用來設(shè)置四個(gè)邊框的所有屬性。border-width border-style border-color border-style:設(shè)置四個(gè)邊框的樣式，可以設(shè)置一到四個(gè)樣式。none hidden dotted dashed solid double groove ridge inset outset border-color:設(shè)置四個(gè)邊框的顏色，可以設(shè)置一到四個(gè)顏色。colorborder-righ

39、t簡(jiǎn)寫屬性。將所有用于右邊框的屬性設(shè)置于一個(gè)聲明中。border-right-width border-style border-color border-right-color設(shè)置右邊框的顏色border-colorborder-right-style設(shè)置右邊框的樣式border-styleborder-right-width設(shè)置右邊框的寬度。thin medium thick length csscss之表格之表格tdtrtable優(yōu)先文字font, color, 對(duì)齊方式text-align, vertical-align背景background邊框border 只可於table, td

40、, th設(shè)定間距margin 只可於table, caption設(shè)定內(nèi)距padding 只可於td,th設(shè)定單元格距離border-spacing 只可於table設(shè)定, Firefox寬度高度width與height 只可於table, td, th設(shè)定caption-side: bottomtop | right | bottom | leftbody background-image: url(rule2.png); margin:0px;table border: 2px solid red; color: #030; font-size: 18px; margin: 10px;cap

41、tion border: 2px solid green; caption-side: bottom; margin: 20px;td border: 2px solid blue; padding: 15px; text-align: center;span background-color: #F0F0F0;分開border-collapse: separate;合并border-collapse: collaspe;table color: red; font-size: 24px; border: 10px inset green;td border: 10px inset gray;

42、 padding: 10px;border-spacing: hlength vlength* I.E. 8不支持(使用HTML table之cellspacing屬性)顯示empty-cells:show;隱藏empty-cells: hide;I.E. 7FirefoxXOhideshowtable color: red; font-size: 24px; border: 1px solid blue;td border: 1px solid blue; padding: 10px; background-color: #F0F0F0;練習(xí)：練習(xí)：1表格嵌套表格嵌套 練習(xí)：練習(xí)：2 歌曲下

43、載歌曲下載2.3.4 實(shí)例：實(shí)例： 論壇論壇2.4盒模型盒模型 CSS盒模型（Box Model）的學(xué)習(xí)和理解一直是學(xué)習(xí)Div+CSS網(wǎng)頁(yè)布局的基礎(chǔ)內(nèi)容。 每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，占據(jù)一定的頁(yè)面空間，一個(gè)頁(yè)面可以看做是由很多這樣的盒子組成，這些盒子之間會(huì)相互影響。要想掌握盒模型需要從兩方面來理解，一是理解盒模型的內(nèi)部結(jié)構(gòu)，二是理解盒子之間的關(guān)系。2.4.1盒的內(nèi)部結(jié)構(gòu)盒的內(nèi)部結(jié)構(gòu)什么是什么是csscss盒模型？盒模型？ W3C組織建議把所有網(wǎng)頁(yè)上的對(duì)象都放在一個(gè)盒(box)中，設(shè)計(jì)者可以通過創(chuàng)建定義來控制這個(gè)盒的屬性，這些對(duì)像包括段落、列表、標(biāo)題、圖片以及層。 盒模型主要

44、定義四個(gè)區(qū)域：內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。margin，background-color，background-image，padding，content，border之間的層次、關(guān)系如下：W3C定義的平面盒模式如下：整個(gè)盒模型在頁(yè)面中實(shí)際所占的寬度和高度分別為：寬度 = 左邊界 + 左邊框 + 左填充 + 內(nèi)容寬 + 右填充 + 右邊框 + 右邊界高度 = 上邊界 + 上邊框 + 上填充 + 內(nèi)容高 + 下填充 + 下邊框 + 下邊界注意：1、width和height定義的是content部分的寬度和高度而不是整個(gè)盒子的高度，

45、這個(gè)是初學(xué)者常犯的一個(gè)錯(cuò)誤，padding border margin的寬度依次加在外面。背景會(huì)填充padding和content部分。2、如果頁(yè)面沒有做 DOCTYPE 聲明，標(biāo)準(zhǔn)瀏覽器將使用標(biāo)準(zhǔn)盒模型解析元素盒子，而 IE 瀏覽器將使用 IE 的盒模型解析元素盒子，兩種盒模型對(duì)于盒子 width 和 height 的屬性值定義不同。為了使頁(yè)面代碼能足夠強(qiáng)壯，最好在網(wǎng)頁(yè)源碼中標(biāo)簽之前加入 DOCTYPE 聲明。2.4.2內(nèi)邊距內(nèi)邊距(padding)padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。padding 屬性值可以是長(zhǎng)度值或百分比值，但不允許使用負(fù)值。padding-top

46、: /*設(shè)置元素的上內(nèi)邊距*/padding-right: /*設(shè)置元素的右內(nèi)邊距*/padding-bottom: /*設(shè)置元素的下內(nèi)邊距*/padding-left: /*設(shè)置元素的左內(nèi)邊距*/padding有四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：為padding設(shè)置值：1、設(shè)置1個(gè)屬性值表示上下左右四個(gè)內(nèi)邊距均為該值。2、設(shè)置2個(gè)屬性值時(shí)，第一個(gè)值為上下內(nèi)邊距的值，第二個(gè)值為左右內(nèi)邊距的值。3、設(shè)置3個(gè)屬性值時(shí)，第一個(gè)值為上內(nèi)邊距的值，第二個(gè)值為左右內(nèi)邊距的值，第三個(gè)值為下內(nèi)邊距的值。4、設(shè)置4個(gè)屬性值時(shí)，依次表示上、右、下、左四個(gè)內(nèi)邊距的值，即從上邊距開始逆時(shí)針設(shè)置各值。元素的

47、內(nèi)邊距也可以設(shè)置為百分比值。百分比值是相對(duì)于其父元素的 width 計(jì)算的。2.4.3外邊距外邊距(margin) CSS 外邊距 (margin) 屬性定義元素周圍的空間，也就是該盒模型和其他元素的空白區(qū)域。 和內(nèi)邊距設(shè)置相同，可以使用單獨(dú)的屬性對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置，也可以直接使用margin屬性同時(shí)改變所有的外邊距。margin 的默認(rèn)值是 0，所有如果沒有為 margin 聲明一個(gè)值，就不會(huì)出現(xiàn)外邊距。2.2.4邊框邊框(border)1、邊框?qū)挾?、邊框顏色3、邊框樣式2.2.5塊級(jí)元素與內(nèi)聯(lián)元素 在不使用特定的定位和布局手段時(shí)，網(wǎng)頁(yè)中各元素會(huì)有自己的排列布局方式，這就是標(biāo)

48、準(zhǔn)文檔流形成的效果。 在標(biāo)準(zhǔn)文檔流里將元素分為塊級(jí)元素和內(nèi)聯(lián)元素。1、塊級(jí)元素、塊級(jí)元素(block element) 以塊顯示的元素，高度寬度都是可以設(shè)置的。塊級(jí)元素默認(rèn)狀態(tài)下每次都占據(jù)一整行，后面的內(nèi)容也必須再新起一行顯示。也就是塊級(jí)元素的寬度始終與瀏覽器寬度一樣，與內(nèi)容無(wú)關(guān)。 主要的塊級(jí)元素有：2、內(nèi)聯(lián)元素、內(nèi)聯(lián)元素(inline element) 內(nèi)聯(lián)元素也叫行內(nèi)元素，其文本的顯示方式，與塊級(jí)元素相反，內(nèi)聯(lián)元素的高度寬度都是不可以設(shè)置的，其寬度就是自身文字或者圖片的寬度。內(nèi)聯(lián)元素的顯示特點(diǎn)就是像文本一樣的顯示，不會(huì)獨(dú)自占據(jù)一個(gè)行。 主要的內(nèi)聯(lián)元素有： 當(dāng)加入了css控制以后，塊元素和內(nèi)

49、聯(lián)元素的這種屬性差異就不成為差異了。比如，可以把內(nèi)聯(lián)元素設(shè)置display:block。標(biāo)簽和標(biāo)簽和 標(biāo)簽早在HTML3.0時(shí)代已經(jīng)出現(xiàn)，但那時(shí)并不常用，直到css的普及，才逐漸發(fā)揮出它的優(yōu)勢(shì)。標(biāo)簽在HTML4.0時(shí)才被引入，它是專門針對(duì)樣式表而設(shè)計(jì)的標(biāo)簽。關(guān)于關(guān)于divdiv 簡(jiǎn)單而言是一個(gè)區(qū)塊容器標(biāo)簽，在之間相當(dāng)于一個(gè)容器，可以容納段落，標(biāo)題，表格，圖片等各種HTML元素?？梢园雅c中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于CSS控制。關(guān)于關(guān)于spanspan 僅僅是一個(gè)行內(nèi)元素，在它的前后不會(huì)換行。沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，就可以使用元素。2.2.62.2.6邊距合

50、并邊距合并1、內(nèi)聯(lián)元素之間的水平margin 當(dāng)兩個(gè)內(nèi)聯(lián)元素緊鄰時(shí)，它們之間的距離為第一個(gè)元素的margin-right加上第二個(gè)元素的margin-left。當(dāng)兩個(gè)塊級(jí)元素垂直排列時(shí)，外邊距會(huì)出現(xiàn)“合并”，也叫做“塌陷”。外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。高度中的較大者。2、塊級(jí)元素之間的垂直、塊級(jí)元素之間的垂直margin注意：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。2.2.72.2.7實(shí)例：實(shí)例： div div 文字文字2.5浮動(dòng)與定位浮

51、動(dòng)與定位2.5.1浮動(dòng)(float) 在標(biāo)準(zhǔn)流里塊級(jí)元素占據(jù)整行空間，而內(nèi)聯(lián)元素則是像文本一樣的一個(gè)接著一個(gè)的排列。 浮動(dòng)屬性的定義是通過float來聲明的。在CSS 中，任何元素都可以浮動(dòng)，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?float屬性有3個(gè)值：none（默認(rèn)，不浮動(dòng)）、left（靠左浮動(dòng)）、right（靠右浮動(dòng)）。例一：例一：1、增加一個(gè)左浮動(dòng)塊2和一個(gè)右浮動(dòng)塊3，觀察文字的顯示區(qū)域。2、全部左浮動(dòng)，并增加塊1的高度。當(dāng)變化瀏覽器的窗口大小時(shí)觀察塊三的位置，例二：實(shí)現(xiàn)如下浮動(dòng)效果：例三：例三：例四：2.5.2定位(position)posit

52、ion 屬性值：static （靜態(tài)定位）（靜態(tài)定位）默認(rèn)的屬性值，表示保持在應(yīng)該在的位置，前面的例子都是這種結(jié)構(gòu)。 relative （相對(duì)定位）（相對(duì)定位）元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。 absolute （絕對(duì)定位）（絕對(duì)定位）元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)已定位的父元素或者是瀏覽器窗口。fixed （固定定位）（固定定位）元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是瀏覽器窗口本身。 1、相對(duì)定位、相對(duì)定位(relative) 相對(duì)定位有四個(gè)屬性left、right、t

53、op、bottom，通過設(shè)置這四個(gè)屬性值，讓這個(gè)元素“相對(duì)于”它的原來所在的位置進(jìn)行移動(dòng)。注意：注意： 相對(duì)定位是以盒子本身在標(biāo)準(zhǔn)流中或浮動(dòng)時(shí)原本相對(duì)定位是以盒子本身在標(biāo)準(zhǔn)流中或浮動(dòng)時(shí)原本的位置作為偏移基準(zhǔn)。的位置作為偏移基準(zhǔn)。.box2_relative position: relative; left: 30px; top: 20px;例如：例如：內(nèi)部塊結(jié)論：1、使用相對(duì)定位的盒子，會(huì)根據(jù)它本來的位置，通過偏移指定的距離，到達(dá)新的位置。2、使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它對(duì)父塊沒有影響。再增加塊2發(fā)現(xiàn)它對(duì)兄弟塊也無(wú)影響，就好像它仍然在原來的位置上一樣。浮動(dòng)塊的相對(duì)偏移對(duì)浮動(dòng)的盒子實(shí)行相對(duì)

54、定位和標(biāo)準(zhǔn)流一樣，它也是相對(duì)于原本的位置，其它盒子也以為它還在那里。2 2、絕對(duì)定位、絕對(duì)定位(absolute)(absolute)設(shè)置為絕對(duì)定位的元素框從標(biāo)準(zhǔn)文檔流完全刪除。例如：塊1塊2塊3塊2會(huì)徹底脫離標(biāo)準(zhǔn)流，塊3會(huì)緊貼塊1，就好像沒有塊2一樣。而且我們會(huì)發(fā)現(xiàn)，塊2以瀏覽器窗口作為定位基準(zhǔn)。是否所有的絕對(duì)對(duì)位都以瀏覽器窗口來定位呢？答案是否定的。.ddwidth:600px;height:400px;background-color:yellow;position:absolute;結(jié)論： 絕對(duì)定位的盒子以它最近的已經(jīng)定位了的祖先元素為基準(zhǔn)進(jìn)行偏移。已經(jīng)定位是指position的值被設(shè)置。2.5.3 display2.5.3 display屬性屬性 在標(biāo)準(zhǔn)文檔流中，塊級(jí)元素占據(jù)一行空間，內(nèi)聯(lián)元素則在一排中一個(gè)接一個(gè)的排列。但是，塊級(jí)元素也可以通過display屬性設(shè)置為內(nèi)聯(lián)元素，同樣內(nèi)聯(lián)元素也