Глава 10. Форматирование
В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в 7 главе, в которой мы говорили о размерах элемента width и height, минимальных и максимальных размеров элемента max-height, max-width, min-height, min-width и свойстве overflow. Все свойства из 7 главы относятся к категории "форматирование элементов".
Показ элементов
Свойство display указывает браузеру, как тот или иной элемент должен быть показан на странице, другими словами определяет параметры вывода браузером элемента на экран.
Display имеет кучу возможных значений, большинство из которых поддерживаются далеко не всеми браузерами, поэтому мы поговорим лишь о тех, которые будут корректно работать во всех браузерах, а таковых всего 3:
Теперь расшифрую написанное и покажу примеры.
Начнем с block и inline.
Помните, в той же 7 главе мы говорили о том, что все элементы можно разделить на строчные и блочные? так вот значения block и inline свойства display позволяет самостоятельно указывать, какие элементы мы хотим сделать строчными, а какие блочными, что позволяет решить ряд задач при верстке сайта с помощью CSS.
Пример:
<style>.menu{display:block;color:#006;font-size:14px;font-weight:bold;padding:5px}h2{padding:5px;color:#800;font-size:16px}</style>
<title>display:block;</title>
<p>В этом примере показано как можно сделать вертикальное меню присвоив ссылке (элемент a) свойство display с значением block.
<h2>Меню:</h2>
<a href=# class=menu>Все о слонах</a>
<a href=# class=menu>Купить слона</a>
<a href=# class=menu>Взять слона на прокат</a>
<p>Как видите ссылки стали блочными, т.е. в начале и в конце элемента a происходит перенос строки, хотя по умолчанию ссылка должна была идти в общем потоке текста.
А вот пример использования значения inline:
<title>display:inline</title>
<p>Вот пример того как можно зпретить параграфу перенос строки
<p style=display:inline;background:#c5f;padding:5px>Это параграф.
<p style=display:inline;background:#c0e;padding:5px>И это параграф!
<p style=display:inline;background:#c5f;padding:5px>И снава параграф!
Идем дальше. значение none свойства display запрещает элемент к показу. Браузер удаляет элемент с таким значением из общего потока.
Небольшой пример:
<title>display:none</title>
А где 2-й блок?
<div style=background:#c5f>Блок 1</div>
<div style=display:none>Блок 2</div>
<div style=background:#c0e>Блок 3</div>
Это свойство незаменимо на страницах, где присутствует динамика, например, для создания раскрывающегося списка.
Я уже показывал этот пример:
<title>display:none и скрипты</title>
<script>function show_hide(id){item=document.getElementById(id);if(item.style.display=='none'){item.style.display='block'}else item.style.display='none';}</script>
<div id=block style=display:none>
<h2 style=color:#ff0>А вот и я</h2>
</div>
<a href=javascript:show_hide('block') style=color:#ff0>Нажми на меня</a>
<hr>
<div id=block1 style=display:none>
<h2 style=color:#0ff>А здесь я</h2>
</div>
<a href=javascript:show_hide('block1') style=color:#0ff>И на меня нажми</a>
Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки div присваивая ему свойства display:none или display:block, и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать для каких целей предназначено свойство display:none.
Ну и для общего развития. Как уже говорилось выше block, inline и none это далеко не все возможные значения свойства display.
Вот остальные:
Но использовать их в деле я бы не рекомендовал. по той простой причине, что многие браузеры не поддерживают данные значения. поэтому заострять внимания на них не будем.
Видимость элемента
Свойство visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента с помощью свойства visibility элемент становится не виден, однако место, которое он занимает, остается за ним.
Возможные значения свойства visibility:
Пример:
<title>visibility</title>
<p>Блок 2 скрыт, однако место, которое он занимает, зарезервировано за ним.
<div>
<span style=background:#c5f;padding:5px>блок 1</span>
<span style=visibility:hidden;background:#c0e;padding:5px>блок 2</span>
<span style="background:#c5ffa0;padding:5px;">блок 3</span>
</div>
<hr>
<p>Строка 2 скрыта (удалена), если только дело происходит не в IE
<table border=1>
<tr>
<td>Строка 1
<tr style=visibility:collapse>
<td>Строка 2
<tr>
<td>Строка 3
</table>
Обратите внимание visibility:collapse не поддерживается браузером IE.
Видимая часть элемента
Свойство clip определяет видимую область элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, обрезается и становится невидимым. На данный момент единственно доступная форма области - прямоугольник.
clip работает только для абсолютно позиционированных элементов и показывает лишь ту его часть, что входит в прямоугольную область заданную 4 значениями от левого и верхнего краёв данного элемента.
Значения:
Пример:
<title>clip</title>
<div style='position:absolute;clip:rect(15px auto auto 15px);width:100px;height:100px;background:#c5f;border:double 5px #008'>
Этот блок частично обрезан слева и сверху.
</div>
О том, что такое position:absolute (абсолютно позиционированный элемент) мы поговорим в отдельной главе.
