Лабораторные ИД 3 курс / лр 2 / Zadanie_2
.docxЛабораторная работа №1
Тема: HTML + CSS
Задание:
-
Создайте html-файл следующего содержания:
Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.
Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя.
Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей.
Данный абзац написан шрифтом Georgia и имеет размер 2.5em.
Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.
Для этого:
-
задайте цвет шрифта на станице в теге <body>;
-
определите идентификатор для каждого абзаца (id=”…”);
-
для каждого абзаца задайте селектор идентификатора с необходимым шрифтом и размером в <head>;
-
выделите тегом <span> названия шрифтов и напишите правило для селектора <span> изменяющее цвет текста (в данном случае – фиолетовый) и подчеркивание.
-
Скопируйте в этот файл 3 абзаца текста (каждый не менее 5-ти строк), напишите и примените селекторы классов для этих абзацев, в которых установите различные свойства форматирования абзаца.
Имея большое поле для деятельности в качестве созданных ранее html –файлов, необходимо применить все CSS-свойства для шрифта, текста и списков.
-
Откройте свою прошлую работу. Если в коде встречаются теги жирного шрифта и курсива, уберите их, т.к. эти свойства нужно будет прописать в стилях.
-
Напишите селекторы тегов для заголовков (шрифт, цвет, равнение по центру)
-
Напишите селекторы классов для абзацев (отступы, равнения, расстояние между строками)
-
Выделите отдельные ключевые слова или мысли тегом <span> и напишите для них стили, выделяющие их из текста (тень, декорирование, другой шрифт и т.д.)
-
Для первой страницы со списком книг создайте CSS-правило в теге <body> (строковое объявление): измените цвет страницы и вставьте небольшую картинку (в качестве эмблемы издательства) в левый верхний угол страницы, назначьте цвет шрифта отличный от черного.
-
Измените маркеры списков, (необходимые свойства посмотрите в онлайн справочниках).
-
При помощи селектора a, уберите подчеркивание в гипперссылках.
-
Стили, являющиеся общими для всех текстовых страниц (например, заголовки, цитаты и т.д.) вынесите в отдельный файл и сохраните его с расширением *.css, а в тег <head> вставьте ссылку на css-файл.