Лекции / Глава 19. Введение в веб-программирование
.pdf
}</style></head>
<body>
<h1>Абсолютное позиционирование</h1>
<div id="blueblock">ЭТО СИНИЙ БЛОК!</div>
<p>Синий блок помещен на 100 пикселов сверху и 100 пикселов слева.</p>
</body>
</html>
Результат показан на рисунке 19.22:
Рисунок 19.22. Абсолютное позиционирование в действии
§19.25 Практикум: «Абсолютное позиционирование»
Сейчас вы попробуете разместить каждый элемент вашей страницы в окне браузера, используя фиксированные координаты. Для начала отменим некоторые ранее сделанные изменения стилей. Нужно удалить во временном селекторе, добавленном раннее, свойства border и padding. Также для элемента body заменим ранее установленные значения нулями.
Правило стиля для элемента body будет таким:
style1.css body {
font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #e2edff;
line-height: 125%;
41
padding: 0; border: 0;
}
Определим персональные настройки для заголовка страницы и заголовка второго уровня.
style1.css
#header h1 { text-align: center;
letter-spacing: 0.25em; font-size: 200%; background-color: yellow; height: 30px;
width: 600px;
border: #ffce5c groove 5px; padding: 5px;
margin: 0;
}
#tagline h2 { text-align: center; font-style: italic;
font-family: Georgia, Times, serif; background-color: #bed8f3;
border: 3px solid silver; width: 600px;
padding: 5px;
}
Теперь будем менять местоположение элементов страницы. Для начала добавьте следующее правило в конец вашего CSS-файла:
#header, #tagline, #content, #mainnavigation, #author { position: absolute;
}
Для всех разделов задана абсолютная позиция – левый верхний угол браузера. Мы объявили, что позиция абсолютная, но не упомянули, где она должна располагаться.
Сейчас наведем порядок. Для начала сдвинем направо (на 720 пикселов)
заголовок второго уровня справа от основного заголовка. В CSS-файле добавим следующее правило:
#tagline {
left: 720px;
42
}
Расположим под заголовками область основного контента и навигации на одном уровне. В CSS-файле добавим следующее правило, чтобы сдвинуть блоки вниз на 70
пикселов – абсолютное значение относительно окна браузера:
#mainnavigation, #content { top: 70px;
}
Рисунок 19.23. Текущее положение разделов
Теперь определим позицию для раздела content. Для этого сдвинем его вправо,
чтобы он не перекрывал блок навигации. Поскольку ширина блока навигации 200
пикселов, то сдвинем раздел контента на 220 пикселов вправо. Это обеспечит вам чистый сдвиг (и некоторый зазор между разделом основного контента и навигационным блоком).
#content {
left: 220px;
border: 1px dashed black;
}
Рисунок 19.24. Использование позиционирования для разграничения навигации и основного контента
43
Осталось найти место для раздела автора author. Переместим этот раздел на 270
пикселов вниз и изменим его размеры для эстетичности. Применим следующий CSS-
код:
#author {
font-weight: none; width: 200px; height: 70px;
border: red dotted 2px; text-align: center; top: 270px;
}
Итоговый вариант применения таблицы стилей представлен на рисунке 19.25.
Рисунок 19.25
§19.26 Относительное позиционирование
С относительным позиционированием любая величина смещения, которую вы укажете, будет применена относительно исходного положения элемента до того, как вы примените правило стиля. Вот несколько примеров правил стилей. Обратите внимание на правило, которое применяется к элементам класса nudged:
style2.css
p {
background-color: #ccc;
}
.nudged {
position: relative; top: 10px;
left: 10px;
}
44
Далее приведем HTML-код, в котором созданный класс применен к среднему
абзацу:
Lesson4.html
<!DOCTYPE html>
<html lang="en" title="Обучающая страница для студентов групп
4240,4242!">
<head><meta charset="UTF-8"/>
<title>Урок четвертый - каскадная таблица стилей</title>
<link href="style2.css" rel="stylesheet" type="text/css"/> </head>
<body>
<p>
Свойство background-color изменяет цвет фона для всей страницы. Значения свойств может быть указано с помощью наименования цветов (navy, blue, red, yellow и т.д.) или с использованием шестнадцатеричной системы кодов цвета.
</p>
<p class="nudged">
Свойство line-height, при увеличении его значения, расширяет пространство между строками (интерлиньяж), за счет чего текст будет лучше восприниматься.
</p>
<p>
Свойство padding используется для расширения пространства между внешним краем элемента и содержанием внутри его. Поскольку мы говорим об элементе body, то речь идет о верхнем, нижнем и боковых полях окна браузера. Значение, которое мы устанавливаем для этого свойства, определяет, какое пространство останется между внешними краями окна и контентом. В данном случае мы задали 15 пикселей.
</p>
<div id="mainnavigation" class="highlight">
<h3>Навигация сайта</h3>
<ul>
<li><a href="Lesson1.html">Урок первый</a></li> <li><a href="Lesson2.html">Урок второй</a></li> <li><a href="Lesson3.html">Урок третий</a></li> <li><a href="Lesson4.html">Урок четвертый</a></li> </ul>
</div>
</body></html>
Этот класс можно было применить к любому абзацу (и вообще к любому блочному элементу). На рисунке 19.26 показан результат применения класса nudged к
среднему абзацу.
45
Рисунок 19.26
Относительное позиционирование лучше адаптируется к изменению размера шрифта в браузере. Опытные разработчики в работе использует сочетание абсолютного, относительного и плавающего позиционирования.
§19.27 Плавающее позиционирование
Идея принципа проста – когда нам требуется обтекание какого-то элемента остальным содержимым страницы, мы закрепляем одну его сторону, позволяя другим элементам располагаться вокруг. Точно планируя, можно создать несколько плавающих элементов на странице и добиться эффекта верстки нескольких колонок,
как в газете. Рассмотрим простой пример:
style2.css
.nav {
float: left; /*объявление плавающего позиционирования*/ width: 300px;
height: 300px;
}
Здесь блок, принадлежащий классу nav, прикрепляются к левой части веб-
страницы, занимая 300 пикселов в ширину и высоту. Следующим за ним текст сдвигается, занимая все свободное пространство, кроме float-элемента. Применим данный стиль к следующему HTML-коду:
Lesson3.html
<!DOCTYPE html>
46
<html lang="en">
<head><meta charset="UTF-8"/><meta name="author" content="Заид
Мингалиев"> |
|
|
<link |
href="style2.css" |
rel="stylesheet" |
type="text/css"/><title>Урок третий - Элемент head</title></head>
<body>
<div id="header">
<h1>Элемент head</h1>
<h4>Элемент head содержит сведения о странице. Например, название страницы в браузере.</h4>
</div>
<div id="image" class="nav">
<img src="head.jpg" width="300" height="200" alt="head"/></div> <div id="content">
<p>Элемент head содержит сведения о страницу, но ничего из этой информации не будет показано на самой странице. Например, он включает в себя элемент title (название), который сообщает браузеру, что нужно отобразить на заголовке веб-страницы.</p>
<p>Стоит заметить, что элемент title используется для обработки содержимого страницы и для выбора информации, которая
будет показана в результатах поиска.</p>
</div>
<div id="mainnavigation" class="highlight"> <h3>Навигация сайта</h3>
<ul>
<li><a href="navigation.html">Главная страница</a></li> <li><a href="Lesson2.html">Урок второй</a></li>
<li><a href="Lesson3.html">Урок третий</a></li> <li><a href="Lesson4.html">Урок четвертый</a></li>
</ul>
</div>
</body>
</html>
На рисунке 19.27 показано это, как выглядит в браузере:
Рисунок 19.27. Простой плавающий элемент в действии
47
§19.28 Свойство box-sizing
Данное свойство применяется для изменения алгоритма расчета ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины контента
(width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм,
чтобы свойства width и height задавали размеры не контента, а размеры блока.
Значения свойства:
1. content-box
Cвойства width и height задают ширину и высоту контента и не включают в себя значения отступов (margin), полей (padding) и границ (border).
2. border-box
Свойства width и height включают в себя значения полей (padding) и границ
(border), но не отступов (margin).
3. padding-box
Свойства width и height включают в себя значения полей, но не отступов (margin) и
границ (border).
Применим данные стили для блока, принадлежащему классу.box2:
box-sizing.html
<style>
.box1 {
background: #f0f0f0;
width: 300px; /* Ширина контента */ padding: 10px; /* Поля */
border: 2px solid #000;
}
.box2 {
background: #fc0; /* Цвет фона */ width: 300px; /* Ширина блока */ padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */ border: 2px solid #000; /* Параметры рамки */
box-sizing: border-box; /* Ширина блока с полями и границей*/
}
48
</style>
Результат применения стилей представлен на рисунке 19.28.
Рисунок 19.28
§19.29 Свойство display
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 19.4 приведен полный список значений свойств.
Таблица 19.4
|
|
|
Значение |
|
Описание |
|
|
|
|
|
|
|
|
Элемент показывается как блочный. Применение этого значения для |
block |
|
встроенных элементов, например тега <span>, заставляет его вести |
|
подобно блокам — происходит перенос строк в начале и в конце |
|
|
|
|
|
|
содержимого. |
|
|
|
|
|
|
|
|
Элемент отображается как встроенный. Использование блочных тегов, |
|
|
таких как <div> и <p>, автоматически создает перенос и показывает |
inline |
|
содержимое этих тегов с новой строки. Значение inline отменяет эту |
|
|
особенность, поэтому содержимое блочных элементов начинается с |
|
|
того места, где окончился предыдущий элемент. |
|
|
|
|
|
|
49
list-
item
none
Элемент выводится как блочный и добавляется маркер списка.
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В
этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
50