Лабораторная работа №10. Каскадные таблицы стилей Цель работы Основные понятия
advertisement
Лабораторная работа №10. Каскадные таблицы стилей
Цель работы: Познакомиться с возможностями и способами создания
каскадных таблицей стилей.
Основные понятия.
Каскадные таблицы стилей (Cascading Style Sheets – CSS) предоставляют
удобный способ добавления к web-страницам сложных атрибутов
форматирования. С их помощью можно определить гарнитуры и размеры
шрифтов, способ выравнивания и другие характеристики, до мельчайших
деталей определить параметры текста, цветов, графики, линий, цитат и т.д.
Можно создать таблицу стилей и использовать ее для всех документов,
расположенных на сервере, что придаст стройность и строгость всему webсайту.
Таблица стилей – это набор правил, который управляет
форматированием тэгов HTML в web-документе. Любое правило каскадных
таблиц стилей состоит из двух частей: селектора и определения. Селектором
может быть любой тэг HTML, для которого определение задаёт, каким
образом необходимо его форматировать. Само определение, в свою очередь,
также состоит из двух частей: свойства и его значения, разделенных знаком
двоеточия (:). В одном правиле можно задать несколько определений,
разделённых символом точка с запятой (;).
Чтобы таблица стилей могла воздействовать на внешнее представление
документа, браузер должен знать о её существовании. Для этого ее
необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
1. Связывание – позволяет хранить таблицу стилей в отдельном файле и
присоединять её к документам с помощью тэга <LINK>, задаваемого в
разделе HEAD:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">
Связываемый файл содержит набор правил каскадных таблицей стилей,
определяющих форматирование документа, и должен иметь расширение CSS.
2. Внедрение – позволяет задавать все правила таблицы стилей
непосредственно в самом документе. Правила задаются в стилевом блоке,
ограниченном тэгами <STYLE TYPE="text/css"> и </STYLE>, который
должен размешаться в разделе HEAD документа:
<HEAD>
<STYLE TYPE="text/css">
селектор {свойство: значение}
…
</STYLE>
</HEAD>
Создание веб-страниц
3. Импортирование – позволяет встраивать в документ таблицу стилей,
расположенную на сервере.
4. Встраивание в тэги документа – позволяет изменять форматирование
конкретных элементов страницы.
Форматирование шрифтов. Шрифты различаются по своему внешнему
виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и
по "жирности" отображения (нормальный, полужирный).
font-family – приоритетный список шрифтов. Вместо названия
конкретного шрифта можно использовать типовые семейств шрифтов:
serif, sans-serif, cursive, fantasy, monospace.
font-style – стиль шрифта: нормальный (normal), курсивный (italic) или
наклонный (oblique).
font-variant – капитель (small-caps).
font-weight – жирность шрифта: нормальная (normal), полужирный
(bold).
font-size – размер шрифта. Его значение может быть абсолютным (xxsmall, х-small, small, medium, large, x-large, xx-large или в pt) или
относительным (larger и smaller, процентах или em).
line-height – высота строки.
Для сочетания всех возможных стилей для шрифта используется
свойство font. Если свойство не задаётся, то это соответствует значению по
умолчанию. Размер шрифта и высота строки задаются через косую черту.
Р
Р
Р
Р
{font-family: Impact, "Times New Roman", serif}
{font-style: oblique}
{font-size: l2pt}
{line-height: l4pt}
или
Р {font: oblique 12pt/14pt "Times Cyr", serif}
Цвет и фон. Свойства этой категории определяют цвет и фон элемента.
Фон можно задать в виде цвета или изображения.
color – цвета текста. Начальное значение – transparent, которое
определяет фон элемента как прозрачный.
background-color – цвет фона.
background-image – фоновое изображение.
background-repeat – повторяемость фонового изображения: repeat
(повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y
(повторяемость соответственно по горизонтали или вертикали) и norepeat (изображение не повторяется).
background-attachment – прокрутка фона: fixed (неподвижный), scroll
(перемещаться вместе с содержимым документа при прокрутке).
background-position – начальное положение фонового изображения.
2
Создание веб-страниц
BODY {background-color: lightsteelblue;
background-image: url(/image/image.gif);}
Свойство background позволяет одновременно устанавливать все
значения свойств фона.
Форматирование текста. Свойства данной категории влияют на
отображение символов, слов и абзацев.
letter-spacing – расстояние между символами.
text-transform – позволяет преобразовывать текст: capitalize (слова
отображаются с прописной буквы), uppercase (все буквы прописные),
lowercase ( все буквы строчные).
text-decoration: underline (подчеркивание), overline (надчеркивание),
line-through (перечеркивание).
text-align – выравнивание текста: left, right, center. Justify.
text-indent – отступ первой строки.
vertical-align – положение элемента по вертикали относительно
элемента-родителя: baseline, middle, sub, sup, text-top, text-bottom, top,
bottom.
Порядок выполнения работы
1. Откройте Paint.
2. В Paint создайте рисунок размером 100х100 точек и сохраните его в папку
D:\Users\...\Web\ Lab10\ в формате JPG под именем bgpic.
3. В Paint создайте второй рисунок размером 200х400 точек и сохраните его
в папку D:\Users\...\Web\ Lab10\ в формате JPG под именем risunok.
4. Откройте Блокнот.
5. На пишите следующий код:
body {background-color: lightsteelblue;
background-image: url(bgpic.jpg)}
Р {font: 14pt "Times Cyr", serif}
Р {text-indent: 20}
H1 {color: red}
H2 {color: blue}
Cохраните файл в папку D:\Users\...\Web\ Lab10\ с именем mycss.css.
6. Создайте HTML-документ, в нём создайте:
заголовок первого уровня "Краткая информация";
абзац, в котором напишите несколько строк о себе;
горизонтальную линию;
заголовок второго уровня "Учёба";
абзац, в котором напишите название факультета, направление
подготовки, группу;
горизонтальную линию;
3
Создание веб-страниц
надпись "Контактная информация", оформите её как гиперссылку на
документ kontakt.html.
Сохраните файл в папку D:\Users\...\Web\ Lab10\ с именем index10.html.
7. Подключите к HTML-документу созданную таблицу стилей (mycss.css).
8. Используя внедрённую таблицу стилей, измените положение и
повторяемость фонового рисунка, расстояние между буквами в заголовке
второго уровня, интервал между строками в абзаце, выравнивание линий.
9. Создайте в Блокноте новый HTML-документ, в нём:
создайте заголовок первого уровня "Контактная информация";
создайте список, содержащий e-mail, адрес, телефон;
вставьте рисунок risunok, сделайте чтобы текст обтекал его с левой
стороны;
подключите созданную таблицу стилей;
используя внедрённую таблицу стилей измените цвет текста в абзаце.
Сохраните файл в папку D:\Users\...\Web\ Lab10\ с именем kontakt.html.
4
