DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> css3改變選擇文本背景顏色
css3改變選擇文本背景顏色
編輯:CSS特效代碼     

請選擇本頁面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm


一般情況下在網頁裡的文本我們用鼠標選中的時候都是藍色的,這個默認顏色也是可以更改的,本文我們學習如何使用CSS3實現改變默認文本選中的顏色。
以我的系統舉例(xp 默認主題),浏覽器上頁面文字選中後默認的背景色是一種藍色, 不同浏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色。

一、關於浏覽器文字選中顏色:
在CSS3的爸爸 媽媽還沒有相親認識的時候,要改變頁面上文字選中後的背景色以及文字顏色,就跟讓太監生孩子一樣困難。但是,隨著CSS3呱呱落地,獲得越來越多的浏覽器認可,一切又顯得那麼自然而然。雖然有些頑固的糟老頭(如IE浏覽器)還不認可這個新生的CSS3,但是絲毫不影響其在其他浏覽器上對UI的又一次改進。
目前Firefox、Safari、Chrome以及Opera浏覽器都支持文本選擇屬性,如果浏覽器不支持該屬性,會直接忽略它,所以不會產生任何不良的影響。下面就簡單展示下這個改進UI體驗的小技巧。 by 何問起

二、改變默認選中顏色:
首先,簡單點的例子,我們可以設置整個頁面文本選中的基本樣式,如下:

::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}

 

同樣的,你可以根據自己的需要,指定CSS選擇器以及對應內容文字/圖片等的選中樣式,這裡就不一一舉例了。

三、結語:
本文只是一個技術交流,實際工作中是否使用還得看具體情況,在商業網站中我是絕不會使用:selection來改變文本選中的樣式的,要是個人網站或是設計類網站倒是很有可能使用此屬性來讓網站蓬荜生輝。當然,每個人在頁面重構的過程中所注重的地方時不一樣的,所以,對:selection的態度僅代表個人觀點。


代碼:

<style>
::selection { background:deeppink; color:lightgreen; } ::-moz-selection { background:deeppink; color:lightgreen; } ::-webkit-selection { background:deeppink; color:lightgreen;}</style>

 

示例二:
<style>
::selection { background:deeppink; color:white; } ::-moz-selection { background:deeppink; color:white; } ::-webkit-selection { background:deeppink; color:white;}</style>

 

轉載自:http://hovertree.com/h/bjaf/38hq6y9d.htm 何問起

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved