Изменение ролей

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



Можно поместить все ссылки в таблицу, или заключить каждую в элемент div, или просто сделать их все блочными элементами, вот так:

div#navigation a {display: block;}

В результате каждый элемент a, находящийся внутри div с идентификатором navigation, станет блочным элементом. Если добавить еще несколько стилей, можно получить результат. Изменение ролей в формировании представления может быть полезным в тех случаях, когда требуется, чтобы броузеры, не поддерживающие CSS, получали навигационные ссылки как строковые элементы, но компоновали эти ссылки как блочные элементы. Если ссылки представлены как блоки, можно оформлять их так, как оформлялись бы элементы div, благодаря чему весь блок элемента становится частью ссылки.


Таким образом, возможность щелкнуть по ссылке появляется, когда указатель мыши проходит над любым местом блока элемента. Можно также сделать элементы строковыми. Предположим, есть ненумерованный список имен:

  • Bob C.

  • Marcio G.

  • Eric M.

  • Kat M.

  • Tristan N.

  • Arun R.

  • Doron R.

  • Susie W.



Предположим, требуется представить имена рядом строковых элементов, между которыми (и по краям списка) находятся вертикальные черточки. Единственный способ сделать это – изменить их роли в формировании представления. Применение следующих правил даст результат:

#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}
#rollcall li:first-child {border-left: 1px solid;}

Существует огромное количество других полезных вариантов применения свойства display. Творите и увидите, что можно изобрести! Однако будьте осторожны и помните, что вы меняете роли элементов в формировании представления, а не их суть. Иначе говоря, заставляя абзац генерировать строковые блоки, вы не превращаете этот абзац в строковый элемент.


В XHTML, например, некоторые элементы являются блочными, тогда как другие – строковыми. (А другие представляют собой «обтекаемые» элементы, но пока забудем о них.) Строковые элементы могут быть потомками блочных, но не наоборот. Таким образом, ссылку можно поместить в абзац, но абзац не может находиться в ссылке. Это справедливо независимо от того, как оформлены рассматриваемые элементы. Рассмотрим следующую разметку:

(a href="http://www.example.net" style="display: block;">

это неверно!


(/a)

Эта разметка не будет действительной, потому что блочный элемент (p) вложен в строковый (a). Изменение ролей в формировании представления ничего не меняет. Свойство display так названо, потому что оказывает влияние на представление документа, а не на тип элемента.

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

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание