с идентификатором catalog
и стиль применяется к тегам внутри него.
По аналогии с блочными элементами перечислю их характерные особенности.
Строчные элементы удобно использовать для изменения вида и стиля текста,
в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный
тег , который самостоятельно никак не модифицирует
содержимое, но легко объединяется со стилями через классы или идентификаторы.
За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных
фрагментов текста или рисунков.
Для вёрстки строчные элементы применяются реже, чем блочные. Это
связано в основном с тем, что внутрь строчных элементов не допускается вкладывать
контейнеры
,
И подобные широко распространённые теги. Тем не менее, блочные и строчные
элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять
вид составляющих веб-страниц. В примере 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. Замена блочного элемента на строчный
В данном примере блочный тег
Отображается
на веб-странице как строчный элемент. Это требуется для того, чтобы ширина
фона и рамки равнялась ширине самого текста с учетом полей. Как известно,
ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится
представлять тег
В виде строчного элемента.
В принципе, аналогичным решением будет использовать вместо
Тег .
Учтите, что преобразование элемента в строчный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных.
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег
является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name
или href
тег
устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег
увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега
увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег
уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег
, но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на
, но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.