2020-09-26
103
Наименование: Форматирование текста средствами CSS
1. Цель: Научится применять таблицы стилей при оформлении веб – страницы. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 8; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5
2. Подготовка к занятию: по предложенной литературе повторить тему «Форматирование текста средствами CSS» и ответить на следующие вопросы:
2.1 Назначение CSS?
2.2 Какими способами можно назначить цвет в правилах CSS?
3. Литература:
3.3 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014
3.4 https://html5book.ru/osnovy-html/ - Основы HTML
4. Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
5. Задание:
5.1 Создать html – страницу с заголовком h1 – Моя страница. Далее идет первый абзац с текстом и рисунками (должно быть написано, о чем эта страница и 1-2 рисунка)
Заголовок h2- любой подзаголовок, допустим Мои увлечения
Далее идет второй абзац и три ссылки на любые интернет - ресурсы
|
|
|
Заголовок h2 – Мои друзья
Далее идет третий абзац и два – три рисунка
5.2 В таблице CSS создать правила для html – страницы
Вариант 1
1. Сделать цвет фона документа отличный от белого цвета;
2. h1 – синего цвета, выравнивание по центру;
3. Во всех абзацах определить красную строку, цвет текста задать самостоятельно, размер шрифта 14 px, название шрифта – Verdana;
4. Третий абзац выровнять по правому краю и сделать красным цветом;
5. Все h2 – синего цвета, выравнивание по центру;
6. Ссылки: непосещенные – желтые, с верхним подчеркиванием;
посещенные – оранжевые, с нижним подчеркиванием;
под указателем мыши – черные, без подчеркивания;
активные – фиолетовые, без подчеркивания.
Вариант 2
1. Сделать цвет фона документа отличный от белого цвета
2. h1 – желтого цвета, выравнивание по центру
3. Во всех абзацах определить красную строку, цвет текста задать самостоятельно, размер шрифта 12 px, название шрифта – Georgia
4. Третий абзац выровнять по правому краю и сделать белым цветом
5. Все h2 – желтого цвета, выравнивание по центру
6. Ссылки: непосещенные – черного, с верхним подчеркиванием;
посещенные – оранжевого, с нижним подчеркиванием;
под указателем мыши – белого, без подчеркивания;
активные – красные, без подчеркивания.
6. Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
7. Содержание отчета:
7.1 Наименование и цель работы
|
|
|
7.2 Код таблицы CSS
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
8. Контрольные вопросы:
8.1 Какое свойство CSS применяется для декоративного оформления текста? Какие значения может принимать данное свойство?
8.2 К какому семейству шрифтов относится шрифт вашей веб – страницы?
ПРИЛОЖЕНИЕ:
Рассмотрим следующее CSS – правило: H1 {color: blue}
Правило состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue.
Существуют два способа описания таблиц стилей для HTML – документа:
1. Вставка CSS – кода непосредственно внутрь HTML – документа. Для этого используется элемент STYLE, который должен располагаться внутри заголовка документа, т.е. внутри элемента HEAD. Например:
<head>
<style type=”text/css”>
H1 {color: blue}
</style>
</head>
2.Запись таблицы стилей во внешнем файле установка ссылки на этот файл в HTML – документе.
Для соединения HTML – документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE располагается в заголовке документа внутри элемента HEAD. Пример:
<head>
< link rel =”stylesheet” href = “my_style.css” type=”text/css”>
</head>
Элемент LINK имеет несколько атрибутов:
· rel – тип соединения, который для таблиц стилей задается как stylesheet.
· href – местонахождение таблицы стилей, т.е. адрес или имя файла. В нашем случае это my_style.css.
· type – тип присоединяемой таблицы стилей - text/css.
В CSS выделяют четыре типа ссылок:
· link – не посещенные ссылки;
· visited – посещенные ссылки;
· active – активные ссылки;
· hover – ссылки, которые находятся под курсором мыши.
a:hover {
color: grey;}
Цвет фона задается с помощью свойства background - color.
Свойство font – family указывает браузеру шрифт или список шрифтов, которым должен отображаться текст. Основные шрифты, которые доступны большинству браузеров и операционным системам:
· serif – Times New Roman, Garamond, Georgia;
· sans – serif – Trebuchet, Arial, Verdana;
· monospace – Courier, Courier New, Andele Mono;
Стиль шрифта задается свойством font-style, которое принимает одно из трех значений:
· normal – обычный текст;
· oblique – электронный наклон нормального шрифта;
· italic – наклонный текст.
Свойство font-variant может принимать одно из двух значений: normal и small-caps.
Свойство font-weight определяет ширину шрифта. Значение может задаваться числом от 100 до 900 (в сотнях).
Размер шрифта задается свойством font-size, например:
p{
font-size: 14pt;}
