ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS が選択したテキストを美しくする方法の紹介

CSS が選択したテキストを美しくする方法の紹介

高洛峰
高洛峰オリジナル
2017-03-08 15:20:191575ブラウズ

CSS の役割は、Web ページのコンテンツまたは構造階層を美しくすることです。これは誰もが知っていますよね? CSS テクノロジーの継続的な革新とアップグレードにより、スタイルを制御する能力がさらに向上しました。あまり知られていないテクニックは、ブラウザーで選択したテキストのスタイルを美しくすることができることです。 Windows 自体は醜い濃い緑色をしていますが、Apple コンピュータは明るい緑色をしています。 Firefox、IE9、Opera、Google Chrome では、選択したテキストの色をカスタマイズできます。お見せしましょう:

CSS コード

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

-moz-property プレフィックスは Firefox 用であり、基本的な ::selection セレクターは Google Chrome 用です。他の CSS セレクターと同様に、CSS セレクターをネストして、さまざまな場所に異なる色を表示できます:

/* 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; }

CSS を使用して選択したテキストを美しくするのは非常に単純なテクニックですが、これらにより Web サイトのページがより豪華でカラフルになります。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。



以上がCSS が選択したテキストを美しくする方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。