Как изменить цвет текста и фона в CSS
Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS.
Прежде чем мы рассмотрим, как это сделать, важно понять, как можно установить значение свойства различными способами. Вы можете использовать:
- Названия цветов HTML: CSS поддерживает 140 названий цветов. Желтый, фуксия, бордовый и небесно-голубой – лишь несколько примеров.
- Шестнадцатеричные цветовые коды: эти коды состоят из трех пар символов, которые представляют интенсивность трех основных цветов. Возможные значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета). Шестнадцатеричный код цвета для черного – # 000000, красного – # FF0000, синего – # 0000FF.
- Значения RGB: RGB – это еще одна цветовая модель, основанная на сочетании основных цветов: красного, зеленого и синего. Состоит из трех чисел, разделенных запятыми, каждое из которых представляет интенсивность соответствующего основного цвета в виде целого числа от 0 до 255. Черный – это rgb (0, 0, 0), красный – это rgb (255, 0, 0), а синий – rgb (0, 0, 255).
Хотя вы можете использовать любое из этих значений, имена цветов не рекомендуются. Мало того, что их трудно запомнить за пределами стандартной радуги, они также вносят неточность. Фуксия для одного человека может быть пурпурным для другого, может быть ярко-розовым для другого и так далее.
Чтобы цветовая схема вашего сайта выглядела так, как вы хотите, используйте вместо этого шестнадцатеричные цветовые коды или значения RGB. Они позволяют подобрать именно тот оттенок, который вам нужен. В приведенных ниже примерах мы будем использовать шестнадцатеричные цветовые коды, потому что они более удобны для изучения новичками.
Теперь давайте рассмотрим, как изменить цвет и цвет фона встроенного текста в CSS.
Изменение цвета встроенного текста в CSS
Чтобы изменить цвет встроенного текста, перейдите в раздел своей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство цвета с желаемым значением. Например, вы хотите изменить цвет всех абзацев на сайте на темно-синий. Затем вы должны добавить p {color: # 000080; } в заголовок вашего HTML-файла.
Вам может быть интересно, что произойдет, если вы не установите свойство цвета в своем CSS. Это хороший вопрос. Цвет текста по умолчанию для страницы определяется в селекторе основного текста. Вот пример селектора тела, устанавливающего синий цвет текста:
body {
color: blue;
}
Если в селекторе тела нет селектора тела или цвета, то цвет по умолчанию, скорее всего, черный.
Допустим, я хочу изменить цвет абзацев на темно-синий, как указано в примере выше, и все ссылки на моем веб-сайте на голубой. Затем я бы использовал селектор типа p и селектор атрибутов a [href] и установил свойство цвета на # 000080 и # 00FFFF соответственно.
Вот CSS:
p {
color: #000080;
}
a[href] {
color: #00FFFF;
}
Вот HTML:
<p>This is a paragraph. The default text color was black, but I added a paragraph selector and defined the color property so it's navy.You'll see that the paragraph below is also navy, except for the link. Using a separate selector, the color of links has been changed to aqua.</p>
<p>Another paragraph that has <b><a href="default.asp" target="_blank">a link.</a></b></p>
Вот результат:
Вы можете использовать этот же процесс для изменения цвета заголовков, тегов диапазона, копии кнопки и любого другого текста на странице. Теперь давайте посмотрим, как изменить цвет фона текста.
Изменение цвета фона текста в CSS
Чтобы изменить цвет фона встроенного текста, перейдите в раздел вашей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство color и background-color с желаемыми значениями. Допустим, вы хотите изменить цвет фона ссылок на желтый. Затем вы должны добавить [href] {color: # 000000; цвет фона: # FFFF00; }.
Обратите внимание, что если вы определяете свойство цвета, вы также должны определить цвет фона. Необходимо быть совместимым с W3C CSS и другими фреймворками, иначе это не повредит.
Изменение цвета и цвета фона текста также важно для предотвращения проблем веб-доступности на вашем веб-сайте.
Взгляните еще раз на демонстрацию выше. Хотя используемые цвета могут быть слишком похожими для людей, которые не могут видеть разные оттенки цветов, подчеркивание поможет указать, что это ссылка. Но что, если я уберу подчеркивание со ссылок на моем сайте? Тогда я полагался бы только на цвет, чтобы передать, что это связь. В этом случае мне нужно будет определить и использовать доступные в Интернете цвета для моего веб-сайта.
Это потребует времени и исследований. Если вы только начинаете исследовать дальтонизм, то такой инструмент, как Contrast Checker, может помочь вам сделать доступный выбор при изменении цвета текста на вашем сайте. Вы можете ввести цвет и цвет фона, и он скажет вам «пройден», если у пары коэффициент контрастности 4,5: 1. Все, что ниже, не удастся. Мы будем использовать этот инструмент для определения цветов в примере ниже.
Скажем, я хочу, чтобы мой текст был красным, а фон – серым. Я мог бы начать с подключения # FF0000 и # 808080 к Contrast Checker и увидеть, что у него коэффициент контрастности только 1: 1. Это не хорошо.
Чтобы улучшить соотношение, я перемещаю ползунок цвета переднего плана влево, а ползунок цвета фона вправо, пока не достигну минимума 4,5: 1. Поскольку я хочу, чтобы мой дизайн был максимально ясным, я выберу цвет # 940000 и цвет фона # E0E0E0, которые имеют соотношение 7: 1. Я буду использовать их для стилизации ссылки, чтобы она действительно выделялась на фоне остального абзаца.
Вот CSS:
a[href] {
color: #940000;
background-color: #E0E0E0;
text-decoration: none;
}
Вот HTML:
<p>This is a paragraph. The default text color is black. You'll see that the paragraph below is also black, except for the link. Using an attribute selector, I've set the color, background color, and text decoration property so that it appears with a reddish font color, gray background, and no underline.</p>
<p>Another paragraph that has <b><a href="default.asp" target="_blank">a link</a></b>.</p>
Вот результат:
Добавление цвета на ваш сайт
Изменить цвет и цвет фона текста на вашем сайте очень просто. Независимо от того, создаете ли вы свой сайт с нуля или с помощью Bootstrap CSS, вам просто необходимы некоторые знания HTML и CSS. Однако потребуется время, чтобы узнать названия цветов и коды, а также способы их комбинирования, чтобы сделать ваш веб-сайт и другие маркетинговые материалы доступными. Еще одна причина начать добавлять цвета на свой сайт уже сегодня.
Источник записи: https://blog.hubspot.com