Новичок
7 уроков
(1 час 8 минут)
Курс
Основы CSS
CSS - это язык стилей, определяющий отображение HTML-документов. После изучения HTML, вам необходимо ознакомиться с CSS, чтобы ваши сайты выглядели более привлекательно.

#7 — Цветовые модели и единицы измерения CSS.

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

Способы определения цветов CSS или как в CSS задать цвет элементам

Все способы задания цветов CSS базируются на одном принципе: в файле стилей для селектора указывается свойство color и его значение. А вот сами значения могут задаваться в различном формате.

Задание цветов CSS через шестнадцатиричный формат

Один из вариантов задания цветов CSS — шестнадцатиричный формат. Формат этот содержит три шестнадцатиричных числа, которые задают уровень красного, зеленого и синего цветов соответственно.
.main-menu {
color: #ffd76a;
}

Как в CSS задать цвет через RGB

Следующий формат, при помощи которого задаются цвета CSS — rgb (red, green, blue). Значения чисел в этом формате представляют собой процентное соотношение от 0 до 100%, но наиболее широкое распространение получило представление значения чисел в диапазоне от 0 до 255.
.title {
background-color: rgb(255, 176, 0);
}

Определение цветов CSS через классические названия

Наиболее простым способом задания цветов CSS является определение его через классическое название. Существует 17 определений цветов. Большинство браузеров поддерживают также 117 так называемых svg-цветов, или x11. Их перечень вы можете посмотреть здесь. Задаются такие цвета CSS очень легко.
.feature-name {
color: aqwa;
}

Способ в CSS задать цвет с помощью HSL

Еще один формат задания цветов CSS — HSL (hue — оттенок, saturate — насыщенность, lightness — светлота). Оттенок определяется на цветовом круге, задается в градусах от 0 до 359, а насыщенность и светлота задаются в процентах от 0 до 100%.

Как в CSS задать цвет с прозрачностью

В RGB и HSL можно добавить также альфа-канал, который будет определять прозрачность цвета, задается он числом в диапазоне от 0 до 1.
.about-title {
border-color: rgba (180, 255, 125, 0.6);
}

Какие бывают единицы измерения CSS

После рассмотрения способов задания цветов CSS автор видеоурока перейдет к подробному рассказу о единицах измерения CSS — размеров шрифтов, отступов и прочих элементов веб-страничек, где необходимо задание размеров.

Пиксели — самые распространенные единицы измерения CSS

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

.title {
font-size: 12px;
}

Ключевые слова как вариант единиц измерения шрифтов в CSS

Для определения размера шрифта CSS также предлагает 7 ключевых слов, которые задают этот размер относительно базового: xx-small, x-small, small, medium, large, x-large и xx-large. Базовым является medium (16px), остальные уменьшают или увеличивают базовый размер. Эти единицы измерения CSS используют крайне редко.

Единицы измерения CSS — проценты

Задание единиц измерения CSS в процентах означает определение размеров относительно величин, заданных браузером либо размеров, прописанных в родительском блоке. Базовый размер шрифта (16px) равнозначен 100%. Относительные размеры могут изменяться, если наследуются значения тега-предка. Все вложенные теги наследуют его и используют для вычисления своих размеров.

Исключения!

  • При установке свойства margin-left в % процент берется от ширины родительского блока, а не от его margin-left.
  • При установке свойства line-height в % процент берется от текущего размера шрифта, а вовсе не от line-height родителя.
  • Для width/height процент берется обычно от ширины/высоты родителя, но при position: fixed процент задается от ширины/высоты окна (а не родителя или документа).

Единицы измерения CSS — em

Следующие единицы измерения размеров в CSS — em. 1 em равен, как и при задании размеров в процентах, базовому размеру. Принцип работы механизма наследования с em точно такой же как и с процентами.

Современные единицы измерения CSS — rem

С появлением CSS3 появилась новая единица измерения размеров CSS — rem, что означает root element. Его значение основано на значении шрифта корневого root-элемента. В подавляющем большинстве случаев это относится к базовому размеру шрифта, а корневым элементом считается HTML. Для использования единиц измерения CSS rem можно установить базовый размер шрифта для элемента HTML, а затем применять rem для определения значений шрифтов относительно этого базового размера.

html {
font-size: 20px;
}

.main-menu {
font-size: .5rem; /*.5rem = 10px*/
}

.heading {
font-size: 1.5rem; /*1.5rem = 30px*/
}

Единицы измерения CSS относительно viewport — vw и vh

В CSS3 также появились такие новые единицы измерения, как vw и vh, они определяются относительно размеров области просмотра, т.е. размера viewport.

  • 1vw = 1% ширины окна;
  • 1vh = 1% высоты окна.

К этому типу единиц измерения относятся и следующие:

  • vmin — наименьшее значение из vw и vh;
  • vmax — наибольшее значение из vw и vh.

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

Этим видеоуроком завершится наш курс по основам CSS. Надеемся, полученные вами знания очень пригодятся вам в дальнейшем вашем развитии как веб-разработчика.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#7 — Цветовые модели и единицы измерения CSS.

  1. Sfayrat:

    Уважаемые разработчики, поправте пожалуйста урок №6(css). В этом уроке проигрывается видео из урока №5(css).

  2. lele4ka.11@mail.ru:

    К сожалению, очень трудно слушать этого автора

Добавить комментарий

Рекомендуемые курсы