Тема: Оформление текстов CSS .
ПЛАН ЗАНЯТИЯ
Дисциплина: ОП.16 Основы web - технологий
Преподаватель: Машарова Р.В.
Курс: 2
Группа: 1ИСП-21
Специальность: Информационные системы и программирование
Дата: 19.04.2023
Время проведения: 13.30-15.00, 4 пара
Тема: Оформление текстов 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. Обтекание
Методика оформления текстов, предлагаемая спецификациями CSS предназначена для расширения возможностей HTML по оформлению текстов до уровня, приближающегося к издательским системам.
1. Красная строка
Любой новый текст начинается с красной строки. Красную строку можно установить в тексте, расположенном на Web-странице, согласно синтаксису:
{text: величина _отступа}
Величина отступа может указываться в пикселах (px), дюймах (in), сантиметрах (cm), а так же в типографских пунктах (pt).
Пример:
<html><head> <title>Пример </title> </head>
<div style="text-indent:40pt"> Абзац начался с красной строки.<br>
Для ее создания необходимо сделать отступ <br> текста на расстояние в 40 пунктов.
</div>
</html>
Величину отступа можно задать в процентах, например:
P {text-indent:50%}
Начало абзаца отступит от края окна на расстояние, равное 50% открытого окна браузера.
2. Оформление текста
Предлагаемые в CSS средства оформления текста, во многом повторяют имеющиеся даже не в самой последней спецификации HTML. Синтаксис назначения стиля оформления:
{text-decoration: значение}
Пример:
<html> <head> <title>Пример </title> </head>
<div style="{text-decoration:none}"> Текст </div>
<div style="{text-decoration:underline}"> Текст подчеркнутый </div>
<div style="{text-decoration:line-through}"> Текст зачеркнутый </div>
<div style="{text-decoration:overline}"> Текст под чертой </div>
</html>
Результат исполнения кода (рис. 5.1).
Рисунок 5.1 - Пример использования оформления текста
3. Трансформация текста
Под трансформацией текста в данном случае понимается возможность отображения текста прописными и строчными буквами в разных вариациях.
Синтаксис:
{text-transform: значение}
Пример:
<html><head><title>Пример </title>
<style type="text/css">
text.none {font-size:20; text-transform:none}
text.capitalize {font-size:20; text-transform:capitalize}
text.uppercase {font-size:20; text-transform:uppercase}
text.lowercase {font-size:20; text-transform:lowercase}
</style>
</head>
<body>
<p class="none">Нормальное чередование букв.</p>
<p class="capitalize">Каждое слово начинается с прописной буквы.</p>
<p class="uppercase">Все буквы - прописные.</p>
<p class="lowercase">Все буквы - строчные.</p>
</body></html>
Результат исполнения (рис. 5.2)
Рисунок 5.2 - Пример использования трансформации текста
4. Расстояние между буквами
Для полнофункциональной верстки необходима возможность изменения таких свойств, как расстояние между буквами в слове и между словами в предложениях. Синтаксис определения расстояния между буквами:
{letter-spacing: значение}
Алгоритм выбора расстояния между буквами может задаваться тремя значениями - normal, length и auto. Если выбрано значение normal, принятое как значение по умолчанию, то изменить расстояние между буквами можно, придав свойству text alignment значение justify. В этом случае браузер распределит текст по ширине отведенного под данный текст пространства. При выбранном значении auto, браузер будет стремиться вытянуть текст в одну строчку. Это значение рекомендуется придавать свойствам заголовков. Непосредственно устанавливать расстояние между буквами можно, меняя численное выражение значения length. Это значение может измеряться, а следовательно, и отображаться, как в абсолютных единицах измерения, таких как сантиметры (cm), дюймы (in) и типографские пункты (pt), так и в относительных, к которым относятся пикселы (px) и эквиваленты размера шрифта, назначенного данному элементу текста (em).
Пример:
<html><head><title>Пример </title></head>
<div style="letter-spacing:0.5em">Расстояние между буквами</div>
</html>
Результат исполнения кода на рисунке 5.3.
Рисунок 5.3 - Пример задания расстояния между буквами
5. Расстояние между словами
Указание расстояния между словами в тексте подчиняется тем же правилам, что и указание расстояния между буквами. Синтаксис будет выглядеть:
{word-spacing: значение}
6. Высота строки
Под высотой строки понимается расстояние между двумя смежными базовыми линиями, т.е. расстояние между линией, на которой выстраиваются буквы на одной строке, и линией, выше которой символы применяемого шрифта находиться не могут. Синтаксис:
{line-height: значение}
Значение может принимать вид normal, length, number и percentage. Значение normal указывает на то, что выбрано значение, отображаемое браузером по умолчанию. Во втором случае указываются численные значения в пикселях, сантиметрах, дюймах или пунктах.
Пример задания высоты строки отображен на рисунке 5.4.
<html><head> <title>Пример </title></head>
<body>
<div style="line-height:34pt"> Высота строки<br>
задана в пунктах.<br>
</div>
</body></html>
Рисунок 5.4 - Пример задания высоты строки
При задании значения в виде number за высоту строки принимается размер назначенного данному элементу шрифта, повторенный определенное число раз.
Например: в коде HTML-документа, отображенного на рисунке 5.5, размер шрифта умножается на 2.
<html><head><title> Пример </title></head>
<div style="line-height: 2; font-size:20pt">
Высота строки равна<br> размеру шрифта, умноженному на 2.<br>
<font style="font-size:10pt">
Вне зависимости<br> от размера шрифта
</font>
</div>
Рисунок 5.5 - Пример задания размера строки относительно размеру шрифта
Задание высоты строки в процентах выглядит аналогично, но вместо числа повторений указывается процент повторений. Так, в этом случае, в примере, рассмотренном выше, задание высоты строки будет выглядеть, как
<div style="line-height:200%; font-size:20pt">
7. Выравнивание текста
В CSS предусмотрена возможность выравнивания текста относительно других элементов Web-страницы, как по горизонтали, так и по вертикали.
Горизонтальное выравнивание. Предлагается четыре вида выравнивания - по левому краю страницы или ячейки таблицы, по правому краю, по центру и распределение текста по всей ширине страницы или ячейке таблицы. Тот или иной вид выравнивания достигается подстановкой, согласно синтаксису (рис. 5.6).
{text-align: значение}
В качестве примера приведен код таблицы из четырех ячеек (два столбца и две строки), в каждой ячейке которой текст выравнивается в соответствии с принципом, изложенным выше:
<html><head> <title> Пример </title> </head>
<body bgcolor="White">
<table cellspacing=2 cellpadding=5 border=1>
<tr>
<td style="text-align:left">
Left.<br> Текст выровнен по левому краю, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>
<td style="text-align:right">
Right.<br> Текст выровнен по правому краю, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>
</tr>
<tr>
<td style="text-align:center"
Center.<br> Текст выровнен по центру, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>
<td style="text-align:justify">
Justify.<br> Текст распределен по всей ширине, хотя, безусловно, мог бы быть распределен как-нибудь иначе</p></td>
</tr></table>
</body></html>
Рисунок 5.6 - Пример выравнивания текста
Вертикальное выравнивание осуществляется аналогично горизонтальному, но имеет и некоторые особенности. Вертикальному выравниванию подлежат не только тексты (и элементы, имеющие в своей основе текст), но и изображения. Осуществляется вертикальное выравнивание так же относительно какого-либо элемента оформления Web-страницы-изображения или текста.
Синтаксис:
{vertical-align:значение}.
Значения могут меняться в зависимости от используемого вида выравнивания.
Ниже приведен пример HTML-кода, в котором задействованы все перечисленные выше элементы
Пример:
<html><head> <title> Пример </title> </head>
<table WIDTH="100%">
<tr>
<td SRC="adrov1.jpg" STYLE="vertical-align:text-top" HEIGHT="50"> Выравнивание по верхнему краю.<img SRC="adrov1.jpg" HEIGHT="30"></td></tr>
<tr>
<td SRC="adrov1.jpg" STYLE="vertical-align:text-bottom" HEIGHT="50"> Выравнивание по нижнему краю.<img SRC="adrov1.jpg" HEIGHT="30"></td></tr>
<tr>
<td SRC="adrov1.jpg" STYLE="vertical-align:baseline" HEIGHT="50"> Выравнивание по базовой строке.<img SRC="adrov1.jpg" HEIGHT="30">
</td></tr>
<tr>
<td SRC="adrov1.jpg" STYLE="vertical-align:middle" HEIGHT="50"> Выравнивание по середине.<img SRC="adrov1.jpg" HEIGHT="30"></td></tr>
</table>
</html>