Цветная подсветка текста с использованием HTML и CSS

основной момент

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

Выделите с помощью тега HTML5

Если вы работаете на странице HTML5, тег можно использовать для быстрого выделения текста. Ниже приведен пример используемого тега mark. Если ваш браузер поддерживает тег, «выделенный текст» должен иметь желтый фон.

Пример кода

Вот пример выделенного текста с использованием <отметка> тег.

Пример результата

Вот пример
выделенный текст
используя тег.

Выделите текст только HTML-кодом

Чтобы выделить текст с помощью HTML-кода и поддерживать все браузеры, задайте стиль цвета фона, как показано в примере ниже, с помощью тега HTML.

Пример кода

Этот текст выделен желтым цветом.

Пример результата

Этот текст выделен текстом желтым цветом.

Чаевые

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

Чаевые

Используя тот же код, вы также можете выделить одно или несколько слов в абзаце, чтобы привлечь внимание к определенному разделу текста.

Выделите текст с помощью CSS HTML

Вы также можете создать класс CSS и установить атрибут «background-color», как показано в примере ниже.

Пример кода

тело {цвет фона: синий; }
.highlightme {background-color: # FFFF00; }
p {background-color: #FFFFFF; }

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

Если вы хотите использовать класс «highlightme» для выделения текста, вы можете создать в своем HTML тег, который ссылается на класс CSS.

Пример кода

тест

Как выделить полный абзац

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

Пример кода

Весь этот абзац текста выделен желтым цветом.

Пример результата

Весь этот абзац текста выделен желтым цветом.

Ссылка на основную публикацию