Как делать в css Форматирование.
В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в седьмой главе, в которой мы говорили о размерах элемента - 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 - задает заголовок таблицы
Но использовать их в деле я бы не рекомендовал.. по той простой причине, что многие браузеры не поддерживают данные значения.. поэтому заострять внимания на них не будем.
Дата добавления: 2016-02-02; просмотров: 703;