Свойство блоков display
При помощи свойства display задаётся тип элемента, а именно будет ли он блочным, строчным или отсутствовать на странице вовсе. Как это делается и для чего рассмотрим далее.
Display:none
Если задать блоку свойство display, равное значению none, тогда этот блок не будет отображаться на веб-странице:
Как вы видите, этот абзац отсутствует на странице, но в коде он есть. Использовать это свойство можно для сокрытия какой-либо информации от посетителей, которым её знать не следует, например от незарегистрированных пользователей сайта. Также можно использовать для создания выпадающего меню.
Display:block
Это свойство используется для преобразования строчного элемента в блочный. Удобно использовать для создания навигационного меню при помощи ссылок. Создаём веб-страницу вида:
Теперь подключим к этому 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 являются блочными, поэтому разместить их таким образом физически невозможно, но если перевести их в строчные, то эта задача становится реальной:
Заголовок
Текст абзаца
Вот и результат выполнения нашего кода:
Заголовок
Текст абзаца
Display:list-item
При помощи этого свойства можно любой элемент сделать частью списка. По умолчанию списками являются элементы: ol и ul. К этим элементам можно применять свойство list-style. Но если к любым другим элементам применить свойство display-item, то и к ним будет применимо list-style. Например:
h3{
display:list-item;
}
Если задать такую таблицу стилей, то все элементы h3 превратятся в список.
2012 год.