2020-05-11
343
В отличии от строгих привязок стандартных HTML-тегов к своему содержимому (например, тег <р> — абзац, <a> — ссылка), тег <div> является нейтральным. То есть в нем может содержаться разная информация: абзацы, ссылки, картинки, таблицы и т.д. И нужен он для того, чтобы описывать определенную функциональную область страницы (область заголовка, область меню, область основного контента), или внутри этих крупных функциональных блоков описывать «подблоки», например, рекламный блок в области заголовка.
Во-первых, рассмотрим основные описания CSS, которые касаются формы блока <div>. Следует отметить, что все это можно отнести ко многим другим элементам (картинкам, абзацам и т.п.)
На рисунке представлены основные свойства, задающие форму блока.
Рис. 3.1. Основные свойства CSS задающие форму блока
Свойство margin устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы этого элемента до внутренней границы его родительского элемента.
|
|
|
Примеры:
.element {
margin: 10px 20px 30px 70px;
}
Для любого элемента, который описан с использованием атрибута class=”element”, будут выполнены отступы от края экрана (или края родительского для него элемента): сверху – 10 пикселей, справа – 20, снизу – 30 и слева – 70 пикселей. Если указан только один параметр, то будет одинаковый отступ со всех четырех сторон. Если указаны только два параметра, то первый из них показывает величину отступа сверху и снизу, а второй – слева и справа.
Можно указать также конкретный параметр, например,
margin-top: 40px;
Можно указать также:
.element {
width: 200px;
margin: auto;
border: 5px solid #e9385a;
}
тогда элемент будет отцентрирован по горизонтали относительно родительского блока.
Свойство padding задает величину отступа от границы блока до его содержимого. Используется аналогично свойству margin.
Свойство border задает параметры рамки блока.
Примеры:
.element {
border-color: red green blue orange;
border-style: solid;
}
Рамка будет разного цвета со всех четырех сторон.
.element {
border: 2px solid #e9385a;
border-radius: 5px;
}
Рамка будет с закругленными углами, толщиной 2 пикселя.
Во-вторых, рассмотрим свойства, отвечающие за расположение блоков друг относительно друга.
Свойство display. Элементы HTML делятся на две основные категории: блочные и встроенные элементы. Блочные элементы (<div>, <p>, <h1> и т. д.) всегда занимают все возможное пространство по горизонтали и начинаются с новой строки. Встроенные элементы (<img>, <a> и т. д.) Занимают только необходимое пространство. Им не нужно начинаться с новой строки. Свойство display позволяет указать, какой из этих типов должен применяться к описываемому элементу.
|
|
|
Примеры:
.element {
display: inline;
}
Все элементы класса element (если их несколько подряд) будут расположены в одну строку.
.element {
display: block;
}
Каждый элемент класса element займет все возможное горизонтальное пространство, каждый будет выводиться с новой строки.
.element {
display: inline-block;
width: 200px;
height: 100px;
margin: 20px;
border: 5px solid black;
}
Все элементы этого класса будут выстроены в строку, но при изменении размера экрана или изменении остальных параметров в примере, будут перестраиваться, например-переходить в следующую строку.
Cвойство float. Позволяет указать как другие элементы должны «обтекать» данный элемент.
Например:
.element {
float: left;
width: 200px;
height: 100px;
margin: 20px;
border: 5px solid black;
}
.other-box {
clear: left;
}
Все элементы класса element будут прижиматься влево, а следующие за ними элементы будут обтекать их справа. Однако, если встретится элемент класса other-box, он начнет выводится с новой строки, так как свойство clear: left «обнуляет» предыдущие float.
Контрольные вопросы:
1. Для чего применяется технология CSS?
2. Почему используется понятие «Каскадные»?
3. К каким элементам могут быть привязаны стили?
4. Какие правила приоритетности в применении CSS вам известны?
Какие свойства используются для указания формы и оформления блоков?
