Тема: Пространственная модель CSS .
ПЛАН ЗАНЯТИЯ
Дисциплина: ОП.16 Основы web - технологий
Преподаватель: Машарова Р.В.
Курс: 2
Группа: 1ИСП-21
Специальность: Информационные системы и программирование
Дата: 24.04.2023
Время проведения: 09.50-11.20, 2 пара
Тема: Оформление списков CSS. Цвета и краски CSS.
Цель занятия:
Дидактическая: познакомиться с оформлением списков CSS. Цвета и краски CSS.
Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания
Вид занятия лекция
Литература:
1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.
2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.
3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.
4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.
Тема: Пространственная модель CSS .
1. Стиль бордюра
2. Ширина бордюра
3. Цвет бордюра
4. Сокращенная запись
5. Отступ
6. Поля
7. Пространство, выделенное под содержимое
8. Визуальная модель представления
9. Позиционирование
10. Клиппинг
11. Переполнение
12. Видимость
13. Z-индекс
Методика форматирования Web-страниц и размещения на них содержимого в отведенном для этого пространстве описывается в CSS в виде пространственной модели (Box Formatted Model). Согласно этой модели, пространство - бокс (box), в котором размещено содержимое или часть содержимого Web-страницы (тексты, изображения), можно представить в виде объекта, обладающего набором специфических характеристик. Боксом считается не страница или ячейка таблицы, а лишь пространство, отведенное для содержимого или определенной его части. Формально каждый бокс имеет ядро, представляющее собой содержательную часть страницы или ячейки таблицы, и набор окружающих ядро элементов, характеристики которых определяют внешний вид бокса. Под последними понимаются поля отступа, бордюры и т. д.
Параметры боксов, связь между ними, а также смысл употребляемых терминов, изображен на рисунке 8.1.
Рисунок 8.1 - Схема параметров бокса
Ширина бокса состоит из суммы ширин собственно содержимого, отступов (Padding), бордюра (Border) и величины полей (Margin). Параметры, определяющие размеры каждого из этих элементов, задаются отдельно в зависимости от желания авторов Web-страниц. Из тех же слагаемых складывается и высота бокса. Высота содержимого - это расстояние между его верхней и нижней границами. Если содержимое - текст, это будет расстояние между самой высокой точкой в верхней строке и самой низкой в нижней. Поскольку содержимое размещается внутри бокса, то верхняя границуа содержимого называется верхней внутренней границей бокса (Inner Top), а нижняя - нижней внутренней границей (Bottom Top). Таким же образом вычисляется и длина содержимого. Каждому из элементов можно присвоить те или иные параметры, неизменным останется лишь фон полей - они всегда прозрачные
1. Стиль бордюра
Определенный стиль можно задать как для всего бордюра, так и для каждой из его четырех сторон по отдельности. Общий стиль задается в соответствии с синтаксисом:
{border-style: значение}
Примеры различных стилей бордюров представлены на рисунке 8.2.
Рисунок 8.2 - Перечень возможных стилей бордюра
В приведенном ниже примере стилевое решение задано отдельно для вертикальных и горизонтальных частей бордюра:
<html> <head> <title> Пример </title> </head>
<body>
<table border="1">
<tr>
<td
<p style="border-style:solid double;border-width:10pt; border-color:blue">Стиль solid для горизонтальных частей.<br>
Стиль double для вертикальных частей</p>
</td></tr>
</table>
</body> </html>
В данном случае для горизонтальных частей бордюра задан стиль solid, для вертикальных - double.
В строке:
<p style="border-style: solid double;border-width:10pt; border-color:blue">...</p>
они идут по порядку: сначала solid для горизонтальных полос, затем double - для вертикальных.
Выделить какую-либо одну из сторон бокса можно, назначив специфический стиль для нее. Делается это в соответствии со следующими вариантами синтаксиса:
o {border-top-style: значение} - для верхней части бордюра;
o {border-bottom-style: значение} - для нижней части бордюра;
o {border-right-style: значение} - для правой части бордюра;
o {border-left-style: значение} - для левой части бордюра.
Например, указание стиля для верхней части бордюра будет выглядеть следующим образом:
<p style="border-top-style: ridge; border-width:12pt; border-color:yellow" >Стиль ridge для <br> верхней части бокса.</p>
Результат исполнения кода - на рисунке 8.3.
Рисунок 8.3 - Пример стилевого решения для верхнего бордюра
2. Ширина бордюра
Ширина бордюра задается в соответствии с синтаксисом:
{border-widht: значение}
Указать ширину бордюра можно как в общеупотребительных единицах измерения - пикселах (px), дюймах (in) или сантиметрах (cm), так и в типографских - пунктах (pt) и приведенных эквивалентах (размер буквы "m" употребляемого шрифта, em). Кроме того, для задания ширины бордюра используются три фиксированных значения:
o thin;
o medium;
o thick.
Ниже приведен код, где употребляются все три значения:
<table border="1">
<tr><td
<p style="border-style: solid; border-width:thin; border-color:red" >Стиль бокса solid<br> ширина - thin.</p>
</td></tr>
<tr><td
<p style="border-style: solid; border-width:medium; border-color:red" >Стиль бокса solid<br>
ширина - medium.</p>
</td></tr>
<tr><td
<p style="border-style: solid; border-width:thick; border-color:red" >Стиль бокса solid<br>
ширина - thick.</p>
</td></tr>
</table>
Результат исполнения этого кода - на рисунке 8.4.
Рисунок 8.4 - Пример задания ширины бордюра
Ширину бордюра можно указывать отдельно для каждой из четырех сторон. Синтаксис указания ширины:
o {border-top-width: значение} - для верхней части бордюра;
o {border-bottom-width: значение} - для нижней части бордюра;
o {border-right-width: значение} - для правой части бордюра;
o {border-left-width: значение} - для левой части бордюра.
Используя синтаксис:
{border-widht: значение},
можно для назначения ширины бордюра употреблять сокращенную форму записи. Указывается необходимое число значений, по одному для каждой стороны, для которой назначается соответствующая ширина.
3. Цвет бордюра
Назначение цвета бордюра, указывается в соответствии с синтаксисом:
{border-color: значение},
Пример:
<p style="border-style: solid;
border-width:thick;
border-color:green">
Бордюр зеленого цвета<br>
для всего бокса.</p>
Существуют варианты для каждой из частей бордюра в отдельности:
o {border-top-color: значение} - для верхней части бордюра;
o {border-bottom-color: значение} - для нижней части бордюра;
o {border-right-color: значение} - для правой части бордюра;
o {border-left-color: значение} - для левой части бордюра.
4. Сокращенная запись
Параметры, описывающие задание стиля для бордюра, допускают сокращенную запись. В данном примере такая запись параметров выглядит следующим образом:
<p style="border: solid thick green">Зеленый бордюр<br>
для всего бокса.</p>
Из примера видно, что три свойства, задающие стиль бордюра, его ширину и цвет, сведены к одному - border, а три соответствующих значения указываются через пробел.
5. Отступ
В CSS предусмотрена возможность регулировать величину отступа между содержимым и бордюром. С помощью этой функции можно менять положение текста относительно краев страницы или ячейки таблицы, не прибегая к жестко заданному выравниванию.
Методы указания отступа практически не отличаются от методов задания любого другого параметра бокса. Синтаксис назначения отступа:
{padding: значение}
Значение может быть указано как в традиционных единицах измерения, так и в процентах.
Пример:
<html> <head> <title> Пример </title> </head>
<body>
<table border="1">
<tr>
<td
<p style="border: solid thick green;
padding-left:25%">Зеленый бордюр<br>
для всего бокса.<br>Отступ задан<br>в процентах</p>
</td></tr>
</table>
</body> </html>
Указание отступа так же, как указание бордюра предполагает возможность назначения отступа для каждой из четырех сторон бокса:
o {padding-top: значение} - отступ сверху;
o {padding -bottom: значение} - отступ снизу;
o {padding -right: значение} - отступ справа;
o {padding -left: значение} - отступ слева.
Аналогично описанным выше способам указания ширины бордюра предусмотрена сокращенная запись величины отступа, когда свойству padding придаются одно, два, три или четыре значения.
Пример:
<html> <head> <title> Пример </title> </head>
<body>
<table border="1">
<tr>
<td
<p style="border: solid thick green;
padding:10pt 40pt">Зеленый бордюр<br>
для всего бокса.<br>Отступ сверху<br>и снизу</p>
</td></tr>
</table>
</body> </html>
6. Поля
Поля являются последним, самым удаленным от содержимого элементом, формирующим бокс. Поле – это расстояние между бордюром и сторонами страницы или ячейки таблицы.
Синтаксис:
{margin: значение}
Величину полей можно задать отдельно для каждой из четырех сторон бокса:
o {margin-top: значение} - поле сверху;
o {margin -bottom: значение} - поле снизу;
o {margin -right: значение} - поле справа;
o {margin -left: значение} - поле слева.
В примере, приведенном ниже, поля отложены слева от бордюра.
<html> <head> <title> Пример </title> </head>
<body>
<table border="1">
<tr>
<td
<div style="border: solid thick green;
margin-left: 50pt">Зеленый бордюр<br>
для всего бокса.<br>Поля слева</div>
</td></tr>
</table>
</body>
</html>
Результат исполнения кода на рисунке 8.5.
Рисунок 8.5 - Пример задания полей в боксе
7. Пространство, выделенное под содержимое
Кроме регулирования параметров окружения содержимого, существует возможность в явном виде отводить площадь для того или иного содержимого. Для этого необходимо указать размеры прямоугольника, в который должно "вписаться" содержимое:
{width: значение}
{heigth: значение}
Значения могут быть заданы явным образом (абсолютно - в привычных единицах измерения, относительно - в процентах) или автоматически. В последнем случае под содержимое отводится столько места, сколько оно может занять.
Пример:
<html> <head> <title> Пример </title> </head>
<body>
<table border="1">
<tr>
<td
<div style="border: solid thick green;
width: 50%; height: 70px">Зеленый бордюр<br>
для всего бокса.</div>
</td></tr> </table> </body> </html>
8. Визуальная модель представления
Построения, определяющие расположение боксов на странице, описываются в CSS с помощью модели визуального представления (Visual Rendering Model). Конечным, элементом выступает не тег или группа тегов, а текст, формат которого задан с помощью этих тегов. Однако согласно иерархии тегов в HTML-документе выстраивается и иерархия боксов (поток боксов). В одном документе могут быть боксы как принадлежащие к потоку, так и находящиеся вне его. Боксы, сгруппированные в поток, имеют предыдущий (если это не первый бокс) и последующие боксы (если рассматривается не последний бокс). Геометрические размеры каждого бокса, отношения бокса с предыдущими, родительскими, боксами и последующими определяют, как будет выглядеть страница в целом. Боксы в потоке расположены один над другим, т.е. старшие, родительские, слои находятся ниже младших, порожденных, слоев.
9. Позиционирование
Имеющиеся на странице боксы составляют блок. Края блока служат системой координат для позиционирования боксов на странице. Предусмотрено два варианта позиционирования: абсолютное, когда положение бокса определяется относительно границ блока, и относительное, когда положение бокса определяется относительно предшествующего (родительского) блока.
Каждый из этих вариантов указывается в виде значения свойства position в синтаксисе позиционирования:
{position: значение}
Таким образом, в случае, когда используется абсолютное значение, задание варианта позиционирования выглядит как:
{position: absolute},
а в случае применения относительного позиционирования:
{position: relative}.
После того как определен вариант позиционирования, необходимо указать координаты позиционируемого бокса. Началом координат служит левый верхний угол блока или предыдущего бокса. Указываются два значения - отступа слева и отступа сверху от начала координат: {top:значение}
для отступа сверху и
{left: значение}
для отступа слева.
Пример1:
<html> <head> <title> Пример </title>
</head>
<body>
<img src="ad1.jpg" style="position:absolute; left:0; top:0" hight="50">
</body> </html>
В примере1 картинка прижата к верхнему левому углу, что соответствует нулевым отступам слева и сверху.
Пример2:
<body>
<img SRC="ad1.jpg" STYLE="position:relative; left:0; top:0" HEIGHT="50">
</body>
В примере 2, картинка отстоит на некотором расстоянии от левого и верхнего краев страницы, т.к. картинка позиционирована относительно положения предыдущего бокса в потоке - бокса, содержимым которого является часть страницы, описанная тегом body.
10. Клиппинг
Клиппингом (clipping) называется отображение не всего содержимого бокса, а только какой-либо его части. Клиппинг может быть создан автоматически, если размеры бокса превысят размеры блока. Вручную клиппинг задается в соответствии с синтаксисом:
{clip: rect (координаты)}
Под координатами подразумеваются величины отступов сверху (top), справа (right), снизу (bottom) и слева (left), заданные относительно левого верхнего угла бокса.
Пример:
<html> <head> <title> Пример </title> </head>
<body>
<div style="position:relative; left:0; top:0; height:165; width:150; border:groove yellow">
<img src="adr1.jpg" style="position:absolute; clip:rect (20 120 135 20)">
</div> </body> </html>
11. Переполнение
Обычно поверхности бокса бывает достаточно для того, чтобы поместить в него все его содержимое, однако в некоторых случаях содержимое бокса не может быть отображено полностью. Такая ситуация называется переполнением (overflow). Существуют следующие факторы, способствующие появлению переполнения:
- ширина бокса превышает ширину блока;
- длина бокса превышает длину блока;
- к боксу применено абсолютное позиционирование;
- у бокса есть поля, ширина которых задана отрицательными значениями.
При разработке Web-страницы переполнение может быть задано умышленно, согласно синтаксису:
{overflow: значение}
В качестве примера приведен код, где употребляется вариант scroll. Результат исполнения этого кода приведен на рисунке 8.6.
Рисунок 8.6 - Пример переполнения текста
<html> <head>
<title> Пример </title>
</head>
<body>
<div style="position:relative; left:0; top:0; height:140; width:140; border: solid blue; overflow:scroll">
Обычно поверхности бокса бывает достаточно </div>
</body> </html>
12. Видимость
При необходимости тот или иной бокс можно скрыть, сделав его невидимым. Бокс со всем своим содержимым при этом никуда не исчезает, а становится невидимым, следовательно, никаких перемен в позиционировании других боксов не произойдет. Задается невидимость назначением боксу свойства visibility.
Синтаксис:
{visibility: значение}
Значений для данного свойства предполагается два: visible делает бокс видимым и hidden - невидимым.
Рисунок 8.7 - Пример задания видимости объектов
Содержимое правой ячейки таблицы описано кодом:
<h5>visibility:visible</h5">
<DIV STYLE="position:relative; left:0; top:0; height:100; width:100; border: solid green; visibility:visible">
Один, два, три, четыре, пять, шесть, семь...
</DIV>
Видно.
Аналогично описан бокс, находящийся в левой части таблицы, с той лишь разницей, что значение visible заменено на hidden, и, следовательно, бокс в левой ячейке таблицы не виден.
13. Z-индекс
CSS предусматривает возможность управления послойным размещением боксов. Управлять послойным размещением боксов можно двумя способами: во-первых, размещая исходные элементы боксов таким образом, чтобы сгенерированные боксы не перекрывали один другого там, где это недопустимо; во-вторых, явно указывая порядок чередования боксов, т.е. Z-индекса, указанный в соответствии с синтаксисом:
{z-index: значение}
Z-индекс может принимать два значения. При значении auto боксы выстраиваются согласно положению генерирующих их элементов, при значении integer положение бокса определяется согласно назначенному ему целочисленному индексу. Боксы с назначенным им Z-индексом "складываются" снизу вверх в порядке следования индексов: чем меньше индекс, тем ниже расположен бокс. Самый нижний имеет по умолчанию номер 0. Допустимо задание и отрицательного номера, такой бокс займет место ниже нулевого.
На рисунке 8.9. приведена таблица, содержимое ячеек которой спозиционировано явным указанием Z-индекса.
Рисунок 8.9 - Пример использования Z-индекса
В левой ячейке послойное позиционирование осуществляется автоматически (Z-индекс - auto) - картинка, имеющая больший Z-индекс, закрыла часть текста. В коде, описывающем содержимое левой ячейки таблицы, картинка расположена под текстом (Z-индекс равен 1).
<div style="position:relative; left:0; top:0;
height:100; width:100; border: solid green">Пример позиционирования.<br>
Бокс позиционируется явным указанием Z-индекса.<br><img src="coco.gif" style="position:absolute; left:0; top:0; z-index:-1"> </div>
Контрольные вопросы.
1. Какое свойство задает стиль бордюра?
2. Какое свойство задает ширину бордюра?
3. Какое свойство задает цвет бордюра?
4. Какое свойство задает пространство, выделенное под содержимое?
5. Какое свойство задает расстояние между бордюром и сторонами страницы или ячейки?
6. Какое свойство задает обтекание текстом?
7. Какое свойство задает отступ между двумя соседними объектами?
8. Перечислите виды позиционирования объектов.
9. Какое свойство задает позиционирование объектов? Перечислите значения.
10. Какое свойство используется при переполнении объекта содержимым?
11. Какое свойство задает видимость объектов?
12. Что служит началом координат при позиционировании объекта?
13. Какое свойство позволяет послойно размещать объекты?