Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

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

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


Display:none

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

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

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


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 превратятся в список.


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