Практична робота 7 Тема: Введення в каскадні таблиці стилів

Мета: Вивчити підключення таблиць стилів до html- документу

Питання для повторення:

1. Використання таблиць каскадних стилів.

2. Поняття про таблиці каскадних стилів.

3. Застосування каскадних стилів у НТML-документах.

4. Позиціювання елементів Web-сторінки за допомогою стилів.

Завдання:

Створити HTML-сторінку з наведеними структурними елементами.

Хід роботи:

1. Запустити HTMLPad 2010 і створити в ньому два файли: lab7.html і lab7style.css. Обидва файли зберегти у своїй папці.

2. Створити в html-файлі п’ять абзаців завдовжки в три рядки.

3. Зберегти html-сторінку і переглянути її у браузері.

4. У файлі lab7style.css напишіть стиль для селектора тегу body, у якому вкажіть колір тексту, розмір літер і назву шрифту:

5. Включити режим попереднього перегляду і переглянути, як виглядає стиль всього документа. Щоб html-документ «підняв» ці стилі, необхідно до html-файлу підключити css файл:

6. Зберегти зміни. Переглянути html-файл у браузері. Звернути увагу на шрифт.

7. В css файлі створити шрифт абзацу, в якому встановити розріджений інтервал тексту між літерами:

8. Зберегти css файл. Оновити html-файл в браузері і звернути увагу на зміни.

9. Для того, щоб один з абзаців зробити курсивом і підкресленим необхідно створити клас

і підключити його до другого абзацу

10. Зберегти зміни та переглянути результат.

11. Створити клас для форматування третього абзацу з наступними властивостями:

· шрифт абзацу Comic Sans (font-family);

· розмір шрифту 25 пт (font-size);

· відступ червоного рядка в 50 пікселів (text-indent).

12. Підключити стиль до третього абзацу, використовуючи атрибут class.

13. Створити клас.rich для відображення п’ятого абзацу, що містить наступні властивості тексту:

· Шрифт Arial, 15 пт;

· Зображення жирне + курсив (font-weight; font-style);

· Колір букв помаранчевий (color);

· Висота рядка 25 пунктів (line-height).

14. Створити клас.perenos і заборонити у ньому перенесення слів в межах одного абзацу (white-space). Призначити цю властивість другому і четвертому абзацу. Для цього в атрибуті class тегу абзацу через пропуск вказати два класи (той, що був раніше + клас perenos). Зберегти та переглянути зміни.

15. Для того, щоб виділити слова в межах одного абзацу використати тег <span> (він дозволяє додавати форматування до будь-якого текстового елементу). Створити клас, що містить заголовні червоні букви:

і вказати новий клас в тезі

16. Створити клас з наступними властивостями:

· шрифт Courier 12 пт;

· всі букви заголовні;

· міжбуквений інтервал розріджений на 2рх;

· текст підкреслений;

· червоний рядок 2 см;

· міжрядковий інтервал подвійний.

17. Додати ще пару абзаців і призначити їм властивості цього класу.

18. Створити свої 2-3 класи стилів тексту (кожен стиль повинен включати по 3-4 властивості форматування тексту) і підключити їх до абзаців або заголовків першого, другого і третього рівнів.

Таблиця 7.1

Властивості тексту

Контрольні запитання:

1. Які три типи CSS Ви знаєте?

2. У якому місці Web- сторінки записуються вбудовані CSS?

3. Де розташовується опис зовнішніх CSS?

4. У якому місці сторінки описуються упроваджені CSS?

5. Яка основна перевага каскадних таблиць стилів?

6. Яке розширення повинен мати файл з описом зовнішніх CSS?

7. Для чого використовуються класи?

8. Які програми використовуються для автоматизації створення таблиць стилів?

9. Яка зона дії вбудованих CSS?

10. Яка зона дії упроваджених CSS?

11. Яка зона дії зовнішніх CSS?

12. Як за допомогою CSS створити псевдографічне зображення?

13. Що таке стиль?

14. Чому таблиці стилів називають каскадними?

15. Якого типа CSS слід використовувати, якщо передбачається зміна формату відразу декількох сторінок?

16. Який з трьох типів CSS слід вважати найменш перспективним?

17. Як виконати групування селекторів?

Не нашли, что искали? Воспользуйтесь поиском: