Строчные элементы веб-страницы

Строчные элементы

В предыдущей статье мы с Вами разобрались с основами использования блочных элементов web-страниц.

Теперь пришла пора рассказать Вам о строчных элементах. Это тоже очень важно.

Если не понимать различия между этими типами элементов, то будет довольно проблематично использовать эти элементы на практике.

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

Давайте начнем.

1. Основы использования строчных элементов страницы.

Строчными называются элементы web-страницы, которые являются непосредственно частью строки. К строчным элементам относятся теги: <img>, <span>, <a>, <q>, <code> и другие. Полный список строчных элементов можно посмотреть здесь.

В основном они используются для изменения вида текста.

Характерные особенности строчных элементов:

  • Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
  • Эффект схлопывания отступов не действует. Если рядом стоят два строчных элемента с определенными внешними отступами, то эти отступы суммируются.
  • Свойства, связанные с размерами (width, height) не применимы. Их просто нет. На то она и строка. :)
  • Ширина элемента равна содержимому плюс значения отступов, полей и границ.
  • Несколько строчных элементов идущих подряд располагаются на одной строке друг за другом и переносятся на следующую строку при необходимости.
  • Строчные элементы можно выравнивать по вертикали при помощи css свойства vertical-align.

Строчные элементы удобно использовать для изменения вида и стиля текста, и даже отдельных символов и слов. Для этой цели обычно применяется универсальный тег <span>. Самостоятельно он никак не изменяет содержимое, но ему легко присвоить собственные стили при помощи селекторов классов или идентификаторов.

Применение строчных элементов

При HTML верстке страниц строчные элементы применяются реже, чем блочные, потому что внутрь строчных элементов нельзя вкладывать контейнеры <div>, <p> и другие блочные элементы.

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

2. Основные CSS свойства строчных элементов.

К строчным элементам наиболее часто применяются следующие css свойства:

  • color — цвет текста.
  • font — изменяет характеристики шрифта текста.
  • text-decoration — добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом и мигания.
  • text-align — выравнивание текста.
  • border — границы.
  • background — фон.

Как их использовать, Вы можете посмотреть в CSS справочнике. Cкопируйте название свойства в строку поиска в левой части страницы.

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

В предыдущей статье я уже показывал, как при помощи css свойства display можно переопределять тип элемента страницы.

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

Например, если превратить обычную ссылку (строчный элемент <a>) в блок, то можно увеличить ее полезную площадь за счёт использования свойств width (ширина) и height (высота).

Этот прием довольно часто используется, в том числе и на моем сайте.

Строчный элемент

Посмотрите на кнопку «Читать полностью» после анонса статьи на главной странице. Это строчный элемент — ссылка (тег <a>).

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

Если Вы еще не читали статью об использовании блочных элементов, то сделайте это прямо сейчас, иначе Ваши знания об основных типах элементов веб-страниц будут неполными.

А я на сегодня заканчиваю. Желаю Вам успехов в изучении HTML верстки.

 

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.