1、CSS簡介網(wǎng)頁與網(wǎng)頁與WEBWEB程序設(shè)計程序設(shè)計3CSS基礎(chǔ)第章本課目標CSSCSS概述概述CSS語法CSSCSS樣式表應用樣式表應用CSSCSS的基本格式的基本格式CSSCSS的容器屬性、列表屬性、鼠標屬性的容器屬性、列表屬性、鼠標屬性CSSCSS概述概述 CSS簡介簡介CSS概述CSS簡介簡介CSS就是就是Cascading Style Sheets，中文翻譯為，中文翻譯為“層疊樣式表層疊樣式表”，簡稱樣式，簡稱樣式表，表，它是一種制作網(wǎng)頁的新技術(shù)。它是一種制作網(wǎng)頁的新技術(shù)。由于傳統(tǒng)的排版和界面效果的局限性而產(chǎn)生了由于傳統(tǒng)的排版和界面效果的局限性而產(chǎn)生了CSS。HTML本身定義網(wǎng)頁有哪些

2、內(nèi)容，而本身定義網(wǎng)頁有哪些內(nèi)容，而CSS則決定這些網(wǎng)頁內(nèi)容如何顯示。則決定這些網(wǎng)頁內(nèi)容如何顯示。 CSS簡介簡介CSS的作用的作用CSS可以使格式和內(nèi)容分離可以使格式和內(nèi)容分離頁面布局能得到更好的控制（可以使用頁面布局能得到更好的控制（可以使用CSS來設(shè)定內(nèi)容的位置）來設(shè)定內(nèi)容的位置）可以制作體積更小下載更快的網(wǎng)頁可以制作體積更小下載更快的網(wǎng)頁可以將許多網(wǎng)頁同時更新可以將許多網(wǎng)頁同時更新由于由于CSS可以單獨輸出成一個外部文件，所以在鏈接這個文件到其他可以單獨輸出成一個外部文件，所以在鏈接這個文件到其他HTML頁面后，當更改這個頁面后，當更改這個CSS文件中的內(nèi)容時，其他所有文件中的內(nèi)容時，其

3、他所有HTML頁面中相應的頁面中相應的部部分都會自動更改。分都會自動更改。 1張樣式表張樣式表My First StylesheetH1 color: green; font-size: 57px; font-family: impact P text-indent: 1cm; background: yellow; font-family: courier Stylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!CSS簡介簡介CSS樣式表可以分為三種樣式表可以分為三種內(nèi)嵌樣式表內(nèi)嵌

4、樣式表直接在頁面元素上使用直接在頁面元素上使用style來定義樣式來定義樣式內(nèi)部樣式表內(nèi)部樣式表在本頁面內(nèi)部的開頭定義在本頁面內(nèi)部的開頭定義CSS樣式表，然后在本頁內(nèi)使用樣式表，然后在本頁內(nèi)使用外部樣式表外部樣式表將樣式表輸出成外部將樣式表輸出成外部CSS文件，將文件鏈接到本頁面內(nèi)然后使用文件，將文件鏈接到本頁面內(nèi)然后使用 CSS簡介簡介在網(wǎng)頁中添加CSS使用內(nèi)嵌式樣式使用內(nèi)嵌式樣式這個內(nèi)嵌樣式定義段落里面的文字是這個內(nèi)嵌樣式定義段落里面的文字是20pt字體，字體顏色是紅色。字體，字體顏色是紅色。通過這樣使用內(nèi)嵌式樣式，段落符中的文字的字體大小、顏色，將會改變，成通過這樣使用內(nèi)嵌式樣式，段落符

5、中的文字的字體大小、顏色，將會改變，成為為STYLE定義的定義的20pt，紅色。內(nèi)嵌式樣式是直接應用在標記上，并且只對它所，紅色。內(nèi)嵌式樣式是直接應用在標記上，并且只對它所在的標記產(chǎn)生效果。在的標記產(chǎn)生效果。內(nèi)嵌式樣式一般用于單個的標記，也就是說本文檔內(nèi)、本文檔外再無其他標記內(nèi)嵌式樣式一般用于單個的標記，也就是說本文檔內(nèi)、本文檔外再無其他標記需要使用到這個樣式，并且這個樣式不會更改需要使用到這個樣式，并且這個樣式不會更改 用法一：內(nèi)聯(lián)定義用法一：內(nèi)聯(lián)定義 這一行的背景顏色被設(shè)置紅色 CSS簡介簡介使用內(nèi)部樣式表使用內(nèi)部樣式表P.mylayoutcolor:red這個樣式定義段落里面的字體顏色是

6、紅色。這個樣式定義段落里面的字體顏色是紅色。通過這樣使用內(nèi)部樣式表，段落標記中的內(nèi)容顏色將會變成紅色。通過這樣使用內(nèi)部樣式表，段落標記中的內(nèi)容顏色將會變成紅色。內(nèi)部樣式表一般用于本文檔內(nèi)的多個標記，外部文檔不能引用內(nèi)部樣式表一般用于本文檔內(nèi)的多個標記，外部文檔不能引用 用法二：在頁面內(nèi)定義內(nèi)部樣式塊對象用法二：在頁面內(nèi)定義內(nèi)部樣式塊對象body font: 9pt “宋體table font: 9pt “宋體“; border-collapse:collapse; CSS簡介簡介使用外部樣式表使用外部樣式表假設(shè)假設(shè)test.css這個這個css文件內(nèi)的內(nèi)容如下：文件內(nèi)的內(nèi)容如下：P.mylay

7、outcolor:red那么在我們的頁面中，這樣使用這個樣式：那么在我們的頁面中，這樣使用這個樣式：在在標記中，將標記中，將test.css文件鏈接進我們的頁面文件鏈接進我們的頁面然后再使用這個樣式然后再使用這個樣式這個樣式定義段落里面的字體顏色是紅色。這個樣式定義段落里面的字體顏色是紅色。通過這樣使用外部樣式表，段落標記中的內(nèi)容顏色將會變成紅色。通過這樣使用外部樣式表，段落標記中的內(nèi)容顏色將會變成紅色。外部樣式表一般用于多個文檔內(nèi)的多個標記，所有文檔都可以引用外部樣式表一般用于多個文檔內(nèi)的多個標記，所有文檔都可以引用 CSS語法初步語法初步CSS的基本格式CSS的基本格式的組成的基本格式的組

8、成一個樣式表的語法由三部分構(gòu)成，選擇器（一個樣式表的語法由三部分構(gòu)成，選擇器（Selector），屬性（），屬性（Property），），屬性值（屬性值（Value）標準語法的構(gòu)成為標準語法的構(gòu)成為:selectorproperty:value例如：例如：Pcolor:blue中，中，P就是選擇器，就是選擇器，color就是屬性，就是屬性，blue就是屬性值就是屬性值如果屬性值有多個，則用分號格開如果屬性值有多個，則用分號格開例如：例如： Pcolor:blue;text-align:centerCSS語法初步語法初步字體屬性所謂字體屬性，也即一組用來控制字體顯示效果的屬性，常見的屬性有字體的

9、顏色所謂字體屬性，也即一組用來控制字體顯示效果的屬性，常見的屬性有字體的顏色大小，字體的風格（通常稱作字體）等，下面我們來了解以下幾個屬性：大小，字體的風格（通常稱作字體）等，下面我們來了解以下幾個屬性：字體大小屬性（字體大小屬性（font-size）設(shè)置字體的大小，字體大小主要有兩種單位設(shè)置字體的大小，字體大小主要有兩種單位pt和和px，例如，例如font-size:12px字體風格屬性（字體風格屬性（font-style）有三個值可選，有三個值可選，normal，italic，oblique，其中，其中italic，oblique是斜體是斜體字體濃淡屬性（字體濃淡屬性（font-weigh

10、t）也即字體的粗細，也即字體的粗細，normal為正常，為正常，bold為粗體顯示為粗體顯示字體屬性（字體屬性（font-family）字體，描述內(nèi)容用什么字體來顯示，字體一般有：字體，描述內(nèi)容用什么字體來顯示，字體一般有：宋體宋體，楷體楷體等等都是字體等等都是字體CSS語法初步語法初步字體-文本屬性除了字體屬性，一段文字還有文本屬性，文本屬性主要針對文本的格式，例如除了字體屬性，一段文字還有文本屬性，文本屬性主要針對文本的格式，例如一段文本的文本間距、行高、首行縮進等，下面介紹一些常用的文本屬性：一段文本的文本間距、行高、首行縮進等，下面介紹一些常用的文本屬性：單詞間距（單詞間距（Word-

11、spacing）設(shè)置單詞的間距，例如句子設(shè)置單詞的間距，例如句子 it is an apple 中各個單詞之間的距離中各個單詞之間的距離字母間距（字母間距（Letter-spacing）設(shè)置每個字母間的間距，也即一個單詞內(nèi)，每個字母之間的距離設(shè)置每個字母間的間距，也即一個單詞內(nèi)，每個字母之間的距離文本轉(zhuǎn)換（文本轉(zhuǎn)換（Text-transform）文本轉(zhuǎn)換可以將一些文本轉(zhuǎn)換成其他的輸出方式，比如輸出成上標或者下標文本轉(zhuǎn)換可以將一些文本轉(zhuǎn)換成其他的輸出方式，比如輸出成上標或者下標等等CSS語法初步語法初步對齊方式（對齊方式（Text-align）設(shè)置文字的對齊方式，有設(shè)置文字的對齊方式，有l(wèi)eft

12、，right，center，justify（分散對齊）（分散對齊）首行縮進（首行縮進（Text-indent）設(shè)置首行縮進量，直接填寫縮進量即可設(shè)置首行縮進量，直接填寫縮進量即可文本行高（文本行高（Line-height）定義了文本行與行之間的距離定義了文本行與行之間的距離文本裝飾（文本裝飾（Text-decoration ）文本裝飾可以給文本添加一些例如劃線類的裝飾，比如說下劃線，或者刪除線文本裝飾可以給文本添加一些例如劃線類的裝飾，比如說下劃線，或者刪除線或者無任何線裝飾（主要用于超鏈接）或者無任何線裝飾（主要用于超鏈接）CSS語法初步語法初步容器屬性容器屬性是容器屬性是CSS中非常重要的

13、一種屬性，常用的容器屬性，運用得當可以創(chuàng)造出十中非常重要的一種屬性，常用的容器屬性，運用得當可以創(chuàng)造出十分漂亮的頁面布局，本節(jié)開始我們將分類學習，并通過給大家演示來加深印象分漂亮的頁面布局，本節(jié)開始我們將分類學習，并通過給大家演示來加深印象下面我們來逐一學習：下面我們來逐一學習：邊距屬性：邊距屬性：margin邊距屬性描述的是本元素的邊界到相鄰元素邊界之間的距離，也即邊距屬性描述的是本元素的邊界到相鄰元素邊界之間的距離，也即邊界與邊界邊界與邊界之間的距離，舉例來說，比如單元格（藍色）和行（黃色）之間的距離之間的距離，舉例來說，比如單元格（藍色）和行（黃色）之間的距離上邊距：上邊距：Margin

14、-top右邊距：右邊距：Margin-right下邊距：下邊距：Margin-bottom左邊距：左邊距：Margin-leftCSS語法初步語法初步填充距屬性：填充距屬性：padding間隙屬性描述的是元素內(nèi)部內(nèi)容到元素邊界的距離，也即間隙屬性描述的是元素內(nèi)部內(nèi)容到元素邊界的距離，也即內(nèi)容到邊界內(nèi)容到邊界之間之間的距離，舉例來說，比如單元格（藍色）和內(nèi)容（黑色）之間的距離的距離，舉例來說，比如單元格（藍色）和內(nèi)容（黑色）之間的距離單元格單元格1單元格單元格2上邊距：上邊距：Padding-top右邊距：右邊距：Padding-right下邊距：下邊距：Padding-bottom左邊距：左邊

15、距：Padding-leftCSS語法初步語法初步邊框?qū)傩裕哼吙驅(qū)傩裕篵order邊框?qū)傩员容^好理解，它用來定義一個元素例如單元格、表格的邊框樣式，比如邊框?qū)傩员容^好理解，它用來定義一個元素例如單元格、表格的邊框樣式，比如我們想設(shè)置一個單元格它的邊框的粗細、顏色、邊框線的樣式，都可以實現(xiàn)。特我們想設(shè)置一個單元格它的邊框的粗細、顏色、邊框線的樣式，都可以實現(xiàn)。特別的，我們還可以針對每一條邊框線設(shè)置，也即對別的，我們還可以針對每一條邊框線設(shè)置，也即對4條邊框分別設(shè)置，如果使用條邊框分別設(shè)置，如果使用得當，將會得到非常漂亮的網(wǎng)頁。得當，將會得到非常漂亮的網(wǎng)頁。單元格單元格上邊框?qū)挾龋荷线吙驅(qū)挾龋築o

16、rder-top-width上邊框顏色：上邊框顏色：Border-top-color上邊框樣式：上邊框樣式：Border-top-style左邊框?qū)挾龋鹤筮吙驅(qū)挾龋築order-left-width左邊框顏色：左邊框顏色：Border-left-color左邊框樣式：左邊框樣式：Border-left-style上邊框上邊框左邊框左邊框下邊框下邊框右邊框右邊框CSS語法初步語法初步列表屬性列表屬性用來設(shè)定列表項的標記類型列表屬性用來設(shè)定列表項的標記類型列表屬性包括了列表屬性包括了“l(fā)ist-style”（列表樣式）、（列表樣式）、”list-item”（列表項）等多種屬性（列表項）等多種屬性下

17、面我們來演示如何給一個有序列表添加不同的標記：下面我們來演示如何給一個有序列表添加不同的標記：首先在首先在中加入內(nèi)部樣式表中加入內(nèi)部樣式表ol.decimallist-style-type:decimalol.lower-alphalist-style-type:lower-alphaCSS語法初步語法初步然后在有序列表中使用它然后在有序列表中使用它項目一項目一項目二項目二項目三項目三項目一項目一項目二項目二項目三項目三項目一項目一項目二項目二項目三項目三項目一項目一項目二項目二項目三項目三CSS語法初步語法初步鼠標屬性鼠標屬性非常簡單，但是也非常實用，它主要控制當鼠標移動到某個元素上時，鼠標

18、屬性非常簡單，但是也非常實用，它主要控制當鼠標移動到某個元素上時，鼠標的形態(tài)。例如如果我們給一個單元格使用鼠標樣式：手，那么當鼠標移動鼠標的形態(tài)。例如如果我們給一個單元格使用鼠標樣式：手，那么當鼠標移動到這個單元格上時，鼠標將由光標樣變成手的光標。到這個單元格上時，鼠標將由光標樣變成手的光標。我們來實例演示幾個光標：我們來實例演示幾個光標：手的形狀手的形狀手的光標手的光標移動移動移動光標移動光標等待等待等待光標等待光標求助求助求助光標求助光標CSS語法初步語法初步第一節(jié)第二節(jié)第三節(jié)第四節(jié)第五節(jié)第六節(jié)星期一星期二星期三星期四星期五星期六課堂實踐：利用課堂實踐：利用CSS和表格制作課程表和表格制作課程表CSS語法初步語法初步步驟一：創(chuàng)建一個步驟一：創(chuàng)建一個7行行7列的表格列的表格CSS語法初步語法