Как сделать цвет фона текста в html
В самых первых опытах (“Улучшенный HTML-документ”) мы никак не задавали ни цвет фона страницы, ни цвет шрифта, которым отображался текст. Тем не менее, и фон, и шрифт не были бесцветными при просмотре страницы в браузере.
Вероятно, вы видели чёрный шрифт на белом фоне. Но это совсем не обязательно. Всё зависит от настроек браузера. Когда в HTML-программе цвета явно не заданы, браузер использует свои установки по умолчанию.
В моём браузере Internet Explorer в разделе Цвета включена опция Использовать стандартные цвета Windows , и я вижу чёрные буквы на белом фоне. Можно выключить эту опцию и установить в качестве цветов, используемых браузером по умолчанию, свои цвета.
Чтобы документ смотрелся так, как вы задумали, не полагайтесь на режимы умолчания браузера, а задавайте параметры явно.
Как задавать цвета для фона и текста рассказано ниже.
Задание цвета в HTML-коде
Цвета для фона и текста на всем протяжении документа можно задать при помощи атрибутов bgcolor и text тега .
Проверьте работу этих атрибутов на испытательном стенде:
Атрибуты bgcolor и text тега
Цвета, заданные в теге
, действуют до парного тега , т. е. до конца документа.С цветом фона ничего уже не поделаешь — его в HTML можно задавать только один раз, а цвет текста можно менять внутри документа многократно, при помощи тега . Установка цвета выполняется при помощи атрибута color . (Заметим в скобках, что цвет фона любого элемента можно установить при помощи CSS, равно как и цвет текста, как и массу других свойств, недоступных через атрибуты тегов.)
Атрибут color тега
В HTML действует общее важное правило: конструкции языка могут быть вложенными, т. е. внутри одного элемента могут располагаться другие. Указания вложенного элемента могут изменять указания внешних элементов, но когда вложенный элемент заканчивается, восстанавливаются полномочия внешнего элемента.
С помощью элемента FONT можно переопределить не только цвет шрифта, но также его размер и внешний вид. Однако использовать соответствующие атрибуты не рекомендуется.
Работать со шрифтами (как и с любыми другими визуальными свойствами элементов) гораздо удобнее и правильнее через CSS, но и здесь нужно быть осторожными — ведь указанного шрифта может не оказаться на компьютере пользователя.
Самое лучшее — не задавать шрифт вовсе. Тогда браузер будет показывать документ шрифтом “по умолчанию”, заведомо установленным у пользователя.
Для изменения размеров шрифта есть специальные элементы, более подходящие для сохранения единого стиля оформления документа: BIG для укрупнения и SMALL для уменьшения.
На самом деле не рекомендуется задавать и цвет шрифта при помощи FONT , равно как и вовсе использовать этот элемент! Задавать визуальные свойства лучше при помощи стилевых указаний на языке CSS, с которым мы познакомимся в теме 2.
То есть в будущем постараемся не использовать в своих HTML-кодах визуальные элементы подобные FONT и визуальные атрибуты, подобные color и size . Посмотрите, как был задан на CSS красный цвет для текста, расположенного в подцитате:
Кодирование цвета
Задать цвета можно, используя шестнадцатеричный трёхбайтовый код, например, #00FFFF — голубой цвет (aqua). Перед кодом цвета в HTML ставится символ “#”. Записи bgcolor=»#00FFFF» и bgcolor=»aqua» эквивалентны.
Кодирование цвета выполняется по распространённой системе RGB ( R ed, G reen, B lue):
| #FF0000 | Red (красная составляющая) |
| #00FF00 | Green (зелёная составляющая) |
| #0000FF | Blue (синяя составляющая) |
Известно, что любой цвет можно представить смешением трёх основных цветов (красного, зелёного и синего). В зависимости от “веса” составляющих результирующий цвет меняется в широких пределах.
Число цветов, которое можно получить, смешивая красный, зелёный и синий, зависит от ширины диапазона, в котором может меняться каждая из трёх основных составляющих.
В системе кодирования цвета, принятой в HTML, каждая из основных составляющих задаётся одним байтом, т. е. может принимать 256 разных значений. Тогда число всех цветов в этой кодировке: 256×256×256 = 16 777 216.
Мнемонические имена и коды основных (стандартных) цветов представлены в таблице:
| Цвет | Имя | Код | Описание |
|---|---|---|---|
| black | #000000; | Чёрный | |
| silver | #C0C0C0; | Серебряный | |
| gray | #808080; | Серый | |
| white | #FFFFFF; | Белый | |
| maroon | #800000; | Коричневый | |
| red | #FF0000; | Красный | |
| purple | #800080; | Тёмно-сиреневый | |
| fuchsia | #FF00FF; | Сиреневый | |
| green | #008000; | Зелёный | |
| lime | #00FF00; | Светло-зелёный | |
| olive | #808000; | Оливковый | |
| yellow | #FFFF00; | Жёлтый | |
| navy | #000080; | Темно-синий | |
| blue | #0000FF; | Синий | |
| teal | #008080; | Петроль | |
| aqua | #00FFFF; | Голубой |
Выделить шрифт (текст) в HTML
Речь о выделении текста цветом. Например, так — выделенный текст .
Это еще называют заливкой текста или фон под текстом в HTML.
Итак, чтобы выделить шрифт в HTML заливкой есть специальный тег . Нужно этим тегом обрамить выделяемый текст. Например, так:
Просто текст выделенный текст
Но по умолчанию тег mark в браузере имеет всегда желтый цвет. То есть выделение будет желтого цвета. Это можно поменять. Пример:
Просто текст выделенный текст
Здесь тегу mark добавлен атрибут style=»background-color: green;». Именно благодаря этому меняется цвет заливки. Свойство background-color означает «цвет заднего фона». И ему можно задавать любой необходимый Вам цвет.
Можете поблагодарить в комментарии.
Добавить комментарий Отменить ответ
Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
| Cookie | Duration | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Цвета
Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.
Цвет
class="text-primary">.text-primary class="text-secondary">.text-secondary class="text-success">.text-success class="text-danger">.text-danger class="text-warning">.text-warning class="text-info">.text-info class="text-light bg-dark">.text-light class="text-dark">.text-dark class="text-muted">.text-muted class="text-white bg-dark">.text-white Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus. Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.
href="#" class="text-primary">Primary link
href="#" class="text-secondary">Secondary link
href="#" class="text-success">Success link
href="#" class="text-danger">Danger link
href="#" class="text-warning">Warning link
href="#" class="text-info">Info link
href="#" class="text-light bg-dark">Light link
href="#" class="text-dark">Dark link
href="#" class="text-muted">Muted link
href="#" class="text-white bg-dark">White link
Цвет фона
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .
.bg-secondary
class="p-3 mb-2 bg-primary text-white">.bg-primary class="p-3 mb-2 bg-secondary text-white">.bg-secondary class="p-3 mb-2 bg-success text-white">.bg-success class="p-3 mb-2 bg-danger text-white">.bg-danger class="p-3 mb-2 bg-warning text-dark">.bg-warning class="p-3 mb-2 bg-info text-white">.bg-info class="p-3 mb-2 bg-light text-dark">.bg-light class="p-3 mb-2 bg-dark text-white">.bg-dark class="p-3 mb-2 bg-white text-dark">.bg-white Градиентный фон
Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient- . По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark Специфические случаи
Иногда контекстуальные классы нельзя применять из-за специфики другого селектора. В некоторых случаях эффективным «костылем» может стать оборачивание содержимого вашего элемента в с классом.
Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Использование фона для оформления текста
Ещё один важный параметр текста — его цвет. Управляется он свойством color . Подробно это свойство и его значения разберём в следующем задании. А в этом узнаем, как можно использовать фон блока для оформления текста, а также как цвет фона и цвет текста должны сочетаться.
Цвет в CSS чаще всего задаётся в шестнадцатеричном формате с символом решётки в начале:
#000000 — чёрный цвет; #ffffff — белый цвет; #ff0000 — красный цвет и так далее. Фоновое изображение для блока задаётся свойством background-image , а фоновый цвет — свойством background-color :
Фоновое изображение и фоновый цвет блока всегда должны достаточно сильно контрастировать с цветом текста. Чем больше контраст, тем удобнее читается текст в разных условиях освещённости и на разных устройствах. Поэтому если вы задаёте блоку фоновое изображение, нужно обязательно дополнительно задавать подходящий фоновый цвет. В этом случае, пока изображение загружается, или в случае, если оно совсем не загрузится, текст всё равно можно будет прочитать:
p < /* идеальный контраст: цвет текста белый, цвет фона — чёрный */ background-color: #000000; color: #ffffff; >span < /* плохой контраст: цвет текста и фона — серые */ background-color: #cccccc; color: #dddddd; >Подробно работа с фонами в CSS рассматривается в части «Фоны. Знакомство» и «Рамки и фоны. Погружение».
Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 16 января 2024. Всего от 5 250 ₽ в месяц.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим