Урок 10. Позиционирование. Списки. Курсоры. Слои Принципы CSS-позиционирования

Урок 10. Позиционирование. Списки. Курсоры. Слои
Принципы CSS-позиционирования
Представим окно браузера как систему координат:
Принципы CSS-позиционирования - в том, что вы можете расположить бокс в
системе координат где угодно.
Скажем, мы хотим позиционировать заголовок. При использовании боксовой
модели заголовок выглядит так:
Если мы хотим расположить его на 100px от верхней границы документа и на
200px слева, мы должны ввести следующий код CSS:
h1{
position:absolute;
top: 100px;
left: 200px;
}
Вот результат:
Как видите, позиционирование с помощью CSS - очень точная техника при
размещении элементов. Это намного проще, чем использовать таблицы,
прозрачные изображения или ещё что-нибудь подобное.
Абсолютное позиционирование
Элемент, позиционированный абсолютно, не получает никакого пространства
к документу. Это означает, что после позиционирования он не оставляет после
себя пустое пространство.
Для абсолютного позиционирования элемента свойство position должно иметь
значение absolute. Вы можете использовать значения left, right, top и bottom для
размещения бокса.
В качестве примера абсолютного позиционирования мы разместим 4 бокса в
углах документа:
#box1{
background: yellow;
position:absolute;
border:2px solid black;
top: 60px;
left: 60px;
}
#box2{
background: SlateBlue;
border:2px solid black;
position:absolute;
top: 50px;
right: 50px;
}
#box3{
position:absolute;
background: Red;
border:2px solid black;
bottom: 60px;
right: 60px;
}
#box4{
background: LimeGreen;
position:absolute;
border:2px solid black;
bottom: 60px;
left: 60px;
}
Относительное позиционирование
Чтобы позиционировать элемент относительно, установите в свойстве position
значение
relative.
Разница
между
относительным
абсолютным
позиционированием состоит в том, как обсчитывается позиционирование.
Позиция элемента, размещаемого относительно, обсчитывается относительно
его оригинальной позиции в документе. Это означает, что вы смещаете
элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё
занимает в документе пространство после позиционирования.
Как пример относительного позиционирования попробуем разместить три
рисунка относительно их оригинального расположения на странице. Обратите
внимание, что рисунки оставили после смещения пустое пространство на
своих оригинальных позициях в документе:
#dog1{
position:relative;
left: 50px;
bottom:50px;
}
#dog2{
position:relative;
left: 20px;
bottom:100px;
}
Слои
CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в
двух измерениях на протяжении всех предшествующих уроков. В этом уроке
мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы
так, чтобы они перекрывались.
Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с
большим номером перекрывает элемент с меньшим номером.
Скажем, мы играем в покер и у нас - Straight. Наша "рука" должна быть
представлена так, чтобы каждая карта имела z-index:
При этом номера идут подряд (1-5), но того же результата можно добиться и
при использовании 5 различных номеров. Важна хронологическая
последовательность номеров (порядок).
Вот код примера с картами:
#ten_of_diamonds{
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds{
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds{
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds{
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Это относительно простой метод, но в нём заложены большие возможности.
Вы можете размещать текст над изображением, изображение над текстом и т.
д.
Списки
Как всегда CSS предоставляет большие возможности при создании списков,
чем только HTML.
Собственно свойств для списков существует всего три:
list-style-type - определяет внешний вид маркера или нумератора.
list-style-image - определяет пользовательское изображение маркера.
list-style-position - определяет положение маркеров относительно блока.
Рассмотрим их на примерах.
list-style-type
Для маркерованных списков ничего нового, все теже значения, что и в HTML:
disk - закрашенный кружок.
circle - незакрашенный кружок.
square - закрашенный квадрат.
Давайте посмотрим, как они выглядят в браузере. Для этого создадим три
одинаковых списка, но каждому в стилях зададим свое значение свойства.
Итак, код html-страницы:
<html>
<head>
<title>CSS списки</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<ul id=”spisok1”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul id=”spisok2”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul id=”spisok3”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Код страницы style.css:
#spisok1{
list-style-type:disk;
}
#spisok2{
list-style-type:circle;
}
#spisok3{
list-style-type:square;
}
Результат:
Для нумерованных списков перечень более широк, чем в HTML, но не все
значения поддерживаются всеми браузерами.
Поэтому пока рекомендуется использовать только следующие:




decimal - десятичные числа.
lower-roman - строчные римские цифры.
upper-roman - прописные римские цифры.
lower-alpha - строчные латинские буквы.
Давайте посмотрим, как они выглядят в браузере. Для этого создадим четыре
одинаковых списка, но каждому в стилях зададим свое значение свойства.
Итак, код html-страницы:
<html>
<head>
<title>CSS списки</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<ol id=”spisok1”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol id=”spisok2”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol id=”spisok3”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol id=”spisok4”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>
Код страницы style.css:
#spisok1{
list-style-type:decimal;
}
#spisok2{
list-style-type:lower-roman;
}
#spisok3{
list-style-type:upper-roman;
}
#spisok4{
list-style-type:lower-alpha;
}
Результат:
list-style-image Это свойство позволяет задать свой вид маркера. Для этого
сначала надо создать картинку с маркером. Предположим у нас есть вот такая
картинка:
и мы хотим, чтобы она была маркером. Создадим список:
<html>
<head>
<title>CSS списки</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<ul id=”spisok”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
На странице style.css зададим стиль:
#spisok{
list-style-image:url(marker.gif);
}
Обратите внимание, для данного примера картинка лежит в той же папке, что
и наши страницы. Если же поместить картинку, например, в папку images, то
и путь к ней надо указать, как list-style-image:url(images/marker.gif);. В общем,
где бы не лежала картинка, вы должны правильно указать путь к ней.
Результат:
Как вы понимаете, на внешний вид вашего списка будет влиять размер
картинки. Помните об этом.
list-style-position
Это свойство определяет положение маркера: внутри блока - inside или
снаружи - outside. Понятнее будет на примере. Создадим два списка,
расположенных в div-е:
<html>
<head>
<title>CSS списки</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div id=”sp”>
<ul id=”spisok1”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul id=”spisok2”>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</div>
</body>
</html>
Зададим стили для списков с разными значениями:
#sp{
width:150px;
}
#spisok1{
list-style-position:inside;
}
#spisok2{
list-style-position:outside;
}
И посмотрим на результат в браузере:
Сокращенная запись свойства list-style
Как всегда, можно задать все значения свойств списка через пробел:
#spisok1{
list-style:circle url (,arker.gif) inside;
Курсор
Задать вид курсора средствами CSS очень просто. Для этого надо определить,
у каких элементов мы хотим изменить вид курсора и добавить в таблицу
стилей всего одну строчку:
cursor: [вид];
Стандартных видов у курсора - 14:










crosshair – перекрестье;
help - знак вопроса или воздушный шар (в зависимости от браузера);
e-resize, w-resize - двунаправленная горизонтальная стрелка;
n-resize, s-resize - двунаправленная вертикальная стрелка;
ne-resize, sw-resize - двунаправленная диагональная стрелка (с нижнего
левого угла в верхний правый);
se-resize, nw-resize - двунаправленная диагональная стрелка (с нижнего
правого угла в верхний левый);
move - перекрестье со стрелками на конце;
pointer – ладошка;
text - вертикальная линия;
wait - песочные часы или циферблат (в зависимости от браузера).
И еще два значения:
 auto - вид по умолчанию;
 default - вид по умолчанию на данной платформе (в основном стрелка).
Для наглядности, давайте создадим 16 ссылок и каждой определим свой вид
курсора.
Код html-страницы будет следующим:
<html>
<head>
<title>css курсор</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<a href=”#” class=”a_auto”>auto</a><br>
<a href=”#” class=”a_crosshair”>crosshair</a><br>
<a href=”#” class=”a_default”>default</a><br>
<a href=”#” class=”a_help”>help</a><br>
<a href=”#” class=”a_eresize”>eresize</a><br>
<a href=”#” class=”a_wresize”>wresize</a><br>
<a href=”#” class=”a_nresize”>nresize</a><br>
<a href=”#” class=”a_sresize”>sresize</a><br>
<a href=”#” class=”a_neresize”>neresize</a><br>
<a href=”#” class=”a_swresize”>swresize</a><br>
<a href=”#” class=”a_seresize”>seresize</a><br>
<a href=”#” class=”a_nwresize”>nwresize</a><br>
<a href=”#” class=”a_move”>move</a><br>
<a href=”#” class=”a_pointer”>pointer</a><br>
<a href=”#” class=”a_text”>text</a><br>
<a href=”#” class=”a_wait”>wait</a><br>
</body>
</html>
На странице style.css зададим стили для этих ссылок:
a.a_auto{
cursor: auto
}
a.a_crosshair{
cursor: crosshair
}
a.a_default{
cursor: default
}
a.a_help{
cursor: help
}
a.a_eresize{
cursor: e-resize
}
a.a_wresize{
cursor: w-resize
}
a.a_nresize{
cursor: n-resize
}
a.a_sresize{
cursor: s-resize
}
a.a_neresize{
cursor: ne-resize
}
a.a_swresize{
cursor: sw-resize
}
a.a_seresize{
cursor: se-resize
}
a.a_nwresize{
cursor: nw-resize
}
a.a_move{
cursor: move
}
a.a_pointer{
cursor: pointer
}
a.a_text{
cursor: text
}
a.a_wait{
cursor: wait
}
И посмотрим, что получилось:
Теперь посмотрим, как можно создать свой собственный курсор. Для этого
нам понадобится картинка самого курсора в форматах cur, ani или svg. Можно
поискать и скачать уже готовые курсоры, а можно нарисовать самим,
например, в программе ArtCursors.
Итак, идем по адресу http://www.aha-soft.com/rus/artcursors/index.htm и
скачиваем пробную версию программы ArtCursors. Запускаем ее и рисуем наш
будущий курсор, например, вот так:
Сохраняем его с расширением .cur. Теперь на html-странице напишем ссылку:
<html>
<head>
<title>css курсор</title>
<link rel=”stylesheet” type=”text/css” hrf=”style.css”>
</head>
<body>
<a href=”#” class=”mycursor”>Пользовательский курсор</a><br>
</body>
</html>
А на странице style.css определим для нее вид курсора, указав адрес картинки:
a.mycursor{
cursor: url(“images/mycursor.cur”), auto;
}
Вот, что получилось:
Пользовательские курсоры поддерживаются не всеми браузерами, поэтому в
стилях, через запятую желательно указать какой-нибудь стандартный вид
курсора. В этом случае, браузер, если не сможет отобразить пользовательский
курсор, будет использовать стандартный. Наш курсор, например,
отображается в FireFox 3, а в IE и Opera - нет.
Кроме того, каждый вид курсора что-то означает, например, курсор wait
означает занятость программы, двунаправленные стрелки обозначают
возможность растянуть объект, а ладошка - ссылку. Пользователи привыкают
к этим обозначениям, поэтому менять вид курсора без нужды не
рекомендуется.