web前端開發(fā)認識CSS（教案）教學內容及教學過程說明步驟一問題引入層疊樣式表（CSS，cascadingstylesheets）又稱為級聯(lián)樣式表，是用于控制或增強網(wǎng)頁的外觀樣式，并且可以與網(wǎng)頁內容相分離的一種標簽性語言。在HBuilder中打開兩個頁面。一個頁面使用HTML格式化；另一個頁面使用CSS格式化，產生了同樣的頁面效果，如圖4-1所示。<P>標簽內的文字只能使用<font>標簽進行格式化，而<font>標簽不建議使用<P>標簽內的文字只能使用<font>標簽進行格式化，而<font>標簽不建議使用CSS代碼：<p>標簽樣式，字體大小14px，紅色步驟二講授4.9CSS盒模型CSS盒模型又稱為框模型（boxmodel），用于描述HTML元素形成的矩形盒子。CSS盒模型的結構如圖4-11所示。1.內邊距padding屬性元素的內邊距是元素內容和邊框之間的距離。元素的內邊距也可以理解為元素內容周圍的填充物。請解釋下列例題中CSS代碼的含義。例1：div{padding:10px5px15px20px;}解釋：此時規(guī)定的屬性值按照上右下左的順時針順序為各邊的內邊距進行樣式定義。因此本例表示div的上內邊距為10px，右內邊距為5px，下內邊距為15px，左內邊距為20px。例2：padding:10px5px;解釋：上下內邊距是10px，左右內邊距是5px。padding屬性可寫成下列4個屬性：padding-top、padding-right、padding-bottom和padding-left。任務實例4-7：CSS內邊距padding屬性的綜合實例2.邊框border屬性使用CSS邊框的相關屬性可以為HTML元素設置不同寬度、樣式和顏色的邊框。（1）邊框樣式border-style。CSS中的border-style屬性用于定義HTML元素邊框的樣式。（2）邊框寬度border-width。CSS中的border-width屬性用于定義HTML元素邊框的寬度。（3）邊框顏色border-color。CSS中的border-color屬性用于定義HTML元素邊框的顏色。顏色取值前面已經(jīng)介紹過，可以直接寫顏色名，也可以直接輸入十六進制顏色值，還可以直接輸入rgb函數(shù)值。任務實例4-8：CSS邊框border屬性的綜合實例3.外邊距margin屬性在CSS中，可以使用margin屬性設置HTML元素的外邊距。元素的外邊距也可以被理解為元素內容周圍的填充物，是當前元素與其他元素之間的距離。任務實例4-9：CSS外邊距margin屬性的綜合實例任務4.10CSS布局HTML中提供了以下三種布局方式。（1）普通文檔流。它的特點如下：文檔中的元素按照默認的顯示規(guī)則排版布局，即從上到下，從左到右；塊級元素獨占一行，行內元素則按照順序被水平渲染，直到在當前行遇到了邊界，然后換到下一行的起點繼續(xù)渲染；元素內容之間不能重疊顯示。（2）浮動。它的特點如下：設定元素向某一個方向傾斜浮動的方式排列元素；從上到下，按照指定方向見縫插針；元素不能重疊顯示。（3）定位。它的特點如下：直接定位元素在文檔或者父元素中的位置，表現(xiàn)為漂浮在指定元素上方，脫離了文檔流；表示元素可以重疊在一塊區(qū)域中，按照顯示的級別以覆蓋的方式顯示。4.10.1CSS浮動屬性1.浮動效果float在CSS中float屬性可以用于令元素向左或向右浮動，常用于文字環(huán)繞圖像效果。實際上任何元素都可以應用浮動效果。任務實例4-10：CSS浮動的簡單應用使用CSS屬性float制作文字環(huán)繞圖片的效果。2.清理浮動clearCSS中的clear屬性用于清理浮動效果，它可以規(guī)定元素的哪一側不允許出現(xiàn)浮動元素。例如，常用clear:both來清除之前元素的浮動效果。p{clear:both;}此時，該元素不會隨著之前的元素進行錯誤的浮動。3.裁剪屬性clipclip控制對元素的裁剪。該元素必須是絕對定位的，其方法是設置position為absolute，默認值為auto，表示不進行任何裁剪。如果要進行裁剪，需要給定一個矩形，其格式如下。rect(toprightbottomleft)任務實例4-11：CSS裁剪的簡單應用4.溢出屬性overflow在CSS中，如果設置了一個盒子的寬度與高度，則盒子中的內容就可能超過盒子本身的寬度或高度。此時，可以使用overflow屬性來控制內容溢出時的處理方式。任務實例4-12：CSS溢出overflow的簡單應用5.顯示屬性displaydisplay屬性用于設置是否顯示元素，及顯示時的具體方式。它的屬性值主要有以下3種。（1）none：該元素不會被顯示，通常用于預先做好動態(tài)顯示。（2）block：該元素將顯示為塊級元素，元素前后會有換行符，可以設置它的寬高和內外邊距。（3）inline：該元素將顯示為內聯(lián)元素，元素前后沒有換行符，也無法設置寬高和內外邊距。4.10.2CSS定位屬性1.定位屬性positionposition用于設置元素的定位方式，它的屬性值可以設置為以下幾種。（1）static：默認值，沒有定位，元素將出現(xiàn)在正常的位置，這種方式將忽略top、right、bottom、left、z-index屬性。（2）absolute：生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位，如果一直找不到，則相對于頁面定位，位置通過top、right、bottom、left進行規(guī)定。(3)relative：生成相對定位的元素，相對于其正常位置進行定位，但不會脫離文檔流。2.定位位置定位的位置主要依靠以下4個屬性控制。（1）top屬性：頂端距離屬性。表示當前對象的上側邊緣距離參照對象上側的偏移量，向下偏移為正值，向上偏移為負值。（2）right屬性：右側偏移屬性。表示當前對象右側邊緣距離參照對象右側邊緣的偏移量。向左為正值，向右為負值。（3）bottom屬性：下側偏移屬性。表示當前對象下側邊緣距離參照對象下側邊緣的偏移量，向上為正值，向下為負值。（4）left屬性：左側距離屬性。表示當前對象的左側邊緣距離參照對象左側邊緣的偏移量，向右偏移為正值，向左偏移為負值。3.z-index屬性z-index屬性用于設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。該屬性設置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。任務實例4-14：使用定位屬性設計簡單網(wǎng)頁插入兩個DIV元素，底層的大小為300px×300px，上層的大小為100px×100px。任務實例4-15：使用position屬性素設計圖文混排網(wǎng)頁。使用Div的定位技術，完成如圖4-20所示的網(wǎng)頁。靈活使用position屬性，對其進行適當取值，并結合left、top、z-index等屬性進行定位布局。步驟三課堂小結CSS盒模型CSS布局步驟四作業(yè)1.實踐練習通過float使元素浮動排列，再通過clear控制左右兩側元素達到換行的目的。2.實踐練習將一張圖片定位在距離瀏覽器左200px，上300px的絕對位置。使用CSS樣式，將網(wǎng)頁內容與網(wǎng)頁樣式分離，使網(wǎng)頁更小、下載速度更快，還可以更加方便地更新和維護網(wǎng)頁舉例、對比、啟發(fā)教授CSS盒模型包括元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）舉例說明舉例說明可以使用border-style一次定義4條邊框的樣式，定義順序為上右下左案例分析內外邊距不僅適用于DIV，還適用于任何可見的HTML元素，比如段落、標題、表格、列表等布局屬性指的是文檔中元