Опубликовано: 12.05.2011 Последняя правка: 08.12.2015

Изменяем тип HTML-элемента

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

Однако тип HTML-элемента задает не только его внешний вид, он также определяет и список свойств, псевдоклассов и псевдоэлементов CSS, которые допускается к нему применять. И это вполне логично, ведь согласитесь, что если бы, например, тегу <SPAN> разрешено было добавить ширину и высоту, то он бы, по сути, превратился в блок, что противоречит идеологии HTML.

Но, как говорится, если нельзя, но очень хочется, то можно. И тут мы с вами подбираемся к самому интересному — свойству CSS display, которое предназначено для изменения типа любого HTML-элемента. Что это нам может дать? О, тут открываются поистине грандиозные возможности для настоящего верстальщика, и предугадать все места применения просто нереально. Поэтому я вам просто покажу несколько примеров, а уж на основе них, я надеюсь, вы и сами сможете сделать для себя кое-какие выводы.

Очень важное замечание! Хочу обратить ваше внимание на то, что рассматриваемое свойство изменяет тип элемента только «с позиции» CSS. С позиции синтаксиса HTML ничего не меняется, поэтому, если до изменения элемент не мог содержать какие-то теги, то и после модификации здесь все останется как прежде. Не стоит забывать, что HTML и CSS — это абсолютно разные языки со своими правилами, хоть и служат одному делу.

Изменение типа элемента на встроенный

Пример HTML и CSS: измененяем тип у элементов списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Делаем элементы встроенными</title>
  <style type="text/css">
   li {
    display: inline; /* делаем теги LI встроенными */
    margin: 0 10px; /* боковые поля */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Пункт 1</li>
   <li>Пункт 2</li>
   <li>Пункт 3</li>
   <li>Пункт 4</li>
  </ul>
 </body>
</html>

Результат примера

Описание примера

Как вы знаете, теги <LI> являются элементами списка и при этом они не относятся ни к встроенным, ни к блочным тегам, хотя во многом и похожи на последние. В этом примере элементы списка были преобразованы во встроенные, поэтому они выстроились в одну строку внутри блочного <UL>. Заметьте, что у них даже пропали маркеры, которые браузеры устанавливают у списков по умолчанию. Первое, что приходит на ум — данный прием можно использовать для создания обычных горизонтальных меню, осталось только добавить ссылки.

Изменение типа элемента на встроенные блоки

Пример HTML и CSS: измененяем тип у тегов A

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Делаем из ссылок встроенные блоки</title>
  <style type="text/css">
   a {
    display: inline-block; /* делаем ссылки встроенными блоками */
    width:200px; /* ширина ссылок */
    text-decoration: none; /* убираем подчеркивание */
    text-align: center; /* текст по центру */
    color: #000; /* цвет текста */
    background: #c03; /* фон ссылок */
    border: 2px #000 solid; /* стили рамки */
    padding: 5px; /* внутренние отступы */
   }
   a:hover {
    color: #fff; /* цвет текста в ссылках при наведении курсора */
    background: #f03; /* фон */
   }
  </style>
 </head>
 <body>
  <div>
   <a href="#">Ссылка 1</a>
   <a href="#">Ссылка 2</a>
   <a href="#">Ссылка 3</a>
  </div>
 </body>
</html>

Результат примера

Описание примера

В этом примере из ссылок (тег <A>) были созданы встроенные блоки, благодаря чему появилась возможность изменять их ширину. Это бывает очень кстати, когда необходимо сделать так, чтобы все кнопки навигации имели одинаковые размеры.

Изменение типа на элементы списка

Пример HTML и CSS: измененяем тип у тегов P

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Делаем элементы списком</title>
  <style type="text/css">
   p {
    display: list-item; /* преобразуем параграфы в элементы списка */
    list-style: decimal outside; /* устанавливаем нумерацию */
    margin-left:50px; /* левое поле */
   }
  </style>
 </head>
 <body>
  <h2>Подзаголовок</h2>
  <p>Параграф</p>
  <p>Параграф</p>
  <h2>Подзаголовок</h2>
  <p>Параграф</p>
  <p>Параграф</p>
 </body>
</html>

Результат примера

Описание примера

Здесь параграфы (тег <P>) были изменены в элементы списка, а для того, чтобы у них нумерация не уходила за границу экрана — им задали левое поле (CSS margin-left) в 50px. Вот и все, список готов.

Общая верстка