Элементы

Элементы (elements) – это основа структуры документа. Нетрудно понять, какие элементы более всего используются в HTML: p, table, span, a и div. Каждый элемент документа играет определенную роль в его представлении. В терминах CSS (по крайней мере, для CSS2.1) это означает, что каждый элемент генерирует блок, в котором находится содержимое элемента.

Замещаемые и незамещаемые элементы
CSS определяется элементами, но не все элементы создаются одинаково. Например, изображения и абзацы – это элементы разных типов, так же как span и div. В CSS элементы разделяются на замещаемые и незамещаемые.

Замещаемые элементы
Замещаемыми (replaced) называются те элементы, содержимое которых замещается чем-то, что не содержится непосредственно в документе. Наиболее очевидный пример из XHTML – элемент img, замещаемый файлом изображения, который является внешним по отношению к документу. Кстати, img фактически не имеет содержимого, как видно из простого примера:



Этот фрагмент разметки не имеет реального содержимого, а только имя элемента и атрибут. Данный элемент ничего не представляет, пока вы не укажете на внешнее содержимое (в данном случае изображение, заданное атрибутом src).


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

Незамещаемые элементы
Основная масса элементов HTML и XHTML – незамещаемые (nonre% placeable). Это означает, что их отображаемое агентом пользователя ментом блока. Например, элемент эй там – незамещаемый элемент, и агент пользователя (user agent) будет отображать текст «эй там». Это выполняется для абзацев, заголовков, ячеек таблиц, списков и почти всех остальных элементов XHTML.

Роль элементов в формировании представления
Кроме замещаемых и незамещаемых, в CSS2.1 специфицированы еще два базовых типа элементов: блочные (block%level) и строковые (inline% level) элементы. Эти типы хорошо знакомы тем авторам, которые имеют опыт работы с разметкой HTML или XHTML и ее отображением в веб-броузерах.

Блочные элементы
Блочные элементы (block%level elements) генерируют блок, который (по умолчанию) полностью заполняет область содержимого своего родительского элемента; расположение других элементов, помимо этого блока, недопустимо. Тем самым он генерирует «разрывы» до и после блока элемента.


Самые известные блочные элементы HTML: p и div. Замещаемые элементы могут быть блочными, но обычно они таковыми не являются. Элементы списка – особый случай блочных элементов. Помимо того, что их поведение аналогично поведению других блочных элементов, они генерируют маркер – как правило, буллет для ненумерованных списков и число для нумерованных – который «прикрепляется» к блоку элемента. Наличие маркера – это единственное отличие элементов списка от остальных блочных элементов.

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

Посмотрим, как это работает, обратившись к CSS-свойству display. Вы, вероятно, заметили, что оно имеет много значений, но здесь мы рассмотрим только три: block, inline и listitem.


Сначала сосредоточимся на значениях block и inline. Рассмотрим следующую разметку:


Это абзац со строковым элементом в нем.




Здесь мы имеем два блочных элемента (body и p) и строковый элемент (em). Согласно спецификации XHTML em может происходить от p, но не наоборот. Обычно иерархия XHTML составляется таким образом, что строковые элементы могут происходить от элементов уровня блока, но не наоборот. Напротив, в CSS нет подобных ограничений. Вы можете оставить существующую разметку, но изменить роли формирования представления этих двух элементов следующим образом:

p {display: inline;}
em {display: block;}

Этим вы заставите элементы генерировать контейнер блока внутри контейнера строки. Это совершенно законно и не нарушает ни одной спецификации. Проблема может возникнуть, если вы попытаетесь изменить порядок вложения элементов на обратный:

Это абзац, ошибочно включенный в строковый элемент.



Независимо от того, что вы делаете с ролями формирования представления посредством CSS, в XHTML это недопустимо. Изменение ролей формирования представления элементов может быть полезным в XHTML-документах и абсолютно необходимо в XML-документах. XML-документ не поддерживает каких-либо предопределенных ролей формирования представления, так что их определение остается в руках автора. Например, вы могли бы задаться вопросом, как будет представлен следующий фрагмент XML:


Cascading Style Sheets: The Definitive Guide
Second Edition
Eric A. Meyer
O'Reilly and Associates
2004
blahblahblah


CSS2 Pocket Reference
Eric A. Meyer
O'Reilly and Associates
2004
blahblahblah


Поскольку по умолчанию установлено значение display – inline, содержимое будет отображаться как обычный текст строки. Такое представление практически бесполезно. Свойство display позволяет определить базовую разметку:

book, maintitle, subtitle, author, isbn {display: block;}
publisher, pubdate {display: inline;}

Здесь определены пять блочных элементов и два строковых. Это означает, что каждый из блочных элементов будет интерпретироваться как элемент div в XHTML, а два строковых элемента будут трактоваться аналогично элементу span. Эта фундаментальная возможность влиять на роли формирования представления делает CSS очень полезными в различных ситуациях. Вы можете в качестве отправной точки взять предыдущие правила, добавить несколько других стилей и получить результат.

Далее в этой книге мы исследуем различные свойства и значения, которые обеспечивают такое представление. Однако сначала нам надо рассмотреть способы связи CSS с документом. Несмотря на всю свою мощь, без установленных связей CSS не сможет воздействовать на документ. Мы рассмотрим привязку в XHTML, поскольку она наиболее
привычна.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Альтернативные таблицы стилей
Атрибуты
Богатство стилей
Веб спускается с Олимпа
Действительные правила стилей

Вернуться в раздел: CSS / 1. CSS и документы