Игорь Квинт - HTML, XHTML и CSS на 100%
Следующее правило перемещает все блоки, порожденные элементом IMG с атрибутом class="icon", влево и устанавливает значение ширины поля равным нулю:
IMG.icon {
float: left;
margin-left: 0;
}
Рассмотрим исходный HTML-документ и таблицу стилей на примере из листинга 9.14.
Листинг 9.14. Пример перемещаемого объекта<html>
<head>
<title>Глава 9. Пример перемещаемого объекта</title>
<style type="text/css">
img { float: left }
body, p, img { margin: 2em }
</style>
</head>
<body>
<img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">
Пример текста, у которого нет другого...
</body>
</html>
Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом:
<body>
Произвольный текст,
<img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">
у которого нет другого...
</body>
Это объясняется тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.
Фиксированное позиционирование
Фиксированное позиционирование – разновидность абсолютного позиционирования. Единственным его отличием является то, что контейнер определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они схожи с фиксированными фоновыми изображениями. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это может оказаться удобным, например, при размещении подписей в нижней части каждой страницы.
Вы можете использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации, представленный на рис. 9.5.
Рис. 9.5. Фиксированное позиционирование
Подобного эффекта можно достичь с помощью HTML-кода и правил стиля, представленных в листинге 9.15.
Листинг 9.15. Создание кадров в CSS<html>
<head>
<title>Глава 9. Создание кадров в CSS</title>
<style type="text/css">
body { height: 8.5in } /* будет использовано ниже для определения */
/* процентных соотношений, задающих значение */
/* высоты элемента */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="header"> ... </div>
<div id="sidebar"> ... </div>
<div id="main"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
Попробуйте нарисовать на листе бумаги свою разметку страницы, а потом создать ее, используя приобретенные навыки.
Определение позиционного уровня
Для размещенного блока вы можете задать позиционный уровень, в текущем контексте используя свойство z-index. Это свойство может принимать такие значения.
• «целое число» – является значением позиционного уровня сгенерированного блока в текущем контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем 0.
• auto – позиционный уровень блока в текущем контексте совпадает с позиционным уровнем родительского блока.
Рассмотрим пример, приведенный в листинге 9.16. В этом примере позиционные уровни блоков именуются с использованием атрибута id. Причем позиционный уровень text2 наследуется от корневого блока. Другие уровни указываются свойством z-index.
Листинг 9.16. Позиционирование вдоль оси z<html>
<head>
<title>Глава 9. Позиционирование вдоль оси z</title>
<style type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</style>
</head>
<body>
<img id="image" class="pile"
src="someimg.gif" alt="Картинка"
style="z-index: 1">
<div id="text1" class="pile"
style="z-index: 3">
Этот текст будет находиться поверх изображения.
</div>
<div id="text2">
Этот текст будет находиться под всем остальным.
</div>
<div id="text3" class="pile"
style="z-index: 2">
Этот текст будет находиться ниже текста text1, но поверх изображения.
</div>
</body>
</html>
Данный пример должен пояснить вам понятие прозрачности. По умолчанию блок ведет себя так, что другие блоки, находящиеся за ним, видны сквозь прозрачную область его содержимого. В данном примере каждый блок, накладывающийся на другие блоки, является прозрачным. Такой тип поведения может быть переназначен посредством использования одного из существующих свойств фона.
Резюме
В данной главе были разобраны основные возможности CSS по оформлению документа. Немного попрактикуйтесь, и с уверенностью можно будет сказать, что вы можете создать и оформить страницу как истинный профессионал.
Глава 10
Введение в динамический HTML
10.1. Браузер и HTML-документ
10.2. Родительские и дочерние объекты
10.3. Объекты браузера
10.4. Объектная модель документа (DOM)
Язык HTML позволяет создавать только статические веб-страницы, не обеспечивающие интерактивное взаимодействие с посетителем сайта. Однако в HTML-документ можно встраивать сценарии, то есть небольшие программы, написанные на специальном языке, придающие веб-странице динамичность. Одним из таких языков создания сценариев является JavaScript.
JavaScript – это объектно-ориентированный язык программирования. Это означает, что каждый элемент на веб-странице и в окне вашего браузера предстает в виде некоего объекта, доступного для управления из программного кода. Кнопки и поля формы, гиперссылки, изображения, цвет фона веб-страницы и даже само окно браузера с точки зрения программирования на JavaScript являются объектами.
Каждый объект имеет свои свойства, и с ним можно совершать определенные действия. Это позволяет разработчику легко получать доступ к любому элементу веб-страницы. Какие объекты существуют в JavaScript, какими свойствами они обладают и как с помощью сценариев управлять любыми элементами HTML-документа, вы узнаете, прочитав данную главу.
10.1. Браузер и HTML-документ
При программировании сценариев на JavaScript вы всегда будете использовать объекты в качестве основных инструментальных средств. Объекты – это элементы рабочей области браузера и HTML-документа. Окно браузера, веб-страница, ее фоновый цвет, изображения, текст и все, что находится на странице, – это объекты. В языке JavaScript принято различать объекты браузера и объекты HTML-документа. Рассмотрим их подробнее.
Объекты браузера создаются автоматически при загрузке веб-страницы. К ним относятся Window, Navigator, Screen, History, Location. Приведу их краткую характеристику.
• Window – дает доступ к окну браузера.
• History – дает доступ к истории посещенных ссылок.
• Navigator – дает доступ к характеристикам браузера.
• Location – содержит текущий URL страницы.
• Screen – дает доступ к характеристикам экрана монитора.
С точки зрения языка JavaScript окно вашего браузера – это объект Window. Данный объект, в свою очередь, также содержит некоторые объекты – элементы оформления, например строку состояния и полосу прокрутки.
Внутри окна браузера размещается веб-страница – HTML-документ. Он является ни чем иным, как объектом Document. В свою очередь, объект Document содержит другие объекты – объекты HTML. Это ссылки, изображения, формы, цвет фона, то есть все, что находится на веб-странице.
Итак, в языке JavaScript есть объекты. Их можно сравнить с существительными или предметами. У каждого объекта есть свои свойства, или характеристики. Свойства описывают объекты, как прилагательные описывают существительные. В синтаксисе языка JavaScript свойство любого объекта описывается так: oбъект. свойство. Например, установить желтый цвет фона веб-страницы с помощью языка JavaScript можно следующим образом: document.bgColor = «yellow». В этой конструкции document – объект (веб-страница, HTML-документ), bgColor – свойство объекта Document (фоновый цвет веб-страницы), yellow – значение свойства bgColor.
Кроме того, над каждым объектом можно совершать определенные действия. Эти действия принято называть методами. Согласно синтаксису языка JavaScript после метода всегда ставятся скобки по схеме oбъект. мeтoд(). Например, чтобы с помощью языка JavaScript отобразить на веб-странице текст «Hello world!», нужно использовать следующую конструкцию: document. write ("Hello world! "). Здесь document – объект, write() – метод, присущий объекту Document, а выражение в скобках – текст, который должен отобразиться на странице в результате использования метода write(). На языке программирования это называется «метод возвращает результат».
