xhtml與cssppt課件-資料下載頁
2025-01-19 19:38本頁面
【正文】 SS文件，而導(dǎo)入式則是用 CSS的規(guī)則引入外部 CSS文件，因此它們的語法不同 CSS選擇器的分類 ?標(biāo)記選擇器 ?類選擇器 ?id選擇器 ?偽類選擇器 標(biāo)記選擇器 ?標(biāo)記選擇器將擁有同一個(gè)標(biāo)記的所有元素全部選中。如： style type=text/css p{ /* 標(biāo)記選擇器 */ color:blue。 fontsize:18px。 } /style 類選擇器 .class1 color: green。 fontsize: 20px。 { } 類選擇器 屬性 值 屬性 值 聲明 聲明 類名 style type=text/css .one{ color: red。 /* 紅色 */ } .two{ fontsize:20px。 /* 文字大小 */ } /style p選擇器之標(biāo)記選擇器 1/p p class=one應(yīng)用第一種 class選擇器樣式 /p p class=two應(yīng)用第二種 class選擇器樣式 /p p class=one two同時(shí)應(yīng)兩種 class選擇器樣式 /p h3 class=twoh3同樣適用 /h3 id選擇器 ?id選擇器以 半角“ ”開頭，且 id名稱的第一個(gè)字母不能為數(shù)字 id1 color: red。 fontsize: 30px。 { } ID選擇器 屬性 值 屬性 值 聲明 聲明 ID選擇器 style type=text/css one{ fontweight:bold。 /* 粗體 */ } two{ fontsize:30px。 /* 字體大小 */ color:009900。 /* 顏色 */ }/style p id=oneID選擇器 1/p p id=twoID選擇器 2/p p id=twoID選擇器 3/p p id=one twoID選擇器 3/p 偽類選擇器 ?所謂偽類就是指元素在某個(gè)時(shí)候的狀態(tài)。 ?網(wǎng)頁中的鏈接標(biāo)記能響應(yīng)瀏覽者的點(diǎn)擊。 a標(biāo)記有四種狀態(tài)能描述這種響應(yīng)，分別是 a:link、a:visited、 a:hover、 a:active，偽類選擇器的標(biāo)記和偽類之間用“ :”隔開。 a:hover color: green。 fontsize: 20px。 { } 標(biāo)記名 屬性 值 屬性 值 聲明 聲明 偽類名 通過偽類選擇器制作動(dòng)態(tài)超鏈接 ?偽類選擇器可以看成是一種特殊的標(biāo)記選擇器，它用來選中在某種狀態(tài)下的標(biāo)記 ?可以定義 a標(biāo)記在四種不同的狀態(tài)下具有不同的顏色，是否有下劃線。 一、偽類選擇器的書寫應(yīng)遵循 LVHA的順序，即出現(xiàn)的順序應(yīng)為 a:link→ a:visited→ a:hover→ a:active 。 二、各種偽類選擇器將繼承 a標(biāo)記選擇器定義的樣式。 CSS的盒子模型 CSS的盒子模型 ?每個(gè) HTML元素都可以看作是一個(gè)裝了東西的盒子 ?盒子里面的內(nèi)容到盒子的邊框之間的距離即 填充 (padding),盒子本身有 邊框(border),而盒子邊框外和其它盒子之間，還有 邊界 (magin),如圖所示 ?默認(rèn)情況下盒子的邊框是無，背景色是透明，所以我們在默認(rèn)情況下看不到盒子 content paddingtop paddingbottom paddingleft paddingright bordertop borderbottom borderright borderleft marginright marginleft margintop marginbottom width height 邊框 border屬性 ?盒子模型的 margin和 padding屬性比較簡單，只能設(shè)置寬度值，最多分別對上、右、下、左設(shè)置寬度值。而邊框 border則可以設(shè)置寬度、顏色和樣式。 ?分別是 borderwidth（寬度）、 bordercolor（顏色）和 borderstyle（樣式）其中 borderstyle屬性可以將邊框設(shè)置為實(shí)線（ solid）、虛線（ dashed）、點(diǎn)劃線（ dotted）、雙線（ double）等效果 邊框 border屬性 ?邊框 border屬性有個(gè)有趣的特點(diǎn)，即兩條交匯的邊框之間是一個(gè)斜角，我們可以通過為邊框設(shè)置不同的顏色，再利用這個(gè)斜角，制作出像三角形一樣的效果 內(nèi) 容 填充 padding屬性 ? 填充 padding屬性，也稱為盒子的內(nèi)邊距。就是盒子邊框到內(nèi)容之間的距離，和表格的填充屬性（ cellpadding）比較相似。如果填充屬性為 0，則盒子的邊框會緊挨著內(nèi)容，這樣通常不美觀。 ? 當(dāng)對盒子設(shè)置了背景顏色或背景圖像后，那么背景會覆蓋 padding和內(nèi)容組成的范圍，并且默認(rèn)情況下背景圖像是以padding的左上角為基準(zhǔn)點(diǎn)在盒子中平鋪的 盒子模型的特性 ?邊界值 margin可為負(fù)，填充padding不可為負(fù) ?邊框 border默認(rèn)值為 0，即不顯示 ?行內(nèi)元素，如 a，定義上下邊界不影響行高 對盒子模型的思考 ?邊框是實(shí)的，我們可以看到實(shí)實(shí)在在的邊框，而填充和邊界都是虛的，我們只能看到他們對元素的影響 ?盒子模型中只能設(shè)置兩類顏色，即 邊框顏色 和 背景顏色 ?盒子模型可設(shè)置三類距離，即邊界距margin，填充距 padding和邊框值border 屬性值的簡寫形式 ?問題： padding: 6px 10px 4px。 左填充是多少？ ? 答案：如果給出 2個(gè)屬性值，前者表示 上下邊框 的屬性，后者表示 左右邊框 的屬性； ? 如果給出 3個(gè)屬性值，前者表示 上邊框 的屬性，中間的數(shù)值表示 左右邊框 的屬性，后者表示 下邊框 的屬性； ? 如果給出 4個(gè)屬性值，依次表示 上 、 右 、下 、 左 邊框的屬性，即順時(shí)針排序。 各種元素盒子屬性的默認(rèn)值 ?大部分 html元素的盒子屬性 (margin, padding)默認(rèn)值都為 0； ?有少數(shù) html元素的 (margin, padding)瀏覽器默認(rèn)值不為 0，例如： body， p， ul，li， form標(biāo)記等，因此我們有時(shí)有必要先設(shè)置它們的這些屬性為 0。 ?input元素的邊框?qū)傩阅J(rèn)不為 0，可以設(shè)置它為 0達(dá)到美化表單中輸入框和按鈕的目的。
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1