Язык CSS
Виды и свойства блоков.
Как вы помните, элементы могут быть блочными и строчными. По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span и a - строчными. Но иногда это необходимо изменить, для этого используется свойство display. Это свойство может принимать одно из четырех значений, понимаемые разными браузерами. Все остальные допустимые значения поддерживаются браузерами выборочно. Рассмотрим их на примерах.
display:block
Это значение делает элемент блочным. Предположим, мы решили сделать вертикальное меню.
Попробуем на практике. Для этого на html-странице создадим три внешние ссылки: «Главная», «О нас», «Контакты».
Зададим на странице style.css стиль для наших ссылок, причем только для ссылок, которые находятся в div-е с id="menu" (тогда другие ссылки на странице, если они будут, останутся без изменения или им можно будет задать другой стиль):
#menu{
width:400px;
background:yellow}
#menu a{
color:#2b3845;
text-decoration:none}
#menu a:hover{
color:#92A9BF;
background:blue}
Проверьте результат в браузере.
Сейчас наши ссылки выглядят так:
Элемент a является строчным, поэтому наши ссылки расположились в одну строку и их размер зависит от текста.
Попробуем на практике. Но мы хотели сделать вертикальное меню, для этого мы и добавим нашим ссылкам свойство display:block:
#menu a{
color:#2b3845;
text-decoration:none;
display:block}
Проверьте результат в браузере.
Сейчас наши ссылки выглядят так:
Обратите внимание, так как теперь наши ссылки стали блочными элементами, то и размер у них стал одинаковый, равный ширине родительского div-а.
display:inline
Это значение делает элемент строчным.
Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка.
Попробуем на практике. На html-странице создадим заголовок Н3 и параграф р.
Добавим на страницу style.css стили для наших элементов:
H3, p{
display:inline}
Проверьте результат в браузере.
Теперь наша страница выглядит так, как мы и хотели:
display:list-item
Это значение делает любой элемент частью списка. Используется он редко. Но давайте посмотрим пример. Пусть у нас есть три заголовка одного уровня, и мы хотим оформить их списком.
Попробуем на практике. Для этого на html-странице создадим 3 заголовка Н3. Посмотрите, как они расположены в браузере.
Теперь на странице стилей напишем свойство:
h3{
display:list-item;
margin-left:40px}
Проверьте результат в браузере.
В результате получим список из заголовков:
display:none
Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript.
Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов. Вот в таких меню и используется значение display:none.
Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока - visibility.
Оно может принимать два значения:visible(отображать) и hidden (сделать невидимым).
Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а visibility:hidden делает элемент прозрачным.
Понятнее будет на примере.
Попробуем на практике. Создадим документ, в котором есть пять параграфов. Зададим для второго параграфа свойство display:none, а для четвертого - свойство visibility:hidden
#p2{
display:none}
#p4{
visibility:hidden}
Проверьте результат в браузере.
Сравним результаты до и после изменения свойств параграфов:
Как видите, второй параграф отсутствует, а четвертый - невидим, но место под него оставлено. В этом и заключается разница.
Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.
Отображение содержимого блоков в разных браузерах
Как вы думаете, что будет, если блочному элементу задать меньшие размеры, чем его содержимое? Ваш ответ будет зависеть от того, в каком браузере вы работаете. Предположим мы задали блоку размер 200х100 пикселов и поместили в него текст, явно превышающий эти размеры. Ниже приведен рисунок, где отображено поведение различных браузеров в такой ситуации:
Как видите, одни браузеры растягивают блоки, чтобы вместить содержимое, а другие перекрывают блок содержимым. Конечно, лучшего всего контролировать размеры объектов, но это не всегда возможно. Как же быть тогда?
Воспользоваться свойством overflow. Это свойство может принимать четыре значения:
visible - если содержимое превышает размеры блока, оно все-равно останется на экране. Результат будет такой же, как на рисунке выше;
hidden - браузер отрежет содержимое, которое превышает размер блока;
scroll - блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной;
auto - блок будет снабжен только теми полосами прокрутки, которые необходимы.
Практическое задание: Попробовать в действии все значения свойства overflow.
В следующем уроке познакомимся со слоями.
Источники:
| ← Язык CSS. Относительное позиционирование. | Язык CSS. Слои. → |