Как задать цвет фона в css

Как изменить цвет фона и текста веб-страницы?

Для изменения цвета фона применяется свойство background добавленное к селектору body , а для цвета текста используется свойство color , как показано в примере 1.

Пример 1. Изменение цвета веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Эскапизм устойчиво дает материалистический комплекс, независимо от психического состояния пациента.
  

Результат данного примера показан на рис. 1.

Рис. 1. Вид страницы, с измененным цветом фона и текста

Рекомендуем задавать цвет фона, даже если он белый. Дело в том, что некоторые пользователи устанавливают в браузере цвет фона по умолчанию отличный от белого. Так что если цвет явно не задан, то он меняется на другой, причем, совсем не тот, который бы хотелось в итоге получить.

6. CSS – Цвета: форматы и коды

Коды цветов в CSS используются для указания цвета. Как правило, коды цвета или цветовые значения используются для установки цвета либо для переднего плана элемента (например, цвет текста, ссылки), либо для фона элемента (цвет фона, блока). Они также могут использоваться для изменения цвета кнопки, границ, маркера, при наведении и других декоративных эффектов.

Вы можете задать свои значения цвета в различных форматах. В следующей таблице перечислены все возможные форматы:

Формат	Синтаксис	Пример
Шестнадцатеричный код	#00FF00	p
Короткий шестнадцатеричный код	#0F0	p
RGB %	rgb(rrr%,ggg%,bbb%)	p
RGB абсолютный	rgb(rrr,ggg,bbb)	p
Ключевое слово	green, white, black и т.д.	p

Ниже более подробно описаны перечисленные форматы.

Цвета CSS – шестнадцатеричные коды

Шестнадцатеричный код цвета – это шестизначное представление цвета. Первые две цифры (RR) – представляют собой красное значение, следующие две – это зеленое значение (GG), а последние – синее значение (BB).

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвет		Шестнадцатеричный цвет
Белый	#FFFFFF
Черный	#000000
Красный	#FF0000
Лайма	#00FF00
Синий	#0000FF
Желтый	#FFFF00
Морская волна	#00FFFF
Фуксия	#FF00FF

Цвета CSS – короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета – это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвет		Шестнадцатеричный цвет
Белый	#FFF
Черный	#000
Красный	#F00
Лайма	#0F0
Синий	#00F
Желтый	#FF0
Морская волна	#0FF
Фуксия	#F0F

Цвета CSS – RGB значения

RGB значение – это код цвета, который задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом, от 0 до 255, или процентом.

Примечание: не все браузеры поддерживают свойство rgb() цвета, поэтому не рекомендуется его использовать.

Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.

Цвет		Шестнадцатеричный цвет
Белый	rgb(255, 255, 255)
Черный	rgb(0, 0, 0)
Красный	rgb(255, 0, 0)
Лайма	rgb(0, 255, 0)
Синий	rgb(0, 0, 255)
Желтый	rgb(255, 255, 0)
Морская волна	rgb(0, 255, 255)
Фуксия	rgb(255, 0, 255)

Генератор цветовых кодов

Вы можете создавать миллионы цветовых кодов с помощью генератора цветовых палитр – Adobe Color.

Безопасные цвета браузера

Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.

Таблица «безопасных» цветов в CSS
#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Оглавление

• 1. CSS – Самоучитель для начинающих
• 2. CSS – Введение
• 3. CSS – Селекторы
• 4. CSS – Подключение
• 5. CSS – Единицы измерения
• 6. CSS – Цвета

Как изменить цвет текста и фона в CSS

CSS (Cascading Style Sheets) – это язык, который позволяет легко изменять цвет текста и фона на вашем сайте. Благодаря синтаксису цвета текста CSS вы можете определить точный цвет текста на вашей веб-странице. Этот синтаксис очень важен, поскольку он повышает удобство использования и доступность вашего веб-сайта и других маркетинговых материалов. Независимо от того, создаете ли вы сайт с нуля или используете BootStrap CSS, знания HTML и CSS будут вам полезны. В этой статье мы рассмотрим, как изменить цвет текста и фона в CSS.

Содержание скрыть

Свойство цвета CSS

Свойство CSS color используется для выбора цвета текста, цвета фона веб-страницы и цвета границ.

Его синтаксис имеет вид color:[код цвета]/initial/inherit;.

С другой стороны, свойство background-color задает цвет фона элемента. Это свойство охватывает весь размер элемента, включая padding и border. Однако оно не включает margin.

Параметры цвета текста и фона в CSS

Изменить цвет текста на веб-странице легко с помощью свойства CSS color. Прежде чем мы рассмотрим, как это сделать, необходимо понять, какими способами можно задать значение свойства. Вы можете использовать:

• Имена цветов HTML: В CSS поддерживается 140 названий цветов. Желтый, фуксия, бордовый и небесно-голубой – вот лишь несколько примеров.
• Шестнадцатеричные коды цветов(HEX): Эти коды состоят из трех пар символов, представляющих интенсивность трех основных цветов. Возможные значения варьируются от 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 и задайте свойству color нужное вам значение. Например, допустим, вы хотите изменить цвет всех абзацев на вашем сайте на темно-синий. Тогда вы добавите p в раздел head вашего HTML-файла.

Как определить цвет текста CSS по умолчанию

Вам может быть интересно, что произойдет, если вы не зададите свойство color в своем CSS, или же цвет текста уже определен. Это хороший вопрос. В коде CSS цвет текста по умолчанию для страницы определяется в селекторе body. Поэтому, если вы хотите найти цвет текста по умолчанию, то первым делом обратитесь именно туда.

Вот пример селектора body, задающего цвет текста как синий:

body

Если вы хотите изменить цвет всего текста, независимо от того, является ли он заголовком или абзацем, вы должны задать его здесь, используя код цвета HTML. Если нет селектора тела или если в селекторе тела не определен цвет, цвет по умолчанию, скорее всего, будет черным.

Как изменить цвет текста CSS

Теперь, когда вы знаете цвет по умолчанию для всего текста, вы можете поиграть с другими элементами HTML, такими как заголовки, абзацы и ссылки. Допустим, вы хотите изменить цвет абзацев на темно-синий, как указано в примере выше, а всех ссылок на вашем сайте – на аква.

Вот как это сделать:

• Откройте файл CSS или найдите теги CSS в шапке HTML-документа.
• Найдите CSS-селектор абзаца (обозначается p) и селектор ссылки (обозначается a). Или создайте их и раскройте фигурные скобки.
• Добавьте правило цвета шрифта, записанное как color: [вставьте код цвета];.
• Затем установите свойство color в #000080 и #00FFFF соответственно.

Здесь находится CSS:

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.
 
Another paragraph that has a link.
 

Совет профессионала: Этот код является интерактивным, попробуйте изменить его, чтобы увидеть разницу.

Этот же процесс можно использовать для изменения цвета заголовков, тегов span, копий кнопок и любого другого текста на странице. Теперь давайте рассмотрим, как изменить цвет фона текста.

Как изменить цвет фона текста в CSS

Чтобы изменить цвет фона встроенного текста, выполните те же действия, что и выше, только мы будем использовать свойство background-color.

Вот как это делается:

• Откройте файл CSS или найдите теги в шапке HTML-документа.
• Найдите нужный вам селектор CSS (например, селектор абзаца, ссылки или заголовка). Или же создайте их и раскройте фигурные скобки.
• Затем определите свойство background-color с нужным вам значением.

Допустим, вы хотите изменить цвет фона ссылок на желтый. Тогда вы добавите следующий код:

Цвет фона в CSS

Вот краткая справка на всякий случай: Свойство CSS background-color позволяет изменить цвет фона элемента HTML. Вы можете задать цвет фона для многих элементов, включая таблицу, div, заголовок и элемент span. При определении свойства color следует также определить цвет фона. Это необходимо для соответствия W3C CSS и другим фреймворкам, а в остальном это не помешает.

Как проверить контрастность цвета текста CSS

Изменение цвета и фона текста также необходимо для предотвращения проблем веб-доступности на вашем сайте, но это также может вызвать проблемы, если вы не будете осторожны. Взгляните на ссылку в демонстрационном примере выше. Хотя используемые цвета могут быть слишком похожи для людей, которые не могут видеть различные оттенки цветов, подчеркивание помогает указать, что это ссылка. Но что, если я уберу подчеркивание из ссылок на моем сайте? Тогда я буду полагаться только на цвет, чтобы сообщить, что это ссылка. В этом случае мне нужно будет определить и использовать доступные цвета для своего сайта. Такой инструмент, как Contrast Checker, поможет вам сделать доступный выбор при изменении цвета текста на вашем сайте.

Вот как его использовать:

• Введите цвет и цвет фона в шестнадцатеричном формате.
• Если коэффициент контрастности пары составляет 4,5:1, вы получите ответ “пройдено”.
• Все, что ниже, будет провалено.

Вот и все! Довольно просто, верно? Мы будем использовать этот инструмент для определения лучших цветов в примере ниже.

Пример контрастности цвета текста CSS

Допустим, мы хотим, чтобы наш текст был красным, а фон – серым. Вот что мы сделаем:

• Начнем с ввода #FF0000 и #808080 в программу проверки.
• Инструмент сразу же сообщает нам, что эти два цвета имеют соотношение контраста 1:1. Это не очень хорошо.

• Чтобы улучшить соотношение, передвиньте ползунок цвета переднего плана влево, а ползунок цвета фона – вправо.
• Выполняйте эти действия до тех пор, пока не достигнете минимального значения 4,5:1.

• Если мы хотим сделать еще один шаг вперед, мы можем это сделать. Выберите цвет #940000 и цвет фона #E0E0E0, которые имеют соотношение 7:1.

• Готово! Мы будем использовать эти цвета для стилизации ссылки, чтобы она действительно выделялась на фоне остального абзаца.

Совет профессионала: Этот код является интерактивным, попробуйте изменить его, чтобы увидеть разницу.

Цвет текста CSS: часто задаваемые вопросы

Каково правило для цвета шрифта в CSS?

Правило для цвета шрифта в CSS – color: #00000; (как пример). Вы можете использовать это правило для изменения цвета шрифта любого свойства в CSS, включая текстовые элементы, такие как абзацы и заголовки, и блочные/строчные элементы, такие как таблицы, кнопки и div.

Как изменить цвет текста в div в CSS?

Чтобы изменить цвет шрифта текста внутри div, вы можете использовать свойство CSS color внутри селектора класса для div. Вот как это делается:

• Откройте файлы HTML и CSS в редакторе кода.
• В HTML-коде перейдите к div, цвет текста которого вы хотите изменить.
• В открывающем теге присвойте div класс CSS, например, .
• Внутри фигурных скобок вставьте правило CSS color и выберите цвет шрифта, который вы предпочитаете.

Как изменить цвет текста в HTML без CSS?

Не существует способа изменить цвет текста в HTML без CSS; однако вы можете сделать это непосредственно в HTML-файле с помощью встроенного CSS. Просто добавьте объявление style=”color; [вставьте здесь цвет];” в открывающий тег выбранного вами элемента.

Ограничение использования этого метода заключается в том, что он не будет применяться к другим абзацам. Гораздо лучше создать класс CSS, а затем добавить к нему универсальные правила, которые можно использовать в любое время в вашем HTML-файле.

Добавление цвета на ваш сайт

Изменить цвет и цвет фона текста на вашем сайте очень просто. Обладая некоторыми знаниями CSS и HTML, вам будет проще построить или создать свой сайт. Однако потребуется время, чтобы выучить названия и коды цветов и научиться сочетать их, чтобы сделать ваш сайт и другие маркетинговые материалы доступными – это еще одна причина начать добавлять цвета на свой сайт уже сегодня.

Магия CSS. Глава 3. Таблицы

В предыдущей главе мы обсудили раскладку. Но мы говорили о ней как об инструменте построения вашего контента с точки зрения дизайна — геометрической структуре вашего приложения, несущей смысловую нагрузку. Посмотрите на зелье Двухколоночного приложения.

Но раскладка имеет несколько значений, которые зависят от контекста. В контексте таблиц это слово означает как браузер определяет размеры колонок и строк таблицы, основываясь на значениях CSS, написанных вами и встроенных в браузер пользователя, и исходя из контента каждой ячейки.

Этот процесс поистине волшебный!

Сложный алгоритм раскладки используется для расчета как горизонтальных, так и вертикальных размеров. И эта вилка алгоритмов основывается на table-layout, который вы указываете. У этого свойства есть два варианта:

auto — значение по умолчанию. Я пытаюсь задать размеры столбцов относительно друг друга и ориентируясь на самую широкую ячейку в каждом столбце если вы не задали конкретные величины, которые определяют отношения элементов. (CSS spec)

fixed — Я пытаюсь сделать столбцы равными, если вы не дали мне конкретную ширину в px. Если да, то я использую ее для соблюдения соотношения размеров. (CSS spec)

Это грубое и не полное определение. Я крайне рекомендую вам прочитать спецификацию чтобы лучше понять механизм работы. Но нет ничего лучше игры с реальным кодом, поэтому давайте взглянем на несколько примеров для получения полной картины.

Пример 1: Нет ширины

table-layout: auto

table-layout: fixed

Обратите внимание, что в случае со значением fixed колонки имеют равные размеры поскольку не указана их точная ширина. Но в случае со значением auto размеры колонок пропорциональны содержимому ячейки.

Пример 2: Ширина в процентах

Теперь давайте посмотрим на тот же пример с шириной столбцов 20% и 50% соответственно.

table-layout: fixed

Ok…. Поскольку ширина таблиц всего 694px, у браузера нет возможности нарисовать колонки 400px и 70% × 694px в таблице с такой шириной. Поэтому он делает все, что в его силах.

В случае с auto, заданные нами значения ширины принимаются во внимание, но только примерно. Рассчет следующий: 400px / 694px к 70% × 694px . И браузер старается его соблюсти. (Поведение варьируется от браузера к браузеру.)

В случае с fixed, ширина колонки в 400px сохраняется, поскольку фиксированные значения имеют приоритет над процентными. Второй столбец получает остаток ширины.

Табличные данные

Я не буду подробно останавливаться на этой теме, поскольку в первую очередь это курс по CSS. Но основной причиной использования таблиц в верстке являются табличные данные. Табличными (tabular) данные считаются, если вы можете представить их в таблице (spreadsheet). (Прим. переводчика: без уточнения английских слов, имеющих одинаковое значение в русском языке, в предложении возникает тавтология.) Контентная матрица.

Есть несколько основных правил, которым стоит следовать когда дело доходит до создания таблиц с табличными данными:

• Большие таблицы должны быть раскрашены в полоску или при наведении на строку (:hover) у нее должен появляться цветной фон. Это нужно чтобы видеть все ячейки в одной строке.
• Столбцы с числовыми данными должны иметь выравнивание по правому краю так, чтобы цифры находились друг под другом.
• Текст в крайнем правом столбце должен иметь правую выключку, чтобы избежать рваного края (вполне подойдет text-align: justify).
• Если это возможно, высота строк должна быть одинаковой, чтобы облегчить вертикальный просмотр. (Этот общий принцип известен как “вертикальный ритм” и он очень важен.)

Посмотрите на зелье табличных стилей как на пример, в котором соблюдены эти правила.

Таблицы как инструмент раскладки

В предыдущей главе про раскладку мы видели, что таблицы могут быть использованы для вертикального выравнивания контента произвольной высоты. Пока flex не поддерживается повсеместно, мы не должны стесняться использовать таблицы в этих целях. Кроме того если вы осознали, что используете таблицы для компоновки не табличных данных, то, скорее всего, вы делаете это неверно.

Если вы поддерживаете браузеры IE10 и выше, то используйте flex. Phillip Walton написал чудесный учебный материал по вертикальному выравниванию при помощи flexbox.

Подводные камни

Есть тааак мноооого причин почему вы не должны использовать таблицы кроме как для табличных данных и вертикального выравнивания (как обсуждалось). Но чтобы пройти этот путь до конца, я привожу несколько чрезвычайно распространенных ошибок, которые кроются в работе с таблицами.

Камень 1: Ячейки таблицы не считаются с overflow (table-layout: auto; Firefox, IE)

Это означает, что даже если вы используете table-layout: fixed вместе с шириной в пикселях, overflow: hidden не сработает для ячеек таблицы в любых браузерах. (Если вы используете table-layout: auto, в любых браузерах переполнения не будет.)

table-layout: auto

Камень 2: Ячейки таблицы не уважают относительное позиционирование (Firefox)

Ага. Вы правильно прочитали. Вы пытаетесь применить position: relative к ячейке таблицы, position: absolute к элементам внутри нее и в Firefox абсолютно спозиционированный элемент будет высчитывать свое положение относительно элемента-родителя таблицы с position: relative. Облом.

Баг был обнаружен в 2000.

Многабукав про камни

Если вы оценили все варианты и считаете, что правильно будет использовать элементы таблицы, то убедитесь, что вы заключаете содержимое каждой ячейки в div. Таким образом у вас появится необходимый контроль над каждой клеткой и при этом останутся все чрезвычайно мощные — что не может не смущать — инструменты табличной раскладки.

Внеклассное чтение

• w3: CSS2 Tables specification
• Drewish: Vertical rhythm tool

Цитирование

1. Can I use: flex
2. Solved by Flexbox: Vertical Centering
3. Seybold Seminars: Why tables for layout is stupid
4. Smashing Magazine: Table Layouts vs. Div Layouts: From Hell to… Hell?
5. Vaneso Design: Are CSS Tables Better Than HTML Tables?
6. Mozilla Bugzilla: relative positioning of table cells doesn’t work