HTML и CSS 0

Как стилизовать в css выделение текста?

Здравствуйте, дорогие читатели. Сегодня я хочу вам рассказать, как оформить с помощью css стиль для выделенного текста, то есть тех текстовых фрагментов, которые вы выделяете курсором мыши.

Псевдокласс :selection

Интересно, что я только недавно узнал об этом псевдоклассе, как-то не попадался на глаза. Между тем на многих сайтах я видел, что если попытаться выделить текст, то к нему применяются интересные стили, отличные от тех, что по умолчанию.

А по умолчанию, как вы знаете, фон становиться синим, а сам цвет текста – белым. Это касается всех веб-сайтов. Так вот, я сильно хотел изменить это оформление на своем сайте, так как синий мне не подходит, но не понимал, как это сделать. Вообще я думал, что делается через скрипты.

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

:selection{
Color: #fff;
Background: orange;
}

выделенный текст
Это так, как стоит у меня. Естественно, вы можете поменять цвета на свои. Вот и все, теперь оформление выделенного текста подходит мне по дизайну, если использовать уточняющие селекторы, то можно для отдельных частей сайта применять другое оформление, но это, как по мне, очень редко где может пригодиться.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5