Лекция+6+CSS_2пр.pptаываваываываываываываыва
ssuser2621cb
1 views
62 slides
Sep 19, 2025
Slide 1 of 62
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
About This Presentation
орпопропропро
Slide Content
ЛЕКЦИЯ «ТЕХНОЛОГИЯ CSS» (продолжение)
План лекции:
•Элемент SPAN
•Элемент DIV
•Отступы в CSS
•Внутренние поля в CSS
•Параметры текста в CSS
•Обтекание блока
•Запрет на обтекание
•Позиционирование в CSS
•Размещение относительно оси z
•Вертикальное выравнивание элемента
•Списки в CSS
План лекции:
•Элемент SPAN
•Элемент DIV
•Отступы в CSS
•Внутренние поля в CSS
•Параметры текста в CSS
•Обтекание блока
•Запрет на обтекание
•Позиционирование в CSS
•Размещение относительно оси z
•Вертикальное выравнивание элемента
•Списки в CSS
2
Элемент SPAN
Элемент разметки SPAN — это обобщенный строковый
элемент разметки, применение которого не приводит к
образованию блока текста. Он может заменить элементы
FONT, I, B, U, SUB, SUP и т.п. Приведем в таблице 1 примеры
таких соответствий:
Таблица 1. - Таблица соответствия элементов
HTML-элемент CSS-аналог
<FONT
COLOR=red> ...</FONT>
<SPAN STYLE="color:red; ">...</SPAN>
<I>...</I> <SPAN STYLE="font-style:italic; ">...</SPAN>
<B>...</B> <SPAN STYLE="font-weight:bold; ">...</SPAN>
<U>...</U> <SPAN STYLE="text-decoration:underline;
">...</SPAN>
и т.п.
Элемент SPAN
Элемент разметки SPAN — это обобщенный строковый
элемент разметки, применение которого не приводит к
образованию блока текста. Он может заменить элементы
FONT, I, B, U, SUB, SUP и т.п. Приведем в таблице 1 примеры
таких соответствий:
Таблица 1. - Таблица соответствия элементов
HTML-элемент CSS-аналог
<FONT
COLOR=red> ...</FONT>
<SPAN STYLE="color:red; ">...</SPAN>
<I>...</I> <SPAN STYLE="font-style:italic; ">...</SPAN>
<B>...</B> <SPAN STYLE="font-weight:bold; ">...</SPAN>
<U>...</U> <SPAN STYLE="text-decoration:underline;
">...</SPAN>
и т.п.
3
Пример:
<SPAN STYLE="font-weight:bold;">
Предложение
<SPAN STYLE="font-style:italic;">
с пересекающимися
</SPAN>
стилями
</SPAN>
Результат данного кода приведен на рисунке 1
Рисунок 1 - Отображение элемента span
Пример:
<SPAN STYLE="font-weight:bold;">
Предложение
<SPAN STYLE="font-style:italic;">
с пересекающимися
</SPAN>
стилями
</SPAN>
Результат данного кода приведен на рисунке 1
Рисунок 1 - Отображение элемента span
4
6 Элемент DIV
DIV играет роль универсального блока. Блочный элемент
всегда отделен от прочих элементов страницы (контекста)
пустой строкой. DIV не несет никакой смысловой нагрузки.
Часто говорят, что DIV — это раздел страницы. Но на самом
деле его применение имеет смысл только в контексте CSS.
Никаких правил по умолчанию для отображения DIV не
существует. Это просто новая строка текста.
DIV позволяет применить атрибуты стиля, связанные с
границей блока и отступами блока от границ старшего
элемента, а также "набивку", т.е. отступ от границы блока до
границы вложенного элемента:
6 Элемент DIV
DIV играет роль универсального блока. Блочный элемент
всегда отделен от прочих элементов страницы (контекста)
пустой строкой. DIV не несет никакой смысловой нагрузки.
Часто говорят, что DIV — это раздел страницы. Но на самом
деле его применение имеет смысл только в контексте CSS.
Никаких правил по умолчанию для отображения DIV не
существует. Это просто новая строка текста.
DIV позволяет применить атрибуты стиля, связанные с
границей блока и отступами блока от границ старшего
элемента, а также "набивку", т.е. отступ от границы блока до
границы вложенного элемента:
Пример. В данном примере внутри окна браузера
расположен блочный элемент (DIV), внутрь которого
помещен еще один блочный элемент(P). DIV имеет белый
фон и границу.
<DIV STYLE="margin:20px; padding:10px;">
Блочный элемент, заданный элементом разметки
DIV.
<P>
Для него определена граница и отступы как от
границ старшего элемента разметки, так и для
вложенных в него элементов разметки.
</P>
</DIV>
расположен блочный элемент (DIV), внутрь которого
помещен еще один блочный элемент(P). DIV имеет белый
фон и границу.
<DIV STYLE="margin:20px; padding:10px;">
Блочный элемент, заданный элементом разметки
DIV.
<P>
Для него определена граница и отступы как от
границ старшего элемента разметки, так и для
вложенных в него элементов разметки.
</P>
</DIV>
6
Результат данного кода приведен на рисунке 2
Рисунок 2 - Отображение элемента DIV
Блок текста обладает свойствами: высоты (height),
ширины (width), границы (border), отступа (margin), набивки
(padding), произвольного размещения (float), управления
обтеканием (clear).
Результат данного кода приведен на рисунке 2
Рисунок 2 - Отображение элемента DIV
Блок текста обладает свойствами: высоты (height),
ширины (width), границы (border), отступа (margin), набивки
(padding), произвольного размещения (float), управления
обтеканием (clear).
Графически свойства блока можно представить следующим
образом (рисунок 3).
Рисунок 3 – Свойства блока
образом (рисунок 3).
Рисунок 3 – Свойства блока
3 Отступы в CSS
Отступы определяют пространство вокруг элементов.
Допускают использование отрицательных значений для
того, чтобы создавать наложение содержимого. Все
отступы (верхний, правый, нижний и левый) можно
изменять независимо, используя отдельные параметры, а
можно использовать параметр margin для изменения всех
отступов одновременно (см. таблицу 2). В Internet Explorer
тег body имеет отступ, равный 8px.
Отступы определяют пространство вокруг элементов.
Допускают использование отрицательных значений для
того, чтобы создавать наложение содержимого. Все
отступы (верхний, правый, нижний и левый) можно
изменять независимо, используя отдельные параметры, а
можно использовать параметр margin для изменения всех
отступов одновременно (см. таблицу 2). В Internet Explorer
тег body имеет отступ, равный 8px.
Значения задаются в:
– % - определяет отступ в % общей высоты/ширины документа,
–length - длиной определяет фиксированный отступ;
– Auto - автоматически отступ задает браузер.
Параметр Описание Значения
margin Параметр для задания отступов в
одном объявлении
margin-top,
margin-right,
margin-bottom,
margin-left
margin-
bottom
Задает нижний отступ элементаauto, length, %
margin-leftЗадает левый отступ элемента
margin-rightЗадает правый отступ элемента
margin-topЗадает верхний отступ элемента
Таблица 2. - Параметры отступов блока
– % - определяет отступ в % общей высоты/ширины документа,
–length - длиной определяет фиксированный отступ;
– Auto - автоматически отступ задает браузер.
Параметр Описание Значения
margin Параметр для задания отступов в
одном объявлении
margin-top,
margin-right,
margin-bottom,
margin-left
margin-
bottom
Задает нижний отступ элементаauto, length, %
margin-leftЗадает левый отступ элемента
margin-rightЗадает правый отступ элемента
margin-topЗадает верхний отступ элемента
Таблица 2. - Параметры отступов блока
Все параметры позволяют определять отрицательные значения.
P { margin-top: -5px }
Этот пример показывает, как задать для текста левый отступ.
<html>
<head>
<style type="text/css">
h2.rg {margin-left: 100px}
</style>
</head>
<body>
<h2> Заголовок h2 без отступов </h2>
<h2 class="rg"> Заголовок h2 с с заданным левым
отступом</h2>
</body>
</html>
P { margin-top: -5px }
Этот пример показывает, как задать для текста левый отступ.
<html>
<head>
<style type="text/css">
h2.rg {margin-left: 100px}
</style>
</head>
<body>
<h2> Заголовок h2 без отступов </h2>
<h2 class="rg"> Заголовок h2 с с заданным левым
отступом</h2>
</body>
</html>
На рисунке 4 изображена страница, html-код которого
представлен выше.
Рисунок 4 – Текст с левым отступом
представлен выше.
Рисунок 4 – Текст с левым отступом
Этот пример показывает, как задать для текста верхний
отступ.
<html>
<head>
<style type="text/css">
h1.tp {margin-top: 50px}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов </h1>
<h1 class="tp"> Заголовок h1 с заданным верхним
отступом</h1>
</body>
</html>
отступ.
<html>
<head>
<style type="text/css">
h1.tp {margin-top: 50px}
</style>
</head>
<body>
<h1>Заголовок h1 без отступов </h1>
<h1 class="tp"> Заголовок h1 с заданным верхним
отступом</h1>
</body>
</html>
На рисунке 5 изображена страница, html-код которого
представлен выше.
Рисунок 5 – Текст с верхним отступом
представлен выше.
Рисунок 5 – Текст с верхним отступом
Параметр margin. Параметр определяет все отступы в одном
объявлении. Позволяет определять отрицательные значения.
Пример: все четыре отступа будут иметь отступ, равный 2px.
p {margin: 2px}
Пример: верхний и нижний отступ будут по 5px, левый и правый
отступ будут составлять 10% общей ширины документа.
p {margin: 5px 10%}
Пример: верхний отступ будет равен 5px, левый и правый отступ
будут составлять 10% общей ширины документа, нижний отступ
будет равен 2px.
Пример: верхний отступ будет 5px, правый отступ будет
составлять 10% общей ширины документа, нижний отступ будет 2px,
левый отступ будет задан браузером.
p {margin: 5px 10% -2px}
p {margin: 5px 10% -2px auto}
объявлении. Позволяет определять отрицательные значения.
Пример: все четыре отступа будут иметь отступ, равный 2px.
p {margin: 2px}
Пример: верхний и нижний отступ будут по 5px, левый и правый
отступ будут составлять 10% общей ширины документа.
p {margin: 5px 10%}
Пример: верхний отступ будет равен 5px, левый и правый отступ
будут составлять 10% общей ширины документа, нижний отступ
будет равен 2px.
Пример: верхний отступ будет 5px, правый отступ будет
составлять 10% общей ширины документа, нижний отступ будет 2px,
левый отступ будет задан браузером.
p {margin: 5px 10% -2px}
p {margin: 5px 10% -2px auto}
4 Внутренние поля в CSS
4.1 Текст внутри блока начинается не от самой его границы.
Между границей и содержанием блока есть свободное
пространство. Оно называется внутренним отступом блока или
padding, для которого не предусмотрены отрицательные
значения. Все поля (верхнее, правое, нижнее и левое) можно
изменять независимо друг от друга (см. таблицу 3).
Проиллюстрируем применение padding на примере:
4.1 Текст внутри блока начинается не от самой его границы.
Между границей и содержанием блока есть свободное
пространство. Оно называется внутренним отступом блока или
padding, для которого не предусмотрены отрицательные
значения. Все поля (верхнее, правое, нижнее и левое) можно
изменять независимо друг от друга (см. таблицу 3).
Проиллюстрируем применение padding на примере:
Параметр Описание Значения
padding Параметр для задания отступов
в одном объявлении
padding-top,
padding-right,
padding-bottom,
padding-left
padding-bottomЗадает нижнее поле элементаlength, %
padding-leftЗадает левое поле элемента
padding-rightЗадает правое поле элемента
padding-top Задает верхнее поле элемента
Таблица 3 - Параметры внутренних полей блока
Значения задаются в:
– % - определяет нижнее поле в % от высоты элемента;
–length - определяет фиксированное нижнее поле.
padding Параметр для задания отступов
в одном объявлении
padding-top,
padding-right,
padding-bottom,
padding-left
padding-bottomЗадает нижнее поле элементаlength, %
padding-leftЗадает левое поле элемента
padding-rightЗадает правое поле элемента
padding-top Задает верхнее поле элемента
Таблица 3 - Параметры внутренних полей блока
Значения задаются в:
– % - определяет нижнее поле в % от высоты элемента;
–length - определяет фиксированное нижнее поле.
4.2 Параметр padding. Данный параметр предназначен для
задания всех полей в одном объявлении.
Примеры:
p {padding: 2px}
- для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px}
- верхнее и нижнее поле будет 5%, левое и правое поле будет
составлять 2px от ширины ближайшего элемента.
p {padding: 2px 7px 5%}
- верхнее поле будет 2px, левое и правое поле будет составлять
7px от ширины ближайшего элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px}
- верхнее поле будет 2px, правое поле будет 5% от ширины
ближайшего элемента, нижнее поле будет 7px, левое поле
будет 5px.
задания всех полей в одном объявлении.
Примеры:
p {padding: 2px}
- для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px}
- верхнее и нижнее поле будет 5%, левое и правое поле будет
составлять 2px от ширины ближайшего элемента.
p {padding: 2px 7px 5%}
- верхнее поле будет 2px, левое и правое поле будет составлять
7px от ширины ближайшего элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px}
- верхнее поле будет 2px, правое поле будет 5% от ширины
ближайшего элемента, нижнее поле будет 7px, левое поле
будет 5px.
4.3 Этот пример показывает, как задать левое поле элементов
списка.
<html>
<head>
<style type="text/css">
li {padding-left: 20px; border: 1px dotted black;}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>
</html>
списка.
<html>
<head>
<style type="text/css">
li {padding-left: 20px; border: 1px dotted black;}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>
</html>
На рисунке 6 изображена страница, html-код которого
представлен выше.
Рисунок 6 – Применение свойства padding-left
представлен выше.
Рисунок 6 – Применение свойства padding-left
Этот пример показывает, как задать нижнее поле элементов
списка.
<html>
<head>
<style type="text/css">
li {padding-bottom: 1cm; border: 1px dotted black;}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>
</html>
списка.
<html>
<head>
<style type="text/css">
li {padding-bottom: 1cm; border: 1px dotted black;}
</style>
</head>
<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>
</html>
На рисунке 7 изображена страница, html-код которого
представлен выше.
Рисунок 7 – Применение свойства padding- bottom
представлен выше.
Рисунок 7 – Применение свойства padding- bottom
5 Параметры текста в CSS
5.1 Параметры текста CSS позволяют управлять внешним
видом текста. Можно изменять цвет текста, увеличивать
или уменьшать интервал между символами, выравнивать
текст, оформлять текст, делать отступ для первой строки
текста (таблица 4).
5.1 Параметры текста CSS позволяют управлять внешним
видом текста. Можно изменять цвет текста, увеличивать
или уменьшать интервал между символами, выравнивать
текст, оформлять текст, делать отступ для первой строки
текста (таблица 4).
Параметр Описание Значения
color Задает цвет текста сolor
directionЗадает направление текстаltr, rtl
text-indentДелает отступ для первой
строки текста элемента
length, %
line-heightЗадает интервал между
строками
normal,length, %
text-alignВыравнивает текст в
элементе
Left,right, center,
justify
letter-
spacing
Увеличивает или
уменьшает интервал между
символами
normal,length
text-
decoration
Дополнительное
оформление текста
none, underline,
overline, line-through,
blink
Таблица 4 - Параметры текста в CSS
color Задает цвет текста сolor
directionЗадает направление текстаltr, rtl
text-indentДелает отступ для первой
строки текста элемента
length, %
line-heightЗадает интервал между
строками
normal,length, %
text-alignВыравнивает текст в
элементе
Left,right, center,
justify
letter-
spacing
Увеличивает или
уменьшает интервал между
символами
normal,length
text-
decoration
Дополнительное
оформление текста
none, underline,
overline, line-through,
blink
Таблица 4 - Параметры текста в CSS
5.2 Параметр color . Этот параметр задает цвет текста.
Значением color может быть название цвета (red), значение rgb
(rgb(255,0,0)) или шестнадцатеричное значение (#ff0000).
Пример:
h1 { color: green }
5.3 Параметр letter-spacing. Данный параметр увеличивает
или уменьшает интервал между символами. Может принимать
следующие значения:
•Normal - определяет обычный пробел между символами
•Length- определяет фиксированный пробел между
символами
Пример:
pre { letter-spacing: 20px }
Значением color может быть название цвета (red), значение rgb
(rgb(255,0,0)) или шестнадцатеричное значение (#ff0000).
Пример:
h1 { color: green }
5.3 Параметр letter-spacing. Данный параметр увеличивает
или уменьшает интервал между символами. Может принимать
следующие значения:
•Normal - определяет обычный пробел между символами
•Length- определяет фиксированный пробел между
символами
Пример:
pre { letter-spacing: 20px }
5.4 Параметр text-align. Этот параметр задает
выравнивaние текста в элементе. Может принимать следующие
значения:
•left - выравнивает текст слева
•right - выравнивает текст справа
•center- центрирует текст
•justify - выравнивание по ширине
Пример:
h1 { text-align: right}
5.5 Параметр text-decoration. Данный параметр задает
дополнительное оформление текста. Может принимать
следующие значения:
•none - определяет обычный текст
•underline - определяет линию под текстом
•overline- определяет линию над текстом
•line-through - определяет линию через текст
•blink - определяет мигающий текст
Пример:
h1 { text-decoration: overline }
выравнивaние текста в элементе. Может принимать следующие
значения:
•left - выравнивает текст слева
•right - выравнивает текст справа
•center- центрирует текст
•justify - выравнивание по ширине
Пример:
h1 { text-align: right}
5.5 Параметр text-decoration. Данный параметр задает
дополнительное оформление текста. Может принимать
следующие значения:
•none - определяет обычный текст
•underline - определяет линию под текстом
•overline- определяет линию над текстом
•line-through - определяет линию через текст
•blink - определяет мигающий текст
Пример:
h1 { text-decoration: overline }
5.6 Параметр direction. Параметр задает направление
текста. Может принимать следующие значения:
•ltr - направление текста слева направо
•rtl - направление текста справа налево
Пример:
P { direction: rtl }
5.7 Параметр text-indent. Данный параметр создает
отступ для первой строки текста элемента.
Пример:
p { text-indent: 10px }
текста. Может принимать следующие значения:
•ltr - направление текста слева направо
•rtl - направление текста справа налево
Пример:
P { direction: rtl }
5.7 Параметр text-indent. Данный параметр создает
отступ для первой строки текста элемента.
Пример:
p { text-indent: 10px }
6 Обтекание блока
Под обтеканием блока текстом (другим контейнером)
понимают тот же эффект, который можно реализовать для
графики, когда картинка не разрывает блок текста, а
встраивается в него. Текст в этом случае "обтекает" картинку с
одной стороны — там, где есть свободное поле между
границей страницы (элемента) и картинкой. Обтекание
картинки текстом от обычного встраивания картинки в текст
документа отличается тем, что вдоль вертикальной границы
картинки располагается несколько строк текста, а не одна.
Обтеканием блока текста другим текстом управляют два
атрибута CSS:
- float
- clear.
Под обтеканием блока текстом (другим контейнером)
понимают тот же эффект, который можно реализовать для
графики, когда картинка не разрывает блок текста, а
встраивается в него. Текст в этом случае "обтекает" картинку с
одной стороны — там, где есть свободное поле между
границей страницы (элемента) и картинкой. Обтекание
картинки текстом от обычного встраивания картинки в текст
документа отличается тем, что вдоль вертикальной границы
картинки располагается несколько строк текста, а не одна.
Обтеканием блока текста другим текстом управляют два
атрибута CSS:
- float
- clear.
6.1 Параметр float. Параметр float определяет, по какой
стороне будет выравниваться элемент, при этом остальные
элементы будут обтекать его с других сторон. Он может
принимать значения:
•left - Выравнивает элемент по левому краю, а все остальные
элементы, вроде текста, обтекают его по правой стороне.
•Right - Выравнивает элемент по правому краю, а все
остальные элементы обтекают его по левой стороне.
•none - Обтекание элемента не задается. Значение none
свойства float применяется, чтобы вообще запретить
перемещение элемента.
Если в строке слишком мало места для плавающего
элемента, он переносится на следующую строку и продолжается
пока строка имеет достаточно места.
Приведем пример:
P { float: right }
стороне будет выравниваться элемент, при этом остальные
элементы будут обтекать его с других сторон. Он может
принимать значения:
•left - Выравнивает элемент по левому краю, а все остальные
элементы, вроде текста, обтекают его по правой стороне.
•Right - Выравнивает элемент по правому краю, а все
остальные элементы обтекают его по левой стороне.
•none - Обтекание элемента не задается. Значение none
свойства float применяется, чтобы вообще запретить
перемещение элемента.
Если в строке слишком мало места для плавающего
элемента, он переносится на следующую строку и продолжается
пока строка имеет достаточно места.
Приведем пример:
P { float: right }
ПРАВИЛО. Левый (правый) внешний край перемещаемого
элемента должен быть не правее (левее) правого (левого) внешнего
края перемещаемого влево (вправо) элемента, встречающегося в
исходном файле документа раньше, если только верх второго
элемента не находится под низом правого.
Преимущество этого правила в том, что все перемещаемое
содержимое будет видимым, поскольку ни один из перемещаемых
элементов не скроет другой ( см. рисунок 7).
Рисунок 7 – Дополнительное предупреждение перекрытия
элемента должен быть не правее (левее) правого (левого) внешнего
края перемещаемого влево (вправо) элемента, встречающегося в
исходном файле документа раньше, если только верх второго
элемента не находится под низом правого.
Преимущество этого правила в том, что все перемещаемое
содержимое будет видимым, поскольку ни один из перемещаемых
элементов не скроет другой ( см. рисунок 7).
Рисунок 7 – Дополнительное предупреждение перекрытия
#logo{width:290px; height:104px; border: 1px solid black;
float:left;}
#gor-menu{ border: 1px solid black; width:494px; height:72px;
background-image:url(img/bg-menu.gif); margin-top:43px;
float:right; }
Пример
Контейнер gor-menu
Результат данного кода приведен на рисунке 8.
Рисунок 8 - Применение параметра float
Контейнер logo
float:left;}
#gor-menu{ border: 1px solid black; width:494px; height:72px;
background-image:url(img/bg-menu.gif); margin-top:43px;
float:right; }
Пример
Контейнер gor-menu
Результат данного кода приведен на рисунке 8.
Рисунок 8 - Применение параметра float
Контейнер logo
7 Запрет на обтекание
7.1 Параметр clear. Он не допускает наличия "плавающих" блоков
около блока текста. Устанавливает, с какой стороны элемента
запрещено его обтекание другими элементами, принимает следующие
значения:
•none - отменяет действие свойства clear, при этом обтекание
элемента происходит, как задано с помощью свойства float или других
настроек.
•both - отменяет обтекание элемента одновременно с правого и
левого края. Это значение рекомендуется устанавливать, когда
требуется снять обтекание элемента, но неизвестно точно с какой
стороны.
•left - отменяет обтекание с левого края элемента. При этом все
другие элементы на этой стороне будут опущены вниз, и
располагаться под текущим элементом.
•right - отменяет обтекание с правой стороны элемента.
•Inherit - устанавливает значение родителя.
7.1 Параметр clear. Он не допускает наличия "плавающих" блоков
около блока текста. Устанавливает, с какой стороны элемента
запрещено его обтекание другими элементами, принимает следующие
значения:
•none - отменяет действие свойства clear, при этом обтекание
элемента происходит, как задано с помощью свойства float или других
настроек.
•both - отменяет обтекание элемента одновременно с правого и
левого края. Это значение рекомендуется устанавливать, когда
требуется снять обтекание элемента, но неизвестно точно с какой
стороны.
•left - отменяет обтекание с левого края элемента. При этом все
другие элементы на этой стороне будут опущены вниз, и
располагаться под текущим элементом.
•right - отменяет обтекание с правой стороны элемента.
•Inherit - устанавливает значение родителя.
… <head> <meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>clear</title>
<style type="text/css">
#layer { float: left; /* Обтекание блока по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin:10px; height:200px; width: 40%; /* Ширина блока */ }
</style>
</head>
<body> <div id="layer"> Команда @charset применяется для задания
кодировки внешнего CSS-файла. </div>
<div> Это имеет значение в том случае, если в CSS-файле
используются символы национального алфавита. Для русского языка
обычно указывается кодировка windows-1251 или utf-8. </div>
<div style="clear: left"> Значение кодировки обязательно должно
быть взято в кавычки. </div>
</body> …
Пример
charset=windows-1251">
<title>clear</title>
<style type="text/css">
#layer { float: left; /* Обтекание блока по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin:10px; height:200px; width: 40%; /* Ширина блока */ }
</style>
</head>
<body> <div id="layer"> Команда @charset применяется для задания
кодировки внешнего CSS-файла. </div>
<div> Это имеет значение в том случае, если в CSS-файле
используются символы национального алфавита. Для русского языка
обычно указывается кодировка windows-1251 или utf-8. </div>
<div style="clear: left"> Значение кодировки обязательно должно
быть взято в кавычки. </div>
</body> …
Пример
Результат показан на рисунке 9.
Рисунок 9 – Запрет на обтекание слева
Если задано обтекание элемента с помощью свойства float, то
clear отменяет его действие для указанных сторон.
Рисунок 9 – Запрет на обтекание слева
Если задано обтекание элемента с помощью свойства float, то
clear отменяет его действие для указанных сторон.
8 Позиционирование в CSS
8.1 Координаты и размеры. Стандарт CSS позволяет с
точностью до пиксела разместить блочный элемент разметки в
рабочем поле окна браузера. При таком подходе возникает
естественный вопрос: как устроена система координат, в
которой автор страницы производит размещение ее
компонентов.
CSS определяет две системы координат: относительную и
абсолютную. Это позволяет обеспечить гибкость размещения
элементов как относительно границ рабочего поля окна
браузера, так и относительно друг друга.
При использовании "абсолютных" координат точка отсчета
помещается в верхний левый угол родительского блока
(например, окна браузера), а оси X и Y направлены вправо по
горизонтали и вниз по вертикали, соответственно (рисунок 10).
8.1 Координаты и размеры. Стандарт CSS позволяет с
точностью до пиксела разместить блочный элемент разметки в
рабочем поле окна браузера. При таком подходе возникает
естественный вопрос: как устроена система координат, в
которой автор страницы производит размещение ее
компонентов.
CSS определяет две системы координат: относительную и
абсолютную. Это позволяет обеспечить гибкость размещения
элементов как относительно границ рабочего поля окна
браузера, так и относительно друг друга.
При использовании "абсолютных" координат точка отсчета
помещается в верхний левый угол родительского блока
(например, окна браузера), а оси X и Y направлены вправо по
горизонтали и вниз по вертикали, соответственно (рисунок 10).
Перемещаемые элементы могут применять отрицательные
поля, чтобы выйти за пределы области содержимого их
родителя.
В HTML корневым элементом является элемент html
(некоторые браузеры используют элемент body).
Для некорневых элементов, значение свойства position
которых – absolute, блоком-контейнером считается
ближайший предок, значение position которого отлично от
static.
поля, чтобы выйти за пределы области содержимого их
родителя.
В HTML корневым элементом является элемент html
(некоторые браузеры используют элемент body).
Для некорневых элементов, значение свойства position
которых – absolute, блоком-контейнером считается
ближайший предок, значение position которого отлично от
static.
Рисунок 10 – Абсолютные координаты
8.2 Типы позиционирования. Свойство position позволяет
выбрать один из четырех типов позиционирования, которые
оказывают влияние на то, как генерируется блок элемента:
static, relative, absolute, fixed.
static - блок элемента генерируется соответственно
нормальному потоку. Блочные элементы генерируют
прямоугольный блок в окне браузера в соответствии с
иерархической структурой объектов документов.
relative - блок элемента смещается на некоторое
расстояние. Элемент сохраняет форму, которую имел бы, если
бы не был позиционирован, и размер, который бы занимал при
обычных условиях.
absolute - блок элемента полностью удаляется из потока
документа и позиционируется относительно его блока-
контейнера.
выбрать один из четырех типов позиционирования, которые
оказывают влияние на то, как генерируется блок элемента:
static, relative, absolute, fixed.
static - блок элемента генерируется соответственно
нормальному потоку. Блочные элементы генерируют
прямоугольный блок в окне браузера в соответствии с
иерархической структурой объектов документов.
relative - блок элемента смещается на некоторое
расстояние. Элемент сохраняет форму, которую имел бы, если
бы не был позиционирован, и размер, который бы занимал при
обычных условиях.
absolute - блок элемента полностью удаляется из потока
документа и позиционируется относительно его блока-
контейнера.
8.3 Свойства смещения. Все типы позиционирования
используют четыре разных свойста для описания смещения
сторон позиционируемого элемента относительно его блока-
контейнера. Эти четыре свойства описаны в следующей
таблице.
Свойство
смещения
top, right, bottom, left
Значения Длина, процентное значение, auto
Начальное
значение
auto
Область
применения
Позиционированные элементы (т.е. элементы, для
которых значение свойства position не равно static).
Процентное
соотношение
Относительно высоты блока-контейнера для top и
bottom, и ширины блока-контейнера для left и right.
используют четыре разных свойста для описания смещения
сторон позиционируемого элемента относительно его блока-
контейнера. Эти четыре свойства описаны в следующей
таблице.
Свойство
смещения
top, right, bottom, left
Значения Длина, процентное значение, auto
Начальное
значение
auto
Область
применения
Позиционированные элементы (т.е. элементы, для
которых значение свойства position не равно static).
Процентное
соотношение
Относительно высоты блока-контейнера для top и
bottom, и ширины блока-контейнера для left и right.
Параметр top. Данный параметр определяет верхний
край элемента.
Параметр bottom. Данный параметр определяет
нижний край элемента.
Параметр left. Данный параметр определяет левый
край элемента.
Параметр right . Данный параметр определяет правый
край элемента.
край элемента.
Параметр bottom. Данный параметр определяет
нижний край элемента.
Параметр left. Данный параметр определяет левый
край элемента.
Параметр right . Данный параметр определяет правый
край элемента.
8.4 Абсолютное позиционирование.
Указывает, что элемент абсолютно позиционирован. В этом
случае он не существует в обычном потоке документа подобно
другим элементам, которые отображаются на веб-странице
словно абсолютно позиционированного объекта и нет.
Положение элемента задается свойствами left, top, right и
bottom относительно края окна браузера. Пример. Заполним
нижний правый угол блока-контейнера, задав такие значения:
<DIV style="position:absolute; left: 10px; border: 1px solid black;
width: 300px ; height: 150px;
background-color:red;padding:0;margin:0">
<img src="1.gif" width=100% height=100%
style="position:absolute; bottom:0 ; top:0; left:0;">
<img src="2.gif" style="position:absolute; top:50%; bottom:0; left:
50%; right:0; width:50%; height:50% " >
</DIV>
Указывает, что элемент абсолютно позиционирован. В этом
случае он не существует в обычном потоке документа подобно
другим элементам, которые отображаются на веб-странице
словно абсолютно позиционированного объекта и нет.
Положение элемента задается свойствами left, top, right и
bottom относительно края окна браузера. Пример. Заполним
нижний правый угол блока-контейнера, задав такие значения:
<DIV style="position:absolute; left: 10px; border: 1px solid black;
width: 300px ; height: 150px;
background-color:red;padding:0;margin:0">
<img src="1.gif" width=100% height=100%
style="position:absolute; bottom:0 ; top:0; left:0;">
<img src="2.gif" style="position:absolute; top:50%; bottom:0; left:
50%; right:0; width:50%; height:50% " >
</DIV>
Это приводит к результату, показанному на рисунке 11.
Рисунок 11 – Заполнение нижней правой четверти
блока
Рисунок 11 – Заполнение нижней правой четверти
блока
Приведем следующий пример:
… <head> <style type="text/css">
#layer1 { position:absolute; left: 100px; top: 100px;
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px; padding: 10px; /* Поля вокруг текста */
width: 450px; height: 200px;/* Ширина высота блока */
}
#layer2 { position:absolute; left: 100px; top: 30px;
background: green; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px; padding: 10px; /* Поля вокруг текста */
width: 40%; /* Ширина блока */
}
</style> </head>
<body>
<div id="layer1“>Команда @charset применяется для задания кодировки внешнего CSS-
файла.
<div id="layer2"> Это имеет значение в том случае, если
в CSS-файле используются символы национального алфавита. Для русского языка
обычно указывается кодировка windows-1251 или utf-8.
</div></div> <!-- Закрыли блок layer1 -->
<div> Значение кодировки обязательно должно быть взято в кавычки. </div>
</body>…
… <head> <style type="text/css">
#layer1 { position:absolute; left: 100px; top: 100px;
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px; padding: 10px; /* Поля вокруг текста */
width: 450px; height: 200px;/* Ширина высота блока */
}
#layer2 { position:absolute; left: 100px; top: 30px;
background: green; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px; padding: 10px; /* Поля вокруг текста */
width: 40%; /* Ширина блока */
}
</style> </head>
<body>
<div id="layer1“>Команда @charset применяется для задания кодировки внешнего CSS-
файла.
<div id="layer2"> Это имеет значение в том случае, если
в CSS-файле используются символы национального алфавита. Для русского языка
обычно указывается кодировка windows-1251 или utf-8.
</div></div> <!-- Закрыли блок layer1 -->
<div> Значение кодировки обязательно должно быть взято в кавычки. </div>
</body>…
Результат данного кода приведен на рисунке 12.
Рисунок 12 – Пример абсолютного позиционирования
Рисунок 12 – Пример абсолютного позиционирования
8.4 Относительное позиционирование - position:relativ.
При относительном позиционировании элементы образуют
поток изображения, в котором каждый последующий элемент
позиционируются относительно конца предыдущего.
Добавление свойств left, top, right и bottom изменяет
позицию элемента и сдвигает его в ту или иную сторону от
первоначального расположения. Следующие элементы будут
отображаться так, как будто предыдущий элемент остался
несмещенным.
Если значения свойства left и top равны нулю, элемент
появляется в той же позиции, в какой он появился бы, если
бы никаких атрибутов позиционирования к нему не
применялось.
При относительном позиционировании элементы образуют
поток изображения, в котором каждый последующий элемент
позиционируются относительно конца предыдущего.
Добавление свойств left, top, right и bottom изменяет
позицию элемента и сдвигает его в ту или иную сторону от
первоначального расположения. Следующие элементы будут
отображаться так, как будто предыдущий элемент остался
несмещенным.
Если значения свойства left и top равны нулю, элемент
появляется в той же позиции, в какой он появился бы, если
бы никаких атрибутов позиционирования к нему не
применялось.
… <head>
#layer1 { position:relative; left: 0px; top: 0px;
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px;padding: 0px; /* Поля вокруг текста */
height: 200px; width: 350px; /* Ширина,высота блока */
}
#layer2 { position:relative; left: 0px; top: 0px;
background: green; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px; padding: 0px; /* Поля вокруг текста */
height: 100px; width: 300px; /* Ширина,высота блока */
}
</style>
</head>
<body>
<div id="layer1“>Команда @charset применяется для задания кодировки внешнего CSS-
файла. </div>
<div id="layer2"> Это имеет значение в том случае, если в CSS-файле используются
символы национального алфавита. Для русского языка обычно указывается кодировка
windows-1251 или utf-8. </div>
<div> Значение кодировки обязательно должно быть взято в кавычки. </div>
</body> …
Приведем следующий пример:
#layer1 { position:relative; left: 0px; top: 0px;
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px;padding: 0px; /* Поля вокруг текста */
height: 200px; width: 350px; /* Ширина,высота блока */
}
#layer2 { position:relative; left: 0px; top: 0px;
background: green; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
margin:0px; padding: 0px; /* Поля вокруг текста */
height: 100px; width: 300px; /* Ширина,высота блока */
}
</style>
</head>
<body>
<div id="layer1“>Команда @charset применяется для задания кодировки внешнего CSS-
файла. </div>
<div id="layer2"> Это имеет значение в том случае, если в CSS-файле используются
символы национального алфавита. Для русского языка обычно указывается кодировка
windows-1251 или utf-8. </div>
<div> Значение кодировки обязательно должно быть взято в кавычки. </div>
</body> …
Приведем следующий пример:
Результат данного кода приведен на рисунке 13.
Рисунок 13 – Пример относительного позиционирования
Layer1
position:relative;
left: 0px; top: 0px;
Layer2
position:relative;
left: 0px; top: 0px;
Рисунок 13 – Пример относительного позиционирования
Layer1
position:relative;
left: 0px; top: 0px;
Layer2
position:relative;
left: 0px; top: 0px;
Рисунок 14 – Пример относительного позиционирования
Изменим идентификатор #layer2:
position:relative; left:360px; top:-202px;
Результат данного кода приведен на рисунке 14.
layer1
position:relative;
left: 0px; top: 0px;
layer2
position:relative;
left:360px; top:-202px;
Область для layer2
ширина-300px,
высота-100px
Изменим идентификатор #layer2:
position:relative; left:360px; top:-202px;
Результат данного кода приведен на рисунке 14.
layer1
position:relative;
left: 0px; top: 0px;
layer2
position:relative;
left:360px; top:-202px;
Область для layer2
ширина-300px,
высота-100px
9 Размещение относительно оси z
9.1 Любые позиционированные элементы на веб-странице
могут накладываться друг на друга в определенном порядке,
имитируя тем самым третье измерение, перпендикулярное
экрану. Каждый элемент может находиться как ниже, так и
выше других объектов веб-страницы. Порядок наложения
(перекрытия) блоков определяется параметром z-index.
Данный параметр задает порядковый номер элемента в
стеке. Элемент с большим порядковым номером стека всегда
находится перед элементом с меньшим порядковым номером
стека.
Это свойство работает только для элементов, у которых
значение position задано как absolute, fixed или relative.
9.1 Любые позиционированные элементы на веб-странице
могут накладываться друг на друга в определенном порядке,
имитируя тем самым третье измерение, перпендикулярное
экрану. Каждый элемент может находиться как ниже, так и
выше других объектов веб-страницы. Порядок наложения
(перекрытия) блоков определяется параметром z-index.
Данный параметр задает порядковый номер элемента в
стеке. Элемент с большим порядковым номером стека всегда
находится перед элементом с меньшим порядковым номером
стека.
Это свойство работает только для элементов, у которых
значение position задано как absolute, fixed или relative.
В примере показано, как можно использовать Z-index для
размещения элемента "позади" другого элемента.
<html> <head>
<style type="text/css">
img.index
{ position:absolute; left:10px; top:40px; z-index:-1; }
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120"
height="150" border="1">
<p>Изображение с z-index равным -1 имеет меньший
приоритет, поэтому расположено "позади".</p>
</body>
</html>
размещения элемента "позади" другого элемента.
<html> <head>
<style type="text/css">
img.index
{ position:absolute; left:10px; top:40px; z-index:-1; }
</style>
</head>
<body>
<h4>Пример использования Z-index</h4>
<img class="index" src="image.gif" width="120"
height="150" border="1">
<p>Изображение с z-index равным -1 имеет меньший
приоритет, поэтому расположено "позади".</p>
</body>
</html>
Результат данного кода приведен на рисунке 15.
Рисунок 15 – Пример с параметром z-index
Рисунок 15 – Пример с параметром z-index
10 Вертикальное выравнивание элемента
Параметр vertical-align. Данный параметр задает вертикальное
выравнивание элемента. Пример: Img { vertical-align: bottom}
Может принимать следующие значения:
ЗначениеОписание
sub Выравнивает элемент как нижний индекс
super Выраванивает элемент как верхний индекс
top Вершина элемента выравнивается с вершиной самого высокого
элемента в строке
text-topВершина элемента выравнивается с вершиной шрифта
родительского элемента
middle Элемент помещается в середине родительского элемента
bottom Нижняя часть элемента выравнивается с самым нижним
элементом в строке
text-bottomНижняя часть элемента выравнивается с минимальной нижней
точкой родительского элемента
length, %Выравнивает элемент в % от значения параметра "line-height".
Допускаются отрицательные значения.
Параметр vertical-align. Данный параметр задает вертикальное
выравнивание элемента. Пример: Img { vertical-align: bottom}
Может принимать следующие значения:
ЗначениеОписание
sub Выравнивает элемент как нижний индекс
super Выраванивает элемент как верхний индекс
top Вершина элемента выравнивается с вершиной самого высокого
элемента в строке
text-topВершина элемента выравнивается с вершиной шрифта
родительского элемента
middle Элемент помещается в середине родительского элемента
bottom Нижняя часть элемента выравнивается с самым нижним
элементом в строке
text-bottomНижняя часть элемента выравнивается с минимальной нижней
точкой родительского элемента
length, %Выравнивает элемент в % от значения параметра "line-height".
Допускаются отрицательные значения.
В примере показано, как выровнять в тексте изображение по
вертикали.
<html> <head>
<style type="text/css">
img.first {vertical-align:text-bottom}
img.second {vertical-align:text-top}
</style>
</head>
<body> <p>
Пара- <img class="second" border="0“ src="image.gif"
width="100" height="100" /> граф.
</p>
<p>
Пара- <img class="first" border="0" border-color="blue"
src="image.gif" width="100" height="100" /> граф.
</p>
</body>
</html>
вертикали.
<html> <head>
<style type="text/css">
img.first {vertical-align:text-bottom}
img.second {vertical-align:text-top}
</style>
</head>
<body> <p>
Пара- <img class="second" border="0“ src="image.gif"
width="100" height="100" /> граф.
</p>
<p>
Пара- <img class="first" border="0" border-color="blue"
src="image.gif" width="100" height="100" /> граф.
</p>
</body>
</html>
Рисунок 16 – Пример выравнивания изображения по вертикали
Результат данного кода приведен на рисунке 16.
Результат данного кода приведен на рисунке 16.
11 Списки в CSS
11.1 Параметры списков в CSS позволяют разместить и
изменять маркеры элементов списка, задавать изображение в
качестве маркера элемента списка.
Параметр Описание
list-styleПараметр для задания всех характеристик
списка в одном объявлении
list-style-
image
Задает изображение в качестве маркера
элемента списка
list-style-
position
Задает размещение в списке маркера элемента
списка
list-style-
type
Задает тип маркера элемента списка
11.1 Параметры списков в CSS позволяют разместить и
изменять маркеры элементов списка, задавать изображение в
качестве маркера элемента списка.
Параметр Описание
list-styleПараметр для задания всех характеристик
списка в одном объявлении
list-style-
image
Задает изображение в качестве маркера
элемента списка
list-style-
position
Задает размещение в списке маркера элемента
списка
list-style-
type
Задает тип маркера элемента списка
11.3 Параметр list-style-image. Данный параметр позволяет
заменить маркер элемента списка указанным изображением.
Необходимо определять параметр "list-style-type" на тот случай, если
изображение будет недоступно.
Пример:
ul
{ list-style-image: url("www. speciality/image.gif");
list-style-type: square
}
11.2 Параметр list-style. Данный параметр определяет все
характеристики списка в одном объявлении. Может принимать
следующие значения:
list-style
list-style-type
list-style-position
list-style-image
Примеры:
ol { list-style: square inside url(www.departament/image.gif) }
заменить маркер элемента списка указанным изображением.
Необходимо определять параметр "list-style-type" на тот случай, если
изображение будет недоступно.
Пример:
ul
{ list-style-image: url("www. speciality/image.gif");
list-style-type: square
}
11.2 Параметр list-style. Данный параметр определяет все
характеристики списка в одном объявлении. Может принимать
следующие значения:
list-style
list-style-type
list-style-position
list-style-image
Примеры:
ol { list-style: square inside url(www.departament/image.gif) }
11.4 Параметр list-style-position. Параметр определяет
способ размещения маркера элемента списка. Может
принимать следующие значения:
inside - Маркер смещен внутрь текста
outside - Маркер располагается слева от текста
Пример:
ul { list-style-position: outside }
способ размещения маркера элемента списка. Может
принимать следующие значения:
inside - Маркер смещен внутрь текста
outside - Маркер располагается слева от текста
Пример:
ul { list-style-position: outside }
Значение Описание
none Без маркера
disc Маркер — закрашенный круг
circle Маркер — окружность
square Маркер — закрашенный квадрат
decimal Маркер — число
lower-romanМаркер — римские цифры, представленные
строчными буквами (i, ii, iii, iv, v и т.д. )
upper-romanМаркер — римске цифры, представленные
прописными буквами (I, II, III, IV, V и т.д.)
lower-alphaМаркер — латинские строчные буквы (a, b, c, d, и т.д.)
upper-alphaМаркер —- латинские прописные буквы (A, B, C, D, E
и т.д.)
11.5 Параметр list-style-type. Данный параметр задает тип
маркера элемента списка. Может принимать следующие
значения (см таблицу):
none Без маркера
disc Маркер — закрашенный круг
circle Маркер — окружность
square Маркер — закрашенный квадрат
decimal Маркер — число
lower-romanМаркер — римские цифры, представленные
строчными буквами (i, ii, iii, iv, v и т.д. )
upper-romanМаркер — римске цифры, представленные
прописными буквами (I, II, III, IV, V и т.д.)
lower-alphaМаркер — латинские строчные буквы (a, b, c, d, и т.д.)
upper-alphaМаркер —- латинские прописные буквы (A, B, C, D, E
и т.д.)
11.5 Параметр list-style-type. Данный параметр задает тип
маркера элемента списка. Может принимать следующие
значения (см таблицу):
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
Этот пример показывает, как задать различные маркеры
элементов списка.
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
Этот пример показывает, как задать различные маркеры
элементов списка.
В следующем примере показано, как позиционировать элемент
относительно его обычного положения.
<html>
<head>
<style type="text/css">
p.Left { position:relative; left:-20px }
p.Right { position:relative; left:20px}
</style>
</head>
<body>
<p>Параграф</p>
<p class="left">Параграф смещен влево относительно
обычного положения </p>
<p class="right">Параграф смещен вправо относительно
обычного положения</p>
</body>
</html>
Приложение А
относительно его обычного положения.
<html>
<head>
<style type="text/css">
p.Left { position:relative; left:-20px }
p.Right { position:relative; left:20px}
</style>
</head>
<body>
<p>Параграф</p>
<p class="left">Параграф смещен влево относительно
обычного положения </p>
<p class="right">Параграф смещен вправо относительно
обычного положения</p>
</body>
</html>
Приложение А
Рисунок 17 – Пример относительного позиционирования
Результат данного кода приведен на рисунке 17.
Результат данного кода приведен на рисунке 17.
В примере показано, как позиционировать элемент с помощью
абсолютного значения.
<html>
<head>
<style type="text/css">
p.ab { position:absolute; left:75px; top:200px }
</style>
</head>
<body>
<p class="ab">Параграф имеет абсолютное местоположение
и
смещен на 75px от левого края страницы и на 200px от
верха страницы</p>
<p>Параграф</p>
</body>
</html>
Приложение В
абсолютного значения.
<html>
<head>
<style type="text/css">
p.ab { position:absolute; left:75px; top:200px }
</style>
</head>
<body>
<p class="ab">Параграф имеет абсолютное местоположение
и
смещен на 75px от левого края страницы и на 200px от
верха страницы</p>
<p>Параграф</p>
</body>
</html>
Приложение В
Рисунок 18 – Пример абсолютного позиционирования
Результат данного кода приведен на рисунке 18.
Результат данного кода приведен на рисунке 18.
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 1
- Slides 62
- Age 90 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
41 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
45 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
40 views
14
Fertility awareness methods for women in the society
Isaiah47
38 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
37 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
39 views