Как сделать сайтУроки CSS → Урок 12. Виды и свойства блоков

CSS - Урок 12. Виды и свойства блоков

Как вы помните, элементы могут быть блочными и строчными (урок 8). По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений. Рассмотрим все четыре на примерах.

display:block

Это значение делает элемент блочным. Предположим, мы решили сделать вертикальное меню. Для этого на html-странице мы напишем следующий код:
<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="about_us.html">О нас</a> <a href="contact.html">Контакты</a> </div> </body> </html>
Зададим на странице style.css стиль для наших ссылок, причем только для ссылок, которые находятся в div-е с id="menu" (тогда другие ссылки на странице, если они будут, останутся без изменения или им можно будет задать другой стиль):
#menu{ width:200px; background:yellow; } #menu a{ color:#2b3845; text-decoration:none; } #menu a:hover{ color:#92A9BF; background:blue; }
Сейчас наши ссылки выглядят так:



Элемент a является строчным, поэтому наши ссылки расположились в одну строку и их размер зависит от текста. Но мы хотели сделать вертикальное меню, для этого мы и добавим нашим ссылкам свойство display:block:
#menu{ width:200px; background:yellow; } #menu a{ color:#2b3845; text-decoration:none; display:block; } #menu a:hover{ color:#92A9BF; background:blue; }
Теперь наше меню выглядит так:



Обратите внимание, так как теперь наши ссылки стали блочными элементами, то и размер у них стал одинаковый, равный ширине родительского div-а.

display:inline

Это значение делает элемент строчным. Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка. На html-странице мы напишем следующий код:
<html> <head> <title>css display</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h5>Заголовок.</h5> <p>Текст параграфа</p> </body> </html>
Сейчас наша страница выглядит так:
Заголовок.

Текст параграфа

Добавим на страницу style.css стили для наших элементов:
h5, p{ display:inline; }
Теперь наша страница выглядит так, как мы и хотели:
Заголовок.

Текст параграфа



display:list-item

Это значение делает любой элемент частью списка. Используется он редко, да и поддерживается браузерами не в полной мере. Но давайте все-таки посмотрим пример. Пусть у нас есть три заголовка одного уровня, и мы хотим оформить их списком. Для этого на html-странице мы напишем:
<html> <head> <title>css display</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <h6>Заголовок</h6> <h6>Заголовок</h6> <h6>Заголовок</h6> </ul> </body> </html>
Сейчас наши заголовки выглядят, как положено:
    Заголовок
    Заголовок
    Заголовок
На странице стилей напишем всего одно свойство:
h6{ display:list-item; }
В результате получим список из заголовков:
    Заголовок
    Заголовок
    Заголовок


display:none

Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript. Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов. Вот в таких меню и используется значение display:none.

Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).

Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным. Понятнее будет на примере. Пусть у нас есть пять параграфов:
<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>
Сейчас наша страница выглядит так:

Параграф 1

Параграф 2

Параграф 3

Параграф 4

Параграф 5



Давайте зададим для второго параграфа свойство display:none, а для четвертого - свойство visibility:hidden:
#p2{ display:none; } #p4{ visibility:hidden; }
Посмотрим, что получилось:

Параграф 1

Параграф 2

Параграф 3

Параграф 4

Параграф 5



Как видите, второй параграф отсутствует, а четвертый - невидим, но место под него оставлено. В этом и заключается разница. Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.

Отображение содержимого блоков в разных браузерах

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

Как видите, одни браузеры растягивают блоки, чтобы вместить содержимое, а другие перекрывают блок содержимым. Конечно, лучшего всего контролировать размеры объектов, но это не всегда возможно. Как же быть тогда? Воспользоваться свойством overflow. Это свойство может принимать четыре значения:
  • visible - если содержимое превышает размеры блока, оно все-равно останется на экране. Результат будет такой же, как на рисунке выше.


  • hidden - браузер отрежет содержимое, которое превышает размер блока.


  • scroll - блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной.
    Здесь располагается какой-либо текст, который явно не помещается в указанные размеры блока. И в этом случае текст будет по-разному отображаться в различных браузерах.


  • auto - блок будет снабжен только теми полосами прокрутки, которые необходимы.
    Здесь располагается какой-либо текст, который явно не помещается в указанные размеры блока. И в этом случае текст будет по-разному отображаться в различных браузерах.


Надо сказать, что на практике свойство overflow используется редко, но знать о его существовании все-таки стоит.

На сегодня, пожалуй, все. В следующем уроке познакомимся со слоями.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.