css教程教學(xué)課件

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

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

3、 頁面中所有 H1 標(biāo)題字顯示為藍(lán)色，其代碼如下： This is a CSS samples . 頁面內(nèi)容 1.樣式表信息包括樣式表信息包括在在 和和 標(biāo)記中標(biāo)記中。2.放到放到 和和 中去。中去。3.整個頁面中產(chǎn)生作用，整個頁面中產(chǎn)生作用，6注意， 1. 標(biāo)記中包括了 TYPE “text/css” ，這是讓瀏覽器知道你是使用 CSS1 樣式規(guī)則。2. 加入 這一對注釋標(biāo)記是防止有些老式的瀏覽器不認(rèn)識樣式表規(guī)則，可以把該段代碼忽略不計。 7在使用樣式表時，經(jīng)常會有多標(biāo)志用同一個屬性在使用樣式表時，經(jīng)常會有多標(biāo)志用同一個屬性比如： B color: red I color: red H1 c

4、olor: red 用逗號分隔各個 HTML 標(biāo)志，把三行代碼合并成一行，我們可以寫成： B,I,H1 color: red 同一個 HTML 標(biāo)志，可能定義到多種屬性多種屬性，例如，我們規(guī)定把從 H1 到 H6 各級標(biāo)題定義為紅色黑體字，帶下劃線，則應(yīng)寫為： H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: 黑體黑體 注意各個標(biāo)志屬性之間用分號隔開分號隔開。8內(nèi)聯(lián)樣式表還包括一種直接插入方式直接插入方式，即單獨指定 HMTL 頁面中某一個標(biāo)志，規(guī)定其風(fēng)格樣式，可以寫為： 定義該表格內(nèi)的字符大小為 10

5、pt ，顏色為藍(lán)色。9 2 、外部樣式表、外部樣式表 建立一個完全獨立的文本文件，其擴展名為擴展名為 .css ，文件內(nèi)容則輸入樣式表信息，除去任何相關(guān)的除去任何相關(guān)的 HTML 語言語言。 例如在外部樣式表中輸入： body line-height: 130pt H1,H2,H3,H4,H5,H6 color: red; text-decoration: underline; font-family: 黑體黑體 b font-style: italic; color: #FF3333; text-decoration: underline 少了少了 和注釋標(biāo)記和注釋標(biāo)記。保存為 exampl

6、e.css 。 10有兩種兩種辦法可以實現(xiàn)引用外部樣式表。引用外部樣式表。 （一）使用（一）使用 標(biāo)記鏈接外部樣式表標(biāo)記鏈接外部樣式表 HREF 中應(yīng)包含路徑信息路徑信息。 一個 HTML 文檔可引用多個外部樣式表，例如： 首先鏈接的 example.css 作為該文檔缺省缺省樣式表，當(dāng)樣式定義產(chǎn)生沖突時沖突時首先滿足前者滿足前者。 11（二）使用（二）使用 IMPORT 導(dǎo)入樣式表信息導(dǎo)入樣式表信息 存在于在存在于在 和和 標(biāo)記中標(biāo)記中例如： import “example.css”; import “style/other.css”; 樣式表產(chǎn)生作用的優(yōu)先級優(yōu)先級按照導(dǎo)入的先后順序先后順序

7、來設(shè)定。樣式表信息規(guī)則一多，就比較容易產(chǎn)生沖突沖突。這時就看哪一個樣式表被引用在前，它就是具有第一優(yōu)先權(quán)的。12四、創(chuàng)建四、創(chuàng)建CLASS 同一個HTML標(biāo)志有多種風(fēng)格時。應(yīng)該創(chuàng)建類（CLASS），也可直接插入方式可以一一的對之進(jìn)行定義，但繁瑣。 定義定義語法為： 標(biāo)志標(biāo)志.類名類名 標(biāo)志屬性標(biāo)志屬性：屬性值；：屬性值； 標(biāo)志屬性標(biāo)志屬性：屬性值；：屬性值； 標(biāo)志屬性：屬性值標(biāo)志屬性：屬性值 引用引用方法是： 13例如，我們打算讓某一些段落縮進(jìn)0.5in，另一些段落縮進(jìn)1.0in，我們知道段落采用這個標(biāo)記。 代碼如下： This is a sample 這個段落將縮進(jìn)這個段落將縮進(jìn)0.5in這

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

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

10、A元素以不同的方式顯示連接連接(links)、已訪問連已訪問連接接(visited links)和可激活連接可激活連接(active links)。定位錨元素可給出偽類link、visited或active。A:link color: red A:hover color: yellow A:active color: blue; font-size: 125% A:visited color: green; font-size: 85% 首個字母偽元素首個字母偽元素首個字母首個字母偽元素用于加大(drop caps)和其他效果 P:first-letter font-size: 300%; f

11、loat: left 18五、邊框?qū)傩晕?、邊框?qū)傩?每一個網(wǎng)頁都可以理解成是被一個方框框起來每一個網(wǎng)頁都可以理解成是被一個方框框起來的的，而頁面中不同的部分又可以分為一個個小的方框一個個小的方框。因此定義方框的邊距、邊界、顏色等的邊框?qū)傩詰?yīng)用而生。 1、邊距屬性：、邊距屬性： 左邊距（margin-left） 右邊距（margin-right） 上邊距（margin-top） 下邊距（margin-bottom） 邊距（margin）邊距屬性定義HTML頁面中方框四邊方框四邊和其他元素其他元素之間的空白距離，每一個margin-side屬性只影響到一條邊，而margin則提供了一個同時設(shè)置四個

12、邊距的機會。192、填充屬性：、填充屬性： 左填充（padding-left） 右填充（padding-right） 上填充（padding-top） 下填充（padding-bottom） 填充（padding）填充屬性設(shè)置邊框和內(nèi)部元素的距離。它和邊距屬性十分相似，每個padding-side定義一個邊框距離，padding則同時定義四個距離則同時定義四個距離。203、邊界屬性（、邊界屬性（ 3.1 邊界寬度）邊界寬度） 上邊界寬（border-top-width） 右邊界寬（border-right-width） 下邊界寬（border-bottom-width） 左邊界寬（border

13、-left-width） 邊界寬（border-width 這幾個屬性定義邊界寬度，用thin、medium和和thick分別表示細(xì)、中等和粗表示細(xì)、中等和粗，或者指定具體的數(shù)值來定義邊界的寬度。 213.2 邊界樣式（border-style） 該屬性用以定義邊框的風(fēng)格呈現(xiàn)式樣。共有九種。 none 不顯示邊框，為缺省值dotted 點線dashed 虛線solid 實線double 雙線groove 凹線ridge 凸線inset 使整個方框凸起outset 使整個方框凹陷 上邊界（border-top） 右邊界（border-right） 下邊界（border-bottom） 左邊界（b

14、order-left） 邊界（border） 這幾個是簡寫屬性，它集合了上面幾種屬性的特點，可使用其給邊框一次性定義寬度、式樣和顏色。各屬性值之間用空格隔開。223.3 邊界顏色（邊界顏色（border-color） 這個屬性定義邊界的顏色，可以用16種顏色種顏色名或名或RGB值來設(shè)置值來設(shè)置。16種顏色名分別為：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值則應(yīng)表示為#RRGGBB或r%,g%,b%。 #rrggb

15、b (如，#00cc00) rgb(x,x,x) x是一個介乎0到255之間的整數(shù) (如，rgb(0,204,0) rgb(y%,y%,y%) y是一個介乎0.0到100.0之間的整數(shù) (如，rgb(0%,80%,0%) 233.4、尺寸屬性尺寸屬性 定義方框的寬度width和高度height。 例：DIV.sample width: 300px; height: 200px 3.5、浮動和清除屬性浮動和清除屬性 浮動屬性是指某一對象在母體元素內(nèi)的浮動位置，清除清除屬性和浮動屬性一起使用屬性和浮動屬性一起使用，則表示同一母體內(nèi)的其他對象可以流到浮動對象的旁邊。 例： .float1 float

16、: left; clear: right 假如這個樣式定義在表格單元中的某個對象，則該對象將浮動在單元中的左邊，而同一單元格中的其他對象在它右邊的周圍部分。 - #logofloat:right24clear : clear : none none | left left |right right | both both 參數(shù)：none : none : 允許兩邊都可以有浮動對象both : both : 不允許有浮動對象left : left : 不允許左邊有浮動對象right : right : 不允許右邊有浮動對象div clear : left img float: right 25這

17、里是一個比較完整的例子，把這個例子按樣輸入，建立一個HTML文件，看看它的顯示樣式： a sample !- DIV.example margin-left: 20px; padding-top: 50px; border: 10px red outset; float: right clear: none 這是一個關(guān)于邊框?qū)傩缘耐暾麑嵗?看看它的顯示風(fēng)格 26六、字體屬性六、字體屬性 字體屬性共分五種字體屬性共分五種：字體家族（font-family）、字體風(fēng)格（font-style）、字體變體（font-variant）、字體黑度（font-weight）、字體尺寸（font-size）;

18、此外font屬性是一個總體屬性屬性是一個總體屬性，可一一指定以上各種屬性和屬性值。 1、字體家族（font-family） 通過font-family指定字體類型，其語法為： 標(biāo)記 font-family: 字體類型，字體類型，字體類型 例：例：p font-family: Times New Roman, arial, serif 假如字體類型之間有空格，就象Times New Roman，必須用引號引號將之括起，中文字體中文字體也須用括號括號括起，列出多種類型，以防瀏覽用戶無前面的字體類型時，可以用后一以防瀏覽用戶無前面的字體類型時，可以用后一種字體類型將之取代。種字體類型將之取代。 27

19、2、字體風(fēng)格（、字體風(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: small-caps 4、字體加粗（、字體加粗（font-weight） 屬性值：n

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

21、um尺寸成比例縮放，每一級一級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 296、字體（font） 該屬性使你可以把上述字體的各種屬性合并屬性合并到一行代碼中指定，也即提供了一個實現(xiàn)字體屬性的快捷方式，各種屬性值之間用空格隔開空格隔開。例如：

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

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

24、-through（線穿過）, blink（閃爍）, none(無)。例： h3 text-decoration: 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)上標(biāo)、下標(biāo)成為可能。例： 平方值：平方值：32 327、文本變換text-transform 屬性值：capitalize（首字母

25、大寫）, uppercase（大寫）, lowercase（小寫）和none（無）。缺省值為none。例： p text-transform: capitalize 33八、顏色與背景屬性八、顏色與背景屬性 在很多時候，要用到顏色屬性顏色屬性，指定文本段落、標(biāo)題、背景等的顏色，背景屬性則用于設(shè)定背景圖像在瀏覽器中的顯示方式。 1、顏色屬性：、顏色屬性：color 屬性值：屬性值：16種顏色名（上文已經(jīng)介紹過）、數(shù)值（#RRGGBB或是r%,g%,b%）。 在、及其單元元素、標(biāo)題等對象都可以用到color屬性。下例指定超鏈接的初初始顏色始顏色和被激活時被激活時的顏色： a color: gree

26、n a:hover color: red 342、背景屬性、背景屬性 background-color定義頁面或指定對象的背景顏色，屬性值和顏色屬性相同。 background-image屬性值：none, url（address），包括相對路徑相對路徑和和絕對路徑絕對路徑，指定對象的背景圖像。 background-repeat屬性值：no-repeat（無重復(fù)）, repeat（重復(fù)重復(fù)）, repeat-x（x方向重復(fù)）, repeat-y（y方向重復(fù)），缺省值為缺省值為repeat，指定背景圖像的顯示方式。該屬性需與background-image和background-positio

27、n組合使用。 background-attachment屬性值：scroll（隨對象一起滾動）, fixed（固定），缺省值為缺省值為scroll。該屬性指定對象的背景圖像是否與對象一起滾動滾動，或是固定在頁面上的某一個位置。這個屬性與background-image組合使用。 background-position屬性值：垂直位置vertical，指定top, center, bottom和具體數(shù)值、百分比；水平位置horizontal，指定left, center, right和具體數(shù)值、百分比。定義背景圖像的絕對或相對位置顯示。 35這是一個簡寫屬性，可以把上述所有背景屬性歸納到一行代碼

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