Internet_tehnologii_kurs_lek
.pdf
Рис. 11.6. Применение границ для определенных сторон и использование значений толщины, начертания и цвета
Свойство-сокрашение border
Свойство-сокращение border - это наиболее расширенное сокращение, используемое для отдельного свойства. Существует несколько вариантов сокращений.
Сокращенная форма записи для стороны, толщины, начертания и цвета У каждой категории сокращений существует соответствующая сокращенная форма записи, как показано ниже: border-right, border-left, border-top, border-bottom
border-width border-style border-color
Поэтому можно записать так: border-right: 1px dotted red;
Правая граница элемента с указанным свойством будет обладать следующими характеристиками: толщина 1 пиксел, пунктирная, красного цвета.
Свойство border
Это свойство-сокращение устанавливает толщину, начертание и цвет для всех четырех сторон границы выбранного элемента: border: thick ridge white;
Результаты показаны на рисунке 11.7.
Рис. 11.7. Использование свойства-сокращения border
В отличие от полей (и отступов) в самом свойстве border нельзя указать различную толщину для сторон. Если вы хотите стилизовать одну сторону границы совершенно иначе, чем три остальные стороны, просто добавьте еще одно правило, воспользовавшись «полнсформатным» свойством, например border-right-width.
Использование отступов Отступы позволяют стилизовать промежуток между содержимым и его границей. Обратите внимание, что в предыдущих примерах этой
главы элементы были прижаты к своим границам и полям. Отступы помогают решить эту проблему. Отступ можно добавить к любой отдельной стороне, используя значения длины, например пикселы или проценты. Существуют следующие отдельные свойства отступа: padding-top, padding-right, padding-bottom и padding-left. Использование каждого из этих свойств продемонстрировано в примере 11.5.
Пример 11.5. Использование свойств отступа для добавления пустого пространства
body {font: 14px Verdana, Arial, Helvetica, sans-serif; color: white; background-color: black; margin-top: lOpx;} hi {font-size: 24px; color: orange; border-bottom: 2px dotted lime; padding-bottom: lOpx;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc-text-indent: 15px;}
p {border: thin solid orange; padding-top: 15px; padding-right: 30px; padding-bottom: 0; padding-left: 30px;}
Обратите внимание, как отступ отделяет текст элемента hi от границы, а также на отступы сверху, справа, снизу и слева элемента абзаца, как показано на рисунке 11.8.
Рис. 11.8. Использование отступа для добавления пустого пространства
Свойство-сокращение padding
91
Для задания отступов можно также применять сокращенную форму записи, используя свойство padding. Сокращенная форма записи для задания отступов очень сильно похожа на сокращенную форму записи для заданий полей.
Это означает, что важен порядок указания значений, иначе вы очень быстро столкнетесь с проблемой (TRouBLe)! Для функционирования механизма сокращенной записи необходимо размещать значения в следующем порядке: верхняя сторона, правая сторона, нижняя сторона, левая сторона:
р {padding: 15px ЗОрх 25рх 0;}
Данное правило установит следующие отступы для абзаца: 15 пикселов сверху, 30 пикселов справа, 25 пикселов снизу и 0 пикселов слева, как показано на рисунке 11.9.
Рис. 11.9. Использование свойства-сокращения padding для управления отступами абзаца
Можно также использовать комбинации из двух и трех значений - принцип применения значений точно такой, как для свойствасокращения margin, описанного ранее в этой главе. Наконец, если указано всего лишь одно значение, оно будет применено ко всем четырем сторонам блока элемента.
Позиционирование, плавающее размещение и Z-индекс
Позиционирование относится к схеме языка CSS, которая позволяет использовать элементы для создания блоков и перемещать эти блоки относительно документа или браузера.
Плавающее размещение относится к методике языка CSS, которая позволяет располагать элемент справа или слева. Текст документа может обтекать данный элемент. Вероятнее всего, вы знакомы с этим на примере изображений. Плавающее изображение можно выровнять по правому краю и текст будет обтекать изображение. Добавьте небольшой отступ и получите отличный внешний вид.
Применение плавающего размещения связано с использованием плавающих элементов div, позволяющих употреблять плавающие блоки для навигации или, что даже более рискованно, для создания нескольких столбцов, которые можно использовать, с позиционированием или без него, в дизайне различных макетов.
Z-индекс служит способом размещения блоков элементов вдоль оси z. Пока было рассказано только про оси х и у – ось х отвечает за горизонтальное размещение, а ось у - за вертикальное. Ось z представляет третье измерение.
Используя z-индекс, можно буквально накладывать элементы друг на друга и смещать их. Это полезная возможность для создания макетов и эффектов, однако, обычно z-индекс используется совместно с языком JavaScript.
Введение в позиционирование
Фактически, позиционирование - это сердце языка CSS - та часть, которая предоставляет максимальные возможности по управлению внешним видом страницы. Мнение насчет разделения позиционирования и языка CSS является ошибочным, оно, в основном, возникло изза плохой реализации поддержки позиционирования, и поэтому позиционирование практически не использовалось вплоть до нескольких последних лет.
Схема позиционирования языка CSS позволяет использовать четыре типа позиционирования: Абсолютное (Absolute).
Относительное (Relative). Статическое (Static). Фиксированное (Fixed).
Для позиционирования блока можно воспользоваться свойствами top, bottom, left и right с определенными значениями. Нормальный поток
Термин нормальный поток обозначает обычное поведение браузера. Несомненно, вы заметили, что по умолчанию все содержимое выравнивается по левой стороне браузера, пока это поведение не будет изменено при помощи языка HTML или CSS. Рассмотрим пример
12.1.
Пример 12.1. Нестилизованное содержимое, позволяющее наглядно представить нормальный поток в браузере
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title> </head>
<body>
<hl>The Black Cat</hl> <h2>By Edgar Allen Poe</h2>
<p> I married early, and was <a href= "http://www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://www.poemuseum.org/"> re-markably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> </body> </html>
Поскольку у вас уже есть представление о блочной модели, вы теперь можете заметить, как все блочные элементы (заголовки и абзацы) размещаются друг над другом и выравниваются по левой стороне.
Встроенные элементы (ссылки) не отрываются от потока. Если изменить размеры окна браузера, они просто займут свою новую позицию, не разрывая при этом строку.
92
На рисунке 12.1 показан документ в окне браузера, а на рисунке 12.2 показан тот же документ, но уже в браузере с измененными размерами окна. Обратите внимание, как текст заполняет доступное пространство, при этом он всегда выравнивается по левой стороне. Посмотрев на эти примеры, попробуйте сами: откройте простой документ, не содержащий таблиц или CSS-позиционирования, установите и измените размеры окна браузера. То, что вы увидите, - это нормальный поток элементов в браузере.
Рис. 12.1. Нестилизоватшй документ в нормальном потоке
Рис. 12.2. Изменение размеров окна браузера все равно приводит к выравниванию текста полевой стороне
Блоки-контейнеры
Еще одним важным понятием при работе с CSS-позиционированием является блок-контейнер. Блок-контейнер - это любой родительский блок для элемента, который вы пытаетесь позиционировать. Рассмотрим пример 12.2.
Пример 12.2. Понятие блоков-контейнеров
<div id="content"> <hl>The Black Cat</hl> <h2>By Edgar Allen Poe</h2>
<p> I married early, and was <a href="http:// www.poemuseum. org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://www.poemuseum.org/"> re-markably</a> large and beautiful animal, entirely black, andsagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured withsuperstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Notthat she was ever serious upon this point - and I mention thematter at all for no better reason than that it happens, justnow, to be remembered.</p></div>
Как видно из примера, все содержимое размещено в элементе div, значение свойства id которого установлено в content (блестяще?). Все блоки, расположенные в элементе div с идентификатором content, теперь содержатся в элементе div.
Предположим, что мы разместили контейнер вокруг элемента с идентификатором content: <div id="main"> <div id="content">
</div> </div>
Элемент div с идентификатором content теперь содержится в элементе div с идентификатором main, который стал блоком-контейнером для элемента div с идентификатором content.
Важно понимать эту концепцию, поскольку при использовании позиционирования блок-контейнер элемента может существенно влиять на то, как на самом деле позиционируется элемент или элементы, содержащиеся в нем.
На мгновение вернемся к примеру 12.1. В примере нет очевидного блока-контейнера, не так ли? Вы удивитесь, если я скажу, что в этом документе все-таки есть блок-контейнер? И вот почему: если блок-контейнер не указан, блоком-контейнером является корневой элемент. Мы знаем, что корневой элемент - это элемент html, который и является блоком-контейнером.
Квантовый скачок:
Почему В том случае, когда не указаны другие блоки-контейнеры, блоком-контейнером является элемент html? С точки зрения позиционирования, это происходит потому, что существуют стандартные стили браузера для множества элементов, включая элемент html. Дополнительную информацию можно найти в главе 7 «Использование языка CSS». У каждого браузера существует стандартная таблица стилей, благодаря которой даже без применения стилей будет выполнена визуальная стилизация. Вот почему заголовки, абзацы, ссылки и другие элементы отображаются при помощи определенного шрифта, его размера и жирности. Работая с позиционированием, кажется, что позиция определенных блоков устанавливается относительно сторон браузера (также называемых «хромом»). На самом деле, позиционирование определенных блоков, находящихся за пределами контейнера, происходит благодаря стандартным стилям, описанным для элемента html.
Для рисунка 12.3 просто стилизован элемент html, заданием для него границы шириной в 2 пиксела. Обратите внимание, как различные браузеры интерпретируют элемент html.
93
Рис. 12.3. Слева направо: браузеры Firefox, Opera и Internet Explorer 6.0- обратите внимание, как браузеры Firefox и Opera интерпретируют элемент html и что его стилизованные границы принадлежат документу, тогда как в браузере IE нижняя и левая части элемента включают области браузера, например полосы прокрутки
Нельзя сказать, что реализация браузера IE является неправильной, хотя и кажется странной, поскольку в спецификациях точно не указано, как браузеры должны реализовывать блоки-контейнеры. Существует море причин для понимания необходимости использования позиционирования, а также его применения.
Окно просмотра браузера Окно просмотра браузера - это окно браузера, в котором отображается содержимое документа. Это достаточно простое понятие, однако,
повторюсь, это понятие отличается от понятия блоков-контейнеров.
При позиционировании, в некоторых случаях, блоки элементов позиционируются относительно окна просмотра, а не относительно нормального потока или блоков-контейнеров. Поэтому, необходимо иметь общее представление об окне просмотра, как показано на рисунке 12.4.
Поведение браузера, при котором полосы прокрутки включаются в окно просмотра, когда содержимое длиннее или шире доступного пространства окна просмотра, считается стандартным. В этом смысле браузеры ведут себя по-разному, отчасти из-за нестрогих принципов, описывающих идеальное поведение браузеров. В результате, возникнет несогласованность при просмотре дизайна пользователями, независимо от используемого метода.
Рис. 12.4. Браузер Firefox с боковой панелью, меню и строкой состояния; окно просмотра - это только то окно, в котором отображается документ
Абсолютное позиционирование: относительно корневого элемента Абсолютное позиционирование подразумевает позиционирование блока элемента относительно его блока-контейнера. Когда для какого-
либо элемента применяется абсолютное позиционирование, этот элемент полностью выпадает из нормального потока. Проще говоря, это означает, что любой позиционируемый блок всегда будет позиционирован относительно его явного контейнера или относительно корневого элемента html (но не окна просмотра), независимо от остального содержимого страницы.
В примере 12.3 заголовок и абзац были размещены внутри блока-контейнера, а затем позиция блока была смещена на 100 пикселов слева и на 50 пикселов сверху.
Пример 12.3. Абсолютное позиционирование блока относительно корневого элемента
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>working with style</title> <style type="text/css"> #content {
position: absolute; left: l00px;
top: 50px;
border: lpx solid red;
}
</style>
</head>
<body>
<div id="content">
<p> I married early, and was <a href="http://www.poemu-seum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.
</p>
</div>
</body>
</html>
94
Поскольку больше никаких блоков не определено явно, блок будет позиционирован относительно корневого элемента html. Снимок экрана окна браузера, без «хрома», был загружен в программу Photoshop, и теперь можно наглядно представить абсолютное позиционирование блока относительно блока-контейнера, как показано на рисунке 12.5. На рисунке 12.6 показан тот же блок, но уже вместе с другими элементами страницы.
Рис. 12.5. Абсолютное позиционирование элемента div c идентификатором content
Рис. 12.6. Абсолютное позиционирование блока с заданной шириной – содержимое размещается в блоке, позиция которого не изменяется, не смотря на другие элементы документа. При этом, блок отображается безупречно – это означает, что он удален из нормального потока Абсолютное позиционирование: относительно другого блока
Возвращаясь к предыдущему примеру, в котором описан блок-контейнер для блока с содержимым, мы можем продвинуться дальше и узнать, как блок с абсолютным позиционированием размещается только относительно его блока-контейнера, как показано на примере
12.4.
Пример 12.4. Абсолютное позиционирование блока относительно блока-контейнера
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title> <style type="text/css">
#main {
position: absolute; left: 50px;
top: 20px;
border: lpx solid green;
}
#content { position: absolute; left: lOOpx;
top: 50px; width: ЗООрх;
border: lpx solid red; background-color: #ccc; } ul,li,a {
list-style-type: none; display: inline; text-decoration: none; } </style> </head> <body> <div id="main"> <div id="nav"> <ul>
<lixa href = "home.html">Home</ax/li> <li><a href ="products .html">Products</ax/li> <lixa href ="services .html">Services</ax/li> <lixa href="about .html">About As</ax/li> <lixa href="contact.html">Contact</ax/li> </ul> </div>
<div id="content"> <hl>The Black Cat</hl>
<p> I married early, and was <a href="http://www.poemu-seum.org/">happy to find</a> in my wife a disposition notuncongenial with my own. Observing my partiality for domesticpets, she lost no opportunity of procuring those of the mostagreeable kind. We had birds, gold fish, a fine dog, rabbits, asmall monkey, and a cat.</p></div></div></body></html>
В этом примере блок-контейнер с идентификатором main абсолютно позиционирован на 50 пикселов слева и 20 пикселов сверху. Блок навигации совсем не позиционируется, но он содержится внутри блока с идентификатором main и поэтому отображается в своем блоке как обычно. Были добавлены несколько стилей, чтобы продемонстрировать все это вместе. Наконец, для элемента div с идентификатором content используется абсолютное позиционирование. Посмотрим, что у нас получилось, на рисунке 12.7.
95
Рис 12.7. Абсолютное позиционирование элемента div с идентификатором content относительно блока-контейнера
Обратите внимание на две окружности на рисунке. Первая окружность обозначает начальную точку блока-контейнера с идентификатором main. Вторая окружность обозначает начальную точку блока с идентификатором content. Обратите внимание на позиционирование блока с идентификатором content относительно блока-контейнера: 100 пикселов от левой стороны блока-контейнера и 50 пикселов от верхней стороны блока-контейнера.
Теперь блок расположен в 150 пиксела слева и 70 пиксела сверху. И это понятно, поскольку он был позиционирован относительно позиции блока-контейнера, а не элемента html или окна просмотра браузера.
Для блока-контейнера не обязательно использовать абсолютное позиционирование. Описанная схема позиционирования остается прежней, независимо от типа позиционирования: блок с абсолютным позиционированием всегда позиционируется относительно его блока-контейнера, и он всегда выпадает из нормального потока, без всяких исключений.
Относительное позиционирование
Как отмечалось ранее, терминология, используемая в CSS-позиционировании, немного смутная. Относительное позиционирование поначалу часто приводит в замешательство, поскольку возникает вопрос: относительно чего? Большинство людей автоматически - и достаточно логично - считают, что позиция будет определяться относительно другого элемента.
Но это не так (вы знали это). Блоки с относительным позиционированием позиционируются относительно нормального потока. Это означает, что они не выпадают из нормального потока, как блоки с абсолютным позиционированием. В этом примере удалены все поля, с помощью универсального селектора (*); таким образом мы избавимся от всех пустых пространств, что позволит нам увидеть точное измерение относительного позиционирования, как показано в примере 12.5.
Пример 12.5. Относительное позиционирование
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title> <style type="text/ess"> * {margin: 0;} ttcontent {
position: relative; left: 45px;
top: lOpx; width: 400px;
border: lpx solid red; } </style> </head> <body>
<hl>The Black Cat</hl>
<p> I married early, and was <a href="http:// www.poemuseum.org/">happy to find</a> in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p> <div id="content">
<p>This latter was a <a href="http://www.poemuseurn.org/"> re-markably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p> </div>
<p>Pluto - this was the cat's name - was my <a href="http://www.poemuseum.org/">favorite</a> pet and playmate. I alone fed him. and he attended me wherever I went about the
house. It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>
На рисунке 12.8 показано, что элемент div с идентификатором content размещен относительно нормального потока документа, а не других блоков.
Рис. 12.8. Блок с относительным позиционированием - обратите внимание, что смещения указываются относительно нормального потока,
96
а не относительно другого элемента
Итак, смещение блока сверху, от блока предыдущего элемента, составляет 10 пикселов, а от левого края потока - 45 пикселов. Именно в этом месте начинается текст, поскольку он также включен в нормальный поток. Обратите внимание, что позиционирование не прерывает поток; последующее содержимое отображается обычным образом как перед, так и после блока с относительным позиционированием.
Относительное позиционирование используется в том случае, когда нормальный поток не должен нарушаться. Абсолютное позиционирование лучше всего использовать для элементов с крайне необычным размещением. Часто эти два типа позиционирования применяются совместно, например элемент div с относительным позиционированием и элемент div с абсолютным позиционированием, расположенный внутри первого элемента, или наоборот.
Фиксированное позиционирование
Фиксированное позиционирование - это замечательная часть языка CSS. Даже не смотря на замечательность фиксированного позиционирования, этот тип не поддерживается в браузере Internet Explorer и, по существу, может использоваться только в браузерах Mozilla, Opera, Safari, а также в других браузерах, поддерживающих этот тип позиционирования.
Фиксированное позиционирование позволяет закрепить блок в любом месте страницы. В отличие от абсолютного позиционирования, фиксированные элементы позиционируются относительно окна просмотра (вы знали, что оно просто обязано быть упомянуто где-то в этой главе). Посмотрим на пример 12.6.
Пример 12.6. Фиксированное позиционирование
<style type="text/css"> #nav {
position: fixed; left: Opx; top: Opx; background: iccc; width: 100%; } ul,li,a {
list-style-type: none;display: inline;text-decoration: none;padding-left: 3px;padding-right: 3px;}</style> ^^
Давайте посмотрим, что же получилось. Установив значения позиции элемента div с идентификатором nav слева и сверху в 0, добавив серый фон и задав ширину, равную 100%, мы сделали панель навигации очень похожей на стандартное меню браузера, как показано на рисунке 12.9.
Хотя у браузера IE 6.0 отсутствует поддержка фиксированной схемы, это вовсе не означает, что ее вообще нельзя использовать. В результате будет создан блок в определенной позиции, однако он будет прокручиваться вместе с остальным содержимым вместо того, чтобы оставаться в первоначальной позиции.
Рис. 12.9. Фиксированное позиционирование панели навигации
В браузерах, поддерживающих фиксированное позиционирование, положение этого меню останется прежним, не зависимо от перемещения других элементов. Итак, если я прокручу содержимое, оно исчезнет позади меню, как показано на рисунке 12.10.
Рис. 12.10. Содержимое прокручивается позади панели навигации с фиксированным позиционированием
Теперь понятно, чем плохо отсутствие поддержки фиксированного позиционирования в браузере IE - такой полезной схемы позиционирования.
Статическое позиционирование - это четвертый тип позиционирования. В данном случае блок просто позиционируется в нормальном потоке, и поэтому этот тип позиционирования используется редко. Использование статического позиционирования похоже на использование свойства и значения text-align: left;. Это стандартное поведение браузера, поэтому этот тип используется только для переопределения предыдущего правила. В результате, статическое позиционирование используется достаточно редко.
Плавающие элементы Как отмечалось во вступлении к главе, плавающее размещение - это не схема позиционирования. Иногда его путают с
позиционированием, поскольку плавающее размещение может использоваться как отдельно, так и с позиционированными блоками для создания макетов.
Причина, по которой плавающее размещение было введено в язык CSS, совершенно не касалась макета, как такового. Необходимо было получить возможность для плавающего размещения элементов, особенно изображений, а также для обтекания содержимым этого изображения, как показано на рисунке 12.7.
Пример 12.7. Плавающее размещение изображения
<style type="text/ess"> img { float: right;
padding: 15px; } </style>
На рисунке 12.11 показаны результаты. Стили добавлены были, чтобы оживить внешний вид.
97
Рис. 12.11. Плавающее размещение изображения позволяет тексту обтекать изображение, создавая замысловатый внешний вид
Плавающее размещение можно использовать не только для элемента img, но и для остальных элементов. Таким образом, если навигация реализована с использованием элемента div и вы хотите использовать плавающее размещение для данного элемента, это легко сделать, как показано в примере 12.8.
Пример 12.8. Плавающее размещение элемента div #nav {
float: right;
border: lpx solid red; padding-right: 2 Opx; padding-top: lOpx; padding-left: lOpx; margin-left: lOpx;
}
На рисунке 12.12 показано, как элемент div с идентификатором nav и содержащиеся в нем элементы, размещаются с правой стороны, как и изображение из предыдущего примера. Выполнив это, вы, фактически, создали систему навигации с плавающим размещением, которую можно стилизовать по собственному усмотрению.
Рис. 12.12. Плавающее размещение блока - для элемента div с идентификатором nav использовано плавающее размещение, как и для изображения
Теперь достаточно просто представить, как можно использовать плавающее размещение для макетирования частей документа. Очищенное плавающее размещение Очистка плавающего размещения служит для того, чтобы размещение элемента оставалось плавающим, однако его не окружали другие
элементы. Свойство clear принимает следующие значения: left, right или both. Добавив свойство со значением clear: right; к разделу документа, навигация с плавающим размещением останется на прежнем месте, однако текст слева от нее отображаться не будет, как показано на рисунке 12.13.
Рис. 12.13. Очистка плавающего размещения позволяет плавающему элементу оставаться на первоначальном месте, но при этом последующее содержимое располагается ниже элемента
В примере 12.9 создаются два блока с плавающим размещением.
Пример 12.9. Стилизация двух блоков с плавающим размещением, один из которых размещается слева, а второй — справа
#nav { float: right;
border; lpx solid red; padding-right: 20px; padding-top: lOpx;
98
margin-left: lOpx;
}
#nav2 { float: left;
border; lpx solid red; padding-right: 20px; padding-top: lOpx; margin-right: lOpx;
}
На рисунке 12.14 показано, что произойдет в случае некорректного использования свойства clear для содержимого.
Рис. 12.14. Без надлежащего использования свойства clear, содержимое отображается в нормальном потоке между блоками с плавающим размещением
Свойство clear добавлено к обоим стилям, описывающим содержимое, как показано на рисунке 12.15.
Рис. 12.15. Очищение левого и правого блоков с плавающим размещением
Интересно, да? Вот так создаются столбцы. Мы будем работать со столбцами, созданными с использованием плавающего размещения, в главе 13.
Z-индекс
Z-индекс создает ось в пространстве, с помощью которой можно «складывать» и перекрывать элементы. Эту возможность удобно использовать при позиционировании, поскольку с ее помощью можно определять, какие блоки при изменении размеров окна браузера выйдут на передний план, а какие - на задний. Использование z-индекса по большей своей части относится к языку DHTML, в котором скрипты взаимодействуют с блоками элементов для динамических целей, например для создания анимации или игр.
В примере 12.10 представлены три блока с абсолютным позиционированием, каждый из которых перекрывает остальные, и стилизованы они таким образом, чтобы был понятен порядок наложения.
Пример 12.10. Z-индекс и позиционированные блоки
#boxl {
position: absolute; top: Юрх;
left: Юрх; background: #000; width: ЗООрх; height: 200px; z-index: 1;
}#box2 { position: absolute; top: 20px;
left: 20px; background: #999; width: ЗООрх; height: 200px,- z-index: 2;
}#box3 { position: absolute; top: 30px;
left: 30px;
99
background: #ccc; |
|
width: ЗООрх; |
|
height: 200px; |
|
z-index: 3; |
} |
Обратите внимание, чем выше значение z-индекса, тем «ближе» в стеке располагается блок. Итак, блок со значением свойства z- index равным 3 является ближайшим блоком в стеке по отношению к вам, как показано на рисунке 12.16.
Рис. 12.16. Z-индекс и порядок наложения - чем выше целочисленное значение, тем ближе в стеке располагается элемент по отношению к вам
CSS-макеты
Несколько лет назад люди нашли способ решения всех проблем, возникающих при использовании макетов на основе таблиц, который заключается в применении языка CSS для управления визуальным представлением дизайнов. В этой лекции будут рассмотрены примеры основных типов CSS-макетов, обычно используемыми для получения ряда дизайнов. Некоторые из этих макетов построены на основе схем позиционирования, которые были рассмотрены в предыдущей лекции. В некоторых макетах применяется плавающее размещение, которое не является схемой позиционирования, однако позволяет создавать колоночные макеты. Распространено также и комбинированное использование плавающего размещения и позиционирования.
Три столбца с обрамляющими меню фиксированной ширины
Одним из наиболее распространенных макетов для Web-сайтов является трехколоночный макет с обрамляющими столбцами определенной фиксированной ширины и с внутренним столбцом плавающей ширины, как показано на рисунке 13.1.
Рис. 13.1. Трехколоночный макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины
Для создания такого макета используется абсолютное позиционирование для размещения левого и правого столбцов. Затем явно указывается ширина столбцов в пиксела (именно так достигается фиксированная ширина). Хитрость здесь в том, что ширина центрального столбца не указывается, благодаря чему она остается плавающей и увеличивается или уменьшается в соответствии с доступным пространством, как показано в примере 13.1.
Пример 13.1. Трехколоночный макет с обрамляющими столбцами фиксированной ширины и с центральным столбцом плавающей ширины
<style type="text/css"> #nav {
position: absolute; left: 10px;
top: 50px; width: 200px;
}
#content { margin-left: 200px; margin-right: 200px; margin-top: 10pх;} #sidebar {
position: absolute; right: 10px;
top: 10px; width: 200px;
}
</style>
Обратите внимание, что в ID-селекторе #content для элемента div указаны значения левого и правого полей. Эти числовые значения должны быть скорректированы для соответствия отступам или границам, которые вы сами добавите к столбцам. Верхнее поле используется просто для зрительного баланса и никакая ширина для него не указывается. На рисунке 13.2 показан макет страницы, созданный с использованием данной методики, с дополнительными стилями для текста, промежутков и изображения. На рисунке 13.3 показана та же страница, но уже после изменения размеров окна браузера, - на рисунке видно, как содержимое заполняет все доступное пространство.
100