CSS如何美化被选中的文字

  发布时间:2016-06-22 17:05:08   作者:佚名   我要评论
这篇文章主要介绍了CSS如何美化被选中的文字,本文就教大家利用CSS美化被鼠标选中的文字的样式,感兴趣的小伙伴们可以参考一下

CSS的作用就是用来美化网页的内容或者结构层次。这我们都知道,不是吗?随着CSS技术的不断革新升级,我们获得了更多的控制样式的能力。一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色,而苹果电脑上提供的是浅绿色。火狐浏览器,IE9,Opera和谷歌浏览器允许我们自定义被选择文字的颜色。让我来展示给你看:

CSS代码

CSS Code复制内容到剪贴板
  1. /* webkit, opera, IE9 */  
  2. ::selection { background:lightblue; }   
  3. /* mozilla firefox */  
  4. ::-moz-selection { background:lightblue; }   
  5.   

-moz-属性前缀是个火狐浏览器用的,而基本的::selection选择器是给谷歌浏览器用的。跟其它CSS选择器的用法一样,你可以嵌套使用,在不同的地方显示不同的颜色:

CSS Code复制内容到剪贴板
  1. /* webkit, opera, IE9 */  
  2. div.highlightBlue::selection { background:lightblue; }   
  3. /* mozilla firefox */  
  4. div.highlightBlue::-moz-selection { background:lightblue; }   
  5.   
  6. /* webkit, opera, IE9 */  
  7. div.highlightPink::selection { background:pink; }   
  8. /* mozilla firefox */  
  9. div.highlightPink::-moz-selection { background:pink; }   
  10.   

用CSS美化被选择的文字只是一种很简单的技巧,但这些都能让你的网站页面更绚丽、更多彩!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • CSS美化半个字符的巧妙方法

    CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的
    2016-06-14
  • 使用CSS3美化HTML表单的技巧演示

    这篇文章主要介绍了使用CSS3美化HTML表单的技巧演示,包括单选框元素的隐藏以及选项之间的间隔等调整方法,需要的朋友可以参考下
    2016-05-17
  • CSS使用图片美化的漂亮菜单效果

    这篇文章主要为大家介绍了CSS使用图片美化的漂亮菜单效果,涉及css背景图片动态设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-28
  • 用CSS和Div美化select样式的简单方法

    这篇文章主要介绍了用CSS和Div美化SELECT样式的简单方法,同时提到了select相关的兼容性写法,需要的朋友可以参考下
    2015-08-06
  • CSS美化下拉框select在火狐和谷歌浏览器下已测试

    本示例要模仿的是下拉框,经过美化的伪下拉,右边的小三角是用css3实现的,鼠标经过的时候有旋转特效
    2014-05-13
  • 使用css美化html表单控件详细示例(表单美化)

    这篇文章主要介绍了使用css美化html表单控件详细示例(表单美化),需要的朋友可以参考下
    2014-05-06
  • css美化表格让其隔行变色显示

    单一的表格很容易使人感到枯燥,使用变色效果可以使得表格看起来更加舒适,在本文将为大家介绍下使用css实现隔行变色显示,感兴趣的朋友可以参考下
    2013-10-05
  • 文件上传input file简便美化方案(css)

    文件上传input在各个浏览器里表现形式都不一样,这里通过css样式控制,尽量在多浏览器中的表现都一样
    2013-01-10
  • CSS美化 input type=file 兼容各个浏览器

    在日常重构中,form表单家族中的 upload field 在使用 css 美化时令人头疼!默认情况下,各个浏览器下的表现层次不齐,很是郁闷,于是本人搜集整理了一些常用技巧,需要了解
    2012-12-27
  • 只用CSS美化选择框的实现代码

    当我需要用下拉列表拼凑自定义表单时,我常常不得不使用下拉框(select),由于某些部分是浏览器特定的,如下拉箭头,我花了一段时间去搞清楚如何只使用css轻松地美化下拉
    2012-03-04

最新评论