CSS – это формальный язык декодирования и описания внешнего вида веб-страницы, написанной при помощи языка разметки (чаще всего им выступает HTML). Называется каскадными таблицами стилей. CSS может применяться к любым XML-документам. Активно используется при верстке.
Далее предстоит разобраться с заданием ширины и длины различных блоков на странице при помощи CSS. Перед этим необходимо изучить принципы разделения веб-элементов и их особенности. Данная информация ориентирована на широкую публику, но она будет особо ценна для верстальщиков-новичков.
Классификация элементов страницы
Не все фрагменты на веб-страницах – это блоки. Элементы сайта подразделяются на две категории:
- Строчные. Они могут записываться в одну строку, не требуя никаких дополнительных записей. Примером строчного элемента служит ссылка. На одной строке может быть большое количество ссылок – пока они будут помещаться на ней.
- Блочные. Такие компоненты представляют собой блоки, которые без дополнительных операций не смогут встать в один ряд. Примером блока является абзац, задаваемый тегом p.
Все это приводит к осознанию того, что ширина и высота – параметры, которые задаются только блокам. Соответствующие характеристики можно отнести к простым свойствам размером. Далее они будут рассмотрены более подробно.
Простейшие свойства размеров
Простейшими свойствами, при помощи которых можно записывать размеры блоков, являются:
- ширина (width);
- высота (height).
К этим параметрам допустимо приставлять префиксы:
- min;
- max.
Эти префиксы используются для задания минимальной и максимальной ширины и высоты соответственно.
Значения величин в CSS и HTML можно записывать различными способами: в пикселях или в процентах. Иногда разработчиками и верстальщиками используется относительная единица em, отвечающая за высоту шрифта. С ее помощью принято определять величину текста.
По умолчанию все сетки (ключевые структурные блоки заданного шаблона), в которых размеры записываются в процентах, носят называние резиновых. Это наиболее популярные вариант записи ширины и высоты элементов веб-сайта. Далее каждый подход будет рассмотрен более подробно.
Размеры в пикселях
Размер элементов в CSS (ширина и высота) может указываться в пикселях. Такой вариант подойдет для записи абсолютных значений. Пример – когда вся веб-страница должна располагаться внутри блока шириной 1000 пикселей. В этом случае необходимо сформировать соответствующий контейнер, а также ему задается определенная ширина:
В этом случае ширина контейнера не меняется ни при каких обстоятельствах. При уменьшении окна или изменении масштаба окна она остается одинаковой. Размер веб-сервиса не уменьшится. По мере необходимости в блоке появится горизонтальная полоса прокрутки.
Это – фиксированные шаблоны. Сейчас они встречаются повсеместно. Примером может послужить социальная сеть Вконтакте. При уменьшении размера окна сервиса на компьютере шаблон не изменится. Это связано с тем, что проект имеет отдельные версии для планшетов и смартфонов.
Максимум и минимум
Для адаптации веб-проектов разработчики часто используют такие свойства ширины и высоты, как:
- max width/height;
- min width/height.
Данные записи применяются к главному контейнеру для каркаса сайта. Они задают сервису нежесткую ширину. Вот один из наглядных примеров такого кода:
Этот код значит, что при необходимости блок будет уменьшаться. Если свернуть окно браузера, контейнер тоже уменьшится. Когда разрешение экрана позволяет, ширина будет составлять ровно 1320 пикселей. При уменьшении окна увидеть горизонтальную полосу прокрутки (скролл) не получится.
Также можно задать минимальную ширину окна. Если этот параметр установлен, блок будет уменьшаться только до указанного значения:
Если ширина окна окажется меньше 600 пикселей, блок перестанет сжиматься. Его размер зафиксируется, а в браузере появится горизонтальная полоса прокрутки.
Размеры в процентах
Задавать ширину и длину элементам веб-страниц можно при помощи процентов. Этот подход к верстке становится все более популярным. С его помощью получится добиться отличного отображения веб-портала на различном оборудовании.
Пример – разработчик решил на своей онлайн-портале сделать слева боковую колонку, а справа разместить область с основным содержимым (там будет выводиться основной текст: статья, каталог товаров или доступные на форуме темы). Сначала необходимо определить примерные размеры каждого контейнера. Далее – записать программный код. Вот его наглядный пример:
Здесь:
- slidebar (слайдбар) получает 28 % ширины родительского элемента (общего контейнера);
- основной блок займет 62 %;
- общая ширина составляет 90 %;
- оставшиеся 10 % оставляются для разнообразных внешних/внутренних отступов, рамок и иных компонентов.
Такой прием работает, если верстальщик или разработчик четко понимают, сколько пространства должен занимать тот или иной блок на веб-портале. Новички чаще всего пользуются заданием размеров элементам при помощи пикселей.
Отступы и размеры контейнеров
В процессе задания параметра width тому или иному контейнеру можно прийти к тому, что соответствующее значение не будет окончательным. Определить получится лишь ширину той части, в которой непосредственно имеется какое-либо содержимое. В CSS padding увеличивает размер блока. Аналогичное влияние оказывает border (рамка).
В ранее предложенном коде (задание размеров в процентах) боковая колонка занимает 28 % от всей ширины контейнера. Чтобы содержимое в slidebar не прилипало к краям, ему требуются отступы. Иногда для красоты добавляется рамка. Вот пример кода, отвечающий за соответствующие операции:
Общая ширина сайдбара увеличилась на 44 пикселя:
- отступы слева и справа – по 20 пикселей;
- рамка по этим же сторонам – по 2 пикселя.
Можно прибегнуть к использованию свойства box-sizing: border-box, чтобы упростить верстку и записывать элементы с учетом всех отступов и рамок. Оно делает так, что в ширину блока (width) включаются внутренние отступы (padding) и рамки.
Теперь при задании блоку размера в 62 %, он останется таким навсегда. Если попытаться сделать большой отступ справа от боковой колонки, контент не влезет. Его придется вынужденно перенести вниз.
Значение по умолчанию
Рассматривая div width, нужно помнить о еще одном важном параметре – значении размеров по умолчанию. Он обозначается как auto. Данный параметр применяется к:
- блочным элементам;
- заменяемым компонентам на странице;
- ячейкам таблицы.
Значение по умолчанию передает управление размерами компонента браузеру. Auto используется, когда необходимо разместить полностью все содержимое в пределах заданного блока. Это свойство устанавливает ширину, отталкиваясь от типа и содержимого блока.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
