Бриссен.ру

Выделение текста цветом в HTML

Выделение текста

Выделение текста, кода или важной информации на веб-странице, бесспорно, полезно — человек, в этом случае, лучше воспринимает прочитанное, если выделяются ключевые моменты в тексте. Например, если написать строки кода не выделяя его, то он сливается с основным текстом, после такого трудно найти искомое. Не надо мне говорить о том, что я «Капитан Очевидность»), это был всего лишь пример...) Знаю, что у вас все как надо).

Для выделения текста мы будем использовать тег <mark>, он универсален, и предназначен как раз для нашей цели. Тег <mark> вставляется в уже существующий текст, выделяемый текст находится между тегом <mark> и закрывающем его тегом </mark>, и выглядит он следующим образом:
ваш текст <mark>выделенный текст</mark> ваш текст.

Но этого недостаточно, надо ещё задать цвет выделенного текста, для этого используются CSS-стили. Рекомендую использовать внешние CSS-файлы. При этом тег <mark> будет выглядеть уже по другому, например, вот так: ваш текст <mark class="highlight-text1">выделенный текст</mark> ваш текст.
Где class="highlight-text1" и есть наш стиль отображения текста. Ниже приведён пример HTML+CSS.

HTML

CSS


              .highlight-text1 {
                  font-family: Arial, sans-serif;   /* Шрифт */
                  border: 1px solid #fde910;        /* Граница и её цвет */
                  border-radius: 4px;               /* Закругляет углы */
               /* color: #3c763d; */                /* Цвет текста */
                  background-color: #fde910;        /* Цвет фона */
              }

Результат выделение текста:
Я нахожу нужную мне информацию в поисковых системах Яндекс и Google.

Выделение кода цветом в HTML

Возьмём для примера выше приведённый код:

С выделением текста у нас проблем не возникло, чего не скажешь о выделение кода — всему виной являются специальные символы HTML, которые надо экранировать. Для этого нужно преобразовать HTML-символы следующим образом:

Код после преобразования HTML-символов:

Разместим полученный код в тег <mark>:

Результат выделение кода:
ваш текст <mark class="highlight-text1">выделенный текст</mark> ваш текст

Ну и напоследок, подборка готовых CSS-стилей.