Как сделать часть страницы другого цвета в css
Обновлено: 08.07.2024
Данная статья учебника будет посвящена работе с цветом в CSS, будут рассмотрены способы указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов.
В CSS для указания конкретного цвета текста для элемента, необходимо использовать свойство color и затем указать необходимое значение, используя следующий синтаксис:
Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона. Более подробно работу с задним фоном элемента, мы будем с Вами рассматривать в статье "Работа с фоном элемента в CSS". И начнём мы наше обучение с самой старой системы задания цвета – шестнадцатеричной (Hexadecimal).
Шестнадцатеричные значения
Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:
Значение, фактически содержит три шестнадцатеричных числа (RR - для красного, GG - для зеленого, BB - для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Цветовая модель RGB
Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:
Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в 0 (минимальное значение):
Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Мы с Вами подробно рассмотрим какие единицы измерения существуют и используются в CSS в следующей статье "Единицы измерения CSS, размер шрифта". Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:
Цветовая модель RGBA
Следующая система цвета, которая используется в CSS называется RGBA, она использует в своем синтаксисе альфа-значение, которое определяет степень прозрачности конкретного пиксела. RGBA является более современным методом задания цвета и имеет следующий синтаксис:
- R означает Red (красный)
- G означает Green (зеленый)
- B означает Blue (синий)
- A означает Alpha (степень смешивания с фоном)
Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:
- 0 - цвет невидимый.
- 1 - цвет непрозрачный.
Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:
На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block , которое позволяет нам выстроить все элементы
в линейку (сделали элементы "блочно-строчными"). Подробное изучение блочной и строчной модели CSS предусмотрено в учебнике позднее в статье "Блочная и строчная модель в CSS".
Результат нашего примера:
Рис. 47 Пример задания цвета с помощью RGBA в CSS.
Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.
Цветовые модели HSL и HSLA
К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:
- Hue — тон.
- Saturation — насыщенность.
- Lightness — осветленность.
Система HSL использует следующий синтаксис:
Первое значение – это тон, который указывается в градусах от 0° до 360° . Градусы соответствуют цвету на круге оттенков (изображенном ниже):
Рис. 48 Круг оттенков, применяемый при задании цвета с использованием HSL.
Красный цвет соответствует значениям - 0° и 360° , желтый - 60° , зеленый - 120° , голубой - 180° , синий - 240° , фиолетовый - 300° и так далее.
Второе значение (насыщенность) - определяет, насколько чистым является цвет и указывается в процентах от 0% до 100% , где 0% - полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.
Третье значение (осветленность) - указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.
Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0° ):
Результат нашего примера:
Рис. 49 Пример задания цвета с помощью HSL в CSS.
По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).
Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300° ):
Результат нашего примера:
Рис. 50 Пример задания цвета с помощью HSLA в CSS.
Предопределённые цвета
Кроме вышеуказанных способов задания цвета, существуют и предопределённые цвета, которые вы можете применять к элементам. Ранее мы уже неоднократно рассматривали примеры с предопределёнными цветами, а полный перечень предопределенных цветов Вы всегда можете найти в справочнике HTML в разделе HTML цвета.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Составьте страницу на которой будут использованы три цвета: красный, черный и белый, при этом Вам необходимо при выполнении этого задания хотя бы один раз использовать в качестве значения цвета - предопределенный цвет, шестнадцетеричное значение и значение RGBA. Практическое задание № 12.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Выделение обычно применяется для копирования в буфер фрагмента текста, чтобы после этого вставить выделенный фрагмент в другое место. Например, в текстовый редактор для дальнейшей правки текста. Сам цвет и фон выделенного фрагмента определяется настройками операционной системы, но с помощью CSS эти параметры можно задать самостоятельно.
Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection, в котором задаются свойства color и background, как покаано в примере 1.
Пример 1. Цвет выделенного текста
В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно волна ненаблюдаемо стабилизирует кварк
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Содержание
Цвет фона блока CSS
Цвет фона всей страницы
Таким же образом можно задать цвет фона страниц всего сайта, делается это так:
В этом примере все страницы сайта, которые подключены к общему css файлу станут серым цветом.
Картинка в качестве фона
Чтобы установить картинку в качестве фона, необходимо применить к элементу следующий css код:
Ко всему прочему можно задавать настройки к фону, например:
где значение "position" указывает на тип метода позиционирования, используемого для элемента (static, relative, fixed or absolute)
- static - статичное,
- fixed - зафиксированное,
- absolute - абсолютное значение,
- relative - относительное,
Градиент в качестве фона
Средствами CSS можно сделать фон блока, таблицы, ячейки или всей страницы градиентом, настроить цветовую палитру, размер и задать направление. Сделать это можно следующим способом:
На выходе получим такой результат:
В зависимости от своих задач по оформлению, вёрстки сайта можно менять следующие параметры:
- Тип градиента:
- Линейный градиент - linear-gradient
- Радиальный градиент - radial-gradient . Радиальный градиент может иметь следующие параметры:
- Тип градиента: круг ( circle ) и эллипс ( ellipse ) и центральную точку градиента, например:
CSS тэги для оформления фона
- background - основной тэг, определяющий свойства фона того или иного HTML элемента (таблицы, блока div и т.д.)
- background-attachment
- background-clip
- background-color - определяет цвет фона HTML элемента.
- background-image - задаёт картинку или фотографию в качестве фона.
- background-origin
- background-position - позиционирование картинки или фотографии внутри какого-либо HTML элемента.
- background-repeat
- background-size - задаёт размеры картинки или фотографии внутри какого-либо HTML элемента.
Примечание
Если же есть какие-либо вопросы как установить фон к тому или иному элементу на странице, то можно задать вопрос и обсудить тему на странице обсуждения нашего форума.
если же на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.) (например, p.pink1 );
идентификатор имеет более высокий приоритет, чем класс, поэтому, если для какого-либо элемента будет указан и класс, и идентификатор (что не противоречит принципам CSS), то применен будет стиль идентификатора.
Унифицированный селектор
Идентификаторы и классы можно задавать любым элементам html. Но часто бывает так, что мы хотим несколько разных элементов выделить одним стилем, например, зеленым цветом. В таком случае можно воспользоваться унифицированным селектором.
В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак идентификатора или класса и имя.Таким образом, какому бы элементу мы не задали class="pink1" (заголовку, параграфу или ссылке), цвет текста у него станет заданным розовым.
Одному элементу на странице (любому) мы можем задать и цвет текста этого элемента станет красным.Обычный текст для теста CSS (белый)
Текст для обычного параграфа (черный)
Текст для красного параграфа - унифицированный класс (красный)
Текст для параграфа с унифицированным идентификатором (розовый)
Заголовок красного цвета h1 - унифицированный класс (красный)
Текст для параграфа 1 с классом (заданный розовый)
Заголовок желтого цвета h2
Заголовок h1 обычный
Текст для параграфа 2 с классом (заданный розовый)
Контекстный селектор
1. текст в параграфе 1;
2. обычный текст;
3. обычный текст, выделенный курсивом;
4. текст в параграфе 2, но.
5. часть текста выделена курсивом.Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p.
Названия элементов при этом отделяются пробелом.
Такие селекторы называют контекстными.Группировка селекторов
Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были одного цвета), то их можно сгруппировать.У наших заголовков будет указанный размер, но все они будут коричневого цвета.
Вообще-то, насчет группировок имеются разногласия. Одни считают правильным вышеприведенный код, т.к. группировка помогла избежать повтора одинакового свойства для трех элементов, это сокращает код.
Другие считают, что таким образом, ухудшается логичность кода. Так как, найдя селектор для заголовка h3, не сразу понятно, почему текст в нем зеленого цвета.
Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают.
В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах.На этом урок, посвященный селекторам, закончен. В следующем уроке познакомимся с такими понятиями, как псевдоэлементы и псевдоклассы.
Читайте также: