Как изменить цвет определенного текста в html

Как изменить цвет по умолчанию выделенного текста с помощью CSS

Каждый раз, когда пользователь выбирает текст для выделения, автоматически применяется какой-нибудь фоновый цвет, а иногда может меняться цвет текста. Если вы раньше не заметили этого, просто выделите это предложение, чтобы увидеть фоновый цвет текста.

Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, CSS3 дает эту возможность!

Псевдоэлемент ::selection является известной функцией CSS3, который переопределяет цвет выделенного текста на уровне браузера или системы. Он также дает возможность указать цвет и фон для выбранного пользователем текста.

Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.

Количество свойств, используемых с этим псевдоэлементом, ограничено. С помощью псевдоэлемента ::selection можно изменить значения только трех свойств (color, background-color и text-shadow). В этой статье мы покажем, каким будет эффект для каждого из этих свойств.

Для максимальной совместимости браузера используйте расширение -moz- для поддержки в Firefox ( ::-moz-selection ).

Как изменить цвет шрифта при выделении текста

Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection . Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.

Пример

html> html> head> title>Заголовок документа title> style> .green::-moz-selection< color: #8ebf42; > .green::selection< color: #8ebf42; background-color: initial; > .bg-green::-moz-selection< background-color: #8ebf42; > .bg-green::selection< background-color: #8ebf42; > .bg-transparent::-moz-selection< color: #8ebf42; background-color: transparent; > .bg-transparent::selection< color: #8ebf42; background-color: transparent; > .white-green::-moz-selection< color: #fff; background-color: #8ebf42; > .white-green::selection< color: #fff; background-color: #8ebf42; > style> head> body> p class="green">Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию. p> p class="bg-green">Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон. p> p class="bg-transparent">Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета. p> p class="white-green">Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет. p> body> html>

В этом примере фоновый цвет по умолчанию — это цвет данного сайта.

Как изменить фоновый цвет при выделении текста

Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color .

Пример

html> html> head> title>Заголовок документа title> style> .green::-moz-selection< background-color: #8ebf42; > .green::selection< background-color: #8ebf42; > .yellow::-moz-selection< background-color: #ffcc00; > .yellow::selection< background-color: #ffcc00; > style> head> body> p>Текст с фоновым цветом по умолчанию. p> p class="green">Выберите этот текст и увидите зеленый фон. p> p class="yellow">Выберите этот текст и увидите желтый фон. p> body> html>

В случае, если не хотите фоновый цвет при выделении текста, установите свойство background-color со значением «transparent».

Как изменить цвет тени при выборе текста

Используйте дальше псевдоэлемент ::selection для добавления, удаления или изменения вида текстовой тени при выделении.

Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection .

Пример

html> html> head> title>Заголовок документа title> style> /* before selection */ .shadow2< text-shadow: 1px 1px 1px; > .shadow3< text-shadow: 1px 2px 4px #000; > .shadow4< text-shadow: 1px 2px 4px; > /* after selection */ .shadow1::-moz-selection< text-shadow: 1px 1px 1px; background-color: transparent; > .shadow1::selection< text-shadow: 1px 1px 1px; background-color: transparent; > #shadow2::-moz-selection< text-shadow: none; background: #fffae6; > .shadow2::selection< text-shadow: none; background: #fffae6; > .shadow3::-moz-selection< text-shadow: 1px 1px 2px #222; > .shadow3::selection< text-shadow: 1px 1px 2px #222; > .shadow4::-moz-selection< text-shadow: 1px 2px 4px #208A28; background-color: transparent; color: #208A28; > .shadow4::selection< text-shadow: 1px 2px 4px #208A28; background-color: transparent; color: #208A28; > style> head> body> p class="shadow1">Выделите текст и увидите его тень. p> p class="shadow2">Выделите текст, чтобы удалить его тень. p> p class="shadow3">Выделите текст, чтобы он стал яснее. p> p class="shadow4">Выделите текст, чтобы изменить цвет его тени. p> body> html>

Как изменить цвет полей Textarea и Input при выборе текста

Пример

html> html> head> title>Заголовок документа title> style> input::-moz-selection< color: #1c87c9; background-color: #eee; > input::selection< color: #1c87c9; background-color: #eee; > textarea::-moz-selection< color: white; background-color: #8ebf42; > textarea::selection< color: white; background-color: #8ebf42; > style> head> body> p>Элемент input p> form>input type="text" value="Выделите этот input текст" /> form> p>Элемент textarea p> textarea rows="5" cols="25">Выделите этот textarea текст textarea> body> html>

Как изменить цвет выбранного изображения

Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection . Смотрите пример сами:

Пример

html> html> head> title>Заголовок документа title> style> img < padding: 10px; > #img2::-moz-selection< background-color: #d9d9d9; > #img2::selection< background-color: #d9d9d9; > style> head> body> p>Здесь второе изображение при выделении становится серым. p> p>Выделите обе изображения, чтобы увидеть разницу. p> img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> body> html>

Как создать разные эффекты выделения для одного и того же изображения на одной странице

Представьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.

В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.

Пример

html> html> head> title>Заголовок документа title> style> p.green::selection < background: #8ebf42; > p.green::-moz-selection < background: #8ebf42; > p.blue::selection < background: #1c87c9; > p.blue::-moz-selection < background: #1c87c9; > p.yellow::selection < background: #ffcc00; > p.yellow::-moz-selection < background: #ffcc00; > p.red::selection < background: #ff6666; > p.red::-moz-selection < background: #ff6666; > style> head> body> p class="green">Выберите текст, и он выделится зеленым цветом. p> p class="blue">Выберите текст, и он выделится синим цветом. p> p class="yellow">Выберите текст, и он выделится желтым цветом. p> p class="red">Выберите текст, и он выделится красным цветом. p> body> html>

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.

Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.

Пример

html> html> head> title>Заголовок документа title> style> ::-moz-selection< color: #fff; background-color: #8ebf42; > ::selection< color: #fff; background-color: #8ebf42; style> head> body> h3>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы. h3> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I p> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"> body> html>

::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.

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

Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.

Как изменить цвет слова с помощью тега Span и CSS

С помощью CSS легко установить цвет текста в документе. Если вы хотите, чтобы абзацы на вашей странице отображались в определенном цвете, вы просто указываете это в своей внешней таблице стилей, и браузер отображает ваш текст в этом выбранном цвете. Что происходит тогда, когда вы хотите изменить цвет только одного слова (или, возможно, всего нескольких слов) в абзаце текста? Для этого вам нужно будет использовать встроенный элемент, такой как тег.

В конечном счете, изменение цвета отдельного слова или небольшой группы слов в предложении легко с помощью CSS, и теги являются допустимым HTML, поэтому не беспокойтесь о том, что это какой-то хак. При таком подходе вы также избегаете использования устаревших тегов и атрибутов, таких как «шрифт», который является продуктом ушедшей эпохи HTML.

Эта статья для начинающих веб-разработчиков, которые, вероятно, плохо знакомы с HTML и CSS. Это поможет вам узнать, как использовать тег HTML и CSS для изменения цвета определенного текста на ваших страницах. При этом у этого метода есть некоторые недостатки, которые мы рассмотрим в конце этой статьи. А пока читайте дальше, чтобы узнать, как изменить цвет текста. Это очень легко и должно занять около двух минут.

Пошаговая инструкция

1. Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть программа, например Adobe Dreamweaver, или простой текстовый редактор, такой как Notepad, Notepad ++, TextEdit и т. Д.
2. В документе найдите слова, которые вы хотите отобразить на странице другим цветом. Для этого урока давайте использовать несколько слов, которые находятся внутри более крупного абзаца текста. Этот текст будет содержаться в паре тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
3. Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете редактор WYSIWYG, такой как Dreamweaver, вы работаете в режиме «просмотра кода» прямо сейчас.
4. Давайте обернем текст, цвет которого мы хотим изменить, с помощью тега, включая атрибут класса. Весь абзац может выглядеть так:

Это текст, который сфокусирован в предложении.

.focus-text 

 цвет: # F00;