网站上的文本样式是网页设计和开发的一个重要方面。为此,CSS(层叠样式表)是一个可供您使用的强大工具。 CSS 是一种多功能工具,允许以各种方式操纵文本的外观。最受追捧的技术之一是更改所选文本的颜色。在本文中,我们将学习两种使用 CSS 更改所选文本颜色的技术。
选择伪元素
::selection 伪元素是一个强大的功能,使我们能够选择用户当前突出显示的文本并为其设置样式。要更改所选文本的颜色,我们使用 color 属性。例如,如果我们想让所选文本显示为栗色,我们将使用以下 CSS
::selection { color: red; }
这会将整个网页的所选文本颜色更改为红色。
示例
以下示例将所选文本的颜色更改为红色,背景颜色更改为黑色。
<title>Change the color of selected text using CSS?</title><style> ::selection { color: red; background-color:black; } </style><h2>Changing the color of selected text using CSS</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
通过使用特定元素或类
我们可以更改特定元素或类上选定文本的颜色和背景颜色。例如,我们可以使用以下 CSS 更改特定“h1”标签内选定文本的颜色。
h1::selection { background: red; color: white; }
这会将 h1 元素中选定文本的颜色更改为白色,并将选定文本的背景颜色更改为红色。
示例
以下示例将选定的:
文本颜色更改为白色,背景颜色更改为红色,
文本更改为红色,背景更改为黄色,
文本更改为蓝色,背景颜色更改为粉色。
<title>Change the color of selected text using CSS</title><style> h1::selection { background: red; color: white; } h2::selection { background: yellow; color: red; } p::selection { background: pink; color: blue; } </style><h1>Welcome to tutorialsPoint</h1> <h2>Change the color of selected text using CSS</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
标签: css
还木有评论哦,快来抢沙发吧~