Как задать цвет выделения текста?
Выделение обычно применяется для копирования в буфер фрагмента текста, чтобы после этого вставить выделенный фрагмент в другое место. Например, в текстовый редактор для дальнейшей правки текста. Сам цвет и фон выделенного фрагмента определяется настройками операционной системы, но с помощью CSS эти параметры можно задать самостоятельно.
Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection, в котором задаются свойства color и background, как покаано в примере 1.
Пример 1. Цвет выделенного текста
В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно волна ненаблюдаемо стабилизирует кварк
Результат данного примера показан на рис. 1.
Рис. 1. Цвет и фон выделенного текста
См. также
Как выделить другим цветом фрагмент текста?
Изменить цвет произвольного фрагмента текста на желаемый.
Решение
Создайте новый класс (например, colortext ) и установите для него стилевое свойство color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега , класс которого совпадает с именем класса, созданным выше.
Пример 1. Выделение фрагмента текста цветом
HTML5 CSS 2.1 IE Cr Op Sa Fx
Изменение цвета текста Lorem ipsum dolor sit amet, , sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан ниже.
Рис. 1. Текст, у которого фрагмент выделен с помощью цвета
Класс colortext , созданный в данном примере, можно использовать неоднократно, выделяя цветом текст в нужных местах документа. Если требуется использовать несколько цветов, тогда следует создать несколько классов и добавлять их по необходимости.
Какие существуют расширения для выделения текста прямо в браузере?
Я иногда читаю тексты на сайтах. И мне бывает необходимо выделять куски текста на этих сайтах. Как-будто я выделяю текст маркером-выделителем текста.
При этом мне хотелось бы чтобы выделение текста сохранялось. То есть чтобы при очередном обращении к web-странице можно было снова посмотреть сделанные ранее выделения текста.
Какие существуют расширения (а может программы) для выделения текста на сайтах?
P.S. Я использую браузер Firefox, но ради такого расширения могу и другим браузером воспользоваться.
P.P.S. Еще была бы полезна возможность комментирования выделений, но не обязательно.
- Вопрос задан более трёх лет назад
- 19769 просмотров
Комментировать
Решения вопроса 2
Алексей Смирнов @ERAFY Автор вопроса
Вот это расширение мне больше всего понравилось:
Diigo Web Collector – Capture and Annotate
Оно подойдет для Google Chrome, Яндекс браузера, Opera
И на FireFox это расширение работает:
https://addons.mozilla.org/en-US/firefox/addon/dii.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Wired-Marker
Если еще работает. В последнее время с расширениями в Firefox творится что-то не хорошее.
Google Chrome начал поддерживать пользовательское выделение текста в Scroll To Text
Браузер Google Chrome начал поддерживать пользовательское выделение текста, который показывается в избранных сниппетах Google при помощи функции Scroll To Text. Эта функция прокручивает страницу до того фрагмента, который соответствует запросу пользователя. Поддержка пользовательского выделения была реализована в Chrome 89. Обновление заметили западные специалисты.
Great news: the ability to customise the colour of scroll-to-text highlights just launched within Chrome 89.
This is a lot of fun to play with. I wrote some thoughts on my blog, along with a tutorial for getting started.
SEO-консультант Броди Кларк подробно описал в своём блоге, как изменить цвет выделенного текста с жёлтого, используемого по умолчанию, на любой другой. Сначала нужно будет решить, какой цвет использовать. При этом важно помнить, что он должен хорошо контрастировать с контентом на странице, чтобы пользователь мог легко прочитать текст. Кларк изначально указал голубой цвет в CSS, однако выделенный этим цветом текст оказалось сложно читать. Поэтому он остановился на очень светлом оттенке красного: 
При этом Кларк отмечает, что жёлтый цвет, используемый по умолчанию, в большинстве случаев – оптимальный вариант, так что менять его совсем необязательно. С другой стороны, теперь можно поэкспериментировать с цветами и выбрать тот вариант, который окажется наиболее удачным. Указать нужный цвет можно в настройках CSS. В WordPress для этого нужно перейти на вкладку «Appearance», выбрать пункт «Edit CSS», а затем – «Additional CSS»: 
Этот цвет будет отображаться при использовании текста с сайта в избранных сниппетах. Напомним, что Google запустил функцию прокрутки и выделения текста для избранных сниппетов в июне 2020 года. В том же месяце поисковик представил новое расширение для Chrome под названием Link to Text Fragment, которое позволяет создавать ссылки на определённый текст на странице – независимо от её форматирования. В августе эта функция начала работать в поиске по картинкам, в октябре стало известно, что владельцы сайтов смогут настраивать цвет выделенных фрагментов, а в феврале этого года Google начал использовать эту функцию в товарном поиске.