Еще одна тема, о которой бы хотелось поговорить, это единицы измерения в CSS. Задавать значения в CSS можно целыми числами; дробными числами — причем я хочу обратить внимание, что начальное ноль можно опускать и значения типа 0,5 задавать как .5; и процентное значение. Все три типа таких числовых значений употребляются при задании, например, единиц длины. Когда мы говорим об единицах измерения длины, то существует два их вида — это абсолютные единицы и относительные единицы измерения длины. К абсолютным относятся знакомые нам, в принципе, единицы измерения, такие, как миллиметры, сантиметры, дюймы, пункты, пики. И все они существуют до сих пор в CSS, но вы редко встретите их на практике, так как они очень сложно предсказуемы в плане конечного результата. То есть вы никогда не можете сказать, чему будет на экране пользователя равно значение в одну пику. Но при этом все эти единицы измерения часто используются в типографике. И если ваш CSS впоследствии будет перенесен на печать, когда вы, например, отправляете страницу на печать, то там как раз-таки использование таких единиц измерения может быть полезно. Мы пользуемся относительными единицами. Первая такая относительная единица измерения длины — это пикселы. Долгое время не утихает спор, является ли пиксел действительно относительной единицей измерения. Мы все-таки так считаем, потому что в последнее время пикселы, которые вы будете задавать в браузере, не будут равны физическим пикселам на экране, которые вы увидите. Например, на Retina дисплеях один пиксел логический будет равен четырем пикселам физическим. Следующая единица измерение — это она зависит от базового размера шрифта, заданного для данного элемента. То есть если вы задаете, например, элементу значение шрифта в 10 пикселей, то один это будет 10 пикселей, а полтора — 15 пикселей. Похоже ведет себя единица измерения rem. Разница лишь в том, что будет брать значение шрифта от родителя, а rem — от корневого элемента документа. Следующие единицы измерения — это ex и ch. Они зависят от конкретных значений, конкретных символов в данном семействе шрифта. Единица измерение ex зависит от высоты символа x в данном шрифте, а единица ch зависит от размера символа ноль в данном шрифте. Чаще всего такие единицы измерения применяются в типографике, когда вам, например, в web необходимо сверстать книгу и ограничить размеры листа числом символов. Следующее семейство относительных единиц измерения — это единицы, которые зависят от размеров экрана, то есть vh/vw. В данном случае мы подразумеваем, что один vh — это 1/100 от высоты экрана. То же самое с шириной: один vw — это 1/100 ширины экрана. И есть комбинирующие единицы измерения vmax и vmin. Дело в том, что, например, на телефонах мы можем менять местами высоту и ширину, поворачивая телефон из портретного режима в альбомный. В данном случае единица vmax позволяет нам выбрать максимум из двух — ширина и высота, а vmin — минимум. Следующие единицы, которые есть в CSS, это цветовые единицы. Цвет в CSS задается по системе RGBA, когда мы указываем для каждого из компонентов красного, зеленого или синего его насыщенность. Например, красный цвет мы можем задать несколькими способами. Во-первых, это именованная константа, то есть просто red. Таких именованных констант в web не много, и использовать их нужно аккуратно. Следующий способ — это функциональный. Когда мы задаем функцию rgb или rgba и первыми тремя аргументами указываем соответственно значения от нуля до 255 для каждой из компонент — красной, зеленой, синей. rgba добавляет четвертый аргумент — это прозрачность цвета. Наконец, похожий способ — это задание в шестнадцатеричном виде. Когда число, которое мы указывали в функции rgb или rgba, будет переведено в шестнадцатеричную систему исчисления. И мы, соответственно, тогда не будем разделять значения через запятую. Есть также укороченная версия задания с помощью шестнадцатеричной системы. Она используется в том случае, когда цифры у нас будут одинаковые. Например, красный цвет задается в шестнадцатеричной системе с помощью следующего числа ff0000. Укороченная запись такого числа будет выглядеть как f00. Какие еще типы значений есть в CSS? Например, бывают именованные значения. Это не только цветовые, но и различные другие, например, насыщенность шрифта мы задаем ключевыми словами. Бывают комбинационные типы значений, когда мы комбинируем несколько разных типов значений. Например, в комбинирующих селекторах мы комбинируем несколько значений. И это могут быть как единицы измерения длины, так цветовые значения, так и какие-то именованные константы. И, наконец, функциональные. Я уже показывал вам на примере цветов, как с помощью функции rgb задать цвет. Таких функций много. Например, мы можем задавать так адрес URL или какой-нибудь атрибут, или еще что-нибудь. Последнее, о чем мы поговорим в рамках данной лекции, это способы вставить ваш CSS-код в HTML-документ. Один из таких способов вы уже видели ранее, когда мы говорили о специфичности. Вы можете вставить ваш CSS-код внутрь атрибута style для конкретного элемента. Как вы понимаете, это не самый эффективный способ задавать CSS-стили. Этот способ не сильно далеко ушел от тега fond. Более правильным способом будет указать стили внутри тега style. И внутри уже можно указывать и селекторы, и значение. Еще более правильным способом будет вынести эти стили в отдельный CSS-файл, который можно подключить, либо указав директиву import внутри тега style. Но самым правильным считается указать тег link и внутри него указать ссылку на нужный CSS-файл. В рамках данного видео мы рассмотрели, какие единицы измерения вообще существуют в CSS, и в частности поговорили о единицах измерения длины. Также мы рассмотрели способы задания цвета, какие вообще бывают типы значений CSS, и посмотрели, какими способами можно подключить стили на вашу страницу.
