Лабораторная работа № 10. Важные моменты

Позиционирование в CSS

Цель:

§ Изучить возможности основных типов позиционирования в CSS.

§ Научиться использовать позиционирование при создании Web-документов.

Порядок выполнения:

1. Ознакомиться с теоретическими сведениями о позиционировании.

2. Выполнить задание согласно варианта.

Сущность позиционирования состоит в том, чтобы любой элемент расположить в необходимом месте web-страницы. Позиционирование определяется свойством position, которое может иметь следующие значения:

position: static; (значение по умолчанию для всех элементов
в нормальном потоке)

position: absolute;

position: fixed;

position: relative;

Указание точного месторасположения элементов осуществляется свойствами смещения: top, right, bottom, left.

top – расстояние от верхнего края окна блока-контейнера (или браузера).

bottom – расстояние от нижнего края окна блока-контейнера (или браузера).

left – расстояние от левого края окна блока-контейнера (или браузера).

right – расстояние от правого края окна блока-контейнера (или браузера).

Свойства смещения работают со всеми позиционированными элементами, кроме имеющих значение static.

Прежде чем приступать к работе с позиционированием, необходимо разобраться с таким понятием как нормальный поток.

Нормальный поток

Нормальный поток в документе имеет место, когда к элементам не применено никаких дополнительных свойств CSS (position и float).

Нормальный поток:

1) текста (контента) – это размещение символов слева направо и сверху вниз (для западных языков);

2) порядок вывода элементов на экран определяется порядком, в котором они написаны в HTML-коде документа.

3) Блочные элементы (display: block)

- выводятся сверху вниз по странице;

- занимают всю доступную ширину родительского элемента;

- высота элемента определяется его содержимым;

- всегда начинаются с новой строки;

- могут содержать блочные и строковые элементы.

К блочным элементам относятся: <div>, <h1>, <p> и др.

4) Строковые элементы (display: inline)

- выводятся слева направо по строке;

- располагаются друг за другом в одной строке;

- при необходимости строка переносится;

- до и после строчного элемента отсутствуют переносы строки;

- ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя;

- могут содержать только строковые элементы.

К строчным элементам относятся: <img>, <span>, <a>, <span>, <strong> и др.

Еще одним важным моментом являются единицы измерения в CSS. Основными являются абсолютные и относительные.

Относительные единицы измерения задают размер относительно известной величины.

Таблица 1 – Относительные единицы измерения

Единица	Описание
em	Размер относительно ширины символа “m” базового шрифта
ex	Размер относительно ширины символа “x” базового шрифта
px	По умолчанию в пикселях устройства отображения
%	Относительно размеров элемента либо других объектов. Например, относительно ширины окна устройства

Абсолютные единицы измерения не зависят от параметров монитора, применяются реже относительных.

Таблица 2 – Абсолютные единицы измерения

Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметры
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Существует несколько типов позиционирования и, как правило, они применяются одновременно в документе для достижения наилучшего результата.

Абсолютное позиционирование

Абсолютное позиционирование задаётся при установке свойства элемента “position: absolute”.

При абсолютном позиционировании элемент:

- выводится из общего потока;

- становится независимым от других элементов;

- также он может накладываться на другие элементы.

При абсолютном позиционировании положение элемента задаётся только свойствами смещения этого элемента (bottom, left, right, top) относительно блока-контейнера.

Блоком-контейнером считается ближайший предок (любой), значение свойства position которого отлично от static. Если таких предков нет, то блоком-контейнером считается начальный блок-контейнер.

Рассмотрим пример абсолютно позиционированного блока (блок 2).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Абсолютное позиционирование.</title>

</head>

<body>

</div>

</div>

<h1>Блок №3</h1> Данный блок абсолютно позиционирован!

<br>

Блоки 1 и 2 никак не влияют на его месторасположение.

</div>

</body>

</html>

Рисунок 1 – Абсолютное позиционирование

Важные моменты:

· абсолютно позиционированные элементы перемещаются вместе с документом при прокрутке;

· свойства left и top имеют приоритет выше, чем свойства right и bottom;

Например, если свойства left и right противоречат друг другу, то свойство right будет проигнорировано. Тоже относится и к свойствам top / bottom.

· элементы можно спрятать. Для этого можно задать отрицательным либо left, либо top. Элемент выйдет за границы окна браузера, полоса прокрутки при этом не возникнет;

· если задать left больше, чем ширина окна браузера либо отрицательное значение right, то возникнет горизонтальная полоса прокрутки. Аналогично будет и с top, только полоса прокрутки будет вертикальной.

Фиксированное позиционирование

Фиксированное позиционирование задаётся “position:fixed” и по своей сути очень похоже на абсолютное позиционирование. Элемент с фиксированным позиционированием также выводится из общего потока и не зависит от расположения других элементов. Положение элемента зависит только краёв монитора, соответственно положение не изменяется при прокрутке. Элемент, также как и при абсолютном позиционировании может накладываться на другие. Ещё одной особенность фиксированного позиционирования является то, что выходе содержимого за пределы видимой области не возникает полос прокрутки.

Фиксированное позиционирование используется для создания меню, вкладок, заголовков, т.е. таких элементов, которые всегда должны быть видны пользователю.

Пример навязчивой рекламы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Фиксированное позиционирование.</title>

h1 {

color: #800;

text-align: center;

font-size:30px;

}

h2 {

color: #088;

text-align: center;

font-size:18px;

}

div.blok1 {

background-image: url(fon.gif);

border: #000 2px solid;

padding: 5px;

width: 800px;

height: 4000px;

}

div.blok2 {

position: fixed;

left: 250px;

top: 300px;

border: #080 6px double;

padding: 5px;

width: 300px;

}

</style>

</head>

<body>

<h1>Фиксированное позиционирование похоже на абсолютное, но есть и отличия:</h1>

Фиксированный элемент тоже выпадает из потока.

Фиксированный элемент привязывается к определенной точке в окне браузера и остается на ней всегда, даже при прокрутке страницы.

Фиксированный элемент можно позиционировать с помощью свойств top, left, right, bottom, но точка отсчета всегда привязана к окну браузера.

Можете представить себе фиксированный элемент, как стикер, который наклеен на монитор. Такие элементы часто применяют для создания навигационных панелей, привязанных к верхней или нижней части окна браузера.

</h1>

</div>

<h2>Фиксированный блок с навязчивой рекламой</h2>

<h1>Изучайте CSS!!!</h1>

</div>

</body>

</html>

Рисунок 2 – Фиксированное позиционирование

Попробуем прокрутить страничку.

Рисунок 3 – Фиксированное позиционирование

Как видно, рекламный блок остался на своём месте.

Относительное позиционирование

Относительно позиционирование задается свойством “ position: relative ”. При таком способе позиционирования положение элемента определяется относительно краёв элемента родителя и сам элемент не выводится из основного потока. Расстояние до краёв родительского элемента задаётся свойствами: bottom, left, right, top.

Рассмотрим пример относительно позиционированного блока (блок № 2).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Относительное позиционирование.</title>

h1 {

color: #008000;

font-size:20px

}

div.blok1 {

background: #c0e4ff;

border: #000000 2px solid;

padding: 5px;

width: 500px;

height: 400px;

}

div.blok2 {

position: relative;

left: 150px;

background: #ffa0c5;

border: #000 2px solid;

padding: 5px; width: 250px;

height: 200px;

}

</style>

</head>

<body>

<h1>Элемент родитель - блок №1</h1>

Данный блок позиционирован относительно левого края элемента родителя.

</div>

</body>

</html>

Рисунок 4 – Относительное позиционирование

Как можно видеть из свойства left равного 150px, данный элемент размещён относительно своего родителя – элемента div.

Важные моменты:

· данный тип позиционирования не применяется к элементам таблицы;

· если при смещении элемента образовалось пустое место, оно не занимается ниже или вышележащими элементами;

· относительно позиционированный элемент образует блок-контейнер для других элементов.

Плавающие элементы

Плавающее поведение элемента осуществляется заданием свойства float. Оно применятся для создания красивого эффекта обтекания какого-либо элемента содержимым. Для этого закрепляется одна сторона, позволяя другим элементам располагаться вокруг.

Возможные значения свойства float:

a) none – без обтекания;

b) left – выравнивание по левому краю, обтекание по правому краю;

c) right – выравнивание по правому краю, обтекание по левому краю.

В качестве примера создадим обтекание картинки текстом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<charset=utf-8" />

<title>Рисунок по левому краю</title>

.fig

{

float: left;

background: #e69f73;

padding: 4px;

margin: 0 10px 5px 0;

}

</style>

</head>

<body>

<p>

В принципе, всю разработку дизайна какого-то документа можно свести к двум шагам — определению внешнего вида элементов и их позиционированию.

И если с расположением элементов никогда не было проблем в, скажем, типографии, то в веб-дизайне именно позиционирование является одной из наиболее сложных задач.

В полиграфии известны размеры "конечного устройства" — листа книги или газеты, размеры шрифтов и картинок, есть возможность жестко привязать каждый элемент к своему месту и так далее.

В веб-дизайне же все наоборот — у посетителей сайта может быть разное разрешение экрана, они могут смотреть сайт, развернув браузер на весь экран или свернув в относительно небольшое окошко, у них могут быть разные шрифты по умолчанию и разная глубина цвета; наконец, они могут отключить вывод, скажем, картинок — все это способно привести к весьма заметным искажениям дизайнерской задумки...

</p>

</body>

</html>

Рисунок 5 – Плавающий элемент

Довольно часто возникает необходимость написания текста в несколько колонок. Для этого можно использовать свойство float. Рассмотрим это на примере:

.column1{

float:left;

width: 33%;

}

.column2{

float:left;

width: 33%;

}

.column3{

float:left;

width: 33%;

}

А сам текст включим в теги div:

<p>There is one universal truth in website making: To make a websitet...</p>

</div>

<p> If you're like the vast majority of people thinking...</p>

</div>

<p>There is one universal truth in website...</p>

</div>

В итоге получим три колонки, которые всегда будут занимать 99% ширины экрана.

Рисунок 6 – Размещение текста в несколько колонок

Z – индекс

Z-индекс предназначен для работы с элементами страницы в трехмерном пространстве. Для этого вводится третья ось – ось Z. Так как страницу мы видим как двумерную, элементы накладываются слой за слоем друг на друга. Управлять подобным наложением можно с помощью свойства Z-index.

Рисунок 7 – Сущность Z-index

Возможные значения свойства Z-index:

a) auto – элементы накладываются друг на друга в том порядке, в каком они были указаны в коде HTML;

b) целое число – чем больше число, тем более высокую позицию он занимает по оси Z и соответственно перекрывает все элементы, расположенные ниже по этой оси.

Пример наложения блоков:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>z-index</title>

</head>

<body>

<div align="center" style="position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px">z-index

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Рисунок 8 – Z-index

Важные моменты:

a) числовое значение z-index может быть отрицательным;

b) при равном значении z-index на переднем плане будет находиться тот элемент, который идёт ниже в HTML коде. Это же правило действует и при z-index равным auto.

Задание:

Создайте Web-документ, состоящий из двух страниц согласно своему варианту (таблица 3). При этом:

· Использовать все типы позиционирования.

· Добавить рекламный блок на любую страницу. Его содержимое определить самостоятельно, расположение – согласно таблице 3.

· При наведении на пункт меню он должен быть отличен от других (становиться больше, менять цвет, перекрывать другие и т.п.). Пункты меню должны вести на созданные страницы (прил. Б).

· Web-документ должен выглядеть одинаково на разных мониторах (рекомендуется использовать относительные единицы измерения).

Таблица 3 – Варианты заданий

Вариант	Обтекание рисунка	Количество колонок в тексте	Расположение рекламного блока	Номера страниц (из прил. А)
	Слева		Сверху	1,3
	Слева		Слева	2,4
	Справа		Справа	1,4
	Слева		Снизу	4,5
	Справа		Слева	1,2
	Слева		Справа	2,3
	Справа		Снизу	2,3
	Слева		Сверху	1,5
	Справа		Слева	1,4
	Слева		Справа	2,3
	Справа		Снизу	3,4
	Справа		Справа	4,5
	Слева		Слева	2,5
	Справа		Справа	1,5
	Слева		Сверху	2,3

Приложение А

Страница 1

Определение CSS

Каскадные таблицы стилей (CSS) — это мощный механизм, позволяющий описать правила оформления HTML документа, отделить их от содержания. CSS, как прогрессивная и востребованная технология, проходит долгий путь развития и усовершенствования.

Давай посмотрим, как все начиналось! Для начала включим машину времени и окунемся ненадолго в прошлое.

Создатели

Хокон Виум Ли (норв. Hаkon Wium Lie) предложил концепцию каскадных таблиц стилей.


Тим Бернерс-Ли. Учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины (совместно с Робертом Кайо) и действующий глава Консорциума Всемирной паутины	Хокон Виум Ли. Учёный, специалист в области информатики, предложивший каскадные таблицы стилей (CSS).

CSS 2.1

8 сентября 2009 года была утверждена CSS2.1. Эта версия формировалась в течение более 10-ти лет. Создание CSS2.1 — это попытка привести спецификацию в соответствие со сложившимися реалиями:

· исправлен ряд ошибок CSS2;

· изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2;

· убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом;

· удалили фрагменты CSS2, которые будут устаревшими в CSS3;

· добавили некоторые новые значения свойств.

CSS 3

Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. После проведения эксперимента (создания одной и той же страницы на css 2 и css3), посмотрим на результаты исследований.

	CSS2	CSS3	Результаты
Время разработки	73 минут	49 минут	CSS3 33% быстрее
Размер	849.2 KB	767.9 KB	CSS3 9.5% меньше
Запросы			CSS3 45% меньше

Страница 2

Тег <a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Атрибуты

· accesskey – активация ссылки с помощью комбинации клавиш.

· coords – устанавливает координаты активной области.

· download – предлагает скачать указанный по ссылке файл.

· href – задает адрес документа, на который следует перейти.

· hreflang – идентифицирует язык текста по ссылке.

· name – устанавливает имя якоря внутри документа.

· rel – отношения между ссылаемым и текущим документами.

· rev – отношения между текущим и ссылаемым документами.

· shape – задает форму активной области ссылки для изображений.

· tabindex – определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

· target – имя окна или фрейма, куда браузер будет загружать документ.

· title – добавляет всплывающую подсказку к тексту ссылки.

· type – указывает MIME-тип документа, на который ведёт ссылка.

Поддержка

IE	Chrome	Opera	Safari	Firefox	Android	iOS
1.0+	1.0+	2.1+	1.0+	1.0+	1.0+	1.0+

Страница 3

Таблица

Исторически первым и единственным способом раскладки страницы были таблицы. Описанию поведения таблиц посвящена целая глава в спецификации CSS 2.1. Несмотря на такой объем, некоторые моменты описаны скудно или вообще не определены и отданы на усмотрение браузеров.

Лабораторная работа № 10. Важные моменты

Поиск по сайту