основы CSS

Основные блоки

CSS предполагает, что каждый элемент генерирует один или несколько прямоугольных блоков, называемых контейнерами элемента (element boxes). Основной частью каждого блока элемента является область

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

Блочные-строковые элементы

В CSS2.1 специфицированы еще два базовых типа элементов: блочные (block level) и строковые (inline level) элементы.

Блочные элементы

Блочные элементы (block level elements) генерируют блок, который (по умолчанию) полностью заполняет область содержимого своего родительского элемента; расположение других элементов, помимо этого блока, недопустимо. Тем самым он генерирует «разрывы» до и после блока элемента. Самые известные блочные элементы HTML: p и div. Элементы списка – особый случай блочных элементов. Помимо того, что их поведение аналогично поведению других блочных элементов, они генерируют маркер – как правило, буллет для ненумерованных списков и число для нумерованных – который «прикрепляется» к блоку элемента. Наличие маркера – это единственное отличие элементов списка от остальных блочных элементов.

Строковые элементы

Строковые элементы (inline level elements) генерируют блок элемента в строке текста и не разрывают ее. Лучший пример строкового элемента – тег <a> в XHTML. Также можно упомянуть элементы strong и em. Они не создают разрывов текста, поэтому могут находиться внутри содержимого другого элемента, не нарушая его внешний вид.

Пример:

Просмотр блока:

h3 {color: white; background: black; font: medium Helvetica}

Измениние элемента свойством:

{display: block;} {display: inline;}

Нормальный поток

Это воспроизведение текста, написанного на западных языках, слева направо и сверху вниз и обычная схема компоновки текста традиционных HTML документов. Обратите внимание, что направление потока может меняться для восточных языков. Большинство элементов размещается в нормальном потоке: элемент может покинуть его, лишь став свободно перемещаемым или абсолютно позиционированным .

Не замещаемый элемент

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

Замещаемый элемент

Элемент, который служит полем подстановки для чего то другого. Классический пример замещаемого элемента – элемент img, указывающий на файл изображения, подставляемого затем в поток документа в том месте, где находится сам элемент img. Большинство элементов формы также относятся к замещаемым (например, <input type="radio">).

Строковый элемент

Элементы, такие как strong или span. Они не генерируют «разрывов строки» перед или после себя и являются потомками блочных элементов. Такой элемент можно использовать для формирования блока строкового уровня,

объявив display: inline.

Блочный элемент

Элементы, такие как абзацы, заголовки или div. Эти элементы в нормальном потоке генерируют «разделители строк» как перед, так и после своих блоков, поэтому блочные элементы в нормальном потоке размещаются по вертикали. Элемент можно принудительно сделать блочным, объявив display: block.

Контейнер

В CSS каждый элемент располагается в блоке, которому можно задать значения полей (margin), заполнения (padding)

и границы (border). Поле является отступом элемента от соседних, а заполнение – пустой

областью между границей и содержимым