Верстка web-страниц. Задание цвета, единицы измерения

Содержание

Способы задания цвета
Модель RGB
Задание цветовых параметров для отдельных элементов
Единицы измерения

Задание цвета

Шестнадцатеричное представление цвета
является самой старой системой задания цвета; код цвета

Задание цвета

Если каждое из трех двухзначных чисел содержит по два одинаковых

Задание цвета

RGB
метод кодирования цвета, при котором значение цвета задается тремя числами,

Задание цвета

По названию цвета
использование классических названий цвета:
aqua olive
black orange
blue purple
fuchsia red
gray silver
green teal
lime white
maroon yellow
navy

Задание цвета

Однако, для представления объектов в более выгодном свете, лучше использовать

Задание цвета

Задание цвета

RGBA
К стандартной RGB-схеме добавляется альфа-канал, определяющий уровень прозрачности через диапазон

Задание цвета

К примеру,
накладывая цвет с определенной степенью прозрачности на фоновые изображения,

Задание цвета

Проблема:
Internet Explorer 8 и более ранние версии не понимают RGBA-цветов
Как

Задание цвета

HSL
Hue – тон
Saturation – насыщенность
Lightness – осветленность (Luminance - светимость)
Не

Задание цвета

Пример,
color: hsl(0, 100%, 50%);
Первое значение – оттенок на круге оттенков

Задание цвета

HSLA
к описанному выше способу кодировки цвета добавляется альфа-канал, определяющий дополнительное

Задание цвета
Например,
color: green; - зеленый цвет шрифта;
color: #2b93a6; - оттенок синего для

RGB

RGB - (аббревиатура английских слов Red, Green, Blue — красный, зелёный,

Примеры RGB

Примеры RGB:
#ffffff – белый
#000000 – черный
#e5e5e5 – один из оттенков

RGB

код выбранного цвета

Задание фона

Задание цвета фона страницы через стили
body
{
background-color:#2b93a6; - задает цвет фона
}
Может

Задание фона

Фон страницы через изображение (с помощью стилей)
body
{
background-image:url(“image.png”); - какое изображение использовать
background-repeat:no-repeat; -

Типы адресов

Путь к файлу используемой картинки задается через функцию url; ее

Цвет текста

При задании через стили:
у всех параграфов на странице шрифт будет

Цвет ссылки

Описание через стили.
У всех ссылок на странице будет указанный цвет,

Цвет ссылки

Можно также менять цветовые параметры ссылки в зависимости от действия:

Например

При описании через стили:
a
{
color:#006634; - цвет ссылки
}
a:hover
{
color: black; - цвет ссылки при наведении

Единицы измерения

При описании свойств элементов HTML-документа иногда необходимо задавать числовое значение,

Единицы измерения

Пикселы
Являются самыми легкими для понимания, поскольку не зависят от параметров

Единицы измерения

В большинстве случаев обычный текст отображается высотой в 16 пикселов

Единицы измерения

Ключевые слова
CSS предлагает семь ключевых слов, которые позволяют назначить размер

Единицы измерения

Процентные значения
процентные значения более гибкий инструмент, завязанный на относительном определении
Пример,
font-size:

Единицы измерения

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

Единицы измерения

Em
Работает по аналогии с процентными отношениями; имеет отношение к размеру

Примеры

При описании свойств элементов через стили:
p
{
font-size: 9px; - абзац будет набран шрифтом