Свойство блоков display
При помощи свойства display задаётся тип элемента, а именно будет ли он блочным, строчным или отсутствовать на странице вовсе. Как это делается и для чего распишем далее.
Display:none
Если задать блоку свойство display, равное значению none, тогда этот блок не будет отображаться на веб-странице. Задаём:
Как вы видите, этот абзац отсутствует на странице, но в коде он есть. Использовать это свойство можно для сокрытия какой-либо информации от посетителей, которым её знать не надо, например от незарегистрированных пользователей сайта. Также можно использовать для создания выпадающего меню, правдо совместно с JavaScript (расмотрим как это делается позже).
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 превратятся в список.