Значения свойств

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

Ключевые слова
Числа с указанием единиц измерения
Числа без единиц измерения
Цвета
URL-адреса
Строки
Функции

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

Ключевые слова являются, пожалуй, наиболее часто используемыми значениями. Некоторые свойства принимают в качестве значений только ключевые слова. Например свойство position может принимать значения: static | relative | absolute | fixed | sticky

                

                .user-card {
        position: absolute;
    }

Никакие другие данные это свойство не примет. Если вы попытаетесь поместить ключевое слово в кавычки (например «absolute»), в панели разработчика будет показано предупреждение, а свойство не будет распознано и не применится к тегу. То же самое произойдёт, если вы укажете неприемлемое значение. Браузер не узнает его, т.к. он знает только свойства из спецификаций.

                

                .user-card {
        position: "absolute";
        position: hello;
        padding: 2rem 4rem;
        border: 1px solid grey;
    }

Как видите, оба значения браузер не понимает, так что считает данные строки невалидными, не обрабатывает их. В случае, если вы написали какие-то правила стилей, но результат отображения не тот, какого вы ожидали, первым делом проверьте в панели разработчика, правильно ли браузер понял то, что вы попытались ему сказать. Если указанные правила CSS перечёркнуты, как на скриншоте, то проверьте правильность написания названия свойства и значения. Если всё правильно согласно документации\справочнику, но при этом по-прежнему не понимается браузером, проверьте это свойство и значение в сервисе caniuse.com. Некоторые свойства и значения не поддерживаются браузерами, а некоторым нужны префиксы.

Числа с указанием единиц измерения

Это абсолютные или относительные величины, которые, как правило, указываются для задания размеров того или иного элемента, текста, отступа и т.д. Значение состоит из числа и текстовой части, которая определяет калькуляцию свойства. Это могут быть разные значения, подходящие например для свойства width: 100px | 6em | 50% | 10vw | 20vh | 14rem | 200pt

Здесь приведён далеко не полный список всех единиц, подходящих для описания свойств.
Все единицы вы найдёте в справочнике MDN, а также основные используемые в работе величины будут рассмотрены в уроке в будущем. Пока что достаточно лишь запомнить, что эти значения могут быть разнообразными, целочисленными или дробными (например 45.3% или 0.3rem).
Для значения дробного (также его называют float), если оно не превышает единицу, можно опускать часть до точки и писать только остаточную часть. Так, следующий размер шрифта будет эквивалентом 0.6rem:

                

                .user-card {
    font-size: .6rem;
}

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

                

                .user-card {
    margin-top: 300;
}

Числа

Некоторые значения можно указывать без единицы измерения. Это может быть свойство line-height, определяющее высоту строки, или columns, определяющее количество колонок в тексте. Синтаксис этих свойств:

                

                .user-card {
    line-height: 1.4;
    columns: 3;
}

Никаких ошибок\предупреждений это не вызовет, свойства применятся. Стоит отметить, что для свойства line-height допускается запись в том числе и с указанием единиц измерения, например 4.5rem задаст высоту строки равную величине 4.5rem, ну и т.д. Пока что такие тонкости вам запоминать не нужно, об этом будет рассказано в уроках про соответствующие CSS свойства.

Цвета

Цвета могут записываться в нескольких форматах. Первая и базовая модель, которую нужно запомнить, это RGB. Модель RGB расшифровывается как Red Green Blue, и в ней описывается при помощи чисел от 0 до 255 количество каждого цвета. Например, код RGB для красного цвета будет rgb(255,0,0), что означает полное присутствие красного цвета и полное отсутствие двух других цветов. Этот красный цвет является эквивалентом записи цвета при помощи ключевого слова red.

Существует и расширенная модель RBG, включающая в себя также альфа-канал (прозрачность). Эта модель называется RGBA и отличается от прежней лишь тем, что в её записи четыре числа. Последнее число устанавливает прозрачность и может принимать значения от 0 (полная прозрачность) до 1 (полная непрозрачность). Например, следующий цвет — это синий с прозрачностью 50%:

                

                .block {
    background-color: rgba(0,0,255,.5);
}

Подобно RGB работает и HEX-формат (шестнадцатеричный формат). Цвета, записанные в нём, выглядят как #f9c40f (тёмно-синий цвет). В данной записи каждая пара символов отвечает за свой цвет. Две первые цифры за красный, следующие две — за зелёный, последние две — за синий (как модель RGB). В шестнадцатеричном формате, таким образом, допускаются цифры: 0 1 2 3 4 5 6 7 8 9 A B C E F. Стоит запомнить, что первая цифра 0 обозначает полное отсутствие цвета, а последняя F — полное присутствие цвета. Соответственно полное отсутствие всех цветов даст нам чёрный цвет (#000000), а полное присутствие всех цветов — белый (#ffffff). Для цветов HEX возможна также краткая запись в виде трёх символов, например #f9c. В таком случае каждый символ удваивается, хотя писать это в CSS и не обязательно. Это значит, что записи #f9c и #ff99cc равнозначны.

HEX-цвета могут обладать и расширенной записью, включающей в себя также параметр альфа-канала. Для установления прозрачности цвета в HEX-формат добавляются ещё два символа, несущие значение в шестнадцатеричном формате. Полный список этих значений вы можете найти в интернете, например на этой странице, мы же приведём пример с почти прозрачным зелёным блоком, чей фоновый цвет имеет запись:

                

                .block {
    background-color: #00ff0026;
}

В случае, когда мы хотим указать параметр альфа-канала для цвета HEX, нам необходимо использовать полную запись цвета, а не короткую #0f0.

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

                

                .block {
    background-color: skyblue;
}

Подобных ключевых слов, описывающих цвет, существует довольно много. Знать их вам необязательно, т.к. они используются больше в тестовой разработке, когда вы делаете что-то ради экспериментов и цвета отображения для вас не имеют большого значения. В профессиональной коммерческой разработке дизайнеры выбирают тонкие оттенки цветов, которые не описаны ключевыми словами. Впрочем, если вам нужны белый, чёрный, полный красный, полный синий и пр., вы можете использовать white, black, red, blue и т.д.

Существует ещё одна цветовая модель — HSL, а также HSLA — с альфа-каналом. Координатами в ней являются тон, насыщенность и светлота. Эта цветовая модель используется крайне редко (совсем редко), поэтому рассматривать подробно мы её не будем. Синтаксис записи может быть такой (полупрозрачный пурпурный цвет):

                

                .block {
    background-color: hsla(298, 100%, 24%, 0.5);
}

Если у вас вдруг возникнет необходимость описать цвет в формате HSL(A), воспользуйтесь графическим редактором, конвертером цветов или специальным веб-сервисом выбора цветов. Все они поддерживают формат HSL(A).

URL-адреса

— это система унифицированных адресов электронных ресурсов, или, говоря простыми словами, адрес местонахождения файла. Обыкновенно он имеет вид строки «https://yoursite.info/pictures/mountains.jpg» и это максимально похоже на адрес какой-нибудь страницы в интернете, но только ещё имеет расширение. В CSS он пишется с указанием ключевого слова\функции url(), в скобках указывается относительный или абсолютный путь к файлу. Саму строку-адрес можно писать в кавычках, а можно и без них. Записи будут равнозначны. Примеры:

                

                .block {
    background-image: url("/assets/img/header-bg.jpg");
    background-image: url(/assets/img/header-bg.jpg);
}

Строки

Строки являются, пожалуй, самым простым типом значений. Как правило в этом случае вы можете ввести любое значение, заключив его в одинарные\двойные кавычки. Стоит, однако, быть внимательным, потому как ошибки в строках не отслеживаются и не подсвечиваются редакторами кода (ведь им неизвестно, что вы хотите сказать браузеру). Строки используются в значениях свойств content, font-family, quotes. Пример:

                

                .greetings:before {
    content: "Добрый день! ";
}

Многие символы в строках могут быть экранированы при помощи некоторых кодов. Экранирование — это специальный синтаксис для написания символов, которые мы не можем написать в данной строке. Если мы хотим написать кавычку в строке, которая сама обозначается кавычками, то нам нужно экранировать эту кавычку, чтобы браузер понимал, что строка тут не заканчивается. В CSS для отображения той самой кавычки в строке можно использовать экранирование при помощи обратного слэша \" или код \22.

                

                <style>
.greetings:before {
    content: "\22Добрый день!\" - обычно говорю я ";
}
</style>
<p class="greetings"></p>

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

Стоит отметить, что спецсимволы HTML, прописанные в CSS-строках, не отображаются таким образом. Например, известный нам код спецсимвола «больше» — это >. Если мы поместим его в css-строку, то он так и останется текстом «>», однако в разметке HTML он превращается в необходимый нам символ. Следует запомнить, что спецсимволы CSS и спецсимволы HTML не работают одновременно в двух языках!

Функции

Значениями CSS-свойства могут выступать и функции. Это уже довольно близко стоит к программированию, но разница в том, что мы в CSS не можем никак влиять на работу функций, изменять их и т.п. Функции встроены в браузерный обработчик стилей, так что вы можете смело их использовать, но не более того.

Наиболее часто используемыми функциями являются url() и calc(). Можно, конечно, поспорить по поводу принадлежности некоторых выражений к числу функций, однако для нас сейчас это не столь важно. Функция в качестве значения свойства принимает какие-либо аргументы и возвращает результат, этот результат и становится значением свойства. Однако ни тело функции, ни возвращаемое значение, в отличие от работы функций JavaScript, мы не видим. Впрочем, нам это и не нужно, достаточно лишь видеть, что результат ожидаем и нам подходит. Ниже приведены примеры работы различных css-функций:

                

                .gradient{
    background-image: linear-gradient(69deg, rgba(203,108,108,0.8435749299719888) 0%, rgba(0,70,255,0.9248074229691877) 100%);
}

                

                .rotate{
    transform: rotate(30deg);
}

И так далее. Функций в CSS довольно много, они служат для различных целей и используют различный синтаксис. С некоторыми функциями ( rgb(),hsl(),url() ) вы уже знакомы, с другими познакомитесь далее по мере изучения различных свойств. Большая часть функций в стилях связаны с трансформациями элементов и фильтрами.