單元2網(wǎng)頁設計與制作基礎htmlcssjs

1、WEB 應 用 開 發(fā)單元2：網(wǎng)站的規(guī)劃與設計任務2：網(wǎng)頁設計與制作基礎（html+css+js）(2)主 要 內(nèi) 容CSS樣式規(guī)則1樣式的繼承與層疊2CSS盒模型3學習目標知識目標：CSS樣式的使用方法能力目標：能夠使用CSS樣式美化網(wǎng)頁元素技術應用的背景在HTML文檔里使用CSS樣式可以美化頁面的外觀，改變頁面的布局。使用外部樣式可以解決網(wǎng)站內(nèi)容與表現(xiàn)分離的問題，另外外部樣式表可以極大提高工作效率，能輕松的為網(wǎng)頁進行改版或維護。一、CSS簡介 1.CSS （Cascading Style Sheet ） 中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。

2、CSS 是用于布局與美化網(wǎng)頁的CSS 語言是一種標記語言, 因此不需要編譯, 可以直接由瀏覽器執(zhí)行( 屬于瀏覽器解釋型語言)CSS 文件是一個文本文件, 它包含了一些CSS 標記,CSS 文件必須使用css 為文件名后綴CSS 是大小寫不敏感的,CSS 與css 是一樣 CSS 是由W3C 的CSS 工作組產(chǎn)生和維護的 一、CSS簡介2.CSS的作用頁面的載入更快 ,可以降低網(wǎng)站的流量費用 使設計師在修改設計時更有效率，而代價更低 使整個站點保持視覺的一致性 使HTML 代碼更為清晰、簡潔，可更好的被搜索引擎找到和索引,使站點對瀏覽者和瀏覽器更具有親和力 僅僅HTMLHTML+CSS二、CSS

3、樣式規(guī)則CSS的思想就是首先指定對什么“對象”進行設置，然后指定對該對象的哪個方面的“屬性”進行設置，最后給出該設置的“值”。CSS由3個基本部分組成的“對象”、“屬性”和“值”。1. CSS規(guī)則CSS文檔由一條或多條CSS規(guī)則（Rules）組成，規(guī)則擁有特定的格式：二、CSS樣式規(guī)則2.CSS單位單位名稱說明pc (pica)1 pc=12 point（點）pt (point)1 pt=1/72 inch（英寸）mm(millimeter)亳米cm(centimeter)厘米in (inch)英寸px (pixel)像素，代表計算機屏幕上的一點em表示字體的高度的單位ex表示字體中字母X的高

4、度二、CSS樣式規(guī)則行內(nèi)式：在HTML標簽的style屬性中寫CSS代碼嵌入式：在中寫CSS代碼鏈接式：使用鏈接外部CSS文件導入式：使用import指令 import url(mystyle.css“); 3.在HTML中引入CSS樣式二、CSS樣式規(guī)則4.基本CSS選擇器在CSS的3個組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進行設置，因此，它有一個專門的名稱選擇器（selector）。基本CSS選擇器有以下四種：標簽選擇器類別選擇器ID選擇器偽類選擇器二、CSS樣式規(guī)則（1）CSS標簽選擇器用于設定HTML文檔中指定標簽的顯示樣式二、CSS樣式規(guī)則 演示 h2 font-fa

5、mily:幼圓; color:blue; 這是標題文本 這里是正文內(nèi)容 這是標題文本 這里是正文內(nèi)容 這是標題文 這里是正文內(nèi)容 顯示效果（1）CSS標簽選擇器（續(xù)）h2：標題標簽所有h2均使用同一種樣式二、CSS樣式規(guī)則（2）類別選擇器給特定的一組CSS代碼取名，可以應用于多個不同的標簽：二、CSS樣式規(guī)則 class選擇器 .red color:red; /* 紅色 */ font-size:18px; /* 文字大小 */ .green color:green; /* 綠色 */ font-size:20px; /* 文字大小 */ class選擇器1 class選擇器2 h3同樣適用

6、類名為red的樣式在p元素中應用類名為red的樣式類名為green的樣式類名為green的樣式用在p元素中，也可用在h3元素中。（2）類別選擇器（續(xù)）二、CSS樣式規(guī)則 同時使用兩個class .blue color:blue; /* 顏色 */ .big font-size:22px; /* 字體大小 */ 一種都不使用 兩種class，只使用blue 兩種class，只使用big 兩種class，同時blue和big 一種都不使用 使用兩個類樣式，使用空格隔開。（2）類別選擇器（續(xù)）二、CSS樣式規(guī)則（3）ID選擇器對于頁面中獨一無二的元素，比如頁腳，可以給其id屬性賦予一個獨一無二的值，

7、用ID選擇器給指定ID的元素設置樣式。二、CSS樣式規(guī)則 ID選擇器 #bold font-weight:bold; /* 粗體 */ #green font-size:30px; /* 字體大小 */ color:#009900; /* 顏色 */ ID選擇器1 ID選擇器2 ID選擇器3 ID選擇器4 ID名為bold的樣式在p元素中應用ID名為bold的樣式（3）ID選擇器（續(xù)）二、CSS樣式規(guī)則（4）偽類選擇器超鏈接標簽支持幾個特殊的CSS樣式類，用于定義超鏈接不同狀態(tài)的樣式，這些樣式類被稱為“偽類（pseudo class）”屬性說明a:link超鏈接的普通樣式，即正常瀏覽狀態(tài)的樣式

8、a:visited被點擊過后呈現(xiàn)的樣式a:hover鼠標指針懸停于超鏈接元素之上時呈現(xiàn)的樣式a:active單擊超鏈接時呈現(xiàn)的樣式二、CSS樣式規(guī)則5.“復合選擇器”包括：（1）交集選擇器（2）并集選擇器（3）后代選擇器二、CSS樣式規(guī)則（1）交集選擇器直接指定特定標記中特定類別或ID的樣式。p.special /* 標記.類別選擇器 */color:red;p#special /* id選擇器 */color:green;注意：選擇器字符間不要有空格！二、CSS樣式規(guī)則（2）并集選擇器一次定義多個標簽或類別或ID的樣式div,.special,#one/* 集體聲明 */text-decor

9、ation:underline;/* 下劃線 */注意：以逗號隔開各個選擇器二、CSS樣式規(guī)則（3）后代選擇器選擇嵌套在指定元素的內(nèi)部元素的樣式p spancolor:red;注意：以空格分隔選擇器二、CSS樣式規(guī)則6.常用CSS屬性（1）CSS 背景屬性（Background）屬性 描述background在一個聲明中設置所有的背景屬性。background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。background-color 設置元素的背景顏色。 background-image 設置元素的背景圖像。 background-position設置背景圖像的開

10、始位置。 background-repeat 設置是否及如何重復背景圖像。二、CSS樣式規(guī)則（2）CSS 邊框?qū)傩裕˙order ）屬性 描述border在一個聲明中設置所有的邊框?qū)傩浴order-bottom在一個聲明中設置所有的下邊框?qū)傩?。border-bottom-color設置下邊框的顏色。border-bottom-style設置下邊框的樣式。border-bottom-width設置下邊框的寬度。border-color設置四條邊框的顏色。border-left在一個聲明中設置所有的左邊框?qū)傩?。border-left-color設置左邊框的顏色。border-left-style

11、設置左邊框的樣式。border-left-width設置左邊框的寬度。二、CSS樣式規(guī)則（2）CSS 邊框?qū)傩裕˙order ）（續(xù)）屬性 描述border-right在一個聲明中設置所有的右邊框?qū)傩?。border-right-color設置右邊框的顏色。border-right-style設置右邊框的樣式。border-right-width設置右邊框的寬度。border-style設置四條邊框的樣式。border-top在一個聲明中設置所有的上邊框?qū)傩?。border-top-color設置上邊框的顏色。border-top-style設置上邊框的樣式。border-top-width設置上

12、邊框的寬度。border-width設置四條邊框的寬度。二、CSS樣式規(guī)則（3）CSS 文本、字體屬性（Text、Font）屬性 描述color設置文本的顏色。line-height設置行高。text-align規(guī)定文本的水平對齊方式。text-decoration規(guī)定添加到文本的裝飾效果。text-indent規(guī)定文本塊首行的縮進。font在一個聲明中設置所有字體屬性。font-family規(guī)定文本的字體系列。font-size規(guī)定文本的字體尺寸。font-style規(guī)定文本的字體樣式。font-weight規(guī)定字體的粗細。二、CSS樣式規(guī)則（4）CSS 外邊距、內(nèi)邊距屬性（Margin、P

13、adding）屬性 描述margin在一個聲明中設置所有外邊距屬性。margin-bottom設置元素的下外邊距。margin-left設置元素的左外邊距。margin-right設置元素的右外邊距。margin-top設置元素的上外邊距。padding在一個聲明中設置所有內(nèi)邊距屬性。padding-bottom設置元素的下內(nèi)邊距。padding-left設置元素的左內(nèi)邊距。padding-right設置元素的右內(nèi)邊距。padding-top設置元素的上內(nèi)邊距。二、CSS樣式規(guī)則（5）CSS 列表屬性（List）屬性 描述list-style在一個聲明中設置所有的列表屬性。list-style

14、-image將圖象設置為列表項標記。list-style-position設置列表項標記的放置位置。list-style-type設置列表項標記的類型。三、CSS的層疊與繼承1.CSS層疊原則行內(nèi)樣式id樣式類別樣式標記樣式結論：特殊者勝出!沒有定義CSS規(guī)則的HTML元素從它的父元素中繼承樣式！div.fathercolor:blue;/* 顏色 */text-decoration:underline; /* 下劃線 */ 這是父元素內(nèi)的文本，顯示為藍色加下劃線 這是子元素內(nèi)的文本 使用交集選擇器定義樣式定義兩個嵌套的元素三、CSS的層疊與繼承（續(xù)）2.CSS繼承原則四、CSS盒模型1.HT

15、ML文檔的邏輯結構四、CSS盒模型（續(xù)）marginpaddingBox2.盒模型示意圖四、CSS盒模型（續(xù)）2.盒模型示意圖（續(xù)）四、CSS盒模型（續(xù)）3. 塊元素與行內(nèi)元素、等是常見的塊級（block）元素標簽、等是常見的行內(nèi)（inline）元素標簽每一個塊級元素都定義了一個盒子。與沒有特殊的語義，多用于頁面布局與排版，因此是網(wǎng)頁布局設計中打交道最多的兩個標簽。四、CSS盒模型（續(xù)）div border-width:6px; border-color:#000000; margin:20px; /*盒子間距*/ padding:5px;/*內(nèi)容與邊界距離*/ background-color:#FFFFCC; border-style:dashed;通過設定盒子的邊框和線型可以在頁面上清晰地顯示出盒子所占用的頁面區(qū)域。4. 盒模型示例四、CSS盒模型（續(xù)）屬性值個數(shù)說明2第1個值表示上下邊框的屬性第2個值表示左右邊框的屬性3第1個值表示上邊框的屬性第2個值表示左右邊框的屬性第3個值表