Глава 10
Форматирование.
В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в седьмой главе, в которой мы говорили о размерах элемента - width и height, минимальных и максимальных размеров элемента - max-height, max-width, min -height, min-width и свойстве overflow. Все свойства из седьмой главы относятся к категории "форматирование элементов" однако знания лучше получать порциями, чтобы каши в голове не случилось, вот я и решил придержать кой какой материал на потом..
Потом настало! так что готовьтесь переваривать информацию на медленном огне..
Свойство display указывает браузеру, как тот или иной элемент должен быть показан на странице, другими словами определяет параметры вывода браузером элемента на экран.
Display имеет кучу возможных значений, однако, большинство из них поддерживаются далеко не всеми браузерами, поэтому мы поговорим лишь о тех которые будут корректно работать во всех браузерах , а таковых всего три:
- block - Показывает элемент как блочный. Происходит перенос строк вначале и в конце элемента.
- inline - Показывает элемент как встроеный. Элемент не переносятся на следующую строку.
- none - Запрещает показ элемента. Элемент "удаляется" из общего потока, его занимаемое пространство на экране не резервируется.
Теперь "расшифрую" написанное и покажу примеры..
Начнем с block и inline
Помните, в той же седьмой главе мы говорили о том, что все элементы можно разделить на строчные и блочные? так вот значения block и inline свойства display позволяет самостоятельно указывать, какие элементы мы хотим сделать строчными, а какие блочными, что позволяет решить ряд задач при верстке сайта с помощью CSS.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu {
display: block;
color:#006080;
font-size: 14px;
font-weight: bold;
padding: 5px;
}
h2 {
padding: 5px;
color: #800080;
font-size:16px;
}
</style>
<title>display: block;</title>
</head>
<body>
<p>В этом примере показано как можно сделать вертикальное меню присвоив ссылке (элемент <a>) свойство display с значением block.</p>
<hr>
<h2>Меню:</h2>
<a href="#" class="menu">Все о слонах.</a>
<a href="#" class="menu">Купить слона.</a>
<a href="#" class="menu">Взять слона на прокат.</a>
<hr>
<p>Как видите ссылки стали блочными.. то есть в начале и в конце элемента <a> происходит перенос строки, хотя по умолчанию ссылка должна была идти в общем потоке текста.</p>
</body>
</html>
А вот пример использования значения inline:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display: inline;</title>
</head>
<body>
<p>Вот пример того как можно зпретить параграфу перенос строки</p>
<hr>
<p style="display: inline; background: #c5ffa0; padding: 5px;">Это параграф.</p>
<p style="display: inline; background: #c0e4ff; padding: 5px;">И это параграф!</p>
<p style="display: inline; background: #c5ffa0; padding: 5px;">И снава параграф!!</p>
</body>
</html>
Идем дальше.. значение none свойства display запрещает элемент к показу. Браузер удаляет элемент с таким значением из общего потока.
Небольшой пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display: none;</title>
</head>
<body>
А где второй блок ???
<hr>
<div style="background: #c5ffa0">Блок 1</div>
<div style="display: none">Блок 2</div>
<div style="background: #c0e4ff">Блок 3</div>
</body>
</html>
Конечно, от такого примера толку в практике ноль, какой смысл прописывать блок, а потом умышленно скрывать его!?? Однако это свойство незаменимо на страницах где присутствует динамика.. например для создания раскрывающегося списка.
Помнится мне, я Вам уже показывал этот пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>display:none и скрипты</title>
<script>
function show_hide(id){
var item = document.getElementById(id);
if (item.style.display == 'none') {item.style.display = 'block';}
else item.style.display = 'none';
}
</script>
</head>
<body>
<div id="block" style="display:none">
<h2 style="color: #ff00ff">А вот и я!!</h2>
<img src="rosemammoth.gif">
</div>
<a href="javascript:show_hide('block')" title="Развернуть/Свернуть" style="color: #ff00ff">Нажми на меня!!</a>
<hr>
<div id="block1" style="display:none">
<h2 style="color: #0000ff">А здесь я!!</h2>
<img src="mammoth.jpg">
</div>
<a href="javascript:show_hide('block1')" title="Развернуть/Свернуть" style="color: #0000ff">И на меня нажми!!</a>
</body>
</html>
Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> присваивая ему свойства display:none или display: block, и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать для каких целей предназначено свойство display: none.
Ну и для общего развития.. Как уже говорилось выше block, inline и none это далеко не все возможные значения свойства display.
Вот остальные:
- list-item - элемент выводится как блочный и добавляется маркер списка.
- run-in - устанавливает элемент как блочный или строковый в зависимости от контекста.
- compact - устанавливает элемент как блочный или строковый в зависимости от контекста.
- marker значение используется совместно с псевдоэлементами before и after, генерирует блок маркера
- table - элемент объявляется таблицей
- inline-table - элемент объявляется строкой таблицы
- table-row-group - элемент объявляется группой строк ячеек таблицы
- table-header-group - элемент объявляется группой строк ячеек таблицы, располагается в начале таблицы
- table-footer-group - элемент объявляется группой строк ячеек таблицы, располагается в конце таблицы
- table-row - элемент отображается как строка таблицы
- table-column-group - определяет, что элемент является группой одной или более колонок таблицы
- table-column - элемент объявляется колонкой ячеек таблицы
- table-cell - элемент объявляется ячейкой таблицы
- table-caption - задает заголовок таблицы
Но использовать их в деле я бы не рекомендовал.. по той простой причине, что многие браузеры не поддерживают данные значения.. поэтому заострять внимания на них не будем.
Свойство CSS visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента с помощью свойства visibility элемент становится, не виден, однако место, которое он занимает, остается за ним.
Возможные значения свойства visibility:
- inherit - Элемент отображается так как указанно в элементе родителе.
- visible - Отображает элемент. (по умолчанию).
- hidden - Скрывает элемент. В отличии от display: none оставляет за элементом площадь которую он занимает. Проще говоря если display: none "удаляет" элемент то hidden делает его "прозрачным".
- collapse - Скрывает колонки и строки таблицы идентично display: none, Если свойство применяется к другим элементам, не имеющим отношения к таблицам, то результат будет таким же, как hidden.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>visibility</title>
</head>
<body>
<p>Блок 2 скрыт, однако место, которое он занимает, зарезервировано за ним.</p>
<div>
<span style="background: #c5ffa0; padding: 5px;">блок 1</span>
<span style="visibility: hidden; background: #c0e4ff; padding: 5px;">блок 2</span>
<span style="background: #c5ffa0; padding: 5px;">блок 3</span>
</div>
<hr>
<p>Строка 2 скрыта "удалена", если только дело происходит не в Internet Explorer 7 и ниже.</p>
<table border="1">
<tr>
<td>Строка 1</td>
</tr>
<tr style="visibility: collapse;">
<td>Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
</tr>
</table>
</body>
</html>
Обратите внимание visibility: collapse; не поддерживается браузером Internet Explorer 7 и его более ранними версиями.
Свойство clip определяет видимую область элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, "обрезается" и становится невидимым. На данный момент единственно доступная форма области - прямоугольник.
clip работает только для абсолютно позиционированных элементов и показывает лишь ту его часть, что входит в прямоугольную область заданную четырьмя значениями от левого и верхнего краёв данного элемента.
Значения:
- rect(сверху справа снизу слева) - Обрезает элемент сверху, справа, снизу и слева в соответствии с заданными, в скобках, четырьмя значениями, которые могут выражаться в процентах от ширины/длины элемента, пикселях или любых других единицах измерения принятых в CSS.
- auto - Оставляет элемент или одну из сторон элемента без изменений (по умолчанию).
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>clip</title>
</head>
<body>
<div style="position: absolute; clip: rect(15px auto auto 15px); width: 100px; height: 100px; background: #c5ffa0; border: double 5px #008000">
Этот блок частично обрезан слева и сверху
</div>
</body>
</html>
О том, что такое position: absolute; - абсолютно позиционированный элемент и вообще что такое позиционирование мы поговорим в отдельной главе.
В виду того, что свойство visibility: collapse; не поддерживается ранними версиями браузера Internet Explorer рекомендую, при работе с таблицами использовать display: none, результат будет аналогичным collapse только работающим в IE.
Свойства display, visibility и clip в сочетании с скриптами, а так же псевдоэлементами позволяют достичь весьма интересных результатов.
