css技術(shù)概述webppt課件(已修改)
2025-01-31 19:17 本頁(yè)面
【正文】 CSS技術(shù)概述 網(wǎng)頁(yè)的表現(xiàn)和內(nèi)容分離的實(shí)現(xiàn) 1）、內(nèi)容 (Content) 內(nèi)容是頁(yè)面實(shí)際要傳達(dá)的真正信息，包括數(shù)據(jù)、 文擋或者圖片等； 2）、結(jié)構(gòu)（ Structure） 結(jié)構(gòu)就是對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行整理和分類。利用結(jié)構(gòu) 化標(biāo)準(zhǔn)語(yǔ)言使網(wǎng)頁(yè)內(nèi)容更加具有邏輯性和易用性； （ 1）、 HTML （ 2）、 XML,(Extensible Markup Language(可擴(kuò) 展標(biāo)記語(yǔ)言 ))， XML最初設(shè)計(jì)的目的是彌補(bǔ) HTML的 不足，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述； 推薦使用 W3C于 2022年發(fā)布的 （ 3）、 XHTML (可擴(kuò)展超文本標(biāo)記語(yǔ)言 ) 推薦使用 W3C于 2022年發(fā)布的 結(jié)構(gòu)層主要用于對(duì)內(nèi)容進(jìn)行格式化處理。 例如： 定義標(biāo)題 定義段落 定義列表 等等 3）、表現(xiàn)（ Presentation) 表現(xiàn)是對(duì)結(jié)構(gòu)化的信息進(jìn)行樣式上的控制， 例如對(duì)顏色、大小、背景等外觀進(jìn)行控制。 表現(xiàn)層標(biāo)準(zhǔn)語(yǔ)言 CSS 推薦使用 w3c于 1998年發(fā)布的 W3C創(chuàng)建 CSS標(biāo)準(zhǔn)目的是以 CSS取代 HTML的表格式布局。 4）、行為 (Behavior) 行為是對(duì)內(nèi)容的交互和操作效果； 表現(xiàn)行為有以下 2類： （ 1）、 DOM。 DOM是 Document Object Model (文檔對(duì)象模型 ) （ 2）、 Script（腳本語(yǔ)言： JavaScript、 VBScript） 網(wǎng)頁(yè)分層樣例 （ 1）、網(wǎng)頁(yè)的內(nèi)容 （ 2）、網(wǎng)頁(yè)的 內(nèi)容 + 結(jié)構(gòu) （ 3）、網(wǎng)頁(yè)的 內(nèi)容 + 結(jié)構(gòu) + 表現(xiàn) 例子： body { backgroundimage: url(images/)。 margin: 0 0 0 0。 } CSS 來(lái) 定義表格的一些屬性 一、 CSS的定義 CSS主要是將定義好的規(guī)則應(yīng)用到文檔中的元素， 這樣可以將網(wǎng)頁(yè)的內(nèi)容與網(wǎng)頁(yè)的表現(xiàn)形式進(jìn)行分 開定義； 這樣做的好處： 提高設(shè)計(jì)的標(biāo)準(zhǔn)化程度； 減少網(wǎng)頁(yè)設(shè)計(jì)的工作量； 提高網(wǎng)站的可維護(hù)性。 CSS的定義的組成 一般來(lái)說(shuō)，每個(gè) CSS樣式由一系列規(guī)則組成， 每條規(guī)則由兩部分作成： 選擇符 和 聲明 （ Declaration），每條聲明由： 屬性名 和 屬性值 組成； P { : } color red 選擇符 屬性名 聲明 （ Declaration） 屬性值 CSS的定義樣例 Div2 { padding: 20px。 height: 250px。 width: 250px。 margintop: 30px。 marginright: 50px。 marginbottom: 30px。 marginleft: 50px。 border: 3px solid FF3300。 } div id=Div2/div 填充 上邊距 二、 CSS的選擇符分類 DreamWeare 新建 CSS樣式的對(duì)話框 類選擇符 標(biāo)簽選擇符 ID選擇符 偽類選擇符 類選擇符 在 CSS里用一個(gè)點(diǎn)開頭表示類別選擇符定義， 例如： .14px {color : f60 。fontsize:14px 。} 在頁(yè)面中，用 class=“類別名”的方法調(diào)用： span class=14px14px大小的字體 /span { textalign:right} {textalign:center} p class=rightdddddd/p p class=centerdddddd/p .abc{ } ID選擇符 在 CSS里用“ ”開頭表示 ID選擇符的定義 Div2 { padding: 20px。 height: 250px。 width: 250px。 margintop: 30px。 marginright: 50px。 marginbottom: 30px。 marginleft: 50px。 border: 3px solid FF3300。 } div id=Div2/div .Div2 { padding: 20px。 height: 250px。 width: 250px。 margintop: 30px。 marginright: 50px。 marginbottom: 30px。 marginleft: 50px。 border: 3px solid FF3300。 } div class=Div2/div 類選擇符 Ptitle01 { fontfamily:”宋體”； fontsize:12px。 color:FF0000。 } p id=“title01”段落的標(biāo)題 p { fontfamily:”宋體”； fontsize:12px。 color:FF0000。 } p class=“title01”段落的標(biāo)題 p abc{ } 不能這樣寫 否則結(jié)果如下 abc{} ID選擇符與類選擇符的差別： 類選擇符可以重復(fù)使用， 而且可以在任意元素上使用，使用任意次； HTML內(nèi) id屬性是唯一的， 只有擁有該 id的元素才會(huì)應(yīng)用該樣式； ID選
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1