Home > Web Front-end > CSS Tutorial > Introduction to how CSS beautifies selected text

Introduction to how CSS beautifies selected text

高洛峰
Release: 2017-03-08 15:20:19
Original
1552 people have browsed it

The function of CSS is to beautify the content or structural hierarchy of web pages. We all know this, don't we? With the continuous innovation and upgrading of CSS technology, we have gained more ability to control styles. A not-so-well-known technique is that we can beautify the style of selected text in the browser. Windows itself provides an ugly dark green color, while Apple computers provide a light green color. Firefox, IE9, Opera and Google Chrome allow us to customize the color of selected text. Let me show you:

CSS code

/* webkit, opera, IE9 */
::selection { background:lightblue; }   
/* mozilla firefox */
::-moz-selection { background:lightblue; }
Copy after login

-moz-property prefix is ​​for Firefox, and the basic ::selection selector is for Google Chrome of. Like other CSS selectors, you can nest them to display different colors in different places:

/* webkit, opera, IE9 */
p.highlightBlue::selection { background:lightblue; }   
/* mozilla firefox */
p.highlightBlue::-moz-selection { background:lightblue; }   

/* webkit, opera, IE9 */
p.highlightPink::selection { background:pink; }   
/* mozilla firefox */
p.highlightPink::-moz-selection { background:pink; }
Copy after login

Using CSS to beautify the selected text is just a very simple technique, but These can make your website pages more gorgeous and colorful!

The above is the entire content of this article. I hope it will be helpful to everyone's study. I also hope that everyone will support the PHP Chinese website.



The above is the detailed content of Introduction to how CSS beautifies selected text. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template