MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS values and units

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Существует множество типов значений свойств CSS, от числовых обозначений цветов до функций, выполняющих определенные действия (например, вставку фонового изображения или поворот элемента). Некоторые из них требуют задания единиц измерения для представления конкретных значений — какой ширины сделать элемент: 30 px, 30 cm или 30em? В этом руководстве мы рассмотрим наиболее распространенные значения, в частности, длину, цвет и простые функции,  а также изучим единицы, встречающиеся реже - такие, как градусы, и даже безразмерные числовые единицы.

Начальные условия: Базовые представления о компьютерах, наличие основного программного обеспечения, элементарные знания о  работе с файлами, основы HTML  (изучите Введение в HTML) и представление о том, как работает CSS  (об этом можно узнать из предыдущий статей этой части.)
Цель: Узнать о наиболее распространенных типов значений свойств CSS и их единицах измерения.

В CSS есть много типов значений, одни из которых весьма распространены, а другие встречаются редко. Мы не станем изучать их все подробно в данной статье; рассмотрим только те, что могут оказаться наиболее полезными на пути освоения CSS. Статья охватывает следующие типы значений:

  • Числовые значения: Это значения длины, которыми задаются, например, ширина элемента, толщина границы или размер шрифта и безразмерные величины, позволяющие указать, например, относительную ширину строки или сколько раз надо повторить ролик.
  • Проценты: Также применяются для задания размера или длины - например, относительно ширины/высоты содержащего элемент контейнера или размера шрифта по умолчанию.
  • Цвета: для задания цветов фона, текста и тому подобного.
  • Координаты: например для указания положения элемента относительно верхнего левого угла экрана.
  • Функции: Например, для задания фоновых изображений или цветовых градиентов.

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

Примечание: Подробное описание единиц CSS можно найти в Справочнике CSS; величины представлены в угловых скобках, например, <color>.

Числовые значения

Числа в CSS встречаются практически повсюду. В данном разделе обсуждаются самые распространенные классы числовых значений.

Длина и размер

Единицы измерения длины/размера  (можно посмотреть в <length>) вы будете использовать постоянно - для разметки, оформления и тому подобного. Рассмотрим простой пример. Сначала HTML:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

Теперь CSS:

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

Результат:

Этот код делает следующее:

  • Задает margin, padding и border-width каждого параграфа равным 5 пикселям, 10 пикселям и 2 пикселям, соответственно. Если для полей (margin) или отступа (padding) задано всего одно значение, это означает, что все четыре стороны будут равны этому значение. Ширина границы (border) задается одним из значений сокращенной записи свойства border.
  • Назначает свойству width трех данных параграфов возрастающие значения в пикселях, все увеличивая, таким образом, размер элемента.
  • Назначает свойству font-size трех данных параграфов возрастающие значения в пикселя, все увеличивая, таким образом, размер текста. Свойство font-size относится к высоте всех символов.

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

  • mm, cm, in: Миллиметры, сантиметры и дюймы (inches).
  • pt, pc: Точка (1/72 дюйма) или пика (pica) (1 пика - это 12 точек.)

Не исключено, что почти всегда вы будете использовать пиксели.

Существуют также относительные единицы, то есть указывающие отношение к размеру шрифта (font-size) текущего элемента или размеру viewport:

  • em: 1em равен размеру шрифта текущего элемента (а точнее, высоте буквы M в верхнем регистре.) По умолчанию (когда к странице не привязана таблица стилей) браузер устанавливает основной шрифт (font-size) веб страниц равным 16 пикселям, так что по умолчанию значение в 1em равно 16 пикселям. Но здесь надо заметить, что элемент наследует размер шрифта от своего родителя, поэтому, когда для родительского элемента установлен другой размер, вычисление пиксельного эквивалента em немного усложняются. Пока об этом можно не беспокоиться — наследование и вычисление размеров шрифта мы будем подробнее обсуждать в других статьях и частях данного курса. ems - это самая распространенная относительная единица в веб-разработке.
  • ex, ch: Это высота буквы x в нижнем регистре или числа 0, соответственно. Они встречаются реже и поддерживаются хуже, чем ems.
  • rem: Единица rem (происходит от em) ведет себя как em, за исключением того, что она всегда равна размеру основного шрифта по умолчанию (font-size); унаследованные размеры шрифта на нее влияния не оказывают, что может давить преимущество. Однако, эта единица не работает в старых версиях Internet Explorer (больше об этом можно прочитать в Отладка CSS.)
  • vw, vh: Это 1/100я ширины окна и 1/100я высоты окна, соответственно. И опрять же, они не так широко распространены, как rem.

Относительные величины бывают очень полезны — если элементам HTML назначать размеры, зависящие от размеров шрифта или окна, то они сохранят правильный вид и в том случае, если, например, пользователь удвоит размер шрифта.

Безразмерные величины

Вам наверняка встретятся в CSS числовые значения без указания единиц измерения — это может и не быть ошибкой, а вполне допустимо в определенных обстоятельствах. Например, если вы хотите полностью убрать поля (margin) или отступ (padding), можно написать 0 без уточнения единиц: ноль — всегда ноль, какие единицы ни используй!

margin: 0;

Безразмерная высота строки

Другим примером может служить свойство line-height, назначающее выстоту строк текста в элементе. Можно использовать единицы для указания конкретной выстоты строки, но часто удобнее бывает использовать безразмерную величину, которая будет использоваться в качестве коэффициента. Например, возьмем следующий код HTML:

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

И следующий код CSS:

p {
  line-height: 1.5;
}

В результате получится:

Размер шрифта (font-size) здесь равен 16px; высота строки будет в 1.5 раза больше, то есть 24px.

Количество повторов

Анимация в CSS позволяет "оживлять"  элементы HTML-страницы. Рассмотрим простой пример - здесь параграф вращается при наведении на него указателя мыши. HTML здесь весьма прост:

<p>Hello</p>

CSS немного посложнее:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

В данном примере можно увидеть ряд интересных единиц, о которых напрямую в этой статье не говорится (<угл (angle)>, <время (time)>, <таймер (timing-function)>, <строка(string)>), однако нас здесь интересует строка animation-iteration-count: 5; в ней задается, сколько раз анимация должна повториться после запуска (в данному случае, после наведения на него указателя мыши). Этот параметр целым задается числом без указания единиц измерения.

Результатом этого кода будет:

Проценты

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

Рассмотрим пример.

Сначала, разметка двух простых элементов в HTML:

<div>Fixed width layout with pixels</div>
<div>Liquid layout with percentages</div>

Теперь немного CSS для их оформления:

div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

div:nth-child(1) {
  background-color: red;
  width: 650px;
}

div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

Получаем:

Здесь обоим элементам divs назначаются некоторые margin, height, font-size, border и color. Затем мы задаем для них разный фон (background-color), чтобы можно было их легко различить. Для первого элемента div задаем ширину (width) равной 650px, а для второго - равной 75%. В результате ширина первого элемента всегда одна и та же, даже когда размер окна меняется (при сильном сужении окна он перестает быть виден), а ширина второго меняется при изменении ширины родительского окна, и всегда составляет 75% от нее. В данном случае родителем элементов является элемент <body>, ширина которого по умолчанию равна 100%.

Примечание: Вы можете наблюдать этот эффект при изменении окна браузера с данной статьей; может также проделать то же самое с  примерами с Github.

Размер шрифта (font-size) также можно задавать в процентах: 200%. Это работает не совсем так, как можно было бы ожидать, но все равно имеет смысл — в этом случае новый размер тоже пропорционален размеру шрифта родителя, как и при использовании em. Здесь размер родительского шрифта равен 16px — значению по умолчанию, так что шрифт элемента составит 200% от него, или 32px. Это работает очень похоже на em — 200% но сути эквивалентно 2em.

Эти два разных типа часто называют гибкими макетами (liquid layout) (смещаются при изменении размера окна браузера), and макетами фиксированной ширины (fixed width layout) (размер всегда одинаков). Каждый имеет свою сферу использования, например:

  • Гибкие макеты можно использовать чтобы стандартный документ всегда умещался на экране и выглядел одинаково на различных видах устройств.
  • Макет фиксированной ширины можно использовать, чтобы интерактивная карта сохраняла свой размер, а окно браузера будет двигаться по ней, каждый раз показывая определенную ее часть. Размер видимой части будет зависеть от величины окна.

О создании макетов вы узнаете больше из продолжения данного курса, в разделах Макет CSS и Респонсивный дизайн (Responsive design modules - TBD.)

Упражнение: Поиграем с длинами

В этом упражнении нет правильных ответов. В может просто поиграть с шириной и высотой элементов .inner and .outer, чтобы посмотреть, как изменение этих значений сказывается на их внешнем виде. Попробуйте задать значение .inner в процентах и посмотрите, как он будет подстраиваться под изменение ширины внешнего элемента (.outer). Попробуйте задать фиксированные значения, скажем, пиксели или emы.

В случае ошибке всегда можно вернуть исходный вариант нажав кнопку Reset.

Цвета

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

В современных компьютерах используется 24х битная цветовая система, реализующая 16.7 миллионов различных цветов посредством различных комбинаций красного, зеленого и синего, каждый из которых может принимать одно из 256 различных значений (256 x 256 x 256 = 16,777,216.)

Пробежимся по различным типам цветовых значений.

Примечание: Преобразования цветов из одной системы в другую обсуждается ниже, для этого понадобится цветовой конвертер. Такой конвертер несложно найти в сети, например, можно использовать HSL to RGB / RGB to HSL / Hex Colour Converter.

Ключевые слова

Самыми простыми, самыми старыми, цветовыми типами в CSS являются ключевые слова для цветов. Это строки, представляющие конкретные цветовые значения. Например, следующий код:

<p>This paragraph has a red background</p>
p {
  background-color: red;
}

Дает такой результат:

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

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

Шестнадцатеричные значения

Следующей из повсеместно используемых цветовых систем является шестнадцатеричная, или коды в формате hex. Каждое значение в такой системе состоит из символа решетки (#), за которым следует шесть символов шестнадцатеричной системы, каждый из которых может принимать значение в диапазоне от 0 до f (последнее представляет 16) — то есть 0123456789abcdef. Каждая пара символов представляет один из основных цветов  — красный, зеленый и синий — и позволяет задать для каждого из них любое из 256 имеющихся значений (16 x 16 = 256.)  

Например, такой код:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

Дает следующий результат:

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

RGB

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

Перепишем предыдущий пример с использованием RGB:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Получаем результат:

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

Примечание: Почему 255 а не 256? Компьютеры склонны считать от 0 а не от 1. Так что, чтобы получилось 256 возможных значений, цвета в RGB принимают значения в диапазоне от 0-255, а не 1-256.

HSL

Немного хуже, чем RGB, поддерживается модель HSL (ее нет в старых версиях IE), которая была реализована из-за большого интереса к ней со стороны разработчиков — вмето красного, зеленого и синего цветов функция hsl() принимает в качестве параметров оттенок (hue), насыщенность (saturation), и яркость (lightness), которые позволяют представить 16.7 миллионов цветов, но несколько иначе:

  1. оттенок (hue): основной оттенок цвет. Принимает значение от 0 до 360, представляющее угол, откладываемый на цветовом колесе.
  2. насыщение (saturation): насколько насыщенным является цвет? Принимает значение от 0 до 100%, где 0 означает отсутствие цвета (будет проявляться как оттенок серого), а 100% - полное насыщение
  3. яркость (lightness): насколько ярким является цвет? Принимает значение от 0 до 100%, где 0 - отсутствие яркости (будет абсолютно черным) а 100% представляет полную яркость (будет абсолютно белым)

Примечание: Для визуализации того, как работает эта система, используется HSL-цилиндр. Об этом можно почитать в статье HSL and HSV article в Википедии.

Перепишем теперь наш пример с использованием HSL:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Получаем следующий результат:

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

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA и HSLA

RGB и HSL имеют режимы — RGBA и HSLA — позволяющие указать не только цвет, который будет выводиться, но и его прозрачность (transparency). Соответствующие этим режимам функции принимают, помимо тех же самых трех первых параметров, еще и четвертый - число в диапазоне от 0 до 1, которое указывает прозрачность, или значение альфа (alpha channel). 0 означает полную прозрачность, а 1 - полную непрозрачность.

Рассмотрим еще один небольшой пример — сначала HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

Теперь CSS — здесь мы сдвинули перевый параграф, чтобы параграфы перекрывались (потом вы узнаете об этом больше):

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Результат:

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

Свойство opacity

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

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

Теперь CSS:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Результат:

Обратите внимание — первый элемент, использующий цвет RGBA, имеет всего лишь полупрозрачный фон, в то время как во втором элементе прозрачно все, включая текст. Придется как следует подумать, что в каком случае следует использовать — например, RGBA полезно для создания перекрывающегося с изображением заголовка, где изображение проглядывает через текст, но текст все же можно прочитать. С другой стороны, opacity можно использовать для создания анимационного эффекта, когда весь элемент постепенно исчезает (изменяется от полностью видимого до полностью невидимого).

Упражнение: Поиграем с цветами

В этом упражнении нет правильных ответов — просто изменяйте значения фона трех приведенных ниже элементов, слегка перекрывающихся друг с другом. Исользуйте ключевые слова, системы hex, RGB/HSLA/RGBA/HSLA и свойтво opacity. Попробуйте, это забавно.

Сделав ошибку, всегда можно вернуть исходный вариант кнопкой Reset.

Функции

В программировании function - это допускающий повторное использование сегмент кода, который можно запускать много раз для выполнения однотипных задач с минимумом усилий как для разработчика, так и для компьютера. Понятие функций обычно ассоциируется с такими языками, как JavaScript, Python, или C++, но они существуют и в CSS, в качестве значений свойств. Вы уже видели их в действии в разделе Цвета (Colors), например, rgb(), hsl(),:

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

Эти функции вычисляют, какие цвета использовать.

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

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

В CSS есть много замечательных средств, о которых вы узнаете далее в этом курсе!

Итог

Надеюсь, вам понравилось осваивать значения и единицы измерения CSS — не беспокойтесь, если что-то пока остается не вполне понятным; это придет вместе с практикой!

Метки документа и участники

 Внесли вклад в эту страницу: mgalkina
 Обновлялась последний раз: mgalkina,