Свойство блоков 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 год.