超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

CSS樣式表使用技巧充分利用樣式表的強大性

2020-2-29    前端達人

為了提高網(wǎng)頁的維護更新效率,我們可以使用樣式表,來僅僅改變一個文件,就能達到同時改變幾百個網(wǎng)頁的外觀。為了能充分用好樣式表的強大性和靈活性,筆者就怎樣有效使用樣式表,來談談自己的一些心得體會



 



隨著互聯(lián)網(wǎng)經(jīng)濟的不斷發(fā)展,互聯(lián)網(wǎng)上的專業(yè)網(wǎng)站、公眾服務網(wǎng)站以及企業(yè)門戶的數(shù)量都在飛速的增長,各網(wǎng)站的信息量也呈爆炸性增長的趨勢。面對這些龐大的信 息量,我們對網(wǎng)頁中每一個欄目的增刪,都會是一個很復雜的過程。為了提高網(wǎng)頁的維護更新效率,我們可以使用樣式表,來僅僅改變一個文件,就能達到同時改變 幾百個網(wǎng)頁的外觀,而其個性化的表現(xiàn)未受任何損失。為了能充分用好樣式表的強大性和靈活性,筆者就怎樣有效使用樣式表,來談談自己的一些心得體會。 新建一個前端學習qun438905713,在群里大多數(shù)都是零基礎學習者,大家相互幫助,相互解答,并且還準備很多學習資料,歡迎零基礎的小伙伴來一起交流。



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



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



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



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



3、讓背景圖案靜止不動 



當 網(wǎng)頁不能在一屏全部顯示時,我們往往借助于水平滾動條和豎直滾動條來瀏覽屏幕以外的內(nèi)容,移動滾動條時一般圖象和文字是一起移動的,那么我們有沒有辦法使 背景圖象不隨文字一起“滾動”呢?利用CSS就可以實現(xiàn)這樣的目的,我們只要把下面這段源代碼直接放在網(wǎng)頁的與標簽之間就可以了,其中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)頁自動進行“首行縮進” 



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



復制代碼



代碼如下:





〈style type="text/css"〉 

〈!-- 

.style1 { text-indent: 2em} 

--〉 

〈/style〉





5、巧用css來設定文字的背景 



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



復制代碼



代碼如下:





〈style type="text/css"〉 

〈!-- 

.bjstyle { background: #cc00bb} 

--〉 

〈/style〉





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



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



復制代碼



代碼如下:





〈style type="text/css"〉 

〈!-- 

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00} 

--〉 

〈/style〉





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



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



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



A:link {text-decoration: none; color:blue}是說明了超級鏈接還沒有被訪問,它沒有下劃線,顏色為藍色。 



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}說明鼠標移動到超級鏈接后,它沒有下劃線,文字顏色變成了黃色,背景顏色是黑色。 



新建一個前端學習qun438905713,在群里大多數(shù)都是零基礎學習者,大家相互幫助,相互解答,并且還準備很多學習資料,歡迎零基礎的小伙伴來一起交流。



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



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



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



復制代碼



代碼如下:





〈style type="text/css"〉 

〈!-- 

.txbgstyle { background-image: url(test.gif)} 

--〉 

〈/style〉

————————————————

版權聲明:本文為CSDN博主「html基礎教程」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接:https://blog.csdn.net/html168/article/details/104525011

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.miumiuwan.com

存檔