Лекция_6

1.

Разработка сетевых
информационных ресурсов
Лекция 6. Форматирование и позиционирование
блоковых элементов в CSS
Глотова М.И.

2.

Содержание
1. Блоковая модель элементов
2. Правила форматирования блоковых элементов
3. Позиционирование в CSS
4. Слои в позиционировании
5. Позиционирование текста в CSS
6. Управление видимостью в CSS

3.

Блоковые элементы.
Правила форматирования
3
Все элементы страниц языка HTML можно разделить на две
группы:
✓ блоковые;
✓ строчные.
Блоковая модель элемента
документа включает в себя:
✓ информативную
область
(content-содержимое);
✓ отступы (padding);
✓ границы (border);
✓ поля (margin).
Периметр каждой из областей
называется ее краем или краевой
линией.
Край имеет 4 сегмента: верхний
(top), правый (right), нижний
(bottom), левый (left).

4.

Блоковые элементы.
Правила форматирования. Поля
4
Фон различных областей блока определяется следующим образом:
Информативная область (content) – свойство background элемента,
порождающего блок;
Отступы (padding) – свойство background элемента, порождающего
блок;
Граница (border) – специальные свойства границ элемента,
порождающего блок;
Поля (margin) – всегда прозрачны (transparent).
Поля - специальные области, позволяющие задать некое
свободное никем не занятое пространство вокруг границы блока.
Свойства: margin-top, margin-right, margin-bottom, margin-left
определяют величину полей блока.

5.

Блоковые элементы.
Правила форматирования. Отступы
5
Свойство margin-стенографическое, используется для краткой
записи значений свойств ранее указанных.
Отступы - специальные области, позволяющие задать некое
свободное никем не занятое пространство вокруг границы блока.
Свойства: padding-top,
padding-right,
padding-bottom,
padding-left
являются
индивидуальными
свойствами,
позволяющими задать размеры отступов для каждой стороны
отдельно.
Свойство padding – стенографическое, используется для краткой
записи выше указанных свойств.

6.

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

7.

Блоковые элементы.
Правила форматирования. Примеры
7

8.

Блоковые элементы.
Правила форматирования. Примеры
8

9.

Блоковые элементы.
Правила форматирования. Границы
9
Границы блоков делятся на четыре сегмента : верхний, правый,
нижний, левый.
Каждый отдельный сегмент границы может иметь свои
характеристики:
✓ толщина (border-width);
✓ стиль (border-style);
✓ цвет (border-color).
Универсальное (стенографическое) свойство border позволяет
одновременно установить выше указанные параметры для
границы вокруг элемента.
Синтаксис
border: [border-width || border-style || border-color] | inherit
Для установки свойств границы на определенных сегментах
применяются свойства: border-top, border-bottom, border-left,
border-right.

10.

Блоковые элементы.
Правила форматирования. Ширина границы
10
Свойство border-width - стенографического типа и задает
значения свойств: border-top-width, border-right-width, borderbottom-width, border-left-width.
Синтаксис:
border-width: [значение | thin | medium | thick] {1,4} | inherit
thin (2 пиксела);
medium (4 пиксела);
thick (6 пикселов);
inherit (наследует значение родителя) задают толщину границы.
Для более точного значения, толщину можно указывать в
пикселах или других единицах.
✓
✓
✓
✓

11.

Блоковые элементы.
Правила форматирования. Цвет границы
11
Свойство border-color – свойство графического типа и задает
цвет границы блока. Для задания различных цветов отдельных
сегментов границы применяются индивидуальные свойства:
border-top-color,
border-right-color,
border-bottom-color,
border-left-color.
Значением индивидуальных свойств может быть значение цвета,
указанное любым доступным в CSS способом.

12.

Блоковые элементы.
Правила форматирования. Стиль границы
12
Свойство border-style стенографическое свойство, задает тип
линий границ.
Для задания типов линий отельных сегментов границы
используются свойства:
border-top-style;
border-right-style;
border-bottom-style;
border-left-style.
Значением стенографического свойства, а также свойств,
позволяющих задавать стиль линии отдельно, может быть тип линии,
определяемый одним из приведенных ключевых слов:

13.

Блоковые элементы.
Правила форматирования. Стиль границы
13
none - не отображает границу, ее толщина задается нулевой;
hidden - имеет тот же эффект, что и none за исключением
применения border-style к ячейкам таблицы;
inherit - Наследует значение родителя.

14.

Блоковые элементы.
Ширина и высота блочного элемента
14
Размеры
области
содержимого
прямоугольного
блока
определяются
свойствами:
✓ width (ширина)
✓ height (высота).
Ширину и высоту можно задавать явно
числами с указанием единиц измерения.
Например width:120px;
height:50mm;width:80%.

15.

Блоковые элементы.
Ширина и высота блочного элемента
15
Текстовая строка без пробелов
Текстовая строка с пробелами

16.

Позиционирование в CSS
16
Внешний вид HTML-документа, отображаемого в нормальном потоке.

17.

Позиционирование в CSS.
Статическое позиционирование
17
Специальные свойства позиционирования элементов:
✓ top, left – вертикальная и горизонтальная координаты
верхнего левого угла элемента в пикселах;
✓ bottom, right – вертикальная и горизонтальная
координаты нижнего правого угла в пикселах;
✓ position – задает способ позиционирования:
• static –статический;
• relative – относительный;
• absolute – абсолютный;
• fixed – фиксированный.
Статическое позиционирование - position:static
аналогично расположению элемента в нормальном потоке,
координаты top, left, bottom и right не играют никакой роли.
В CSS данный способ практически никогда не задают с
помощью этого значения.

18.

Позиционирование в CSS.
Относительное позиционирование
18
Относительное позиционирование position:relative
left
top

19.

Позиционирование в CSS.
Абсолютное позиционирование
19
Абсолютное позиционирование position:absolute
top
left

20.

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

21.

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

22.

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

23.

Абсолютное и относительное
позиционирование
23
Отличие относительного и
абсолютного позиционирования

24.

Позиционирование в CSS.
Фиксированное позиционирование
24
Фиксированное позиционирование position:fixed

25.

Позиционирование в CSS.
Отсчет координат. Уточнения
25
Абсолютное позиционирование position:absolute
Если непосредственный родитель - <body>, то его дочерний
элемент абсолютно позиционируется относительно клиентской
области браузера, т.е. значения свойств top, left отсчитываются от
верхней и левой границ окна до верхнего и левого краев поля
элемента.
Если непосредственный родитель
отличен от <body>, то его дочерний
элемент
позиционируется
относительно
родительского:
значения top, left отсчитываются
от
внутренних
краев
границы
родительского элемента до верхнего и
левого
краев
поля
дочернего
элемента.

26.

Позиционирование в CSS. Слои
26
Свойство z-index позволяет управлять порядком отображения
(над/под) элементов на Web-странице, определяет уровень слоя, в
котором находится элемент, принимает целочисленные значения.

27.

Позиционирование в CSS.
Статическое позиционирование
27
Свойство float позволяет изменить положение элементов в
нормальном потоке. Свойство принимает значения left, right,
none.

28.

Позиционирование в CSS.
Статическое позиционирование
28

29.

Позиционирование в CSS.
Свойство float
29

30.

Позиционирование в CSS.
Свойство clear
30
Clear устанавливает какие
стороны перемещаемых блоков
не могут соседствовать с другими
перемещаемыми блоками.
- отменяет действие
свойства clear;
both – блок размещается
ниже всех плавающих блоков;
left - блок размещается ниже
всех
левосторонних
плавающих блоков;
right - блок размещается
ниже всех правосторонних
плавающих блоков.
none

31.

Позиционирование текста в CSS
31
Абсолютное позиционирование position:absolute

32.

Позиционирование в CSS. Использование
процентов как единиц измерения
32

33.

Позиционирование текста в CSS
33
Относительное позиционирование position:relative

34.

Управление видимостью в CSS
34
Свойство
overflow
позволяет
управлять отображением на Webстранице.
Значения overflow :
visible - отображается все содержание
элемента, за пределами установленной
высоты и ширины;
hidden - отображается только область
внутри элемента, остальное будет
скрыто;
scroll - всегда добавляются полосы
прокрутки.
auto - полосы прокрутки добавляются
только при необходимости.
inherit - наследует значение родителя.

35.

Управление видимостью в CSS
35

36.

Управление видимостью в CSS
36
Свойство
clip
позволяет
показать
некоторую
прямоугольную область содержимого элемента, который
абсолютно позиционирован.
Синтаксис
clip: rect(Y1, X1, Y2, X2) | auto | inherit
Параметр принимает значения:
✓ auto – элемент полностью виден
(значение по умолчанию);
✓ rect (top, right, bottom, left) –
координаты,
задающие
прямоугольную область (расстояние
от края элемента до области
вырезки), которые задаются в
единицах CSS — пикселах (px), em и
др.

37.

Управление видимостью в CSS
Свойство clip
37

38.

Управление видимостью в CSS
Свойство clip
38
Значения top (верх) и bottom (низ)
определяют смещение от верхней
границы, а left (лево) и right (право)
определяют
смещение
от
левой
границы.

39.

Управление видимостью в CSS
Свойство display
39
Свойство display - многоцелевое свойство, которое определяет,
как элемент должен быть показан в документе.

40.

Управление видимостью в CSS
Свойство visibility
40
Свойство
visibility
управляет видимостью блока.
Свойство имеет следующие
значения:
visible – элемент виден
(по умолчанию);
hidden – элемент не виден
(скрыт), занимает на странице
место.

41.

Рекомендуемая литература:
1. Дронов, В.А. HTML 5, CSS 3 и Web 2.0. Разработка
современных Web-сайтов [Электронный ресурс] / В.А.
Дронов. - БХВ-Петербург, 2011. – Режим доступа:
http://znanium.com/bookread2.php?book=351455.
2. Дунаев, В. В. Web-программирование для всех [Текст]/ В.
В. Дунаев. - СПб.: БВХ-Петербург, 2008. - 560 с. - ISBN
978-5-9775-0197-2. (20 экз.)
3. Котеров, Д.В. PHP 5 / Д. В. Котеров, А. Ф. Костарев .- 2-е
изд. - СПб. : БВХ-Петербург, 2008. - 1078 с. - Предм. указ.:
с. 1062. - ISBN 978-5-9775-0315-0. (20 экз.)