亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

使用CSS3改變文本選中的默認(rèn)顏色

系統(tǒng) 2852 0

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=1147

?

關(guān)于瀏覽器文字選中顏色

以我的系統(tǒng)舉例(xp 默認(rèn)主題),瀏覽器上頁面文字選中后默認(rèn)的背景色是一種藍(lán)色, 不同瀏覽器的顏色有些許差異,但大致相同,文字顏色也近乎白色,如下圖所示,截自Firefox3.6瀏覽器:
文字選中默認(rèn)顏色 張鑫旭-鑫空間-鑫生活

在 CSS3的爸爸媽媽還沒有相親認(rèn)識的時候,要改變頁面上文字選中后的背景色以及文字顏色,就跟讓太監(jiān)生孩子一樣困難。但是,隨著CSS3呱呱落 地,獲得越來越多的瀏覽器認(rèn)可,一切又顯得那么自然而然。雖然有些頑固的糟老頭(如IE瀏覽器)還不認(rèn)可這個新生的CSS3,但是,絲毫不影響其在其他瀏 覽器上對UI的又一次改進(jìn)。

目前Firefox、Safari、Chrome以及Opera瀏覽器都支持文本選擇屬性,如果瀏覽器不支持該屬性,會直接忽略它,所以不會產(chǎn)生任何不良的影響。

?

下面就簡單展示下這個改進(jìn)UI體驗的小技巧。

?

二、改變默認(rèn)選中顏色

首先,簡單點的例子,我們可以設(shè)置整個頁面文本選中的基本樣式,如下:

      ::selection {
    background:#d3d3d3; 
    color:#555;
}

::-moz-selection {
    background:#d3d3d3; 
    color:#555;
}

::-webkit-selection {
    background:#d3d3d3; 
    color:#555;
}
    

?

于是,文本選中的默認(rèn)藍(lán)色背景就此變成了淡灰色,如下圖所示,截自Chrome瀏覽器:
改變頁面文字旋轉(zhuǎn)的基本樣式 張鑫旭-鑫空間-鑫生活

當(dāng)然,我們可以使用CSS選擇器指定特定標(biāo)簽內(nèi)容文字選中后的樣式狀態(tài),例如下面所展示的栗色選中狀態(tài):

      .maroon::selection {
    background:maroon; 
    color:#fff;
}

.maroon::-moz-selection {
    background:maroon; 
    color:#fff;
}

.maroon::-webkit-selection {
    background:maroon; 
    color:#fff;
}

<p class="maroon">...文字內(nèi)容。</p>
    

?

會得到類似下圖的效果:
栗色選中狀態(tài) 張鑫旭-鑫空間-鑫生活

同樣的,你可以根據(jù)自己的需要,指定CSS選擇器以及對應(yīng)內(nèi)容文字/圖片等的選中樣式,這里就不一一舉例了。

?

三、實例頁面

您可以狠狠地點擊這里: CSS3改變文本選中默認(rèn)樣式demo

?

四、結(jié)語

老實講,在實際的商業(yè)項目中,我是絕不會使用:selection來改變文本選中的樣式的,要是個人網(wǎng)站或是設(shè)計類網(wǎng)站倒是很有可能使用此屬性來讓網(wǎng)站蓬蓽生輝。當(dāng)然,每個人在頁面重構(gòu)的過程中所注重的地方時不一樣的,所以,對:selection的態(tài)度僅代表個人觀點。

?

?

原文: http://www.zhangxinxu.com/wordpress/2010/10/%E4%BD%BF%E7%94%A8css3%E6%94%B9%E5%8F%98%E6%96%87%E6%9C%AC%E9%80%89%E4%B8%AD%E7%9A%84%E9%BB%98%E8%AE%A4%E9%A2%9C%E8%89%B2/

?

本文其實沒有什么內(nèi)容,小技巧展示而已。如果文中有什么表述不準(zhǔn)確的地方歡迎指正,也歡迎通過評論進(jìn)行交流。

?

原創(chuàng)文章,轉(zhuǎn)載請注明來自 張鑫旭-鑫空間-鑫生活 [ http://www.zhangxinxu.com ]
本文地址: http://www.zhangxinxu.com/wordpress/?p=1147

(本篇完)

使用CSS3改變文本選中的默認(rèn)顏色


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯(lián)系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發(fā)表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 欧美在线一级精品 | 欧美黄色录像 | 日本二级毛片免费 | 成人婷婷 | 青青青激情视频在线最新 | 欧美成人免费毛片 | 五月婷婷色网 | 亚洲国产婷婷综合在线精品 | 日本免费不卡一区 | 男女69式互添在线观看 | 国产伦精品一区二区三区高清 | 99精品一区二区三区 | 青青久操视频 | 老司机免费福利影院 | 色综合免费视频 | 九九九九九九精品免费 | 色偷偷91久久综合噜噜噜 | 日本午夜www高清视频 | 日本不卡在线一区二区三区视频 | 欧美777精品久久久久网 | 国产成人亚洲精品77 | 国产成年人视频 | 婷婷的久久五月综合先锋影音 | 欧美色成人tv在线播放 | 50-60岁老妇女一级毛片 | 成年女人永久免费观看片 | 96精彩视频在线观看 | 亚洲欧洲一区二区三区在线 | 爱操在线 | 高清在线不卡 | 奇米久久久 | 中文国产成人精品久久一区 | 欧美jizz40性欧美 | 国产成人精品久久一区二区三区 | 国产亚洲精品激情一区二区三区 | 伊人久久精品一区二区三区 | 欧美在线一 | 国产精品视频久久 | 亚洲欧美日韩综合一区久久 | 99久久国产综合精品女不卡 | 成人久久18免费游戏网站 |