С помощью CSS легко установить цвет текста в документе. Если вы хотите, чтобы абзацы на вашей странице отображались в определенном цвете, вы просто указываете, что в вашей внешней таблице стилей браузер отобразит ваш текст в выбранном цвете. Что происходит, когда вы хотите изменить цвет только одного слова (или, возможно, всего несколько слов) в абзаце текста? Для этого вам нужно использовать встроенный элемент, такой как тег.
В конечном счете, изменение цвета одного слова или маленькой группы слов в предложении легко с помощью CSS, а теги являются допустимыми HTML, поэтому не беспокойтесь об этом как о каком-то хаке. При таком подходе вы также избегаете использования устаревших тегов и атрибутов, таких как «шрифт», который является продуктом ушедшей эпохи HTML.
Эта статья предназначена для начинающих веб-разработчиков, которые, вероятно, новы для HTML и CSS. Это поможет вам узнать, как использовать тег HTML и CSS для изменения цвета конкретного текста на ваших страницах. При этом есть некоторые недостатки этого метода, которые мы рассмотрим в конце этой статьи. Теперь прочитайте, чтобы узнать, как изменить этот цвет текста. Это очень легко и займет около двух минут.
Пошаговая инструкция
- Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть такая программа, как Adobe Dreamweaver или простой текстовый редактор, такой как «Блокнот», «Блокнот ++», «TextEdit» и т. Д.
- В документе найдите слова, которые вы хотите отобразить другим цветом на странице. Ради этого урока, давайте использовать несколько слов, которые находятся в расширенном абзаце текста. Этот текст будет содержаться внутри пары тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
- Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете редактор WYSIWYG, например Dreamweaver, вы сейчас работаете в «представлении кода».
- Позвольте обернуть текст, цвет которого мы хотим изменить с помощью тега, включая атрибут класса. Весь параграф может выглядеть так:
Это текст, который сосредоточен в предложении.
- Мы только что использовали встроенный элемент, чтобы дать этому конкретному тексту «крючок», который мы можем использовать в CSS. Следующий шаг - перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.
- В нашем файле CSS добавим:
-
.фокус-текст {
-
цвет: # F00;
-
}
- Это правило установило бы, что встроенный элемент, the, будет отображаться красным цветом. Если бы у нас был предыдущий стиль, который придавал тексту нашего документа черному, этот встроенный стиль заставил бы текст диапазона быть сфокусированным и выделяться с другим цветом. Мы могли бы также добавить другие стили к этому правилу, возможно, сделав курсив текста или полужирным шрифтом, чтобы подчеркнуть его еще больше?
- Сохраните свою страницу.
- Проверьте страницу в своем любимом веб-браузере, чтобы увидеть изменения в действии.
- Обратите внимание, что в дополнение к некоторым веб-профессионалам предлагается использовать другие элементы, такие как пары или теги. Эти теги были выделены жирным шрифтом и курсивом, но были устаревшими и заменены на. Тем не менее теги по-прежнему работают в современных браузерах, поэтому многие веб-разработчики используют их как встроенные крючки для стилизации. Это не самый худший подход, но если вы хотите избежать каких-либо устаревших элементов, мы предлагаем придерживаться тега для этих видов стилизации.
Советы и все, что нужно соблюдать
Хотя этот подход отлично подходит для небольших потребностей в стиле, например, если вам нужно изменить только один небольшой фрагмент текста в документе, он может быстро выйти из-под контроля. Если вы обнаружите, что ваша страница замусорена встроенными элементами, все из которых имеют уникальные классы, которые вы используете в своем файле CSS, возможно, вы ошибаетесь, помните, что больше этих тегов, которые находятся на вашей странице, тем сложнее скорее всего, будет поддерживать эту страницу в будущем. Кроме того, хорошая веб-типография редко имеет много вариантов цвета и т. Д. На всей странице.
