Введение в каскадные таблицы стилей

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

Цель:

Изучить подключение таблиц стилей к документу;

Изучить использование классов в css.

Классы являются ключевыми селекторами CSS, так как дают практически неограниченную возможность по применению стилей к тем или иным HTML-элементам. Селектор класса всегда начинается с точки (.) после которой без пробела записывается имя класса. Общий синтаксис следующий:

.имя_класса { свойство: значение; свойство: значение;... }

Имя класса — это произвольное слово, которое вы придумываете сами, но есть ограничение, оно может состоять только из символов латинского алфавита (a-z, A-Z), цифр (0-9), символов дефиса (-) и подчеркивания (_). Причем имя класса не может начинаться с цифры или дефиса, за которым следует цифра. Например, классы.block-1,.-block3,.kartinkiBlock,._7Block_vnizu — правильные, а.1-block,.-7block — нет.

Задание:

1. Создайте документ Index. html с использованием текстового файла Каскадные таблицы стилей.
2. Сохраните html страницу и посмотрите ее в браузере.
3. Создайте cssфайл style.css
4. В файле style.css напиши стиль для селектора тега body, в котором укажите цвет текста, размер букв и название шрифта:
5. 
   Включите предварительный просмотр и посмотрите как выглядит стиль всего документа. Чтобы html документ выполнял эти стили необходимо в html-файле подключить css файл:
   
6. Сохраните изменения. Посмотрите html-файл в браузере. Обратите внимание на шрифт.
7. В css файле создайте шрифт абзаца, в котором установите разраженный интервал текста между буквами:
8. 
   Сохраните css файл. Обновите html файл в браузере.
9. Для того что бы один из абзацев сделать курсивом и подчеркнутым необходимо создать класс:

1. Сохраните. Посмотрите что получилось.
2. Создать класс для форматирования третьего абзаца со следующими свойствами:
• шрифтабзаца Comic Sans; (font-family)
• размершрифта 25 пт; (font-size)
• отступ красной строки в 50 пикселей (text-indent).
3. Подключите стиль к третьему абзацу (используя атрибут class).
4. Создайте класс .rich для отображения пятого абзаца, содержащий следующие свойства текста:
• Шрифт Arial, 15 пт;
• Начертание жирное + курсив (font-weight; font-style);
• Цвет букв оранжевый (color);
• Высота строки 25 пунктов (line-height).
5. Создайте класс .perenos и запретите в нем перенос слов в пределах одного абзаца (white-space).
6. 
   Для того что бы выделать слова в пределах одного абзаца можно использовать тег (он позволяет добавлять форматирование к любому текстовому элементу). Создаем класс, содержащий заглавные красные буквы:
   и указываем новый класс в теге

1. Создайте класс следующими свойствами:
• Шрифт Courier 12 пт;
• все буквы заглавные;
• межбуквенныйинтервал разряженный на 200%;
• текст подчеркнутый;
• красная строка 2 см;
• междустрочный интервал двойной.
2. Добавьте еще пару абзацев и назначьте им свойства этого класса.
3. Создайте свои 2-3 класса стилей текста, (каждый стиль должен включать по 3-4 свойства форматирования текста) и быть подключенным к абзацам или заголовкам первого, второго и третьего уровней.

Таблица: Свойства текста