Один из способов планировки HTML-документов получил название модели с контейнерами (box model). В ней маленькие контейнеры заполняют все пространство, отведенное под контейнеры средних размеров, которые в свою очередь размещаются. Самый большой контейнер можно ассоциировать с элементом html, охватывающим в документе все остальные. Следующий по размерам «ящичек» для модели - элемент body, содержащий самые маленькие контейнеры - абзацы, таблицы, списки, заголовки и т.д.
Элементы языка XHTML можно разделить на две группы: элементы блочного уровня и внутренние (inline) объекты. В браузере отображение элементов блочного уровня (заголовков, абзацев и встроенного потокового объекта div) всегда начинается с новой строки. В отличие от них внутренние элементы (вида em, strong, span) размещаются только в текущей строке.
Внимание! С помощью CSS-свойства display можно изменить модель
отображения элементов, однако для использования такого механизма необходимы очень серьезные причины. Поэтому рекомендуется исключить действия, направленные на изменение семантики, которая закреплена за каждым объектом. В случае необходимости подберите элемент с корректной семантикой и работайте с ним.
Для каждого элемента блочного уровня можно указать три окружающих его области: margin - поле, border - обрамление и padding - заполнение (рис. 11.5). Эти области обычно задаются с указанием их ширины и высоты. При отображении они определяют интервалы между блоками. Область границы служит для цветового или любого другого выделения рамки элемента.
Пример. В документе, представленном в листинге 11.2, есть элемент «заголовок» и два простых абзаца. Для демонстрации свойств областей блочного элемента определены два правила стиля, использующие селекторы hi и р.
Ширина граничных элементов, окружающих заголовок сверху и снизу и окрашенных зеленым цветом, составляет десять пикселов. Линии рамок, ограничивающие абзацы со всех сторон, отображаются фиолетовым цветом, их ширина составляет два пиксела. Каждый абзац отодвинут от левого края экрана на 4 em (em - высота шрифта элемента), содержательная часть по внутреннему периметру отделена от границ рамки (область заполнения) полями шириной 1 em.
Листинг 11.2 содержит простой XHTML-документ, к которому применяются каскадные таблицы стилей из файла box.css.
Листинг 11.2. Документ, в котором использованы стили из файла box.css
<html> <head>
<link rel="stylesheet" href="box.ess">
</head> <body>
<hl>Bbi в Kypce?</hl>
<р>Приведенная ниже фраза содержит все буквы латинского алфавита.
Наверняка этот пример знаком тем, кто учится машинописи.</р>
<p>The quick brown fox jumped over the lazy dog.</p>
</body>
</html>
В листинге 11.3 записаны правила стиля для свойств элементов-блоков. Стиль применяется к XHTML-документу, представленному в листинге 11.2.
Листинг 11.3. Правила стилей для элементов-блоков в XHTML-документе
hi {border-top-width:Юрх; border-bottom-width:Юрх; border-style:solid; border-color:green;}
p {border-width:2px; border-color purple-padding: 1 em; margin-left:4em;}
На рис. 11.6 представлен результат применения правил стиля к исходному документу, в частности поля заполнения, окружающие с четырех сторон текстовые блоки и отделяющие их от внутренних границ соответствующих рамок, а также увеличенные поля отступа абзацев от левого края экрана.
Опубликовал vovan666
April 08 2013 14:57:32 ·
0 Комментариев ·
3998 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
