Вы можете указать цвета, размеры и другие параметры шрифта во внешней таблице стилей CSS. Однако, если вы хотите изменить цвет только одного слова или фразы, самый простой и простой способ - использовать встроенный тег. Встроенный CSS - это то, как он звучит: он добавляется в HTML страницы, а не во внешнюю таблицу стилей.
Избегайте использования тега, который устарел.
Вот как изменить цвет слова с помощью тега:
Используя предпочитаемый вами текстовый редактор или редактор HTML в режиме просмотра кода, поместите курсор перед первой буквой слова или группы слов, которые вы хотите раскрасить.
Позвольте обернуть текст, цвет которого мы хотим изменить, тегом, включая атрибут класса. Весь абзац может выглядеть так: это текст, на котором сосредоточено внимание в предложении.
-
Дайте этому конкретному тексту «крючок», который мы можем использовать в CSS. Наш следующий шаг - перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.
В нашем файле CSS добавим:
.focus-text {
цвет: # F00;
}
Это правило установит, что встроенный элемент, будет отображаться красным цветом. Если бы у нас был предыдущий стиль, который устанавливал текст нашего документа черным, этот встроенный стиль заставил бы текст диапазона быть сфокусированным и выделиться другим цветом. Мы могли бы также добавить к этому правилу другие стили, возможно, выделив текст курсивом или полужирным шрифтом, чтобы выделить его еще больше?
-
Сохраните свою страницу.
Протестируйте страницу в своем любимом веб-браузере, чтобы увидеть, как изменения вступят в силу.
Обратите внимание, что помимо тега, некоторые веб-профессионалы предпочитают использовать другие элементы, например пары тегов или. Эти теги раньше выделялись полужирным шрифтом и курсивом, но были объявлены устаревшими и заменены на и. Однако теги по-прежнему работают в современных браузерах, поэтому многие веб-разработчики используют их как встроенные средства стилизации. Это не худший подход, но если вы хотите избежать использования устаревших элементов, мы рекомендуем использовать тег для подобных нужд стилизации.
Советы и на что следует обратить внимание
Хотя этот подход отлично подходит для небольших потребностей в стилизации, например, если вам нужно изменить только один небольшой фрагмент текста в документе, он может быстро выйти из-под контроля. Если вы обнаружите, что ваша страница усеяна встроенными элементами, каждый из которых имеет уникальные классы, которые вы используете в своем файле CSS, вы можете делать это неправильно. Помните, чем больше этих тегов на вашей странице, тем сложнее будет поддерживать эту страницу в рабочем состоянии. вперед. Кроме того, в хорошей веб-типографике редко бывает так много вариантов цвета и т. Д. по всей странице.