2020-09-24
142
Блочная модель
Любой элемент веб - страницы включает в себя следующие составляющие:
- margin (поля) – пустое место за пределами тега, которое отделяет один тег от другого;
- border – граница определенного цвета, которая обрамляет тег;
- padding (отступы) – пустое пространство внутри тега, которое отделяет содержимое тега от границы;
Свойство padding (значение по умолчанию = 0) позволяет задать отступы от границы тега до начала его содержимого. Это свойство универсальное. С его помощью можно задать отступ сразу для всех границ тега. В тоже время существуют подобные свойства, позволяющие задать отступ только для одной из сторон:
- padding-left – левой границы тега;
- padding-right – правой границы тега;
- padding-top – верхней границы тега;
- padding-bottom – нижней границы тега;
Отступ задается числовым значением с указанием единицы измерения, как правило в px. Кроме числового значения, может применяться ключевое слово inherit. Оно указывает браузеру, что отступ у данного тега такой же, как и у родительского тега.
|
|
|
Для универсального свойства padding можно через пробел задать сразу четыре значения в следующей последовательности: отступ сверху, справа, снизу и слева (т. е. по часовой стрелке), например:
div {
padding: 7px 3px 23px 11px;}
Итак, padding позволяет задать пустое пространство между содержимым тега и его краями, тем самым сделать текст более читабельным, а дизайн более привлекательным.
Свойство margin (значение по умолчанию = 0) задает внешний отступ до границы тега, т.е. позволяет отделить тег от других тегов на странице. Как и свойство padding, свойство margin является универсальным свойством, в котором через пробел задаются отступы сразу для четырех сторон тега (по часовой стрелке).
Свойство border – задает границу между внешними и внутренними отступами. Для свойства могут быть указаны значения через пробел толщина границы, ее тип и цвет. Например: border: 1px solid #fff;
Свойство border является универсальным. Оно заменяет сразу три отдельных свойства: border-width, border-style, border-color.
border-width – позволяет задать толщину сразу для всех сторон границы либо отдельно для каждой из сторон:
- если указываете одно значение – свойство (толщина) применяется для всех сторон;
- если указывается два значения через пробел – устанавливается толщина верхней и нижней границы равное первому значению, левой и правой границы – второе значение;
- если указывается через пробел четыре значения – то для разных сторон (по часовой стрелке).
border-style – позволяет задать стиль отображения всей границы тега либо конкретно для каждой из сторон. В качестве значений могут выступать следующие ключевые слова:
|
|
|
- none- скрыть границу;
- solid – сплошная линия;
- dotted – граница из точек;
- dashed – пунктирная линия;
- double – двойная параллельная линия;
- groove – трехмерный эффект линии;
- insert – граница вдавливается внутрь;
- outset – граница выступает наружу;
- ridge -трехмерный эффект линии;
border-color – задает цвет границы. При необходимости можно задать для каждой стороны свой цвет границы.
После запуска веб – страницы в браузере можно посмотреть блочную модель конкретного элемента. Для этого в контекстном меню элемента необходимо выбрать пункт Посмотреть код. В браузере будет показан код элемента, его стили и блочная модель:
Если явным образом не указываются значения свойств margin, padding и berder, то браузер применяет предустановленные значения.
Свойство border-radius – позволяет округлить границу. Свойство принимает значение радиуса в пикселях или единицах em. Если значение одно, то все углы округляются одинаково. Можно для каждого угла задать вой радиус округления.
Размеры элементов
Размеры элементов задаются с помощью свойств width (ширина) и height (высота). Значение по умолчанию у этих свойств auto, т.е. браузер сам определяет ширину и высоту элемента. Можно явно задать разметы элемента с помощью единиц измерения пиксели или em, а также в процентах. Пиксели определяют точные размеры, единица измерения em зависит от высоты шрифта в элементе. Процентные значения для свойств вычисляются на основании элемента – контейнера.
Фон элементов
Свойство CSS background используется для форматирования фона элементов html. Фактически это свойство состоит из следующего набора свойств CSS:
background-color -определяет цвет фона элемента, background-color: #ccc; Ряд настроек цвета позволяет установить значение для альфа- компоненты, которая отвечает за прозрачность. В CSS за прозрачность элемента отвечает свойство opacity, в качестве значения оно принимает значение от 0 (полностью прозрачный) до 1 (не прозрачный):
div{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.4;}
background-image - используется для определения изображения, которое будет использоваться в качестве фона: background-image:url('paper.gif'); По умолчанию, фоновое изображение повторяется по горизонтали и вертикали.
background-repeat – устанавливает режим повторения фонового изображения по всей поверхности элемента. Принимает следующие значения:
- repeat-x – повторение по горизонтали;
- repeat-y – повторение по вертикали;
- repeat – повторение по обеим сторонам (значение по умолчанию);
- space – изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов;
- round – изображение должным образом масштабируется для заполнения всего пространства;
- no-repeat – изображение не повторяется.
background-size – устанавливает размер фонового изображения. Для установки размера можно использовать либо единицы измерения (пиксели), либо проценты, либо одно из следующих значений:
- contain – масштабирует изображение по наибольшей стороне, сохраняя аспектное соотношение;
- cover - масштабирует изображение по наименьшей стороне, сохраняя аспектное соотношение;
- auto – изображение отображается в полный размер, значение по умолчанию.
Если нужно масштабировать изображение таким образом, чтобы оно оптимально было вписано в фон, то для обеих настроек можно установить значение 100%: background-size: 100% 100%;
background – position – указывает позицию фонового изображения. Свойство может принимать отступы от верхнего левого угла элемента в единицах измерения (пикселях) в следующем формате: background-position: отступ_по_оси_Х отступ_по_оси_Y; Либо одно из следующих значений:
- top – выравнивание по верхнему краю элемента;
- left – выравнивание по левому краю элемента;
- right – выравнивание по правому краю элемента;
- bottom – выравнивание по нижнему краю элемента;
- center – расположение по центру элемента.
|
|
|
background-attachment – устанавливает стиль прикрепления фонового изображения к элементу. Свойство принимает следующие значения:
- fixed –фон элемента фиксирован вне зависимости от прокрутки внутри элемента;
- local – по мере прокрутки внутри элемента фон изменяется;
- scroll – фон фиксирован и не меняется при прокрутке, но в отличии от fixed несколько элементов могут использовать свой фон.
background-clip – определяет область, которая вырезается из изображения и используется в качестве фона. Принимает значения:
- border - box – изображение обрезается по границам элемента;
- padding - box –из изображения исключается та часть, которая находится под границами элемента;
- content - box – изображение обрезается по содержимому с учетом внутренних отступов.
background-origin – устанавливает начальную позицию фонового изображения. Может принимать следующие значения:
- border - box –фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border;
- padding - box –фон устанавливается с учетом внутренних отступов;
- content - box – фон устанавливается по содержимому элемента.
В свойстве background можно скомпоновать все ранее рассмотренные свойства или некоторые их них: background:#ссс url('img_tree.png') no-repeat right top;
