Хороший типографский дизайн является важной частью успешного сайта. CSS дает вам большой контроль над появлением текста на создаваемых вами веб-страницах. Это включает в себя возможность изменить цвет любых шрифтов, которые вы используете.
Ниже мы рассмотрим изменение цвета шрифта с помощью внешней таблицы стилей и стиля, который используется в теге абзаца. Вы можете применить то же свойство стиля, чтобы изменить цвет шрифта для любого тега, который окружает текст, включая тег.
Добавление стилей для изменения цвета шрифта
Для этого примера вам нужен HTML-документ, чтобы увидеть изменения CSS, и отдельный CSS-файл, который прикреплен к этому документу. Мы собираемся посмотреть на элемент абзаца, в частности.
Чтобы изменить цвет текста для каждого абзаца в файле HTML, перейдите на внешнюю таблицу стилей и введите п { }. Поместите свойство color в стиль, за которым следует двоеточие, например p {color:}. Затем добавьте значение цвета после свойства, заканчивая его точкой с запятой: p {color: black;}.
п {
черный цвет;
}Значения цвета могут быть выражены как ключевые слова цвета, номера цветов RGB или шестнадцатеричные числа цвета. В нашем примере текст абзаца изменяется на черный цвет.
Однако, если вы хотите изменить цвет текста на зеленый, синий, красный и т. Д., Использование цветовых ключевых слов не даст вам гибкости, которую вы могли бы захотеть создать, используя различные оттенки. Вот где в игру вступают шестнадцатеричные значения.
п {
цвет: # 000000;
}Этот стиль CSS можно использовать для окрашивания абзацев в черный цвет, поскольку шестнадцатеричный код # 000000 переводится в черный. Вы можете даже использовать сокращение с этим шестнадцатеричным значением и записать его как # 000 с теми же результатами.
п {
цвет: # 2f5687;
}Как мы уже упоминали выше, шестнадцатеричные значения работают хорошо, когда вам нужен не просто черный или белый цвет. Вышеупомянутое шестнадцатеричное значение CSS установит для абзацев синий цвет, но в отличие от ключевого слова «синий», этот шестнадцатеричный код дает вам возможность установить очень специфический оттенок синего, в данном случае среднечастотный, синего цвета ,
Hex работает, устанавливая значения RGB (красный, зеленый, синий) цвета отдельно с базовыми шестнадцатью значениями. Вот почему они содержат буквы через F в дополнение к цифрам через 9.
Каждый цвет, красный, зеленый и синий, получает свое собственное двузначное значение. 00 является наименьшим возможным значением, в то время как FF самый высокий. Цвета перечислены в порядке RGB в шестнадцатеричном формате, поэтому первые две цифры представляют значение красного и т. Д.
Наконец, вы также можете использовать значения цвета RGBA для цветов шрифта. RGCA поддерживается во всех современных браузерах, так что вы можете использовать эти значения с уверенностью, что он будет работать для большинства зрителей, но вы также можете легко установить запасной вариант.
п {
цвет: rgba (47,86,135,1);
}Это значение RGBA соответствует сланцевому синему цвету, указанному ранее. Первые три значения задают значения красного, зеленого и синего, а последнее — альфа-параметр прозрачности. Значение альфа-канала равно 1, что означает 100 процентов, поэтому этот цвет не имеет прозрачности. Если вы установите это значение в десятичное число, например 0,85, оно преобразуется в непрозрачность 85 процентов, и цвет будет слегка прозрачным.
п {
цвет: # 2f5687;
цвет: rgba (47,86,135,1);
}Если вы хотите сделать пуленепробиваемые значения цвета, имитируйте приведенный выше код CSS. Этот синтаксис сначала устанавливает шестнадцатеричный код, а затем перезаписывает это значение номером RGBA. Это означает, что любой старый браузер, который не поддерживает RGBA, получит первое значение и проигнорирует второе.
Важно помнить, что свойство color работает с любым текстовым элементом HTML в CSS. Вы можете, например, изменить все цвета вашей ссылки.
{
цвет: # 16c616;
}Приведенный выше пример сделает ваши ссылки ярко-зелеными.
Вы это работает с несколькими элементами одновременно. Вы можете установить каждый уровень заголовка сразу.
h1, h2, h3, h4, h5, h6 {
цвет: # 020833;
}Это установит все ваши элементы заголовка в полночь синего цвета.
Достигнуть значений hex или RGBA для ваших цветов не всегда легко. Большинство веб-дизайнеров используют свои программы для редактирования изображений, такие как Photoshop или GIMP, чтобы генерировать точные коды. Вы также можете найти в Интернете удобные инструменты выбора цвета, например, от w3schools.
Другие способы оформления HTML-страницы
Цвета шрифта можно изменить с помощью внешней таблицы стилей, внутренней таблицы стилей или встроенных стилей в документе HTML. Тем не менее, лучшие практики требуют использования внешней таблицы стилей для ваших стилей CSS.
Внутренняя таблица стилей, которые являются стилями, написанными непосредственно в «заголовке» вашего документа, обычно используются только для небольших одностраничных веб-сайтов. Следует избегать встроенных стилей, поскольку они похожи на старые теги «шрифтов», с которыми мы работали много лет назад. Эти встроенные стили очень затрудняют управление стилем шрифта, так как вы должны изменять их при каждом экземпляре встроенного стиля.
