Модель компоновки CSS

Цвет границы: свойства border-color

Для каждой границы можно задать любой цвет с помощью сокращенного свойства border-color или его уточнения. Например

TD {border-color: ##FF0000;}

Заполнение элемента: свойство padding

Заполнение определяет внутреннее расстояние между границей и содержимым элемента. Для изменения этой характеристики предназначено свойство padding. Оно позволяет задать расстояние между границей и содержанием для всех или определенных сторон элемента. Это свойство действует аналогично margin, поэтому итоговый результат зависит от числа аргументов. Для указания расстояний от разных сторон элемента можно воспользоваться свойствами padding-left, padding-right, padding-top и padding-bottom, которые управляют величиной расстояния слева, справа, сверху и снизу соответственно.

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

DIV.first {padding: 20px;} 
 
DIV.second {padding: 10px; 
            padding-left: 50;}

В данном примере создается два блока с разными характеристиками. В первом блоке вокруг текста по вертикали и горизонтали с помощью свойства padding задается одинаковое поле со значением 20 пикселов. Во втором блоке поле слева увеличено через свойство padding-left.

Установка высоты и ширины элемента

Установить высоту и ширину элемента можно с помощью свойств height и width соответственно. Однако при применении данных свойств существуют некоторые особенности. Например, данные свойства не могут применяться к строковым элементам HTML, таким, как, например, SPAN, STRONG или EM.

Работа с потоком элементов

Типы блоков: свойство display

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

Свойство display имеет три наиболее часто используемых значения - block, inline и none - два из которых имеют прямое отношение к соответствующим типам элементов. Данное свойство позволяет изменить поведение элементов (например, строковый элемент будет вести себя как блочный или наоборот). Свойство display со значением none может изменять представление данного элемента в документе. Например, с помощью следующего правила можно удалить посторонний фрагмент из заголовка:

.sectionNote {display: none;}

"Всплывающие" элементы: свойства float и clear

Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может смещаться к правому или левому краю в окне документа (или содержащего бокса). Если необходимо, например, чтобы текст окружал рисунок, как показано на рисунке 13.4, то фрагмент кода должен выглядеть следующим образом:

...
<STYLE type="text/css">
  #picture {
            float:left;
            width: 130px;}
</STYLE>
...
<DIV id="picture">
<IMG src="Beatles.jpg" alt="The Beatles">
</DIV>
<P>Far away, 80000 leagues below the sea, ... </P>
...

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

Рис. 13.4. Пример обтекания рисунка текстом

Свойство clear управляет поведением последовательности всплывающих элементов документа. По умолчанию, последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс смещается в сторону. Например, в предыдущем примере текст автоматически смещается вверх вдоль изображения. Свойство clear может иметь значения left, right, both или none.