這篇文章主要講解了“如何充分利用CSS樣式表”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何充分利用CSS樣式表”吧！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供玉泉網(wǎng)站建設(shè)、玉泉做網(wǎng)站、玉泉網(wǎng)站設(shè)計、玉泉網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、玉泉企業(yè)網(wǎng)站模板建站服務(wù)，十年玉泉做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

1、在一個網(wǎng)頁中同時調(diào)用CSS的多種引入方式

在HTML中引入CSS的方式很多，例如直接插入式，使用 鏈接外部樣式表，使用CSS"@import"導(dǎo)入樣式表以及在內(nèi)部元素中使用"STYLE"標(biāo)記來定義樣式表等。有網(wǎng)友詢問，這些引入方式能不能同時在一個網(wǎng)頁中被調(diào)用，它們之間會不會產(chǎn)生混亂？其實，我們大可不必這么擔(dān)心，這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在處理網(wǎng)頁中的樣式表是按照一定的順序來處理的，首先檢查頁面中是否有直接插入式CSS，如果存在就先執(zhí)行它，針對本句的其它CSS就不去管它了；接著檢查網(wǎng)頁源代碼中的"STYLE"標(biāo)記，有就執(zhí)行了；接下來再依次檢查執(zhí)行"@import"導(dǎo)入的內(nèi)部樣式表和 鏈接的外部樣式表。因此，我們完全可以在一個網(wǎng)頁中同時調(diào)用CSS的多種引入方式。

2、快速創(chuàng)建CSS外連式文件

對于一個初接觸CSS的網(wǎng)頁設(shè)計人員來講，要用寫字板之類的編輯器，去創(chuàng)建一個CSS外連式文件是相當(dāng)困難的。由于Dreamweaver對CSS支持的很好，用它來幫助就輕松多了。具體可以這樣操作：首先在紙上寫好在網(wǎng)站的網(wǎng)頁中可能要用到的格名稱，然后在Dreamweaver的編輯窗中調(diào)出CSS面板，一個一個地定義，并在一個空白頁上適當(dāng)?shù)貙懸稽c相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改；全部定義好后，再用記事本創(chuàng)建一個空的CSS外連式文件，把在〈head〉與〈/head〉之間的那段定義好的CSS復(fù)制到CSS文件中去，就大功告成了。

3、讓背景圖案靜止不動

當(dāng)網(wǎng)頁不能在一屏全部顯示時，我們往往借助于水平滾動條和豎直滾動條來瀏覽屏幕以外的內(nèi)容，移動滾動條時一般圖象和文字是一起移動的，那么我們有沒有辦法使背景圖象不隨文字一起“滾動”呢？利用CSS就可以實現(xiàn)這樣的目的，我們只要把下面這段源代碼直接放在網(wǎng)頁的與標(biāo)簽之間就可以了，其中bg.jpg就是網(wǎng)頁中的背景圖象，大家可以把它換成自己需要的背景圖象：

代碼如下:

〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
　background-repeat:repeat-y;
　background-attachment:fixed
　}
--〉
〈/style〉

4、讓網(wǎng)頁自動進(jìn)行“首行縮進(jìn)”

用DreamWeaver來設(shè)計網(wǎng)頁的用戶知道，在DreamWeaver中輸入空格不是那么的方便，我們可以利用css來設(shè)計“首行縮進(jìn)”功能來彌補這個缺憾。打開DreamWeaver的設(shè)計界面，在該界面中找到CSS的屬性定義對話框（Style Definition for .style1)，在該對話框的“Block”標(biāo)簽下的“text-indent”屬性定義設(shè)置項中來設(shè)置“首行縮進(jìn)”功能，在這里要注意的是，所謂“首行”是指每段內(nèi)容的第一行，也就是直接按回車鍵就形成了一個新的段落?？s進(jìn)好以“em”（字符）為單位，比如：漢字編排要求每段開始縮進(jìn)兩個漢字，設(shè)置好的CSS如下所示：

代碼如下:

〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉

5、巧用css來設(shè)定文字的背景

在DreamWeaver中，如果我們需要給文字加上不同的背景顏色時，操作上很簡單，只要用鼠標(biāo)單擊屬性面板上的文字顏色按鈕，從彈出的顏色設(shè)置欄中選擇需要的顏色就可以了。但如果我們要給部分文字加不同的背景色，該怎么操作呢？由于DreamWeaver3中沒有這方面的功能，但我們可以巧妙利用css來實現(xiàn)這樣的目的。具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為bjstyle，接著在網(wǎng)頁中選中需要設(shè)置顏色的文字，然后在工具欄中單擊一下“bjstyle”就行了。下面就是一個定義顏色背景的CSS的源代碼：

代碼如下:

〈style type="text/css"〉
〈!--
.bjstyle { background: #cc00bb}
--〉
〈/style〉

6、給指定內(nèi)容加邊框

在DreamWeaver中，我們可以利用CSS強大的定義功能來給某部分內(nèi)容加邊框，定義時首先打開DreamWeaver的設(shè)計界面，在該界面中找到CSS的屬性定義對話框（Style Definition for .style1)，該對話框的“Border”設(shè)置項就是用來定義指定內(nèi)容邊框線的，其中“top”、“bottom”、“l(fā)eft”、“right”設(shè)置欄是分別用來定義指定內(nèi)容四周邊框線的粗細(xì)和顏色的，這些設(shè)置項設(shè)置好后還需要在下面的“Style”中定義線型，否則我們將看不到定義的邊框線，因為css默認(rèn)的線型是“none”。下面是一個定義了上邊框為：藍(lán)色細(xì)線；左邊框為：綠色中粗線的CSS源代碼：

代碼如下:

〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉

7、用樣式表來控制超級鏈接的顏色

如果你仔細(xì)研究一下超級鏈接，你就會發(fā)現(xiàn)，瀏覽器處理超級鏈接的默認(rèn)方式是，對于目前還沒有訪問過的超級鏈接是用藍(lán)色且?guī)в邢聞澗€的文字來顯示的，對于已經(jīng)訪問過的超級鏈接則是用深紫色且?guī)в猩钭仙南聞澗€的文字來顯示的。這些默認(rèn)的設(shè)置顏色看得時間，可能就產(chǎn)生厭倦之感，并且很有可能與自己網(wǎng)頁的背景顏色不協(xié)調(diào)。因此我們完全可以按照自己的視覺要求，來自由更改超級鏈接的顯示顏色，讓它更能體現(xiàn)自己的風(fēng)格。下面筆者就來介紹一段修改超級鏈接顯示顏色的源代碼，代碼如下：

我們可以把這段源代碼添加在HTML文件的……之間，它可以對對本網(wǎng)頁中的任何一個超級鏈接都起作用，其中這段代碼中的：

A:link {text－decoration: none; color:blue}是說明了超級鏈接還沒有被訪問，它沒有下劃線，顏色為藍(lán)色。

A:visited { color:red; text－decoration:line－through }說明了超級鏈接被訪問后，它的顏色變成了紅色，有了一根刪除線。

A:active { color:white; text－decoration:underline }說明超級鏈接處于活動狀態(tài)的時候，它的顏色變成了白色，有了下劃線。

A:hover {text－decoration:none;color:＃FF0000;background－color:black}說明鼠標(biāo)移動到超級鏈接后，它沒有下劃線，文字顏色變成了黃色，背景顏色是黑色。

根據(jù)上面的解釋，我們可以把超級鏈接在各種狀態(tài)下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個性。

8、給選中文字加背景圖像

在DreamWeaver中，我們同樣可以給指定文字加上背景圖象，其操作過程與給指定文字加背景色操作類似，只不過是把選擇背景顏色換成選擇加載的背景圖象就是了。其具體操作過程是，首先我們可以先做一個定義背景色的CSS，例如給這個css命名為txstyle，接著在網(wǎng)頁中選中需要設(shè)置顏色的文字，然后在工具欄中單擊一下“txstyle”就行了。下面就是一個定義背景圖象的CSS的源代碼（其中test.gif就是所加載的背景圖象）：

代碼如下:

〈style type="text/css"〉
〈!--
.txbgstyle { background-image: url(test.gif)}
--〉
〈/style〉

感謝各位的閱讀，以上就是“如何充分利用CSS樣式表”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何充分利用CSS樣式表這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

標(biāo)題名稱：如何充分利用CSS樣式表-創(chuàng)新互聯(lián)
文章位置：http://jinyejixie.com/article42/dedohc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、手機網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)