Урок №11. CSS. Разновидность блоков и их свойства.

Содержание урока:

Display:block
Display:inline
Display:list-item
Display:none

 


 

Здравствуй дорогой друг. Как ты уже знаешь, все на странице разделяется между собой на блочные и строчные элементы. Вид каждого элемента распределен по умолчанию. Но бывают случаи, когда это необходимо изменить. В такой ситуации используется свойство display. Возможны четыре значения:

    Block – делает элемент блочным.

    Inline – делает элемент строчным.

    List-item – делает элемент частью списка.

    None – убирает элемент со странички.

Каждый из этих четырех элементов предлагаю разобрать в деталях.

Приступим!

 


 

Display:block

Как Вы уже поняли, с помощью этого значения можно сделать элемент блочным.

К примеру, Вы делаете меню для странички, и вам необходимо, что бы меню было вертикальным.

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

В html-документе прописываем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>css display</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <div id="menu">

       <a href="index.html">Главная</a>

       <a href="writer.html">Об авторе</a>

       <a href="contact.html">Контакты</a>

       </div>

     </body>

   </html>

 

В style.css зададим стиль только для ссылок, которые находятся внутри нашего меню (тега div):

#menu{

  width:250px;

  background:red;

}

#menu a{

  color:#339999;

  text-decoration:none;

}

#menu a:hover{

  color:#000000;

  background:yellow;

}

 

Результат в браузере:

Пример свойства display

 

Как видно наши ссылки расположены горизонтально. Это объясняется тем, что элемент a является строчным. Что бы добиться нужного результата, а именно расположить меню вертикально, добавим в таблицу стилей правило display:block:

#menu{

  width:250px;

  background:red;

}

#menu a{

  color:#339999;

  text-decoration:none;

  display:block;

}

#menu a:hover{

  color:#000000;

  background:yellow;

}

 

Результат в браузере:

Пример свойства display:block

 

Вот и все, погнали дальше.

 


 

Display:inline

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>css display</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <h5>Заголовок.</h5> <p>Экспериментальный параграф</p>

     </body>

   </html>

 

Результат:

Пример свойства display

 

Все как обычно, правда? Исправим это, добавим в таблицу стилей наше правило для обоих элементов:

h5, p{

  display:inline;

}

 

Результат в браузере:

Пример свойства display:inline

 

Давайте дальше!

 


 

Display:list-item

Данное правило способно сделать любой элемент на странице частью списка. Браузеры этот элемент через раз игнорируют, да и используется он редко по причине ненадобности. Но все же, создадим html-документ, в который мы вместим три заголовка четвертого уровня и сделаем из них список. Бред да? Погнали:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>css display</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <ul>

       <h4>Заголовок</h4>

       <h4>Заголовок</h4>

       <h4>Заголовок</h4>

      </ul>

     </body>

   </html>

 

Результат:

Пример свойства display

 

Пропишем нужное для нас правило:

h4{

  display:list-item;

}

 

Результат:

Пример свойства display:list-item

 


 

Display:none

Это свойство прячет элемент на странице. Часто используется при создании сайтов с выпадающим меню.

В CSS есть похожее с display:none свойство, это visibility.

Отличаются они тем, что display:none прячет элемент на странице, как будто его и не было, а свойство visibility просто делает элемент прозрачным. Может принимать два значения: visible (отображать) и hidden (сделать невидимым).

Допустим, у нас есть страница с 5 параграфами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>css display</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p>Параграф №1</p>

       <p id="p2">Параграф №2</p>

       <p>Параграф №3</p>

       <p id="p4">Параграф №4</p>

       <p>Параграф №5</p>

     </body>

   </html>

 

Результат:

Пример свойства display

 

Зададим для параграфа №4 свойство visibility:hidden, а для параграфа №2 свойство display:none:

#p2{

  display:none;

}

#p4{

  visibility:hidden;

}

 

Результат в браузере:

Пример свойств display:none и visibility:hidden

 

Как видно из примера, параграф №2 отсутствует, а параграф №4 просто прозрачный.

До встречи на следующем уроке.

 


 

Закрыть меню