Основы html. Общие правила. Блочные и строчные элементы. Строчные элементы

И подобные широко распространённые теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц. В примере 3.16 показано использование тега для выделения отдельных слов.

Пример 3.16. Применение тега

Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения мышц живота. Задержитесь на две секунды. Выполните восемь повторений.

Результат примера показан ниже (рис. 3.25).

Рис. 3.25. Текст, оформленный с помощью стилей

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

Для текста, который не обрамлён строчным тегом вроде создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).

Рис. 3.26. Анонимные строчные элементы

Серым цветом на рисунке помечен текст внутри тега , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block . Также возможно и обратное действие через значение inline (пример 3.17).

Пример 3.17. Свойство display

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Примечание

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

Результат примера приведен на рис. 3.27.

Рис. 3.27. Замена блочного элемента на строчный

В данном примере блочный тег

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

В виде строчного элемента. В принципе, аналогичным решением будет использовать вместо

Тег .

Учтите, что преобразование элемента в строчный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных.

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.

Рис. 3.28. Галерея фотографий

Если для формирования секций использовать тег