Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег , но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на , но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
Очевидно вы уже заметили, что элементы заголовков -
и абзацев
начинаются с новой строки. Это происходит потому, что они являются примерами блочных элементов различных уровней. Браузеры рассматривают блочные элементы так, словно они заключены в маленькие прямоугольные области – блоки, из которых складываются страницы. По умолчанию каждый блочный элемент начинается с новой строки и, как правило, ограничен сверху и снизу пустыми строками.
В следующем примере границы блочных элементов выделены зеленым цветом:
Пример: Блочные и встроенные элементы
- Попробуй сам »
Блочный элемент занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками
Блочный элемент
Начинается с новой строки, а встроенный элемент
Блочный элемент (h2) занимает всю ширину родительского элемента
и ограничен сверху и снизу пустыми строками
Блочный элемент (p) начинается с новой строки,
а встроенный элемент (em)
не начинается с новой строки, а остается в составе абзаца
Обратите внимание как выглядит текст, который мы пометили как курсивный (еm). Он не начинается с новой строки, а остается в составе абзаца. Это происходит потому, что элемент является встроенным или строчным. Встроенные элементы не начинаются с новой строки, а находятся в составе блочных. Встроенным элементам достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в них.
Разница между блочными и строчными элементами следующая:
- Строчные элементы не могут хранить блочные элементы, а могут содержать только данные или другие строчные элементы.
- Блочные элементы могут содержать другие блочные элементы, строчные элементы, а также данные.
- Блочные элементы всегда начинаются с новой строки и, как правило, ограничены сверху и снизу пустыми строками.
- Блочные элементы занимают всю ширину родительского элемента, например, окна браузера.
- Строчные элементы занимают ширину равную их содержимому плюс значения отступов, полей и границ.
Примеры блочных элементов:
-
Примеры строчных элементов:
Общие элементы
иЭлемент
— это общий блочный элемент, который применяется для группировки одного или нескольких блочных элементов. Он указывает, что сгруппированные вместе элементы образуют некую смысловую единицу и должны рассматриваться, например таблицей стилей CSS, как одна единица. Используя элементвместе с таблицами стилей CSS, вы сможете придать одинаковое стилевое оформление для всех элементов, помещенных в контейнер.Итак, тег
служит для того, чтобы:
– применять какие-либо настройки к отдельному информационному блоку на сайте;
– быть контейнером для текста, изображений и других элементов HTML-документа.Элемент — это общий встроенный элемент, который используется для встроенных элементов, которые не вводят переводов строк. Элемент может содержать только текст и другие встроенные элементы (вы не можете поместить туда блочные элементы: заголовки, списки, элементы группировки контента и т. д.).
Так как элемент — строчный , то есть не требует для себя всей ширины окна браузера, то ему достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем. Поэтому элемент часто используется для форматирования отдельных слов внутри абзаца.Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают случаи, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 3.28 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.
Рис. 3.28. Галерея фотографий
Если для формирования секций использовать тег
, как блочный элемент он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задать цвет фона всей секции и установить её размеры. Наиболее популярное решение в подобных случаях это использование свойства float , которое будет рассмотрено в следующем разделе. Пока же остановлюсь на строчно-блочных элементах, которые сочетают преимущества строчных и блочных элементов.В HTML нет тега, который относится к строчно-блочным элементам, его можно определить, задав элементу свойство display со значением inline-block .
Div { display: inline-block; }
Характеристики этих элементов следующие.
- Внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
- Высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Ширина равна содержимому плюс значения отступов, полей и границ.
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Можно выравнивать по вертикали с помощью свойства vertical-align .
- Разрешено задавать ширину и высоту.
- Эффект схлопывания отступов не действует.
Чтобы создать галерею, представленную на рис. 3.28 для тега
следует задать значение display как inline-block , а внутрь него добавить изображение и подпись через тег(пример 3.18).
Пример 3.18. Использование display
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Галерея 
Софийский собор
Польский костёл
Купеческий клуб
Памятник Св. Владимиру
Поскольку все фотографии имеют одинаковый размер, ширина блока задана явно и равна 150px, но высота не указывается, поэтому при длинной подписи к рисунку высота секций будет различаться (рис. 3.29).
Рис. 3.29. Разная высота секций
Это не является проблемой, поскольку в любом случае секции будут выводиться упорядоченно рядами, несмотря на разную высоту. При этом можно изменить вид выравнивания через vertical-align , добавив это свойство к классу photo . Если указать значение top , то поменяется отображение секций (рис. 3.30).
Рис. 3.30. Выравнивание по верхнему краю
Основной проблемой выступает браузер IE до версии 7.0 включительно. Этот браузер применяет значение inline-block только для строчных элементов и с блочными элементами работает некорректно. Чтобы убедить этот браузер правильно отображать наш пример, необходимо вместо inline-block использовать значение inline и установить свойство hasLayout . Добавление inline разрушит макет в остальных браузерах, поэтому правильным решением будет воспользоваться условными комментариями (пример 3.19).
Пример 3.19. Стиль для IE
Конструкция означает применить указанный код для браузера IE версии 7.0 и ниже. Остальные браузеры воспринимают её как комментарий и игнорируют. Что касается свойства zoom , оно нестандартное и предназначено для установки свойства hasLayout , напрямую которое задавать нельзя.
Также строчно-блочные элементы удобно использовать для различных каталогов товаров, которые встречаются в интернет-магазинах. Обычно они выводятся с картинкой и подписью к ней. Всё это похоже на галерею, сделанную выше, поэтому остаётся только модифицировать её код, учесть выравнивание по высоте и поведение IE (пример 3.20).
Пример 3.20. Каталог товаров
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Каталог 
Видео 1856
Фото 315
Мобильные устройства 2109
Компьютеры и орг.техника 4296
Бытовая техника 731
Результат данного примера показан на рис. 3.31.
Рис. 3.31. Каталог товаров
Чтобы не задавать каждому тегу
, которых может быть довольно много, свой класс, в примере введёнс идентификатором catalog и стиль применяется к тегам внутри него.HTML (Hypertext Markup Language ) elements historically were categorized as either "block-level" elements or "inline" elements . By default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.
Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The following example demonstrates the block-level element"s influence:
Block-level elements
HTML
This paragraph is a block-level element; its background has been colored to display the paragraph"s parent element.
CSS
p { background-color: #8ABB55; }Usage
- Block-level elements may appear only within a element.
Block-level vs. inline
There are a couple of key differences between block-level elements and inline elements:
Content model Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. Default formatting By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
Elements
The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).
Contact information. Article content. element represents a portion of a document whose content is only indirectly related to the document" s main content.> Aside content. Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the element.">
Long ("block") quotation.
Disclosure widget. element represents a dialog box or other interactive component, such as an inspector or window.">