Дизайн HTML-страниц. Язык CSS (ч.4)
@honey_and_moneyПродолжим обсуждение цветов в CSS.
Нам осталось немного: что такое RGBa палитра?
С RGB мы разобрались - это множество комбинаций красного, зеленого и синего.
Задается тремя числами: rgb(255,255,255), где вместо 255 может быть любое число от 0 до 255.
В палитре RGBa в эти скобки добавляется четвертое число. Оно задает прозрачность элемента. Это число в диапазоне от 0 до 1.
Например вот так: color: rgba(1, 1, 1, 0.5) - цвет текста в элементе будет прозрачен наполовину. Если четвертое значение ноль - полностью прозрачный элемент. Если единица - полностью непрозрачный.
Как еще можно задать прозрачность:
Допустим вы задаете цвета через HEX-палитру или просто названия цветов на английском.
Тогда чтобы добавить элементу прозрачность, надо добавить в параметры такую запись:
opacity: 0.6; - на месте 0.6 может быть любое число от 0 до 1, оно точно так же как и в RGBa задает прозрачность. Чем ближе к нулю, тем прозрачнее элемент.
Давайте теперь о размерах:
Существует большое количество единиц измерения размеров в CSS. Разберем основные из них.
Пиксели:
Обозначается так: px
Экран вашего компьютера состоит из пикселей. В свойствах компьютера можно посмотреть разрешение экрана - это будет два числа, одно показывает количество пикселей по ширине, другое по высоте.
У меня например 1366 × 768
768 пикселей по высоте и 1366 по ширине.
Вернемся к CSS:
Если вы задаете размер шрифта в 14px например так:
font-size: 14px; - на экране человека, который зайдет на ваш сайт, будет отведено ровно 14 пикселей на экране для высоты каждого символа вашего шрифта.
Точно так же можно задавать и толщину рамки или высоту и ширину элемента:
height: 100px; - высота в 100 пикселей
width: 200px; - ширина в 200 пикселей
С пикселями думаю разобрались. Везде где нужен размер они применимы. Задавайте начальные размеры - смотрите как это выглядит на странице, затем при надобности корректируйте в большую/меньшую сторону числовое значение в пикселях.
Относительное задание размера: em
Можно задать размер с помощью единиц измерения em.
1em - это размер текущего шрифта на странице. Соответственно если вы зададите размер шрифта в какой-нибудь кнопке 2em, то размер символов там будет ровно в два раза больше чем обычный размер шрифта на странице.
Допускаются и дробные значения:
border-width: 1.5em; - толщина рамки в полтора раза больше размера текущего шрифта.
Такое задание шрифта удобно своей относительностью. То есть например если вы задаете размер в 10 пикселей, то Он везде будет 10 пикселей. А если вы задаете через em, размер будет определяться относительно шрифта в текущем блоке.
То есть например у вас задан шрифт на всей странице в 20 пикселей. У вас на этой странице создан блок <div>, в котором размер вы задали в 10 пикселей. А потом в этом div'е вам надо создать ещё десять блоков, в каждом из которых будут разные шрифты. Тут на помощь и приходит размерность в em. Определенную роль эта единица измерения играет в адаптивной верстке, которую мы будем изучать когда уже неплохо освоимся в CSS.
Проценты:
Тоже как и em относительная единица измерения. Только тут процент берется не только от размера шрифта.
Вы можете задать размер в зависимости от размера текущего блока, в котором расположен элемент.
Тут блок с атрибутом class="child-block" является вложенным по отношению к блоку с классом "main-block" ("main block" - родительский блок, "child-blcok - дочерний")
Так вот, если вы дочернему блоку добавите такой параметр в CSS:
height: 150%; - его высота будет в 1.5 раза больше высоты родительского блока.
Точно так же можно работать и с шириной и с шрифтом и т.д.
Проценты широко применяются в адаптивной верстке. Знание такой единицы измерения сильно упростит жизнь в будущем.
Единица измерения rem:
Точно такой же принцип как и с em, только тут величина размера отсчитывается не от размера шрифта родительского блока, а от шрифта блока <html> - то есть от основного размера страницы.
Это используется для пользовательского интерфейса. Например на ваш сайт зашел человек, который плохо видит или например плохо воспринимает большой шрифт. Вы можете добавить функцию изменения шрифта, она будет менять весь шрифт на странице.
Получилась слишком большая статья. Основные размерности мы разобрали. Осталось дело за малым - разобраться в размещении блоков на странице и задание размеров для них. Ждите новую статью и практикуйте изученное)
@honey_and_money - Канал для тех, кто не сидит на месте!