Блоки CSS. Размеры, Границы, Поля, Отступы, Стили, Тени

Блоки CSS. В этой статье вы научитесь:

• контролировать размеры блоков;
• создавать границы вокруг блоков;
• устанавливать поля и отступы для блоков;
• отображать и скрывать блоки.

ЧТО ТАКОЕ БЛОК CSS?

Блоки CSS – это элементы, которые не могут находиться на одной строке с другими блоками и они отделяются абзацами.
К блочным элементам относят:

• <h1>…<h6> — заголовки
• <p> — параграфы
• <div> — блок для верстки веб-страницы (каркас сайта). Во внутрь блока DIV можно вложить картинки, другие блочные и встроенные элементы.

Что такое блочные элементы вы поняли, а что же тогда относится к встроенным элементам?

Встроенные элементы – это элементы, которые могут находиться на одной строке с другими встроенными элементами и они не отделяются абзацами.

К встроенным элементам относят:

• <strong> — выделить текст жирным;
• <em> — выделить текст курсивом;
• <u> — подчеркнуть текст
  и т.д.

РАЗМЕРЫ БЛОКА CSS

width, height

По умолчанию размер блока задается так, чтобы он был способен вместить контент. Чтобы установить собственные размеры блока, вы можете использовать свойства height и width. Чаще всего размер блока указывается в пикселах, процентах или единицах em. Пикселы наиболее популярны, поскольку позволяют точно контролировать размер.

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

В следующем примере вы видите элемент <div>, ширина и высота которого равна 300 пикселам. Внутри него находится абзац текста, занимающий 75% ширины и высоты элемента <div>. Это означает, что размер абзаца составляет 225 пикселов в ширину и 225 пикселов в высоту.

Блоки CSS 3: ОГРАНИЧЕНИЕ ШИРИНЫ

min-width, max-width

Некоторые страницы создаются таким образом, чтобы контент менял свой размер в соответствии с размером экрана. В этом случае свойство min-width определяет наименьшую ширину блока при уменьшении окна браузера, а свойство max-width — наибольшую ширину блока при увеличении. Это очень полезные свойства, позволяющие гарантировать удобочитаемость страниц, особенно на маленьких экранах портативных устройств. Например, вы можете использовать свойство max-width, чтобы быть уверенным в том, что строки текста не окажутся слишком широкими в большом окне браузера. Свойство min-width позволит гарантировать, что строки текста не окажутся чересчур узкими.

Проверьте данный пример в своем браузере, чтобы понять, что происходит, когда вы увеличиваете или уменьшаете размер окна программы.

Блоки CSS 3: ОГРАНИЧЕНИЕ ВЫСОТЫ

min-height, max-height

Так же, как и в случае с шириной блока, вы можете ограничить его высоту. Это достигается с помощью свойств min-height и max-height. Следующий пример демонстрирует эти свойства в действии. Кроме того, он показывает, что происходит, когда контент занимает больше места, чем позволяет размер блока. Если блок недостаточно велик, чтобы вместить контент, тот выходит за его пределы, что выглядит очень некрасиво. Чтобы решить проблему, возникающую при нехватке места в блоке, вы можете использовать свойство overflow, которое обсуждается далее.

ПЕРЕТЕКАНИЕ КОНТЕНТА

overflow

Свойство overflow сообщает браузеру, что делать, если объем контента блока превышает его размер. Это свойство может принимать одно из двух значений.

hidden

Данное значение просто скрывает любой дополнительный контент, который не вписывается в блок.

scroll

Данное значение добавляет к блоку полосу прокрутки, чтобы пользователи могли увидеть дополнительный контент.

В приведенном примере вы можете видеть два блока, содержимое которых выходит за их пределы. В первой части примера свойству overflow присвоено значение hidden, во второй части — scroll.

Свойство overflow особенно удобно, поскольку некоторые браузеры позволяют пользователям настраивать размер шрифта текста. При слишком большом размере шрифта страница становится нечитаемой. Сокрытие не помещающегося в блок контента помогает предотвратить наползание элементов на странице друг на друга.

Блоки CSS 3: ГРАНИЦЫ, ПОЛЯ И ОТСТУПЫ

Управлять внешним видом блока можно с помощью трех следующих характеристик

1. Граница. Каждый блок имеет границы, даже если они не видны или их толщина равна 0 пикселям. Границы отделяют края одного блока от краев других.
2. Поля. Поля находятся за пределами границ. Вы можете настроить ширину полей для создания интервала между границами двух соседних блоков.
3. Отступы – это интервал между границами блока и его содержимым. Добавление отступов может улучшить удобочитаемость контента.

Если вы задали ширину блока, то границы, поля и отступы будут добавлены к его ширине и высоте.

Блоки CSS 3: ВОЗДУХ И ВЕРТИКАЛЬНЫЕ ПОЛЯ

Свойства padding и margin позволяют добавлять пустое пространство между различными элементами на странице.

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

Или представьте два блока, расположенных рядом (оба с черными границами): если бы они соприкасались, то линия между ними оказалась бы вдвое толще.

Если нижнее поле одного блока соприкасается с верхним полем другого, то браузер будет отображать их не так, как вы ожидаете. Программа покажет только большее из двух полей. Если оба поля имеют одинаковый размер, то браузер отобразит только одно из них.

Блоки CSS 3:ТОЛЩИНА ГРАНИЦ

border-width

Свойство border-width используется для управления толщиной границ. Данное свойство может принимать значение в пикселах или одно из следующих значений:

thin;

medium;

thick.

Для этого свойства нельзя задавать значение в процентах.

Вы можете устанавливать размер отдельных границ, используя следующие четыре свойства:

border-top-width;

border-right-width;

border-bottom-width;

border-left-width.

Вы также можете указать разную толщину для четырех границ в одном свойстве.

border-width: 2рх 1px 1px 2рх;

В данном случае значения перечислены по часовой стрелке: верхняя, правая, нижняя и левая границы.

Блоки CSS 3: СТИЛЬ ГРАНИЦЫ

border-style

Вы можете настраивать стиль границ, используя свойство border-style. Оно способно принимать следующие значения:

solid — непрерывная линия;

dotted — пунктирная в виде точек (если толщина границы равна 2 пикселам, то размер точки составляет 2 х 2 пиксела, а интервал между точками —2 пиксела);

dashed — пунктирная;

double — две сплошные линии (значение свойства border-width создает сочетание двух линий);

groove — врезанная линия;

ridge — выпуклая линия;

inset — вдавленная линия;

outset — выдавленная линия;

hidden/none — граница не видна.

Вы можете изменить стиль отдельных границ, используя следующие свойства:

border-top-style;

border-left-style;

border-right-style;

border-bottorn-style.

Блоки CSS 3: ЦВЕТ ГРАНИЦЫ

border—color

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

border-top-color;

border-right-color;

border-bottom-color;

border-left-color.

Кроме того, можно указать разные цвета для всех четырех границ в одном свойстве.

border-color: darkcyan deeppink darkcyan deeppink;

Здесь значения перечислены по часовой стрелке: верхняя, правая, нижняя и левая границы.

Вы также можете использовать значения HSL, чтобы указать цвет. Однако этот метод был введен только в CSS3 и не сработает в старых версиях браузеров.

СТЕНОГРАФИЧЕСКИЕ СВОЙСТВА

border

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

Блоки CSS 3: ОТСТУПЫ

padding

Свойство padding позволяет указать, сколько места должно быть между содержимым элемента и его границами. Значение этого свойства чаще всего указывается в пикселах (хотя также можно использовать проценты или единицы em). При использовании процентных значений размер отступа рассчитывается в процентном отношении к размеру окна браузера (или окружающей блока, если он есть). Обратите внимание: если для блока указана ширина, то значение отступа прибавляется к значению ширины.

В данном примере второй абзац воспринимается легче благодаря интервалу между текстом и границами блока. Из-за отступа ширина блока стала больше.

Вы можете задать различные значения для каждой стороны блока, используя свойства:

padding-top;

padding-right;

padding-bottom;

padding-left.

Вы также можете использовать стенографическое свойство, где значения перечисляются по часовой стрелке: верх, правая сторона, низ, левая сторона:

padding: 10px 5рх Зрх 1px;

Значение свойства padding не наследуется дочерними элементами таким образом, как значение color свойства font-family, поэтому вам нужно указать величину отступов для каждого элемента, которому они необходимы.

Блоки CSS 3: ПОЛЯ

margin

Свойство margin определяет интервал между блоками. Его значение обычно задается в пикселах, однако вы можете также использовать проценты или единицы em. Если один блок располагается поверх другого, то будут использоваться поля, имеющие наибольшее значение. Обратите внимание: если для блока указана ширина, то величина полей прибавляется к ее значению.

Вы можете указать значения для каждой стороны блока, используя свойства:

margin-top;

margin-right;

margin-bottom;

margin-left.

Вы также можете использовать стенографическое свойство, где значения перечисляются по часовой стрелке: верх, право, низ, лево:

margin: 1px 2рх 3рх 4рх;

Вам также может встретиться следующее выражение:

margin: 10px 20рх;

Оно означает, что значения левого и правого полей должны быть равны 10 пикселам, а значения верхнего и нижнего — 20 пикселам. Подобное краткое выражение может быть применено к значениям отступов.

Значение свойства margin не наследуется дочерними элементами таким же образом, как значение color свойства font-family, поэтому вам нужно указать величину полей для каждого элемента, которому они необходимы.

Блоки CSS 3: ЦЕНТРИРОВАНИЕ КОНТЕНТА

Если вы хотите поместить блок в центре страницы (или в центре элемента, в котором он находится), вы можете присвоить значение auto свойствам margin-left и margin-right.

Чтобы центрировать блок на странице, вам нужно указать его ширину (width), в противном случае он займет всю ширину страницы.

После указания ширины блока, задание значения auto для правого и левого полей дает браузеру команду создать одинаковый интервал с каждого края блока. Это приведет к центрированию блока на странице (или в содержащем его элементе).

Свойство text-align наследуется дочерними элементами, поэтому вам придется настроить его для блока, если вы не хотите, чтобы содержащийся в нем текст был отцентрирован.

ПРЕВРАЩЕНИЕ ВСТРОЕННЫХ ЭЛЕМЕНТОВ В БЛОЧНЫЕ И НАОБОРОТ

display

Свойство display позволяет превратить встроенный элемент в блочный и наоборот, а также может использоваться для скрытия элемента на странице. Оно способно принимать следующие значения.

inline

Это значение заставляет блочный элемент вести себя как встроенный.

block

Это значение заставляет встроенный элемент вести себя как блочный.

inline-block

Это значение заставляет блочный элемент располагаться как встроенный, но при этом сохранять остальные особенности блочного.

none

Это значение скрывает элемент на странице. В этом случае элемент действует так, будто вообще отсутствует (хотя посетитель может увидеть содержимое блока при просмотре исходного кода).

При использовании этого свойства важно знать, что встроенные блоки не предназначены для создания блочных элементов.

В этом примере представлен список. Каждый элемент списка обычно рассматривается как блочный, однако правило для элементов <li> указывает на то, что они должны рассматриваться как встроенные. Это означает, что они будут располагаться рядом друг с другом, а не на новых строках. Данная техника часто используется для создания меню навигации. В примере справа от каждого элемента было добавлено поле, чтобы отделить их друг от друга. Правило, которое применяется к элементу <li> с классом coming-soon, скрыто, будто оно отсутствует на странице.

СОКРЫТИЕ БЛОКОВ CSS

visibility

Свойство visibility позволяет скрывать блоки, но при этом оставлять пустое пространство на месте элемента. Данное свойство может принимать два значения.

hidden

Данное значение скрывает элемент.

visible

Данное значение отображает элемент.

Если для свойства visibility задано значение hidden, то на месте элемента появится пустое пространство.

Если вы хотите избежать появления пустого пространства, следует использовать свойство display со значением none (как говорилось в предыдущем разделе).

Обратите внимание, что посетитель может просмотреть содержимое любого скрытого элемента в исходном коде страницы.

Блоки CSS 3: ДЕКОРАТИВНЫЕ ГРАНИЦЫ

border-image

Свойство border-image применяет к границам блока изображение. Оно разделяет фоновое изображение на девять частей.

Ниже приведен пример.

Добавлены отметки разделения. В каждом углу расположен круг на расстоянии 18 пикселов от краев. Угловые фрагменты всегда располагаются в этих позициях, однако вы можете выбрать, будут боковые фрагменты растягиваться или повторяться.

Этому свойству требуется следующая информация: URL адрес изображения; расположение мест разделения изображения; что делать с боковыми фрагментами, при этом допустимые значения могут быть следующими:

stretch — растягивает изображение;

repeat — повторяет изображение;

round — повторяет изображение, но при несовпадении фрагментов масштабирует их.

Чтобы сделать изображение видимым, для блока нужно задать толщину границы.

Свойства -moz-border- image и -webkit-border- image отсутствуют в CSS, но позволяют более ранним версиям браузеров Chrome, Firefox и Safari отображать данный эффект.

Блоки CSS 3: ТЕНИ БЛОКОВ

box-shadow

Свойство box-shadow позволяет добавить тень вокруг блока. Оно работает так же, как свойство text-shadow. Данное свойство должно использовать, по крайней мере, первое из следующих двух значений, а также цвет.

ГОРИЗОНТАЛЬНОЕ СМЕЩЕНИЕ

Отрицательные значения позиционируют тень слева от блока.

ВЕРТИКАЛЬНОЕ СМЕЩЕНИЕ

Отрицательные значения позиционируют тень над блоком.

РАЗМЫТИЕ

Если данное значение отсутствует, то тень изображается в виде сплошной линии, как граница.

РАСПРОСТРАНЕНИЕ ТЕНИ

Если данный параметр используется, то положительные значения заставят тень выйти за пределы блока во всех направлениях, а отрицательные значения заставят тень сжиматься внутри блока.

Для создания внутренней тени также можно использовать ключевое слово inset, добавленное перед перечисленными значениями.

Браузеры Chrome, Firefox и Safari поддерживают данный эффект с помощью свойств -moz-box-shadow и -webkit-box-shadow. Они не входят в спецификацию CSS, но их использование обеспечивает работоспособность эффекта в перечисленных браузерах.

Блоки CSS 3: ЗАКРУГЛЕННЫЕ УГЛЫ

border-radius 

В спецификации CSS3 появилась возможность создания закругленных углов блока с помощью свойства border-radius. Значение указывает радиус в пикселах.

Старые версии браузеров, которые не поддерживают это свойство, будут ото­бражать блок с прямыми углами.

Свойства —moz-border-radius и —webkit-­border-radius не входят в спецификацию CSS, одна­ко их использование в некоторых версиях браузеров Chrome, Firefox и Safari обеспечивает работоспособность данного стиля. Вы можете указать различные значения для каждого угла блока следующим образом:

border-top-right-­radius;

border-bottom-right­-radius;

border-bottom-left­-radius;

border—top—left­-radius.

Вы также можете использовать стенографические свойства (по часовой стрел­ке: верх, правый угол, низ, левый угол), например:

border—radius: 5px, 10px, 5px, 10px;

Блоки CSS 3: ЭЛЛИПТИЧЕСКИЕ ФОРМЫ

border-radius

Для создания более сложных форм вы можете задать различные расстояния для горизонтальных и вертикальных частей округлых углов.

Например, данное выражение создаст закругление, ширина которого будет больше высоты:

border-radius: 80рх 50рх;

Вы можете настроить каждый угол в отдельности, используя разные свойства:

border-top-left-radius: 80pх 50рх;

Для одновременной настройки всех углов также существует стенографическое свойство: сначала вы указываете четыре горизонтальных значения, а затем четыре вертикальных.

Вы также можете создать круг, взяв за основу квадрат и задав его высоту в качестве значения свойства border-radius.