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