2020-2-29 前端達(dá)人
為了提高網(wǎng)頁(yè)的維護(hù)更新效率，我們可以使用樣式表，來(lái)僅僅改變一個(gè)文件，就能達(dá)到同時(shí)改變幾百個(gè)網(wǎng)頁(yè)的外觀。為了能充分用好樣式表的強(qiáng)大性和靈活性，筆者就怎樣有效使用樣式表，來(lái)談?wù)勛约旱囊恍┬牡皿w會(huì)
隨著互聯(lián)網(wǎng)經(jīng)濟(jì)的不斷發(fā)展，互聯(lián)網(wǎng)上的專業(yè)網(wǎng)站、公眾服務(wù)網(wǎng)站以及企業(yè)門戶的數(shù)量都在飛速的增長(zhǎng)，各網(wǎng)站的信息量也呈爆炸性增長(zhǎng)的趨勢(shì)。面對(duì)這些龐大的信 息量，我們對(duì)網(wǎng)頁(yè)中每一個(gè)欄目的增刪，都會(huì)是一個(gè)很復(fù)雜的過(guò)程。為了提高網(wǎng)頁(yè)的維護(hù)更新效率，我們可以使用樣式表，來(lái)僅僅改變一個(gè)文件，就能達(dá)到同時(shí)改變 幾百個(gè)網(wǎng)頁(yè)的外觀，而其個(gè)性化的表現(xiàn)未受任何損失。為了能充分用好樣式表的強(qiáng)大性和靈活性，筆者就怎樣有效使用樣式表，來(lái)談?wù)勛约旱囊恍┬牡皿w會(huì)。 新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。
1、在一個(gè)網(wǎng)頁(yè)中同時(shí)調(diào)用CSS的多種引入方式
在 HTML中引入CSS的方式很多，例如直接插入式，使用 鏈接外部樣式表，使用CSS"@import"導(dǎo)入樣式表以及在內(nèi)部元素中使用"STYLE"標(biāo)記來(lái)定義樣式表等。有網(wǎng)友詢問(wèn)，這些引入方式能不能同時(shí)在 一個(gè)網(wǎng)頁(yè)中被調(diào)用，它們之間會(huì)不會(huì)產(chǎn)生混亂？其實(shí)，我們大可不必這么擔(dān)心，這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在處理網(wǎng)頁(yè)中的樣式表是按照 一定的順序來(lái)處理的，首先檢查頁(yè)面中是否有直接插入式CSS，如果存在就先執(zhí)行它，針對(duì)本句的其它CSS就不去管它了；接著檢查網(wǎng)頁(yè)源代碼中 的"STYLE"標(biāo)記，有就執(zhí)行了；接下來(lái)再依次檢查執(zhí)行"@import"導(dǎo)入的內(nèi)部樣式表和 鏈接的外部樣式表。因此，我們完全可以在一個(gè)網(wǎng)頁(yè)中同時(shí)調(diào)用CSS的多種引入方式。
2、快速創(chuàng)建CSS外連式文件
對(duì) 于一個(gè)初接觸CSS的網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)講，要用寫字板之類的編輯器，去創(chuàng)建一個(gè)CSS外連式文件是相當(dāng)困難的。由于Dreamweaver對(duì)CSS支持的很 好，用它來(lái)幫助就輕松多了。具體可以這樣操作：首先在紙上寫好在網(wǎng)站的網(wǎng)頁(yè)中可能要用到的格名稱，然后在Dreamweaver的編輯窗中調(diào)出CSS面 板，一個(gè)一個(gè)地定義，并在一個(gè)空白頁(yè)上適當(dāng)?shù)貙懸稽c(diǎn)相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改；全部定義好后，再用記事本創(chuàng)建一個(gè)空的CSS外連式文 件，把在〈head〉與〈/head〉之間的那段定義好的CSS復(fù)制到CSS文件中去，就大功告成了。
3、讓背景圖案靜止不動(dòng)
當(dāng) 網(wǎng)頁(yè)不能在一屏全部顯示時(shí)，我們往往借助于水平滾動(dòng)條和豎直滾動(dòng)條來(lái)瀏覽屏幕以外的內(nèi)容，移動(dòng)滾動(dòng)條時(shí)一般圖象和文字是一起移動(dòng)的，那么我們有沒(méi)有辦法使 背景圖象不隨文字一起“滾動(dòng)”呢？利用CSS就可以實(shí)現(xiàn)這樣的目的，我們只要把下面這段源代碼直接放在網(wǎng)頁(yè)的與標(biāo)簽之間就可以了，其中bg.jpg就是網(wǎng) 頁(yè)中的背景圖象，大家可以把它換成自己需要的背景圖象：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
BODY { background: purple url(bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
--〉
〈/style〉
4、讓網(wǎng)頁(yè)自動(dòng)進(jìn)行“首行縮進(jìn)”
用 DreamWeaver來(lái)設(shè)計(jì)網(wǎng)頁(yè)的用戶知道，在DreamWeaver中輸入空格不是那么的方便，我們可以利用css來(lái)設(shè)計(jì)“首行縮進(jìn)”功能來(lái)彌補(bǔ)這個(gè) 缺憾。打開DreamWeaver的設(shè)計(jì)界面，在該界面中找到CSS的屬性定義對(duì)話框（Style Definition for .style1)，在該對(duì)話框的“Block”標(biāo)簽下的“text-indent”屬性定義設(shè)置項(xiàng)中來(lái)設(shè)置“首行縮進(jìn)”功能，在這里要注意的是，所謂“首 行”是指每段內(nèi)容的第一行，也就是直接按回車鍵就形成了一個(gè)新的段落?？s進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開始縮進(jìn)兩個(gè)漢字，設(shè)置 好的CSS如下所示：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.style1 { text-indent: 2em}
--〉
〈/style〉
5、巧用css來(lái)設(shè)定文字的背景
在 DreamWeaver中，如果我們需要給文字加上不同的背景顏色時(shí)，操作上很簡(jiǎn)單，只要用鼠標(biāo)單擊屬性面板上的文字顏色按鈕，從彈出的顏色設(shè)置欄中選擇 需要的顏色就可以了。但如果我們要給部分文字加不同的背景色，該怎么操作呢？由于DreamWeaver3中沒(méi)有這方面的功能，但我們可以巧妙利用css 來(lái)實(shí)現(xiàn)這樣的目的。具體操作過(guò)程是，首先我們可以先做一個(gè)定義背景色的CSS，例如給這個(gè)css命名為bjstyle，接著在網(wǎng)頁(yè)中選中需要設(shè)置顏色的文 字，然后在工具欄中單擊一下“bjstyle”就行了。下面就是一個(gè)定義顏色背景的CSS的源代碼：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.bjstyle { background: #cc00bb}
--〉
〈/style〉
6、給指定內(nèi)容加邊框
在 DreamWeaver中，我們可以利用CSS強(qiáng)大的定義功能來(lái)給某部分內(nèi)容加邊框，定義時(shí)首先打開DreamWeaver的設(shè)計(jì)界面，在該界面中找到 CSS的屬性定義對(duì)話框（Style Definition for .style1)，該對(duì)話框的“Border”設(shè)置項(xiàng)就是用來(lái)定義指定內(nèi)容邊框線的，其中“top”、“bottom”、“l(fā)eft”、“right”設(shè) 置欄是分別用來(lái)定義指定內(nèi)容四周邊框線的粗細(xì)和顏色的，這些設(shè)置項(xiàng)設(shè)置好后還需要在下面的“Style”中定義線型，否則我們將看不到定義的邊框線，因?yàn)?css默認(rèn)的線型是“none”。下面是一個(gè)定義了上邊框?yàn)椋核{(lán)色細(xì)線；左邊框?yàn)椋壕G色中粗線的CSS源代碼：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉
7、用樣式表來(lái)控制超級(jí)鏈接的顏色
如 果你仔細(xì)研究一下超級(jí)鏈接，你就會(huì)發(fā)現(xiàn)，瀏覽器處理超級(jí)鏈接的默認(rèn)方式是，對(duì)于目前還沒(méi)有訪問(wèn)過(guò)的超級(jí)鏈接是用藍(lán)色且?guī)в邢聞澗€的文字來(lái)顯示的，對(duì)于已經(jīng) 訪問(wèn)過(guò)的超級(jí)鏈接則是用深紫色且?guī)в猩钭仙南聞澗€的文字來(lái)顯示的。這些默認(rèn)的設(shè)置顏色看得時(shí)間，可能就產(chǎn)生厭倦之感，并且很有可能與自己網(wǎng)頁(yè)的背景顏色 不協(xié)調(diào)。因此我們完全可以按照自己的視覺(jué)要求，來(lái)自由更改超級(jí)鏈接的顯示顏色，讓它更能體現(xiàn)自己的風(fēng)格。下面筆者就來(lái)介紹一段修改超級(jí)鏈接顯示顏色的源代 碼，代碼如下：
我們可以把這段源代碼添加在HTML文件的……之間，它可以對(duì)對(duì)本網(wǎng)頁(yè)中的任何一個(gè)超級(jí)鏈接都起作用，其中這段代碼中的：
A:link {text－decoration: none; color:blue}是說(shuō)明了超級(jí)鏈接還沒(méi)有被訪問(wèn)，它沒(méi)有下劃線，顏色為藍(lán)色。
A:visited { color:red; text－decoration:line－through }說(shuō)明了超級(jí)鏈接被訪問(wèn)后，它的顏色變成了紅色，有了一根刪除線。
A:active { color:white; text－decoration:underline }說(shuō)明超級(jí)鏈接處于活動(dòng)狀態(tài)的時(shí)候，它的顏色變成了白色，有了下劃線。
A:hover {text－decoration:none;color:＃FF0000;background－color:black}說(shuō)明鼠標(biāo)移動(dòng)到超級(jí)鏈接后，它沒(méi)有下劃線，文字顏色變成了黃色，背景顏色是黑色。
新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。
根據(jù)上面的解釋，我們可以把超級(jí)鏈接在各種狀態(tài)下的顯示顏色修改成自己喜歡的那種，以便能更好地展示自己的個(gè)性。
8、給選中文字加背景圖像
在 DreamWeaver中，我們同樣可以給指定文字加上背景圖象，其操作過(guò)程與給指定文字加背景色操作類似，只不過(guò)是把選擇背景顏色換成選擇加載的背景圖 象就是了。其具體操作過(guò)程是，首先我們可以先做一個(gè)定義背景色的CSS，例如給這個(gè)css命名為txstyle，接著在網(wǎng)頁(yè)中選中需要設(shè)置顏色的文字，然 后在工具欄中單擊一下“txstyle”就行了。下面就是一個(gè)定義背景圖象的CSS的源代碼（其中test.gif就是所加載的背景圖象）：
復(fù)制代碼
代碼如下:
〈style type="text/css"〉
〈!--
.txbgstyle { background-image: url(test.gif)}
--〉
〈/style〉
————————————————
版權(quán)聲明：本文為CSDN博主「html基礎(chǔ)教程」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/html168/article/details/104525011
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com