Поля, границы, отступы. Часть 2

Блочные и строчные элементы

В предыдущем уроке говорилось что все web-страницы распознаются как состоящие из блоков, но не все блоки одинаково распознаются в CSS. Существуют блоки, которые распознаются как блочные элементы, а часть распознаётся как строчные элементы.

Разница между ними заключается в отступах. Например, если взять элемент абзаца (p), то перед ним и после него автоматически добавится отступ, это присуще блочным элементам. Если же взять элемент таблицу (table) или изображение (img), то с ними никаких отступов не создаётся. Такие элементы называют строчными.

Но как быть в том случае, если необходимо сделать блочный элемент строчным или наоборот? В языке CSS есть команда, которая позволяет вам это сделать, — это свойство display. С его помощью можно заставить блочный элемент функционировать как строчный:

display: inline;

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

display: block;

Наконец, вы можете заставить элемент действовать и как блочный, и как строчный. Значение inline-block не создает разрывов ни до, ни после элемента и одновременно заставляет элемент подчиняться верхним и нижним полям и отступам, а также настройкам высоты:

display: inline-block;

Другое значение — none — полностью скрывает форматируемый элемент, чтобы он не отображался в окне браузера.

Добавление границ

В одном из предыдущих уроках встречалось свойство для создания границ border. Для настройки границ есть несколько значений: color (цвет), width (ширина) и style (стиль).

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

Ширина границы, по сути толщина линии, задается в любых единицах измерения CSS (кроме процентов) или ключевые слова thin (тонкая линия), medium (средняя) и thick (толстая).

Для стиля границ существует несколько вариантов: solid, dotted, dashed, double, groove, ridge, inset, outset, none и hidden. Ключевые слова none и hidden работают одинаково: они полностью удаляют границы.

Пример записи границы:

border: 2px dashed rgb(20,100,156); - порядок значений в свойстве границ может быть любым.

Если есть необходимость менять границы отдельно с каждой стороны элемента, то стоит воспользоваться следующими свойствами: border-top; border-left; border-right; border-bottom.

Установка цвета фона

С помощью свойства background-color можно задать фон как для всей страницы, так и для отдельных элементов (абзац, заголовок и т.п.).

body {

background-color: rgb(247,226,155);

}

p {

background-color: rgba(255,255,255,.75);

}

Закругление углов

Браузеры рассматривают все элементы как прямоугольные блоки. На этот случай есть возможность сгладить острые углы таких прямоугольников, добавив к стилям скругленные углы. В CSS представлено свойство border-radius, позволяющее добавлять закругления к одному или нескольким углам элемента. В самом простом варианте свойство border-radius получает одно значение, которое затем применяется ко всем четырем углам элемента:

.skrug{

border-radius: 20px;

}

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

.skrug{

border-radius: 20px 10px 0px 30px;

}

Можно задать только два значения, тогда первое число будет применено к левому верхнему и правому нижнему углам, а второе — к правому верхнему и левому нижнему углам.

Добавление тени

Чтобы добавить объём тексту к нему можно добавить тень. Для добавления теней к блоку, ограничивающий элемент (например, div), используется свойство box-shadow.

Синтаксис box-shadow:

box-shadow: Apx Bpx Cpx #DDDDDD

Apx – задает горизонтальное смещение, то есть это значение приводит к перемещению тени влево или вправо от элемента. Положительное число приводит к перемещению тени вправо, а отрицательное число — влево.

Bpx – задает вертикальное смещение, то есть это значение приводит к перемещению тени вверх или вниз от элемента. Положительное число приводит к перемещению тени вниз, а отрицательное число — вверх.

Cpx – задает радиус размытия тени. Оно определяет степень размытости и ширины тени. Значение 0 не придает эффекта размытости, то есть получается тень с четкими краями. Чем выше значение, тем более размытой и тусклой становится тень.

#DDDDDD – значение задает цвет отбрасываемой тени. Можно воспользоваться любым обозначением цвета, принятым в языке CSS.