CSS от А до Я: как использовать свойство color

CSS от А до Я: как использовать свойство color

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со свойством color.

C значит color

Свойство color используется для изменения цвета текста на странице. А как оно работает с выделенным текстом? Выделенный мышью текст можно стилизовать при помощи псевдоэлемента ::selection. Изменить в выделенном тексте можно не все свойства. Мы можем изменять свойства:

color

background-color

cursor

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

outline

text-decoration

text-shadow

Несмотря на ограничение по свойствам, поддающимся изменению при помощи псевдоэлемента ::selection, мы можем задавать разные цвета выделенного текста для отдельных частей страницы при помощи каскадирования.

Попробуйте выделить текст в параграфах в Codepen демо.

Вендорные префиксы

В Firefox для псевдоэлемента ::selection все еще нужен вендорный префикс –moz. Из-за особенности парсинга стилей в Firefox не работает разделение селекторов запятой для данного псевдоэлемента. Для правильной работы в этом браузере вам придется дописать еще один блок стилей.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree