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>
Сейчас наша страница выглядит так:
Давайте зададим для второго параграфа свойство display:none, а для четвертого - свойство visibility:hidden:
#p2{
display:none;
}
#p4{
visibility:hidden;
}
Посмотрим, что получилось:
Как видите, второй параграф отсутствует, а четвертый - невидим, но место под него оставлено. В этом и заключается разница. Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.
Как видите, одни браузеры растягивают блоки, чтобы вместить содержимое, а другие перекрывают блок содержимым. Конечно, лучшего всего контролировать размеры объектов, но это не всегда возможно. Как же быть тогда? Воспользоваться свойством overflow. Это свойство может принимать четыре значения:
На сегодня, пожалуй, все. В следующем уроке познакомимся со слоями.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 12. Виды и свойства блоков
CSS - Урок 12. Виды и свойства блоков
Как вы помните, элементы могут быть блочными и строчными (урок 8). По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений. Рассмотрим все четыре на примерах.display:block
Это значение делает элемент блочным. Предположим, мы решили сделать вертикальное меню. Для этого на html-странице мы напишем следующий код:
Элемент a является строчным, поэтому наши ссылки расположились в одну строку и их размер зависит от текста. Но мы хотели сделать вертикальное меню, для этого мы и добавим нашим ссылкам свойство display:block:
Обратите внимание, так как теперь наши ссылки стали блочными элементами, то и размер у них стал одинаковый, равный ширине родительского div-а.
display:inline
Это значение делает элемент строчным. Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка. На html-странице мы напишем следующий код:
Заголовок.
Текст параграфа
Заголовок.
Текст параграфа
display:list-item
Это значение делает любой элемент частью списка. Используется он редко, да и поддерживается браузерами не в полной мере. Но давайте все-таки посмотрим пример. Пусть у нас есть три заголовка одного уровня, и мы хотим оформить их списком. Для этого на html-странице мы напишем:
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
display:none
Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript. Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов. Вот в таких меню и используется значение display:none.
Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).
Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным. Понятнее будет на примере. Пусть у нас есть пять параграфов:
Параграф 1
Параграф 2
Параграф 3
Параграф 4
Параграф 5
Давайте зададим для второго параграфа свойство display:none, а для четвертого - свойство visibility:hidden:
Параграф 1
Параграф 3
Параграф 5
Как видите, второй параграф отсутствует, а четвертый - невидим, но место под него оставлено. В этом и заключается разница. Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.
Отображение содержимого блоков в разных браузерах
Как вы думаете, что будет, если блочному элементу задать меньшие размеры, чем его содержимое? Ваш ответ будет зависеть от того, в каком браузере вы работаете. Предположим мы задали блоку размер 200х100 пикселов и поместили в него текст, явно превышающий эти размеры. Ниже приведен рисунок, где отображено поведение различных браузеров в такой ситуации:
Как видите, одни браузеры растягивают блоки, чтобы вместить содержимое, а другие перекрывают блок содержимым. Конечно, лучшего всего контролировать размеры объектов, но это не всегда возможно. Как же быть тогда? Воспользоваться свойством overflow. Это свойство может принимать четыре значения:
- visible - если содержимое превышает размеры блока, оно все-равно останется на экране. Результат будет такой же, как на рисунке выше.
- hidden - браузер отрежет содержимое, которое превышает размер блока.
- scroll - блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной.
Здесь располагается какой-либо текст, который явно не помещается в указанные размеры блока. И в этом случае текст будет по-разному отображаться в различных браузерах.
- auto - блок будет снабжен только теми полосами прокрутки, которые необходимы.
Здесь располагается какой-либо текст, который явно не помещается в указанные размеры блока. И в этом случае текст будет по-разному отображаться в различных браузерах.
На сегодня, пожалуй, все. В следующем уроке познакомимся со слоями.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.