Основы визуального форматирования
В этой главе:
- Модель представления в виде блоков
- Поля в CSS (margin)
- Отступы в CSS (padding)
- Рамки в CSS (border)
- Типы блоков
- Изменение типа блока – свойство display
Во всех встречавшихся примерах данной части книги мы уже многократно использовали различные свойства CSS, хотя формально их еще не изучали. И хотя хорошо было бы продолжать знакомиться с общими концепциями оформления в CSS, в частности, с визуальным форматированием, ознакомиться с некоторыми свойствами уже сейчас, поскольку одними только интуитивно понятными «font» и «color» тут уже не ограничиться. Ну а начнем мы с модели блоков, без которой невозможно разобраться в самой сути форматирования, и связанной с ней свойств – отступов, полей и границ.
Модель представления в виде блоков
Модель представления документа в виде блоков, используемая в CSS, вводит понятие прямоугольных областей, которые генерируются для элементов документа и отображаются в нем в соответствии с моделью визуального форматирования, с которой мы подробно познакомимся в следующей главе. А пока разберемся с тем, что представляет собой блок в CSS 2.
Итак, каждый блок, прежде всего, имеет информативную область, в которой заключено содержимое породившего его элемента (например, текст абзаца). Наряду с ней он также может иметь области, отведенные для оформления отступов, границ и полей (рис. 3.6). Размер каждой из этих областей задается соответствующими свойствами CSS.
Рис. 3.6. Схема и терминология блочной модели
Поля, границы и отступы могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на рис. 3.6., «Л.П.» обозначает левое поле, «Л.Г.» – левую границу, а «Л.О.» – левый отступ).
Периметр каждой из четырех областей (информативной области, поля, границы и отступа) называется краевой линией. Таким образом, каждый блок имеет четыре типа краевых линий, соответствующих заключенным в них областям. Это:
- Краевая линия информативной области или внутренняя краевая линия, которая окружает отображаемое содержимое элемента, порождающего блок;
- Краевая линия отступов, окружающая ту область блока, которая используется для оформления отступов. Если эта область имеет нулевую ширину, то край отступов совпадает с краем информативной области;
- Краевая линия границы окружает границу блока. Если ширина границы равна нулю, то ее край совпадает с краем отступов. Именно краевая линия отступов задает границы контейнера;
- Краевая линия поля, или внешняя краевая линия, окружает поле блока. Если ширина поля равна нулю, то ее край совпадает с краем границы.
Подобно самим полям, любая краевая линия может быть разбита на четыре сегмента: левый, правый, верхний и нижний (left, right, top и bottom). Соответственно, по этим краевым линиям и определяются размеры блока. Так, расстояние между левой и правой внутренними краевыми линиями – это ширина содержимого блока, а между верхней и нижней – его высота.
За размеры полей, рамок и отступов отвечают такие свойства CSS, как margin, border и padding. За что отвечает то или иное свойство хорошо видно по рис. 3.6, а так же из примера в файле box.html.
Поля в CSS (margin)
Теперь, когда мы уже знаем о том, что такое блочная модель, можно подробно рассмотреть отвечающие за ее оформление свойства CSS. Начнем с внешней границы – полей.
Как известно, поля бывают с четырех сторон – слева, справа, сверху и снизу. Соответственно, в CSS предусмотрены четыре свойства – margin-left, margin-right, margin-top и margin-bottom. Кроме них, существует и сокращенный формат записи – margin, задающий все поля сразу. Значения для полей задаются либо в абсолютных размерах (length), либо в процентах по отношению к ширине содержащего блока.
ВНИМАНИЕ
Всегда следует учитывать, что для каждого блока существует содержащий его блок-контейнер, по отношению к которому рассматриваемый блок будет дочерним. Для элемента BODY, являющимся начальным контейнером для других элементов, содержащим контейнером является окно браузера.
Кроме абсолютных или относительных размеров, ширину полей можно задать при помощи ключевого слова auto, при этом браузер будет вычислять размеры на основе специального алгоритма. Однако на практике так лучше не поступать, поскольку результат не всегда получается ожидаемым, да и алгоритмы у разных браузеров отличаются. Еще одно допустимое значение для указания ширины полей – это inherit, указывающее на то, что размер полей должен быть наследован от родительского элемента.
Теперь давайте рассмотрим задание полей на практике, для чего обратимся к листингу 3.5.
Листинг 3.5. Поля CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Поля</title>
<style type="text/css">
div {margin: 50px; background: lightgray;}
p {margin-top: 2em; background: gray;}
ul {margin-left: 25%; background: gray;}
li {margin-bottom: 10px; background: white;}
</style>
</head>
<body>
<div>
Начало блока
<p>
Абзац с полем 2 символа сверху. Далее - список с полем 25% от ширины div.
</p>
<ul>
<li>Строка списка с полем снизу 10 пикселей</li>
<li>Еще строка списка</li>
</ul>
Конец блока
</div>
</body>
</html>
Прежде всего, мы определили общий для всех остальных элементов контейнер DIV с полями в 50 пикселей с каждой стороны. Поля у этого контейнера будут начинаться от границ области построения окна браузера. Затем определено поле сверху размером в 2 символа для элементов P. Далее идет процентное определение левого поля ненумерованного списка. Поскольку в приведенном коде XHTML этот список вложен в контейнер DIV, то 25% будут вычисляться относительно ширины этого контейнера, являющегося родительским по отношению к UL. И, наконец, для элементов списка задано нижнее поле шириной (или, если угодно – высотой) в 10 пикселей. Кроме того, для всех перечисленных элементов указан еще и цвет фона, чтобы видеть границы блоков, создаваемых всеми этими элементами (рис. 3.7).
Рис. 3.7. Поля и границы блоков
Внимательно посмотрев на вывод примера (файл margin.html), мы можем отметить некоторые оптимизации, произведенные браузером. Так, у нижнего поля второй строки списка де-факто поле отсутствует. А если посмотреть пример не в Mozilla, а в MSIE или Opera, то выяснится, что у списка закрашенной областью будет только само поле между строками. В то же время, ширину поля все три браузера установят верно, а к вопросу фоновой закраски мы еще вернемся в главе, посвященной основному оформлению.
Из всех рассмотренных свойств полей следует еще раз обратиться к margin, поскольку это свойство является образцом часто применяемых в CSS сокращенных форматов. В рассмотренном примере (листинг 3.5) мы использовали только одно значение, что привело к установке равных полей со всех сторон. Однако как для margin, так и для других подобных записей, с которыми мы будем встречаться в дальнейшем, допустимо указание сразу нескольких значений – до 4-х, по числу сторон прямоугольника:
div {margin: 1em 2em 3em 4em;}
Такая запись равнозначна указанию всех четырех свойств полей в таком виде:
div {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4em;
}
Запомните порядок следования сторон – верхняя, правая, нижняя и левая, – это пригодится не только для полей, но и для других свойств, имеющих значения по сторонам, включая такие, как отступы и рамки. Кроме того, можно указать только 2 или 3 значения. В случае если указано 2 значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому. Если 3, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему:
body {margin: 50px 20px 30px}
В данном случае второе значение будет назначено не только правому полю, но и будет «скопировано» для левого:
body {
margin-top: 50px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
}
Завершая тему полей, следует отметить тот факт, что поля соседних элементов могут перекрываться, т.е. сливаться в одно поле. При этом размер поля будет равен размеру большего из перекрывающихся полей. Допустим, у нас имеется несколько идущих подряд абзацев, для которых определено верхнее и нижнее поля шириной в 2 и 3 символа, соответственно:
p {margin-top: 2em; margin-bottom: 3em;}
В таком случае расстояние между двумя абзацами будет не 5 символов (2+3=5), а только 3 символа (max(2,3)=3). Исключение составляют горизонтальные поля (левое и правое) – по правилам CSS 2.x они никогда не перекрываются. То же касается всплывающих (перемещаемых, обтекаемых – float) и абсолютно или относительно позиционированных элементов.
Свойства margin
Значение по умолчанию: не определено.
Наследуемые значения: нет.
Применяется: ко всем элементам, кроме вложенных элементов таблиц.
Совместимость: все.
Отступы в CSS (padding)
Как нам известно, помимо внешних полей, в CSS существуют еще и внутренние границы, или отступы. Подобно полям, отступы бывают с четырех сторон – слева, справа, сверху и снизу. Следовательно, в CSS мы получаем четыре свойства – padding-left, padding-right, padding-top и padding-bottom. Кроме них, существует и сокращенный формат записи – padding, задающий все отступы сразу. Значения для отступов задаются либо в абсолютных размерах (length), либо в процентах по отношению к ширине содержащего блока – пока все выглядит в точности так же, как и у полей margin. Отличия начинаются с возможных значений: если для полей существовало значение auto, то для отступов такового не предусмотрено. Кроме того, отступы никогда не перекрываются, т.е. если мы определим блок с отступом 10 пикселей сверху и 20 – снизу, то суммарный отступ между содержимым этих блоков будет 30 пикселей:
div {padding-top: 10px; padding-bottom: 20px;}
Еще одно отличие состоит в том, что внутреннее поле относится к области контейнера, порожденного элементом, а, следовательно, на отведенную под отступы область распространяется действие иных стилей, применяемых к данному элементу (например, это может быть фон, исключением является только такой «древний» браузер, как Netscape 4). Таким образом, при помощи отступов можно регулировать расстояние от содержимого блока до его рамки или до других блоков, не опасаясь, что где-то они перекроются.
Наконец, последнее отличие состоит в том, что свойство padding можно назначать ячейкам таблицы (свойство margin из «табличных» элементов может применяться только на элемент TABLE):
th {padding: 5px 10px;}
Здесь мы для всех заголовочных ячеек таблицы задали отступы размером в 5 пикселей сверху и снизу, и 10 – слева и справа. Сразу отметим, что средствами HTML тоже можно задать отступ в ячейках – при помощи атрибута CELLPADDING элемента TABLE. Но такой способ, как и любое HTML-форматирование, не отличается гибкостью: размер полей будет одинаковым со всех сторон, а действие такого правила распространится на все ячейки таблицы, а не только на заголовочные, как в нашем примере, или вообще на избранные ячейки, определи мы класс или задай иной, более сложный селектор. Пример такой таблицы можно посмотреть в файле padding.html.
Свойства padding
Значение по умолчанию: не определено.
Наследуемые значения: нет.
Применяется: ко всем элементам, кроме всех элементов таблиц за исключением ячеек.
Совместимость: все.
Рамки в CSS (border)
Из всех полей, имеющихся у блока, нам осталось рассмотреть последнее – границу, или рамку. Пожалуй, граница является самой интересной областью среди всех рассмотренных, поскольку представляет собой не какое-то абстрактное поле, а видимый и вполне осязаемый элемент оформления.
Визуально граница представляет собой рамку, которая, помимо определенной ширины, может иметь свой собственный стиль и цвет. Соответственно, для рамок определено 12 уникальных свойств и 8 сокращенных – всего целых 20 свойств(!). Поскольку граница – тоже поле, то начнем с его ширины. В CSS для этого имеются следующие свойства: border-top-width, border-right-width, border-bottom-width и border-left-width. Как водится, имеется и общее свойство, задающее толщину рамки со всех сторон сразу – border-width.
Подобно другим полям, значения для границ задаются либо в абсолютных размерах (length), либо в процентах по отношению к ширине содержащего блока. Так же, как и отступы, границы не перекрываются и не имеют значения auto. В то же время, для рамок определено несколько значений, задающих ее толщину при помощи ключевых слов. Это thin (тонкая рамка), medium (средняя) и thick (толстая). Конкретные значения в таком случае задаются браузером и зависят от того, что именно разработчики программы понимают под значениями слов «тонкий», «средний» и «толстый» (посмотреть, что где получится, можно на примере файла borderthin.html). Иначе говоря, если вам важно, чтобы страница выглядела именно так, как вы добиваетесь и ни на йоту иначе, то старайтесь избегать практики указания толщины рамки при помощи ключевых слов.
ПРИМЕЧАНИЕ
Однако значение medium все-таки имеет для нас практическую ценность, поскольку, если воспользоваться «самым сокращенным» синтаксисом назначения свойств границы (border), то браузер назначит именно его. Как правило, это что-то около 3-4 пикселей.
Итак, попробуем задать рамку для параграфа с классом boxed. Пусть она будет шириной в 1 символ (скажем так, очень толстой) со всех сторон, для чего создадим такой селектор и правило:
p.boxed {border-width: 1em}
Если теперь в теле HTML-документа создать элемент P с классом boxed, и посмотреть результат в браузере, то можно увидеть, что ничего не изменилось: не будет не только рамки, но и никакие отступы не изменятся. Это связано с тем, что для любой рамки, прежде всего, необходимо задать стиль, а в противном случае (если стиль явно не указан), все остальные параметры игнорируются. Таким образом, мы переходим к стилю рамки, который задается свойствами border-top-style, border-right-style, border-bottom-style, border-left-style и border-style (последнее свойство, как нетрудно догадаться, является сокращенным форматом). Что касается возможных значений для этих свойств, то в CSS 2.1 они могут быть такими, что приведены в таблице 3.4.
| Значение | Примечание | Описание |
|---|---|---|
| none | - | Граница отсутствует, ее толщина устанавливается в 0 (но если у граничащей ячейки граница определена, то она будет присутствовать со стороны такой ячейки) |
| hidden | Только для ячеек таблиц, кроме MSIE | То же, что и none, но имеет приоритет перед любыми другими значениями, указанными в соседних ячейках (т.е. границ не будет ни в каком случае, что бы ни было указано в качестве border у граничащих ячеек) |
| dotted | Кроме Netscape 4 и MSIE 4/5 | Граница в виде рамки из пунктирной линии |
| dashed | Кроме Netscape 4 и MSIE 4/5 | Граница в виде рамки из штриховой линии |
| solid | - | Граница в виде рамки из сплошной линии |
| double | - | Граница в виде рамки из сплошной двойной линии |
| groove | Кроме MSIE 4 | Граница в виде рамки из вдавленной линии |
| ridge | Кроме MSIE 4 | Граница в виде рамки из выпуклой линии |
| inset | - | Граница в виде рамки из «вдавленной» линии (блок выглядит как нажатая кнопка) |
| outset | - | Граница в виде рамки из «выпуклой» линии (блок выглядит как отжатая кнопка) |
Чтобы наглядно разобраться со значениями, определяющими внешний вид рамок, достаточно взглянуть на файл borders.html, в котором приведены границы всех видов примерно таким образом:
border-style: dotted;
Т.е. рамка задается сразу со всех сторон. Конечно, можно определить разные виды рамок для каждой из сторон границы, однако при этом, как правило, возникает вопрос эстетической пригодности подобного творения:
div.BorderMix {
border-left-style: dotted; border-right-style: dashed;
border-top-style: ridge; border-bottom-style: double;
}
В то же время, иногда может понадобиться выделить рамкой лишь одну сторону. Например, чтобы отчеркнуть заголовок, лучше использовать не элемент-разделитель HR, а определить рамку снизу:
h1 {border-bottom-style: groove;}
Если вы просматривали примеры рамок, то могли заметить, что все они имеют тот же цвет, что и цвет шрифта самого блока (или, в случае объемных стилей – базируются на этом цвете). Поскольку рамка по своей сути элемент декоративный, то логично ожидать от CSS возможности изменять ее цвет. Для этого мы вновь имеем 5 свойств: border-top-color, border-right-color, border-bottom-color, border-left-color и border-color. Цвета в таблицах стилей, как известно, можно задавать при помощи ключевых слов, либо по RGB-составляющей при помощи функции «rgb()» или в шестнадцатеричной нотации. Поскольку вопрос цветов во всех подробностях будет рассматриваться позже, ограничимся здесь лишь символьными представлениями:
div.f1 {
border-style: solid; border-color: green; border-top-color: red;
}
Здесь мы определили сплошную рамку для элементов DIV с классом «f1», имеющую зеленый цвет, за исключением верхней части, которая будет красной.
ПРИМЕЧАНИЕ
Кстати, здесь мы встречаемся с очередным примером каскадирования – только на сей раз не в селекторе, а в группе свойств: значение более специфического свойства «border-top-color» перекрывает значение общего «border-color».
Таким образом, мы уже рассмотрели все три параметра границ – толщину, стиль и цвет, причем для каждого из них предусмотрено по 5 свойств, что в сумме дает 15 свойств, хотя в самом начале говорилось о 20. Так вот, на самом деле, самым часто применяемым на практике свойством границ является border. Это свойство объединяет в себе три других общих свойства – border-width, border-style и border-color, т.е. используется для одновременного определения ширины, цвета и стиля всех четырех сегментов границы блока:
p {border: 2px solid red;}
Таким образом мы сразу задали все свойства для рамки вокруг абзаца. Однако в отличие от уже рассмотренных общих свойств, в border нельзя указывать значения для отдельных сторон. Для этих целей имеются 4 других обобщенных свойства, каждое из которых полностью определяет свойства отдельной стороны границы. Это border-top, border-right, border-bottom и border-left:
p {border-left: 10px double green; border-right: 3px solid blue;}
Это определение равнозначно такому:
p {
border-left-width: 10px;
border-left-style double;
border-left-color: green;
border-right-width: 3pxl
border-right-style: solid;
border-right-color: blue;
}
Очевидно, что возможность использования сокращенных форматов свойств CSS для рамок особенно актуальна.
Свойства CSS border
Значение по умолчанию: для ширины – medium, для стиля – none, для цвета – равное цвету блока (свойство color).
Наследуемые значения: нет.
Применяется: ко всем элементам.
Совместимость: все (см. примечания по тексту).
Типы блоков
Теперь, когда мы уже знакомы с понятием блока в CSS, вспомним о том, что элементы HTML подразделяются на элементы уровня блока и строковые элементы. С точки зрения таблиц стилей, любой элемент является блоком, однако тип блока может быть структурным (подобно тому, что в HTML называется элементом уровня блока – block-level) и строковым (inline как в HTML, так и в CSS). Кроме того, в CSS различаются и менее общие типы блоков, в частности строка списка или таблица.
Как строковые, так и структурные блоки могут быть двух типов – заменяемыми и незаменяемыми. К заменяемым элементам причисляются все элементы, для которых известна только их внутренняя размерность, т.е. ширина и высота определяется самим элементом, а не его окружением. Примером заменяемого элемента в HTML может быть IMG, TEXTAREA, IFRAME или OBJECT. Все остальные элементы (или блоки) являются незаменяемыми.
Наконец, в блочной модели предусмотрены также безымянные блоки – т.е. какое-либо содержимое, не привязанное конкретно ни к одному другому блоку. При этом безымянные блоки могут быть как структурными, так и строковыми. Само по себе наличие безымянных блоков вызвано тем, что, с точки зрения таблиц стилей, в документе не может быть, скажем, «просто текста», но любое содержимое в конечном итоге должно представлять собой тот или иной блок. Для примера рассмотрим элемент DIV и вложенные в него текст и абзац с текстом:
<div>
Просто текст
<p>Текст абзаца</p>
</div>
Здесь мы явно видим два блока – контейнер DIV и вложенный в него контейнер P. Однако в конечном представлении браузера к этим двум блокам добавится еще один, безымянный, в котором будет находиться «просто текст» (рис. 3.8).
Рис. 3.8. Три блока, один из которых безымянный
Свойства безымянных блоков наследуются от содержащего их блока, который не является безымянным (в данном случае – от элемента DIV). Ненаследуемые свойства принимают значения, используемые по умолчанию. Например, шрифт (наследуемое свойство), используемый для отображения безымянного блока, наследуется от элемента DIV, но значение ширины его полей будет равно нулю (т.к. ширина полей не наследуется, но равна нулю по умолчанию).
Подобным образом дело обстоит и со строками:
<p>Абзац с <strong>выделенным</strong> текстом</p>
В данном случае будет создано 2 безымянных строковых блока: один – для «Абзац с», а другой – для «текстом». В то же время элемент STRONG создаст собственный блок для заключенного в него текста, т.е. для слова «выделенным».
На безымянные блоки нельзя сослаться при помощи селекторов CSS или любым другим способом, однако суть безымянных блоков состоит в том, что именно они определяют то, как будет выглядеть конечное оформление того или иного элемента web-страницы. При этом отправной точкой для любого безымянного блока будет какой-либо обычный, структурный или строковой блок. Изначально в CSS было определено три типа блоков – структурный (block), строковой (inline) и элемент списка (list-item). Кроме того, допускалось использовать значение none, применение которого запрещало создание какого-либо блока вообще.
ПРИМЕЧАНИЕ
Важно отметить, что назначение блоку типа none не просто делает невидимым его и все дочерние блоки, но вообще не дает браузеру создать какой-либо блок. Иначе говоря, такой элемент никак не будет влиять на отображение документа, как и его потомки, и для которых никаких блоков не создастся.
С появлением CSS уровня 2 количество типов блоков было расширено – сказалось влияние языка разметки XML, с которым должны были работать таблицы стилей. В результате в CSS 2 добавились такие виды блоков, как run-in, marker и compact, а так же 10 специальных типов для таблиц. В CSS 2.1 был добавлен еще один вид блока – inline-block. В то же время, типы marker и compact теперь исключены: первый – отчасти по причине игнорирования всеми разработчиками браузеров, а так же из-за некоторых изменений в самой логике блоков в «переходной» к CSS уровня 3 спецификации, а второй – из-за того, что compact и run-in фактически обозначали одно и то же.
Изменение типа блока – свойство display
Для всех элементов XHTML типы блоков, которые они генерируют, предопределены изначально, поскольку все они явно относятся к тому или иному типу. Тем не менее, в CSS предусмотрена возможность задать тип блока для любого элемента, что, в первую очередь, продиктовано универсальностью самих таблиц стилей – ведь они могут использоваться и с другими языками разметки, в которых тип элемента, может быть, и не задан (например, XML). Тем не менее, допустимо изменять тип блока и в XHTML-документах.
Для определения типа блока в каскадных таблицах стилей имеется свойство display, а все данные по типам блоков, поддерживаемых этим свойством, представлены в таблице 3.5.
| Значение | Примечание | Описание |
|---|---|---|
| inline | MSIE 5, Mozilla, Opera | При этом значении свойства элемент порождает один или несколько строковых блоков |
| inline-block | CSS 2.1, MSIE 5.5, Opera 6 | При этом значении свойства элемент порождает строковой блок, содержимым которого будет структурный блок |
| block | MSIE 5, Mozilla, Opera | При этом значении свойства элемент порождает структурный блок |
| list-item | MSIE 6, Mozilla, Opera | При этом значении свойства элемент порождает структурный блок и строковой блок элемента списка (LI) |
| marker | Только CSS 2 | Маркер элемента списка. Исключен из CSS 2.1, браузерами не поддерживается |
| run-in | Opera 6 | При этом значении свойства элемент порождает либо структурный, либо строковый блок, в зависимости от контекста |
| compact | Только CSS 2 и Opera 6 | Аналогично run-in |
| table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption | Поддерживаются только для XML-документов (кроме MSIE) | При этих значениях свойства элемент ведет себя как соответствующий элемент таблицы. Отличие table от inline-table состоит в том, что inline-таблица не может содержать в себе другие таблицы. Подробнее см. в главе, посвященной оформлению табличных данных и табл. 3.8 |
Если разница между элементами inline и block очевидна, то с типом Inline-block несколько сложнее. Для примера рассмотрим такой случай, что элемент b будет не строковым, как обычно, а смешанным строчно-блочным:
b {display: inline-block;}
В таком случае можно заметить разницу, если вложить в него другой элемент уровня блока (т.е. с предустановленным значением display: block):
<b>inline-block<p>block</p>inline-block<b>
Хотя с точки зрения HTML такая запись и является недопустимой, но с учетом того, что элемент B в данном случае является не строковым, а смешанным, то для браузера, поддерживающего тип inline-block, этот фрагмент кода допустим. На самом деле, такой пример является надуманным, но вместе с тем, элементы с типом inline-block, изначально определены в HTML и хорошо нам знакомы – это элементы форм button, textarea, input, object и select. Внешне эти элементы ведут себя как строчные, но внутри – как блочные (см. файл display.html).
Что касается типов run-in и compact, то если бы мы в данном случае для элемента B указали тип compact, то смогли бы увидеть (правда, только в браузере Opera) разницу в представлении элемента в зависимости от того, что в него вложено:
<b style="display: compact">Строка текста</b>
<b style="display: compact">Строка и <p>абзац текста<p></b>
В первом случае элемент B останется «самим собой» – будет строчным, а во втором ему придется преобразоваться в структурный блок, поскольку он содержит в себе другой блок (P).
ПРИМЕЧАНИЕ
В любом случае такое поведение нехарактерно для языка разметки HTML, поэтому не следует без лишней надобности прибегать к изменению этого свойства. То ли дело оформление XML – там без свойства display таблицам стилей было бы просто нечего делать.
Остается рассмотреть лишь группу из 10 значений, предусмотренных для таблиц. Поскольку в HTML, опять-таки, все элементы строго распределены по своему представлению, то и назначать подобные значения лишено всякого смысла. Поэтому обратимся к XML. Допустим, у нас имеется следующий код:
<table>
<row>
<cell>Ячейка 1</cell>
<cell>Ячейка 2</cell>
</row>
<row>
<cell>Ячейка 3</cell>
<cell>Ячейка 4</cell>
</row>
</table>
В таком случае, чтобы правильно отобразить определенную таким образом таблицу (детали, относящиеся собственно к определению тегов в XML мы тут опускаем), нам потребуется следующая таблица стилей:
table {display: table; }
row {display: table-row; }
cell {display: table-cell; }
Готовый пример вы найдете в файлах display.xml и display.css, а в файле default.css приведена таблица стилей, описывающая принятое по умолчанию отображение для всех элементов XHTML, за исключением строковых.
Свойства css display
Значение по умолчанию: inline (браузеры изменяют начальное значение для многих элементов HTML/XHTML – см. файл default.css).
Наследуемые значения: нет.
Применяется: ко всем элементам.
Совместимость: все.
2011-06-17 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
