層疊樣式表樣式應用研究_第1頁
層疊樣式表樣式應用研究_第2頁
層疊樣式表樣式應用研究_第3頁
層疊樣式表樣式應用研究_第4頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

層疊樣式表樣式應用研究

隨著網絡迅速應用于人們生活的各個方面，越來越多的人希望在網絡上展示自己的空間。DreamweaverMx是一種專用的網頁制作工具,它具有強大的功能設計,成為很多網頁制作者的最愛。其中CSS樣式作為DreamweaverMx的一種工具,主要用于控制網頁元素風格設計,它是”CascadingStyleSheet”的縮寫,譯作”級聯樣式表”。通過設立樣式表,可以統(tǒng)一的控制網頁中各對象的顯示屬性。1保證了一般的文本格式形式CSS樣式是通過名稱或HTML標簽來標識的,且允許修改樣式的屬性并立即查看應用該樣式的所有文本的反映。HTML文檔中的CSS樣式可以控制絕大多數傳統(tǒng)的文本格式屬性(如:字體、大小和對齊方式)。CSS樣式也可以指定獨特的HTML屬性。CSS樣式表存在于文檔的head區(qū)域中。CSS樣式表可以定義以下一些格式:HTML標簽屬性,以class屬性標識的文本范圍,滿足CSS規(guī)范準則的文本。只要符合CSS樣式指導方針的樣式,DreamweaverMx均可識別。CSS樣式只能工作在4.0及以上版本的瀏覽器中,IE3.0可以識別一部分CSS樣式表。2層狀化社會應用HTML樣式是一種文字屬性的集合,可以將其應用于某些文字或整段文字上。但它對外觀控制的功能比CSS樣式更有限,而且加載的時間也更長。1998年初W3C組織公布的HTML4.0規(guī)范中鼓勵使用CSS樣式表,提倡停止使用HTML格式標簽。但實踐中,HTML格式標簽卻比CSS樣式表得到更廣泛的瀏覽器支持,并且更早版本的瀏覽器至今還在網絡中占據不小的比重,所以HTML標簽還將在WEB開發(fā)者的工具欄中占據一席之地。CSS樣式與HTML樣式相比,功能強大的多,在某種意義上,可把HTML樣式看作是CSS樣式的子集,至少具有以下兩個突出的優(yōu)點:(1)提供比HTML樣式更多的文字屬性控制;CSS樣式可以控制所有文字的屬性。(2)可以套用到多個網頁,甚至整個網站的網頁上。當CSS樣式更新或修改時,所有使用該樣式表的文檔格式也會自動更新。3網絡中的存在方法CSS樣式在網頁文檔中的三種存在方式是:外部文件方式、內部文檔方式、直接插入方式。(1)文件的擴展—外部文件方式這種方式是將CSS寫成一個文件的方式,在HTML文檔頭通過文件引用進行風格控制,在dreamweaverMx中創(chuàng)建一個外部文件方式的CSS樣式比較簡單,文件的擴展名為.CSS。CSS文件的引用是在HTML的<head></head>標簽寫下列語句:如果是在Dreamweaver中用styles功能可直接連接一個CSS外部文件,上述語句會自動生成。應用CSS文件的最大好處就是可以在每個HTML文件中引用這個文件,這使得整個站點的HTML文件在風格上保持一致。另外,需要對整個網站的CSS樣式風格進行修改時,只需直接修改CSS文件就可以,而不必每個HTML文件都修改。(2)擔保文件樣式的使用采用內嵌樣式,將CSS樣式直接定義在文檔頭<head></head>之間,而不是形成文件。其范圍也僅限于本文件。下面以一例說明其書寫格式:應用CSS內嵌樣式的主要用處是,在使用CSS外部文件樣式使整個網站風格統(tǒng)一的前提下,可針對具體頁面進行具體調整。CSS內嵌樣式與CSS外部文件方式并不相互排斥,而是相互結合,比如在CSS外部文件中定義了P標簽的字體顏色font-color為blue,而在內部文檔中可具體定義p標簽的字體顏色font-color為blue,而在內部文檔中可再次具體定義p標簽字體顏色為red。從這個意義上,可以理解CSS樣式譯為”層疊樣式表”的含義所在。(3)直接和間接的方法直接插入式,只需要在每個HTML標簽后書寫CSS屬性就可以了。這種方式很簡單,但很直接。例如用戶想規(guī)定一個Table標簽中的字為紅色,字體大小為10pt,則書寫如下:直接插入式主要用于對具體的標簽做具體的調整,其作用的范圍只限于本標簽。以下介紹作者在應用過程中總結的一些CSS的做法與應用。4as文風格應用(1)濾鏡后的樣式表的建立在網頁可以通過CSS樣式給圖片添加濾鏡特效。如圖1所示的幾幅圖片,分別是經過處理后的各種特效。在CSS樣式定義分類框中選擇擴展,在過濾器中選擇”invert”,單擊確定,建立一個樣式表;然后重復以上操作,在過濾器中分別選擇”xray”(x照片濾鏡)、”Blur(Add=true,Direction=135,Strength=90)”(建立模糊效果)、Alpha(Opacity=100,FinishOpacity=0,Style=2,StartX=0,StartY=2,FinishX=100,FinishY=100)(設置透明度)、Wave(Add=true,Freq=6,LightStrength=30,Phase=0,Strength=3),共建立5個樣式表;最后把這5個樣式表分別應用于5幅相同圖像,而得到如上圖1所示的不同的濾鏡效果。(2)系統(tǒng)的加大了消極電路在CSS樣式表分類框中選擇擴展,在過濾器中選擇shadow,設置color=red,direction=135,在瀏覽器中運行出現陰影字,如下圖2所示。在CSS樣式表分類框中選擇擴展,在過濾器中選擇glow,設置color=fff00,strength=3,在瀏覽器中運行出現發(fā)光文字,如上圖3所示。(3)繪制保護板及培養(yǎng)模式本例實現的是當光標移至運動的圖片上時,光標自動變?yōu)槭中?移開圖片光標形狀自動變?yōu)閱柼栃螤?。具體做法是選中圖片所在的描繪層,然后建立一個CSS樣式,在CSS樣式定義面板中選擇“擴展”,在“光標”處選擇“help”單擊確定。單擊編輯區(qū)的空白區(qū)域,將光標置于不選擇任何區(qū)域狀態(tài),在選擇“新建CSS樣式”,選擇器類型選中“重定義HTML標簽”,在標簽框可以輸入“body”,在CSS樣式定義面板中選擇“擴展”,在“光標”處選擇“help”,最后確定。(4)標記指向鏈接的生成CSS樣式表可以對文字進行多種變換,將這種變換應用到文字鏈接中,能得到相當好的動態(tài)效果,同時還可以用CSS提供的功能,在鼠標指向鏈接時,適時地改變鼠標指針。具體實現過程是首先在頁面文檔窗口中制作文本的超級鏈接,可為空鏈接,超級鏈接的文本下面有一道下劃線,要去掉這道下劃線,選擇“新建CSS樣式”,可以選擇“僅對該文檔”,選擇器類型選中“使用CSS選擇器”,選擇器選擇:a:link,單擊確定按鈕,在CSS樣式表的“分類”框中選擇“類型”,在分類部分選中“修飾”的“無”,最后“確定”。要改變鼠標指向鏈接時的動態(tài)效果,在“新建CSS樣式”對話框中選擇“CSS選擇器”,選擇器選擇“a:hover”,單擊確定。在CSS樣式表中,在“分類”框中選擇“類型”,設置一種鼠標指向鏈接后文本的顏色,并設置“修飾”為“無”;在“分類”框中選擇“背景”,設置一種鼠標指向鏈接后的背景顏色;在“分類”框中選擇“盒子”,設置盒子的寬、高(比如寬為100,高為10);在“分類”框中選擇“邊框”,設置樣式“全部相同”,在“上(T)”可選擇“點劃線”;設置寬度“全部相同”,在“上(T)”可選擇“細”;設置顏色“全部相同”,在“上(T)”可選擇某種顏色作為邊框的顏色;在“分類”框中選擇“擴展”,設置某種光標形狀。最后單擊確定按鈕。以上兩種樣式可自動應用到超級鏈接的文本上,不用人為套用。效果如圖4所示。(5)構建層序格式表在網頁中定義CSS樣式可以統(tǒng)一規(guī)定HTML標簽在顏色、字體大小等方面的屬性,有利于使網頁上的文字和圖片保持一致的風格,在DreamweaverMx2004中可以很方便的定義HTML標簽的CSS屬性,所有的CSS代碼都可以通過很直觀的方式生成。以下舉例進行說明。首先在空白頁面輸入兩行文字,第一行格式為“標題1”,第二行格式為“標題2”;然后“新建CSS樣式”,定義在“僅對該文檔”,類型選擇“重定義HTML標簽”,標簽選擇“h1”,單擊確定,彈出“h1的CSS樣式定義表”,在分類框中選擇“背景”,設置某種背景顏色,確定。在設計窗口可以看到,類型為“標題1”的第一行背景變成了設置的背景色。這是因為頁面中h1的屬性被重新定義了,頁面中所有<h1>的背景色都將得到改變。光標移到第二行文字,同樣的方法在建立CSS樣式表,類型選擇“創(chuàng)建自定義樣式”,名稱框中假定命名為“aa”在CSS樣式表設置另一種背景色,單擊確定;然后在設計窗口底部顯示的HTML標簽中,在“h2”標簽上單擊鼠標右鍵,在彈出的菜單中選擇“設置類→”aa””,這樣第二行文字加上了我們設置的這種背景色。這里要注意這種新的風格只應用到指定的<h2>標簽上,頁面中其他的<h2>標簽仍然使用默認的風格。5根據作者

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論