0:00
Еще одна тема, о которой бы хотелось поговорить, это единицы измерения в 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, и посмотрели,
какими способами можно подключить стили на вашу страницу.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
