CSS初步教學(xué)步驟

1、框架與基本（CSS+DIV）的教學(xué)步驟準(zhǔn)備工作：（1）進(jìn)入貓撲網(wǎng)，看一下別人的框架網(wǎng)頁（2）新建一個站點，將教師提供的資料復(fù)制到圖片文件夾下。教學(xué)目標(biāo)：制作如下圖所示的頁面。一、框架1. 關(guān)于框架外層是框架集，叫Frameset。里面的是框架，叫Frame。一般根據(jù)位置自動命名為“topframe”。一般根據(jù)位置自動命名為“bottomframe”。這是最主要的框架，系統(tǒng)自動將最主要的框架命名為“main”，將其余兩個框架自動命名為“framen”，其中“n”是數(shù)字。2. 建立框架并保存（1） 建立框架并講解（2） 在框架中輸入幾個非常簡單的漢字（3） 保存框架。3. 制作幾個新頁面及完成頂部

2、框架、底部框架的制作（1） 講解制作框架的目的：為了超鏈接（2） 制作三個最簡單的新頁面：gaogeng.htm、fangao.htm和dafengqi.html。（3） 在每個頁面中加入畫家的簡介即可。（4） 在頂部框架中加入最簡單的鏈接文字（5） 在底部框架中輸入幾個關(guān)于版權(quán)的文字。4. 完成框架的鏈接（1） 將各個畫家鏈接到對應(yīng)的頁面；（2） 更改目標(biāo)顯示位置5. 完善頁面：在各個畫家頁面中加入作者頭像及作品要求其HTML格式為：完成后，要求在瀏覽器中觀察各個對象的邊距及排列情況。1) H1是否靠邊2) Body是否靠邊3) 段落文字的大小、顏色及靠邊情況二、幾個非常重要的知識點1. 盒

3、子模型盒子模型是CSS控制時一個很重要的概念，只有很好地掌握了盒子模型以及其中各個元素的用法，才能真正地控制好頁面中的各個元素。所有頁面中的元素都可以看成是一個盒子，占據(jù)一定的頁面空間。需要通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的大小。（1） 結(jié)合下圖，知曉padding，border，margin，content幾個單詞的含義bordermarginContent(內(nèi)容)padding（2） width，height兩個單詞，特別提醒指的是content的高度和寬度（3） 模型黃色部分為實際內(nèi)容，設(shè)置的width和height表示這一部分的寬和高。黃色部分為實際內(nèi)容，設(shè)置的width和h

4、eight表示這一部分的寬和高。黃色部分為實際內(nèi)容，設(shè)置的width和height表示這一部分的寬和高。黃色部分為實際內(nèi)容，設(shè)置的width和height表示這一部分的寬和高。padding-top padding-bottomborder-bottom border-top margin-bottom margin-top （4） 計算一個盒子在網(wǎng)頁中實際占據(jù)的位置大小的計算方法是：寬度=內(nèi)容的width+左右padding+左右border+左右margin高度=內(nèi)容的height+上下padding+上下border+上下margin設(shè)置某盒子的參數(shù)如下：Width:200px;Heig

5、ht:150px;Padding-top:15px;Padding-right:20px;Padding-bottom:18px;Padding-left:13px;（以上四句，可以簡寫為Padding:15px 20px 18px 13px;，按順時針方向。）Border-top:3px solid red;Border-right:5px solid red;Border-bottom:8px solid red;Border-left:6px solid red;margin -top:6px;margin -right:7px;margin -bottom:12px;margin -l

6、eft:4px;（以上四句，可以簡寫為margin:6px 7px 12px 4px;，按順時針方向。）請計算：該盒子在網(wǎng)頁中實際所占的寬度和高度。如其父盒子寬1000px，高度無限，請問一行可以裝下多少個這樣的盒子。（5） 多個盒子（什么叫父盒子，什么叫子盒子）a. 父盒子中包含一個子盒子時，子盒子的margin以父盒子的content為界。也就是 子盒子的margin+border+padding+content=父盒子的content(即width)b. 父盒子中包含多個子盒子時，由多個盒子來共同占有父盒子的content位置。類似下圖：特別需要注意：上圖中，兩個盒子之間的水平空白是左盒

7、子的margin-right + 右盒子的margin-left而上下兩個盒子之間的空白是兩者之中的最大者，即max(padding-bottom上盒子，padding-top下盒子)（6） 盒子的背景色需要特別提醒的是：margin部分在實際制作網(wǎng)頁的時候往往不可見，但其事實上存在。如其父盒子有背景色，則margin部分顯示其父盒子的背景色。如有背景色，Padding部分顯示背景色。實驗下述代碼：（7） 再計算某頁面CSS代碼如下（參見上圖）：其效果如下：請說出：1） 子盒子距離左邊、上邊的有多少個像素？2） 左右盒子之間的空白是多少個像素？3） 上下盒子之間的空白是多少個像素？4） 父盒子

8、能夠橫向容納多少個盒子，縱向又容納多少個盒子？5） 父盒子最右邊還能容下多寬的盒子？（8） 特殊的盒子bodybody是一個特殊的盒子，對于不同的瀏覽器，默認(rèn)情況下body的margin并不一樣?？稍陉P(guān)于body的CSS樣式中加上類似“border:1px #00CC00 solid;”的語句來查看body的margin。另外，body的background-color延伸自瀏覽器整個頁面，這與其它盒子不同。其它盒子的margin的背景顏色由其父盒子的背景顏色決定。2. 行內(nèi)元素和塊級元素 in-line（行內(nèi)元素）和block-line（塊級元素）在網(wǎng)頁制作里非常重要，因為HTML里幾乎所有

9、元素都屬于行內(nèi)元素或者塊級元素中的一種。 （1） 塊級元素：總是在新行上開始；高度，行高以及外邊距和內(nèi)邊距都可控制；可以設(shè)置margin、padding的元素；寬度缺省是它的容器的100%，除非設(shè)定一個寬度。它可以容納內(nèi)聯(lián)元素和其他塊元素（2） 行內(nèi)元素和其他元素都在一行上；寬，行高及外邊距和內(nèi)邊距不可改變；一般情況下行內(nèi)元素沒有沒有上下填充，也就是說你設(shè)置padding-top padding-bottom將是徒勞。寬度就是它的文字或圖片的寬度，不可改變行內(nèi)元素只能容納文本或者其他內(nèi)聯(lián)元素（3） 可變元素可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。有些元素可以互換。使用“disa

10、play:inline;”，把塊級元素變?yōu)樾袃?nèi)元素；使用“disaplay:block;”，把行內(nèi)元素變?yōu)閴K級元素；使用“disaplay:none;”，把對應(yīng)元素隱藏起來。測試一下下面的例子：更改代碼為：由此得出重要結(jié)論：通過設(shè)置display屬性，可以改變某個標(biāo)記的元素類型，或者把某個標(biāo)記隱藏起來。（4） 常見的行內(nèi)元素和塊級元素行內(nèi)元素(inline element)* a - 錨點* abbr - 縮寫* acronym - 首字* b - 粗體(不推薦)* bdo - bidi override* big - 大字體* br - 換行* cite - 引用* code - 計算機(jī)代碼

11、(在引用源碼的時候需要)* dfn - 定義字段* em - 強(qiáng)調(diào)* font - 字體設(shè)定(不推薦)* i - 斜體* img - 圖片（與本次有關(guān)，可設(shè)置border、padding和margin。）* input - 輸入框* kbd - 定義鍵盤文本* label - 表格標(biāo)簽* q - 短引用* s - 中劃線(不推薦)* samp - 定義范例計算機(jī)代碼* select - 項目選擇* small - 小字體文本* span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊* strike - 中劃線* strong - 粗體強(qiáng)調(diào)* sub - 下標(biāo)* sup - 上標(biāo)* textarea - 多

12、行文本輸入框* tt - 電傳文本* u - 下劃線* var - 定義變量塊元素(block element)* address - 地址* blockquote - 塊引用* center - 舉中對齊塊* dir - 目錄列表* div - 常用塊級容易，也是css layout的主要標(biāo)簽* dl - 定義列表* fieldset - form控制組* form - 交互表單* h1 - 大標(biāo)題（與本次有關(guān)）* h2 - 副標(biāo)題* h3 - 3級標(biāo)題* h4 - 4級標(biāo)題* h5 - 5級標(biāo)題* h6 - 6級標(biāo)題* hr - 水平分隔線* isindex - input prompt*

13、 menu - 菜單列表* noframes - frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容* noscript - ）可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）* ol - 排序表單* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表三、基本CSS1. 建立全局的CSS（特殊）要求存盤后到瀏覽器中再次觀察各個對象的情況。（1） H1是否靠邊（2） Body是否靠邊（3） 段落文字的大小、顏色及靠邊情況2. 標(biāo)記選擇器（對段落標(biāo)記應(yīng)用CSS）標(biāo)記選擇器是針對HTML標(biāo)記的選擇器（1） 對段落標(biāo)記應(yīng)用CSS（2） 對圖像

14、標(biāo)記應(yīng)用CSS（3） 對<h1>應(yīng)用CSS（要求學(xué)生自己設(shè)置）3. 類別選擇器標(biāo)記選擇器一旦聲明，那么頁面中所有的相應(yīng)標(biāo)記都會相應(yīng)地產(chǎn)生變化。當(dāng)希望其中的一個標(biāo)記有個性的設(shè)置時，需要類別選擇器。頭像太大，需要更改CSS達(dá)芬奇的畫很長，不太適用于前面所定義的CSS，故需要類別選擇器。（最后添加即可）4. ID選擇器（1） 使用ID選擇器和DIV的理由觀察頁面，發(fā)現(xiàn)頁面的寬度調(diào)整起來一點都不靈活，因此，需要想辦法將內(nèi)容裝進(jìn)一個個的盒子里這就是DIV。而DIV需要通過CSS設(shè)置各種屬性，例如寬、高、背景色等等。由于DIV的屬性往往具有唯一性，因此需要設(shè)置ID選擇器（2） 主要頁面的結(jié)構(gòu)右

15、邊DIV，其id為“right”左邊DIV，其id為“l(fā)eft”（3） 更改頁面代碼類似下述結(jié)構(gòu)在上述代碼中，id為background的代碼部分是為了適應(yīng)有些瀏覽器對CSS的解釋不同而設(shè)置的。（Fixfox和IE對CSS的解釋經(jīng)常不同）（4） 設(shè)置ID選擇器的CSS代碼注意事項：必須在其名稱前加上“#”。a. 設(shè)置左邊DIV的CSS代碼修改頭像的類別選擇器為：b.設(shè)置右邊的CSS代碼大致計算：300*3=900，留出空位，因此暫時設(shè)置寬度為1000px。CSS代碼如下：而名為main的DIV的寬度應(yīng)設(shè)置為左右兩個DIV之和，因此，設(shè)置CSS代碼如下：觀察此時的頁面如下圖：共存在4個問題（1）

16、 H1的背景應(yīng)與圖像對齊（2） 圖像之間中間的間隔太寬（3） Main的背景色沒有顯示出來（4） 右邊太寬修改CSS代碼如下：因為：3*300+6*1+3*10=936px注意：最左邊的間隔不能加，因為是right的Padding，不包含在width中。下述方法解決背景色問題：首先在代碼中添加一的DIV，然后在CSS中設(shè)置其代碼。5. 偽類選擇器切換到最上面的框架的代碼視圖，加入如下CSS代碼。四、在其它文檔中應(yīng)用CSS將CSS部分單獨制作成一個文件，導(dǎo)入dafengqi.html和gaogeng.html中。五、掃尾工作切換至frameset文件的代碼視圖，修改框架的高度，有無框架和框架顏色。六、學(xué)完本課得出的經(jīng)驗在排版類似上述圖片時，一般僅設(shè)置圖片的左ma