|
Web標(biāo)準(zhǔn)的基本組成函數(shù) 所謂表現(xiàn)層技術(shù)，即網(wǎng)頁前臺(tái)技術(shù)，包括HTML、XHTML、CSS、JavaScript Web標(biāo)準(zhǔn)大體可分為3大塊技術(shù)集：結(jié)構(gòu)、表現(xiàn)和行為 結(jié)構(gòu)：即用于網(wǎng)站數(shù)據(jù)的分類及整合 表現(xiàn)：即信息在瀏覽器顯示上的控件 行為：用于用戶對(duì)網(wǎng)頁文檔進(jìn)行交互操作的技術(shù) 表現(xiàn)與內(nèi)容分離的好處： (1)、代碼可讀性提高，代碼維護(hù)復(fù)雜性降低 (2)、網(wǎng)頁數(shù)據(jù)移植更簡(jiǎn)單，跨平臺(tái)更方便 (3)、加快瀏覽速度，提升瀏覽體驗(yàn) (4)、可擴(kuò)展性強(qiáng) XHTML與CSS的概念 由"XHTML+CSS"制作網(wǎng)頁通常符合Web標(biāo)準(zhǔn)的內(nèi)容與表現(xiàn)分離，"XHTML+CSS"常被外界稱為"DIV+CSS",實(shí)際上是不嚴(yán)謹(jǐn) Dreamweaver創(chuàng)建XHTML新文檔類型： HTML4.01 Transitional HTML4.01 Strict HTML1.0 Transitional HTML 1.0 Strict transitional：代表使用過渡型的XHTML規(guī)則，即和HTML相兼容，允許使用HTML標(biāo)簽 Strict：代表使用嚴(yán)謹(jǐn)?shù)腦HTML規(guī)則 XHTML基礎(chǔ)知識(shí) XHTML的單標(biāo)簽必須使用正斜杠結(jié)束，雙標(biāo)簽必須有結(jié)束標(biāo)簽閉合 <p>段落內(nèi)容</p> <img src="nbc.jpg"/> 說明：HTML對(duì)標(biāo)簽的編寫管理非常松散，標(biāo)簽無須閉合，導(dǎo)致很多網(wǎng)頁編寫不嚴(yán)謹(jǐn)，可讀性差 CSS的聲明方式 聲明CSS的三種方法 行間樣式表：指CSS編寫在XHTML標(biāo)簽的style屬性中 <p style=" width:200px ; height:300px ; ">....</p> 行間表使用XHTML標(biāo)簽的style的屬性描述CSS代碼，使用分號(hào)隔開不同的屬性值的代碼片段 內(nèi)部樣式表：把CSS代碼集中編寫在頭部信息的<style></style>標(biāo)簽內(nèi)，很好地做到了樣式與內(nèi)容分離 <style type=text/css > p{width:200px height:300px } </style> 外部樣式表：即把CSS代碼編寫在一個(gè)css文檔(擴(kuò)展名為css的文本文件)中，通過網(wǎng)頁調(diào)用 p{width:200px; height:300px; } 注意：css文件放置于需要調(diào)用的文件同級(jí)目錄 調(diào)用方式： <link rel="stylesheet" rev="stylesheeet" href="index.css" type="text/css"/> <link href="red.css" rel="stylesheet" type="text/css"/> 優(yōu)點(diǎn)： （1）減少重復(fù)代碼編寫，也提高了頁面載入的速度 （2）表現(xiàn)（CSS）和內(nèi)容（XHTML）真正分離 說明：對(duì)于多個(gè)頁面共同調(diào)用同一個(gè)css文檔時(shí)，每個(gè)頁面獨(dú)立的樣式部分還是使用內(nèi)部樣式表。內(nèi)部樣式表的優(yōu)先級(jí)高于外部樣式表 行間樣式表>內(nèi)部樣式表>外部樣式表 XHTML元素被多種CSS聲明樣式時(shí)，采取就近原則 CSS的媒介控制： <link rel="stylesheet" type="text/css" media="print" href="print.css"/> <link rel="stylesheet" type="text/css" media="screen" href="index.css"/> media屬性值： all：應(yīng)用于所有的設(shè)備 screen：應(yīng)用于彩色計(jì)算機(jī)屏幕 print：應(yīng)用于不透明的頁面材料，以及文檔在打印的狀態(tài) handheld：應(yīng)用于手持設(shè)備（小屏幕、單色、寬帶有限制） projection：應(yīng)用于投影演示 braille：應(yīng)用于盲文觸摸式反饋設(shè)備 aural：應(yīng)用于語音合成器 CSS屬性和選擇符： CSS語法的核心：選擇符、屬性和值 選擇符：指CSS這段代碼所控制的對(duì)象，如id和class；還可以是XHTML標(biāo)簽，如p、body等 屬性：指CSS所控制對(duì)象的各項(xiàng)樣式屬性，類型非常多，例如，文本顏色、對(duì)齊、寬度、高度........ 值：指屬性所對(duì)應(yīng)的量化或描述設(shè)置。不同的屬性有不同的值，例如，font-size屬性值為12px、14px、16px等 CSS代碼實(shí)質(zhì)上就是由選擇符、屬性和值的代碼組合而成的 CSS各種選擇符 CSS選擇符有“5”中：標(biāo)簽選擇符、id選擇符、class選擇符、偽類及對(duì)象選擇符、通配選擇符 標(biāo)簽選擇符：XHTML中已有的標(biāo)簽作為選擇符 p{width:250px;} h1{color:red;} id選擇符：通過 id 的不同名稱設(shè)置多個(gè)標(biāo)簽獨(dú)一無二的樣式，id名稱可以自定義，但不能以數(shù)字開頭，CSS代碼中id名稱前面須加上“#”符號(hào) #hello{color:red;} class選擇符：多個(gè)標(biāo)簽可用使用同一個(gè)class屬性名稱，使多個(gè)標(biāo)簽擁有統(tǒng)一的樣式，class 名稱可以自定義，但不能以數(shù)字開頭，CSS代碼中class名稱前面須加上".(點(diǎn)號(hào))" .reader{ color:red } 偽類及對(duì)象選擇符：是一組CSS預(yù)定義好的類和對(duì)象，不需要進(jìn)行id和class屬性的聲明 a:visited{ color:red } 表示頁面中的超鏈接被訪問過后，其樣式設(shè)置為紅色文本 偽類及偽對(duì)象選擇符編寫格式： 選擇符：偽類 :link:超級(jí)鏈接未被訪問時(shí) :hover:對(duì)象(一般為超級(jí)鏈接)在鼠標(biāo)滑過時(shí) :active：對(duì)象(一般為超級(jí)鏈接)被用戶單擊時(shí)(鼠標(biāo)單擊未釋放) :visited：超級(jí)鏈接未被訪問過 :focus：對(duì)象成為輸入焦點(diǎn)時(shí) :first-child:對(duì)象的第一個(gè)子對(duì)象 :first:頁面的第一頁 選擇符：偽對(duì)象 :after:設(shè)置某個(gè)對(duì)象之后的內(nèi)容 :first-letter:對(duì)象內(nèi)第一個(gè)字符 :first-line:對(duì)象第一行 :before：設(shè)置某一個(gè)對(duì)象之前的內(nèi)容 說明：使用最多的超級(jí)鏈接的4中狀態(tài)是 :link、 :active、 :hover和:visited 通配選擇符：在DOS操作系統(tǒng)中有一個(gè)通配符，如*.*代表任何文件、*.mp3代表所有的mp3文件。CSS中也有星號(hào)" * "代表所有對(duì)象。 *{ margin:0px } 表示所有對(duì)象的外邊距為0像素 群組選擇符：指對(duì)多個(gè)選擇符進(jìn)行相同的樣式設(shè)置時(shí)，可以把多個(gè)選擇符寫在一起，并用逗號(hào)分隔 p,span,div,li{ color:red; } 優(yōu)點(diǎn)： （1）、壓縮了代碼量 （2）、代碼容易維護(hù) 包含選擇符：指標(biāo)簽的嵌套包含關(guān)系組合選擇符，包含關(guān)系的兩個(gè)選擇符用空格分隔 p span { color:red; } 表示只有p標(biāo)簽內(nèi)的span標(biāo)簽所包含文本被設(shè)置為紅色 標(biāo)簽指定式選擇符：指標(biāo)簽選擇符和id或class的組合，兩者之間不需分隔 p#hello{ color:red } p.reader{ color:red } 表示id名稱為hello的p標(biāo)簽文本為紅色，class名稱為reader的p標(biāo)簽文本為藍(lán)色 自由組合選擇符：指綜合以上選擇符類型自由組合的選擇符 p#hello h1{ color:red } 表示id名稱為hello的p標(biāo)簽內(nèi)h1標(biāo)簽的文本為紅色 |
|
|
