Свойство блоков display



При помощи свойства display задаётся тип элемента, а именно будет ли он блочным, строчным или отсутствовать на странице вовсе. Как это делается и для чего рассмотрим далее.

Display:none

Если задать блоку свойство display, равное значению none, тогда этот блок не будет отображаться на веб-странице:

<p style="display:none;">Для этого абзаца задано значение свойства display:none.</p>

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

Display:block

Это свойство используется для преобразования строчного элемента в блочный. Удобно использовать для создания навигационного меню при помощи ссылок. Создаём веб-страницу вида:

<html>
 <head>
  <title>Пример создания навигационного меню при помощи display:block</title>
  <link href="style8.css" type="text/css" rel="stylesheet">
 </head>
 <body>
  <div id="menu">
   <a href="index.html">Главная</a>
   <a href="about.html">О нас</a>
   <a href="sitemap.html">Карта сайта</a>
   <a href="contacts.html">Контакты</a>
  </div>
 </body>
<html>

Теперь подключим к этому html-документу следующую таблицу стилей:

#menu{
width:300px;
background-color:#ffccff;
}
#menu a{
color:#330033;
text-decoration:none;
display:block;
}
#menu a:hover{
color:#330033;
background-color:#6699cc;
}

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

Display:inline

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

<h4 style="display:inline;">Заголовок</h4>
<p style="display:inline;">Текст абзаца</p>

Вот и результат выполнения нашего кода:

Заголовок

Текст абзаца

Display:list-item



При помощи этого свойства можно любой элемент сделать частью списка. По умолчанию списками являются элементы: ol и ul. К этим элементам можно применять свойство list-style. Но если к любым другим элементам применить свойство display-item, то и к ним будет применимо list-style. Например:

h3{
display:list-item;
}

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

2012 год.


<<Предыдущая | В раздел | Следующая>>