4. Содержание отчета:

4.1 Наименование и цель работы

4.2 Задание своего варианта

4.3 Сценарий таблицы CSS

4.4 Ответы на контрольные вопросы

4.5 Вывод о проделанной работе

5. Порядок выполнения работы:

5.1 Создайте свою папку, куда в дальнейшем будете размещать свои документы.

5.2 Запустите Блокнот.

5.3 Наберите HTML – код своей программы.

5.4 Сохраните свой документ с расширением *.html, для чего в меню файл выберите команду Сохранить как... Из перечня Тип файла выберите Все файлы.

5.5 В отдельном документе составьте правила для своей веб – страничке согласно своему варианту. Для соединения HTL – документа с внешней таблицей стиля используется элемент LINK. Который должен располагаться в заголовке документа внутри элемента HEAD.

6. Контрольные вопросы:

6.1 Какое свойство CSS применяется для декоративного оформления текста? Какие значения может принимать данное свойство?

6.2 К какому семейству шрифтов относится шрифт вашей веб – страницы?

ПРИЛОЖЕНИЕ:

Для изменения цвета текста используется свойство color, в качестве параметра которого задается значение или название цвета, например:

h1{

color: red;

}

Свойство color тоже полезно использовать для задания цвета ссылкам в документе. В 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;

}

Практическая работа №14

Наименование: Оформление документа средствами CSS

1. Цель: Научиться создавать правила при оформлении веб – страниц средствами CSS

2. Литература:

2.1 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с.

3. Задание:

3.1 В строке заголовка должен отражаться номер практической работы

3.2 Создать html – страницу с заголовком h1 – Оформление документа средствами CSS

3.3 Создайте абзац, в котором запишите фразу: Я учусь на специальности: «Название специальности».

В таблице CSS сгенерировать кавычки, заключить в них название специальности.

Вариант 1 - стиль кавычек «…»

Вариант 2 - стиль кавычек “… „

3.4 Создать таблицу стилей для списка из 7 позиций

Вариант 1 - маркированный список из строчных греческих букв

Вариант 2 - нумерованный список из римских цифр

3.5 Создайте таблицу стилей для списка из 3 позиций . В качестве маркера используйте любой рисунок.

3.6 Создайте таблицу стилей для любого абзаца, при наведении на который указатель мыши примет вид:

Вариант 1 - циферблат или песочные часы

Вариант 2 - вопросительный знак или воздушный шар

3.7 Для созданного в пункте 3.6 абзаца сделайте границу:

Вариант 1 - зеленого цвета, размером в 3 пикселя

Вариант 2 - красного цвета, размером в 4 пикселя