Лабораторная работа №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 – размер шрифта. Его значение может быть абсолютным (xx-small, х-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 (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется).
· background-attachment – прокрутка фона: fixed (неподвижный), scroll (перемещаться вместе с содержимым документа при прокрутке).
· background-position – начальное положение фонового изображения.
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-документ, в нём создайте:
· заголовок первого уровня "Краткая информация";
· абзац, в котором напишите несколько строк о себе;
· горизонтальную линию;
· заголовок второго уровня "Учёба";
· абзац, в котором напишите название факультета, направление подготовки, группу;
· горизонтальную линию;
· надпись "Контактная информация", оформите её как гиперссылку на документ kontakt.html.
Сохраните файл в папку D:\Users\...\Web\ Lab10\ с именем index10.html.
7. Подключите к HTML-документу созданную таблицу стилей (mycss.css).
8. Используя внедрённую таблицу стилей, измените положение и повторяемость фонового рисунка, расстояние между буквами в заголовке второго уровня, интервал между строками в абзаце, выравнивание линий.
9. Создайте в Блокноте новый HTML-документ, в нём:
· создайте заголовок первого уровня "Контактная информация";
· создайте список, содержащий e-mail, адрес, телефон;
· вставьте рисунок risunok, сделайте чтобы текст обтекал его с левой стороны;
· подключите созданную таблицу стилей;
· используя внедрённую таблицу стилей измените цвет текста в абзаце.
Сохраните файл в папку D:\Users\...\Web\ Lab10\ с именем kontakt.html.
