1、1,CSS 教 程,網(wǎng)頁制作系列制作 鄭偉,2,一本優(yōu)秀的雜志不僅僅是具備一套完整的結(jié)構(gòu)內(nèi)容、巧妙出奇的頁面布局，還需要一個(gè)統(tǒng)一的風(fēng)格，好的風(fēng)格代表了一種高級的品味。 優(yōu)秀的網(wǎng)頁制作也不再是漂亮的圖形、優(yōu)美的布局和完整的結(jié)構(gòu)就能滿足了，使網(wǎng)站整體保持一致的風(fēng)格，例如字體字形的顯示，頁面邊距等等，也是使網(wǎng)站作品有美感有品味的關(guān)鍵一步。 層疊樣式表為你完成這一任務(wù)。,3,通過大量的 HTML 語言實(shí)現(xiàn)，即每次遇上標(biāo)題，用 HTML 標(biāo)簽進(jìn)行設(shè)置： 這里是標(biāo)題 顯然你很容易就會為之頭大如斗的，即使你有很好的耐心卻難保掛一漏萬，設(shè)置一多就會有所疏忽。 最后，對于公司建設(shè)的大型站點(diǎn)來說，往往分成幾個(gè)組各

2、自開發(fā)，這時(shí)候就更需要一個(gè)統(tǒng)一的樣式表來規(guī)劃網(wǎng)站的整體面貌，各個(gè)組都在遵循這統(tǒng)一的樣式表的基礎(chǔ)上進(jìn)行各自的開發(fā)建設(shè)。,4,HTML 語言由標(biāo)志和屬性構(gòu)成， CSS 也是如此。 樣式表基本語法： HTML 標(biāo)志 標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值； ,樣式表放在不同的地方，產(chǎn)生作用的范圍也不同。大致來說，樣式表分為內(nèi)聯(lián)樣式表和外聯(lián)樣式表，即有頁面內(nèi)放置、外部引用、外部導(dǎo)入三種方式。,5,1 、內(nèi)聯(lián)樣式表 例如我們要設(shè)置一 HTML 頁面中所有 H1 標(biāo)題字顯示為藍(lán)色，其代碼如下： This is a CSS samples . 頁面內(nèi)容 ,1.樣式表信息包括在 和 標(biāo)記中。 2

3、.放到 和 中去。 3.整個(gè)頁面中產(chǎn)生作用，,6,注意， 1. 標(biāo)記中包括了 TYPE “text/css” ，這是讓瀏覽器知道你是使用 CSS1 樣式規(guī)則。 2. 加入 這一對注釋標(biāo)記是防止有些老式的瀏覽器不認(rèn)識樣式表規(guī)則，可以把該段代碼忽略不計(jì)。,7,在使用樣式表時(shí)，經(jīng)常會有多標(biāo)志用同一個(gè)屬性 比如： B color: red I color: red H1 color: red 用逗號分隔各個(gè) HTML 標(biāo)志，把三行代碼合并成一行，我們可以寫成： B,I,H1 color: red 同一個(gè) HTML 標(biāo)志，可能定義到多種屬性，例如，我們規(guī)定把從 H1 到 H6 各級標(biāo)題定義為紅色黑體字，

4、帶下劃線，則應(yīng)寫為： H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: 黑體 注意各個(gè)標(biāo)志屬性之間用分號隔開。,8,內(nèi)聯(lián)樣式表還包括一種直接插入方式，即單獨(dú)指定 HMTL 頁面中某一個(gè)標(biāo)志，規(guī)定其風(fēng)格樣式，可以寫為： 定義該表格內(nèi)的字符大小為 10pt ，顏色為藍(lán)色。,9,2 、外部樣式表 建立一個(gè)完全獨(dú)立的文本文件，其擴(kuò)展名為 .css ，文件內(nèi)容則輸入樣式表信息，除去任何相關(guān)的 HTML 語言。 例如在外部樣式表中輸入： body line-height: 130pt H1,H2,H3,H4,H5,

5、H6 color: red; text-decoration: underline; font-family: 黑體 b font-style: italic; color: #FF3333; text-decoration: underline 少了 和注釋標(biāo)記。 保存為 example.css 。,10,有兩種辦法可以實(shí)現(xiàn)引用外部樣式表。 （一）使用 標(biāo)記鏈接外部樣式表 HREF 中應(yīng)包含路徑信息。 一個(gè) HTML 文檔可引用多個(gè)外部樣式表，例如： 首先鏈接的 example.css 作為該文檔缺省樣式表，當(dāng)樣式定義產(chǎn)生沖突時(shí)首先滿足前者。,11,（二）使用 IMPORT 導(dǎo)入樣式表信息

6、存在于在 和 標(biāo)記中 例如： import “example.css”; import “style/other.css”; 樣式表產(chǎn)生作用的優(yōu)先級按照導(dǎo)入的先后順序來設(shè)定。樣式表信息規(guī)則一多，就比較容易產(chǎn)生沖突。這時(shí)就看哪一個(gè)樣式表被引用在前，它就是具有第一優(yōu)先權(quán)的。,12,四、創(chuàng)建CLASS 同一個(gè)HTML標(biāo)志有多種風(fēng)格時(shí)。應(yīng)該創(chuàng)建類（CLASS），也可直接插入方式可以一一的對之進(jìn)行定義，但繁瑣。 定義語法為： 標(biāo)志.類名 標(biāo)志屬性：屬性值； 標(biāo)志屬性：屬性值； 標(biāo)志屬性：屬性值 引用方法是： ,13,例如，我們打算讓某一些段落縮進(jìn)0.5in，另一些段落縮進(jìn)1.0in，我們知道段落采用這個(gè)

7、標(biāo)記。 代碼如下： This is a sample 這個(gè)段落將縮進(jìn)0.5in 這個(gè)段落將比上面縮進(jìn)一倍距離 ,14,可以直接定義CLASS，應(yīng)用于HTML頁面中的各個(gè)標(biāo)記。其語法只是比上面的少了一個(gè)標(biāo)志： .類名標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值 例如： 引用的方法： 例如 設(shè)置某單元格中的字符大?。?設(shè)置某一段落字符： ,15,用ID建立多種風(fēng)格，實(shí)現(xiàn)同一規(guī)則被應(yīng)用到頁面中不同的地方。 語法是： #id名 標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值 如上面的例子，可以改寫為： 引用的方法也相同：。,16,偽類和偽元素 偽類和偽元素是特殊的類和元素，能自動地被支持

8、CSS的瀏覽器所識別。偽類區(qū)別開不同種類的元素(例如，visited links(已訪問的連接)和active links(可激活連接)描述了兩個(gè)定位錨(anchors)的類型)。偽元素指元素的一部分，例如段落的第一個(gè)字母。 偽類或偽元素規(guī)則的形式如 選擇符:偽類 屬性: 值 或 選擇符:偽元素 屬性: 值 偽類和偽元素不應(yīng)用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用，如下: 選擇符.類: 偽類 屬性: 值 或 選擇符.類: 偽元素 屬性: 值 ,17,定位錨偽類 偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接

9、(active links)。定位錨元素可給出偽類link、visited或active。 A:link color: red A:active color: blue; font-size: 125% A:visited color: green; font-size: 85% ,首個(gè)字母偽元素 首個(gè)字母偽元素用于加大(drop caps)和其他效果 P:first-letter font-size: 300%; float: left ,18,五、邊框?qū)傩?每一個(gè)網(wǎng)頁都可以理解成是被一個(gè)方框框起來的，而頁面中不同的部分又可以分為一個(gè)個(gè)小的方框。因此定義方框的邊距、邊界、顏色等的邊框?qū)傩詰?yīng)用

10、而生。 1、邊距屬性： 左邊距（margin-left） 右邊距（margin-right） 上邊距（margin-top） 下邊距（margin-bottom） 邊距（margin） 邊距屬性定義HTML頁面中方框四邊和其他元素之間的空白距離，每一個(gè)margin-side屬性只影響到一條邊，而margin則提供了一個(gè)同時(shí)設(shè)置四個(gè)邊距的機(jī)會。,19,2、填充屬性： 左填充（padding-left） 右填充（padding-right） 上填充（padding-top） 下填充（padding-bottom） 填充（padding） 填充屬性設(shè)置邊框和內(nèi)部元素的距離。它和邊距屬性十分相似，每個(gè)

11、padding-side定義一個(gè)邊框距離，padding則同時(shí)定義四個(gè)距離。,20,3、邊界屬性（ 3.1 邊界寬度） 上邊界寬（border-top-width） 右邊界寬（border-right-width） 下邊界寬（border-bottom-width） 左邊界寬（border-left-width） 邊界寬（border-width 這幾個(gè)屬性定義邊界寬度，用thin、medium和thick分別表示細(xì)、中等和粗，或者指定具體的數(shù)值來定義邊界的寬度。,21,3.2 邊界樣式（border-style） 該屬性用以定義邊框的風(fēng)格呈現(xiàn)式樣。共有九種。 none 不顯示邊框，為缺省值

12、dotted 點(diǎn)線 dashed 虛線 solid 實(shí)線 double 雙線 groove 凹線 ridge 凸線 inset 使整個(gè)方框凸起 outset 使整個(gè)方框凹陷 上邊界（border-top） 右邊界（border-right） 下邊界（border-bottom） 左邊界（border-left） 邊界（border） 這幾個(gè)是簡寫屬性，它集合了上面幾種屬性的特點(diǎn)，可使用其給邊框一次性定義寬度、式樣和顏色。各屬性值之間用空格隔開。,22,3.3 邊界顏色（border-color） 這個(gè)屬性定義邊界的顏色，可以用16種顏色名或RGB值來設(shè)置。16種顏色名分別為：aqua, bla

13、ck, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值則應(yīng)表示為#RRGGBB或r%,g%,b%。,#rrggbb (如，#00cc00) rgb(x,x,x) x是一個(gè)介乎0到255之間的整數(shù) (如，rgb(0,204,0) rgb(y%,y%,y%) y是一個(gè)介乎0.0到100.0之間的整數(shù) (如，rgb(0%,80%,0%),23,3.4、尺寸屬性 定義方框的寬度width和高度height。 例：DIV.sample width: 3

14、00px; height: 200px 3.5、浮動和清除屬性 浮動屬性是指某一對象在母體元素內(nèi)的浮動位置，清除屬性和浮動屬性一起使用，則表示同一母體內(nèi)的其他對象可以流到浮動對象的旁邊。 例： .float1 float: left; clear: right 假如這個(gè)樣式定義在表格單元中的某個(gè)對象，則該對象將浮動在單元中的左邊，而同一單元格中的其他對象在它右邊的周圍部分。, - #logofloat:right,24,這里是一個(gè)比較完整的例子，把這個(gè)例子按樣輸入，建立一個(gè)HTML文件，看看它的顯示樣式： a sample 這是一個(gè)關(guān)于邊框?qū)傩缘耐暾麑?shí)例 看看它的顯示風(fēng)格 ,25,六、字體屬性

15、 字體屬性共分五種：字體家族（font-family）、字體風(fēng)格（font-style）、字體變體（font-variant）、字體黑度（font-weight）、字體尺寸（font-size）; 此外font屬性是一個(gè)總體屬性，可一一指定以上各種屬性和屬性值。 1、字體家族（font-family） 通過font-family指定字體類型，其語法為： 標(biāo)記 font-family: 字體類型，字體類型，字體類型 例：p font-family: Times New Roman, arial, serif 假如字體類型之間有空格，就象Times New Roman，必須用引號將之括起，中文字體

16、也須用括號括起，列出多種類型，以防瀏覽用戶無前面的字體類型時(shí)，可以用后一種字體類型將之取代。,26,2、字體風(fēng)格（font-style） 屬性值：normal（普通）、italic（斜體）、oblique（傾斜），默認(rèn)值為normal。 例：h1 font-syle: italic 3、字體變體（font-variant） 屬性值：normal（普通）和small-caps（小型大寫字母），缺省值為normal。 字體變體屬性是讓字體以小型大寫方式來顯示。小型大寫方式看起來是一般大寫字母的7580左右。 該變體在某些需要特殊表現(xiàn)的標(biāo)題中比較有用。例： H1 font-variant: smal

17、l-caps 4、字體加粗（font-weight） 屬性值：normal、 bold、 lighter、 bolder、以及數(shù)值100900。 該屬性用以指定字體粗細(xì)的顯示，并不是所有字體都可以顯示這些指定的加粗程度，因此有些情況下這些指定值會被替代，例如100到300被lighter替代，600到900則替換bolder，反之亦然。例： h1 p ,27,5、字體尺寸（font-size） 字體尺寸可設(shè)置絕對尺寸、相對尺寸、長度、百分比。 絕對尺寸分為xx-small, x-small, small, medium, large, x-large, xx-large七種，它們以各種字體的m

18、edium尺寸成比例縮放，每一級1.5倍。 相對尺寸有l(wèi)arger和smaller兩種，根據(jù)字體原來的大小來決定縮放以后的大小。 長度是以pt, points, cm, mm, inch等度量單位用具體數(shù)值來指定字體的尺寸大小。 百分比是把字體設(shè)置成原來尺寸的百分比值，可以任意指定數(shù)值。 例如： h1 font-size: 150% td font-size: 10pt p font-size: smaller,28,6、字體（font） 該屬性使你可以把上述字體的各種屬性合并到一行代碼中指定，也即提供了一個(gè)實(shí)現(xiàn)字體屬性的快捷方式，各種屬性值之間用空格隔開。 例如： td font: ital

19、ic bold 12pt 方正楷體簡體，宋體,29,七、文本屬性 文本屬性設(shè)置文本的一些顯示特性，例如文本對齊、文本縮進(jìn)、行間距、字間距等。 1、文本對齊text-align 屬性值：left（左）, right（右）, center（居中）, justify（兩端對齊）。 例：h1 text-align: center 2、文本縮進(jìn)text-indent 該屬性有效的控制了文本段落第一行的縮進(jìn)，其值可以指定，是長度或段落寬度的百分比。例： p text-indent: 1.0 in 3、行高line-height 該屬性設(shè)置行與行之間的間距，其值可以為數(shù)值、長度或百分比，百分比以行高為基礎(chǔ)。

20、例： body line-height: 120% 4、字間距l(xiāng)etter-spacing 字間距設(shè)置字與字之間的距離，同樣可以用數(shù)值、長度或百分比來指定，百分比以字符大小為基礎(chǔ)。例： body letter-spacing: 0.5em 順便提一下，文本屬性中還有一個(gè)單詞間距（word-spacing），設(shè)置每個(gè)單詞之間的距離，對于中文頁面來講，可能很少用到。,30,5、文本裝飾text-decoration 屬性值：underline（下劃線）, overline（底線）, line-through（線穿過）, blink（閃爍）, none(無)。例： h3 text-decoratio

21、n: underline 6、垂直對齊vertical-align 屬性值：baseline（基準(zhǔn)線）, super（上標(biāo)）, sub（下標(biāo)）, top（頂部）, text-top（文本頂部）, middle（中）, bottom（底部）, text-bottom（文本底部）和百分比。 通過不同的值設(shè)某對象相對其他文本的位置，特別有用的是，上標(biāo)、下標(biāo)成為可能。例： 平方值：32,31,7、文本變換text-transform 屬性值：capitalize（首字母大寫）, uppercase（大寫）, lowercase（小寫）和none（無）。缺省值為none。例： p text-transf

22、orm: capitalize,32,八、顏色與背景屬性 在很多時(shí)候，要用到顏色屬性，指定文本段落、標(biāo)題、背景等的顏色，背景屬性則用于設(shè)定背景圖像在瀏覽器中的顯示方式。 1、顏色屬性：color 屬性值：16種顏色名（上文已經(jīng)介紹過）、數(shù)值（#RRGGBB或是r%,g%,b%）。 在、及其單元元素、標(biāo)題等對象都可以用到color屬性。下例指定超鏈接的初始顏色和被激活時(shí)的顏色： a color: green a:hover color: red ,33,2、背景屬性 background-color 定義頁面或指定對象的背景顏色，屬性值和顏色屬性相同。 background-image 屬性值：

23、none, url（address），包括相對路徑和絕對路徑，指定對象的背景圖像。 background-repeat 屬性值：no-repeat（無重復(fù)）, repeat（重復(fù)）, repeat-x（x方向重復(fù)）, repeat-y（y方向重復(fù)），缺省值為repeat，指定背景圖像的顯示方式。該屬性需與background-image和background-position組合使用。 background-attachment 屬性值：scroll（隨對象一起滾動）, fixed（固定），缺省值為scroll。該屬性指定對象的背景圖像是否與對象一起滾動，或是固定在頁面上的某一個(gè)位置。這個(gè)屬性

24、與background-image組合使用。 background-position 屬性值：垂直位置vertical，指定top, center, bottom和具體數(shù)值、百分比；水平位置horizontal，指定left, center, right和具體數(shù)值、百分比。定義背景圖像的絕對或相對位置顯示。,34,這是一個(gè)簡寫屬性，可以把上述所有背景屬性歸納到一行代碼中定義。 這里是一個(gè)較完整的例子： body background-image: url(yueju/images/002.gif); background-repeat: no-repeat; background-positi

25、on: 20px 50px; background-attachment: fixed 用background屬性簡寫為： body background: url(yueju/images/002.gif) no-repeat 20px 50px fixed,35,九、分類屬性 分類屬性控制了瀏覽器的顯示方式，我們知道在HTML語言中，對于空格和換行的處理是缺陷所在，分類屬性的到來使這些特性的控制成為可能。 分類屬性包括顯示屬性、空白屬性和列表屬性。下面一一的介紹。 1、顯示屬性display 通過顯示屬性控制HTML頁面中被定義對象在瀏覽器中的顯示方法。這個(gè)屬性有四個(gè)值： 塊（block）在該對象前后自動增加分行符 例：texttext 圖像前后的文字將與圖像分行顯示。 內(nèi)聯(lián)（inline）這個(gè)對象前后的元素與之在一行顯示 這個(gè)屬性值正好相反，當(dāng)需要對象與前一元素強(qiáng)制性在同一行時(shí)使用該值。 列