![](/user_photo/2706_HbeT2.jpg)
- •Index.Htm
- •Урок 3: Цвет и фон в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 4: Шрифты в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 5: Текст в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 6: Списки в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 8: Типы селекторов в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 9: Блоковая модель в css
- •Урок 10: Рамки в css
- •↑ Наверх ↑
- •↑ Наверх ↑
- •Урок 13: Позиционирование блоков
- •↑ Наверх ↑
Урок 13: Позиционирование блоков
Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем все, что является блоковой моделью. Это помогает создать действительно прикольный, уникальный дизайн.
Рассмотрим две основные модели позиционирования:
Абсолютное позиционирование (POSITION:ABSOLUTE;)
Относительное позиционирование (POSITION:RELATIVE; )
Абсолютное
позиционирование(POSITION:ABSOLUTE;)
Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать , что это позиционирование абсолютное, пишут значениеABSOLUTE. Затем используя ключевые слова top, right,bottom,left указывают необходимые координаты, которые отсчитываются от краев окна браузера.
Посмотрите на рисунок ниже. Я специально сделал рамку боксу, чтобы было более понятно, откуда отсчитываются координаты.
Огромный плюс абсолютного позиционирования в том, что бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется. Блин, на словах объяснить проблематично, так что давайте покажу на примере:
Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.
Смотреть пример
А теперь, спозиционируем изображение , для чего создадим класс, и присвоим его изображению. Код класса, выглядит примерно так:
.smile{ border: 1px solid red; position:absolute; top:100px; right:100px; }
Ну а с html думаю проблем у Вас не будет, чтобы применить класс к изображению, пишем типо <img class="smile"> .
Смотреть пример
Что мы видим? как я уже писал раньше, изображение удалилось из того места, где оно было(вместо изображения теперь там текст), и переместилось соответственно указанным координатам. В примере выше, я сделал красную рамку, чисто для того, чтобы было нагляднее понятно, что координаты отсчитываются правильно. А вообще, ее лучше не ставить :)
Обычно указываются только две координаты, т.е. привязка идет к любому из углов документа.
Вот еще пример стиля:
.smile{ position:absolute; bottom:300px; left:100px; }
Смотреть пример
Если необходимо зафиксировать блок, т.е. чтобы он не прокручивался вместе с основным содержимым, т.е. не скролился, то необходимо указать значение FIXED.
.smile{ position:fixed; bottom:300px; left:100px; }
Смотреть пример
↑ Наверх ↑
Относительное
позиционирование (POSITION:RELATIVE; )
При относительном позиционировании, бокс смещается , но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;
Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.
Вот пример простого документа с текстом и рисунком:
Смотреть пример
А вот пример, как будет выглядеть этот же документ, если изображение спозиционировать относительно.
Css код:
.smile{ border:1px solid red; position:relative; top:200px; left:100px; }
Смотреть пример
Т.е. как я уже говорил, прежнее место ничем не занимается, а координаты отсчитываются от первоначального положения блока.
Ниже Вы можете наблюдать скриншот из предыдущего примера, с пояснениями координат:
Ну вот мы и разобрали этот довольно сложный урок. Думаю Вам эта информация пригодится. И еще разок Вам напомню, что позиционировать можно не только изображения, а и все другие элементы.
Урок 14: Плавающие блоки(свойство float)
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется , что очень важно разобраться как это работает!
Итак, Плавающие блоки в CSS определяются свойством float.
Свойства
FLOAT
Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию).
Ну вот например, как будут располагаться по умолчанию ,три квадратных блока, со стороной в 200 пикселей.
html код :
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3">Третий блок</div>
CSS код :
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; }
Смотреть пример
Как видите, по умолчанию каждый следующий блок, находится под предыдущим.
Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т.е. это будет выглядеть так:
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; }
Смотреть пример
Вот как будет выглядеть, если блоки будут всплывать вправо:
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; }
Смотреть пример
Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. Пусть колонки будет три.
CSS код:
.column1 { float:left; width: 33%; } .column2 { float:left; width: 33%; } .column3 { float:left; width: 33%; }
В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV
<div class="column1"> <p>There is one universal truth in website making: To make a websitet...</p> </div> <div class="column2"> <p> If you're like the vast majority of people thinking ...</p> </div> <div class="column3"> <p>There is one universal truth in website...</p> </div>
Смотреть пример
Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
left - блок должен размещаться ниже всех левосторонних плавающих блоков.
right - блок должен размещаться ниже всех правосторонних плавающих блоков.
both - блок должен размещаться ниже всех плавающих блоков.
none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.
Ну допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.
Смотреть пример
Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.
html-код
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3"> <p>There is one universal truth in website...</p> </div>
CSS-часть
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { clear:both; }
Смотреть пример
Заметьте, что в блоках может находится что угодно(картинки, списки,текст и др.)
Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.
html-код
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <p>There is one universal truth in website...</p>
css- часть
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; clear:both; }
Смотреть пример
В общем вариантов применения может быть много. Экспериментируйте, если хотите.
Если хотите посмотреть, как использовать плавающие блоки для создания каркаса сайта, Вам сюда .
Урок 15: Слои в CSS
В этом уроке, поговорим о таком понятии как слой в CSS. Для тех, кто работал с графическими редакторами, это понятие должно быть знакомо, а для остальных постараюсь объяснить.
Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.
За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.
Например, можно сделать из карт знаменитую комбинацию Royal Flash.
Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:
.desatka_buba { position: absolute; left: 200px; top: 200px; z-index: 1; } .valet_buba { position: absolute; left: 215px; top: 215px; z-index: 2; } .dama_buba { position: absolute; left: 230px; top: 230px; z-index: 3; } .korol_buba { position: absolute; left: 245px; top: 245px; z-index: 4; } .tuz_bubna { position: absolute; left: 260px; top: 260px; z-index: 5; }
Ну а в html коде , просто присваиваете рисункам соответствующие стили, типа: <img src="10buba.gif" class="10_buba"> ну и так далее, вы поняли...
Смотреть пример
Если хорошенько разобраться с этим простым методом, можно создавать довольно приличные вещи. Например размещать текст над изображением, или наоборот, создавать красивые заголовки , например с эффектом тени, также если поглубже изучить слои, можно создавать выпадающие меню , и многое другое...
В следующем уроке, я закончу учебник, и дам некоторые советы, по дальнейшему обучению...