Лабораторна робота №8, Формування елементів Web – сторінки за допомогою каскадних таблиць стилів

« Назад

Хід роботи

1. Підготовча робота. У папці HTML створимо файл ccs.html та запишемо у ньому такий HTML-код:

Відповідне вікно браузера подане на рис.1.

2. Визначимо стиль, що призводить до появи границь товщиною 1 піксель навколо всіх елементів h1 та вирівнювання цих елементів по центру:

Після застосування такого стилю вікно відображення заголовків першого рівня зміниться відповідно до рис.2.

3. Модифікуємо визначення стилю таким чином, щоб він використовувався тільки елементами h1 класу m:

4. Першого елемента h1 призначимо клас m

Оновлене відображення HTML-документу вікну браузера повинно відповідати рис.3.

5. За допомогою контекстного селектора визначимо стиль для відображення заголовків другого рівня та абзаців шрифтом Monotype Corsiva:

Переглянемо модифікований документ (рис.4)

6. У першому абзаці додамо стиль для відображення тексту цього абзацу червоним кольором з нижньою границею типу double та верхньою границею зеленого кольору типу dotted:

Відображення цього абзацу у вікні браузері подане на рис. 5.

7. Скопіюємо у папку HTML два рисунки, наприклад 1.jpg та Eifel.jpg.

8. У файлі ccs. html додамо HTML-код для показу на Web-сторінці цих рисунків з границею, товщиною 1 піксель. Рисунка Eifel.jpg призначимо вирівнювання «по лівому краю», а рисунка 1.jpg присвоїмо id=pic:

9. Додамо стиль для абсолютного позиціювання об’єкта з id=pic відносно вікна браузера з параметрами top = 90 пікселів та left = 450 пікселів:

Пересвідчимося,що розміщення рисунка 1.jpg (рис.6) значно відрізняється від звичайного розміщення, заданого за допомогою параметра align тегу <img>

10. Рисунка Eifel.jpg призначимо id= «еifel»:

 

11. Додамо стиль для того, щоб об’єкт з id= «еifel» не відображався у вікні браузера:

Пересвідчимося, що рисунок Eifel.jpg не відображається у вікні браузера (рис.7)

12. Модифікуємо стиль об’єкта з id= «еifel» для його відображення на екрані:

# id=еifel {display:none}

Пересвідчимося, що рисунок Eifel.jpg знову відображається у вікні браузера (рис.6)

13. Виділимо визначені нами стилі у окремий файл та зв’яжемо його з нашим HTML-документом (ccs. html). Для цього:

13.1. У папці HTML створимо текстовий документ, назвемо його mystyle.ccs та відкриємо за допомогою текстового редактора «Блокнот»

13.2. Із файлу ccs. Html перенесемо у mystyle.ccs всі визначення нами таблиці стилів:

Зазначимо,що теги <style type = “text / css” > та </ style > записувати не потрібно

13.3. За допомогою меню «Файл» - > «Сохранить» збережено файл mystyle.ccs.

13.4. У файлі ccs.html замість тегів: < style type = «text / ccs» > … </ style >

Запишемо:

<link href = “mystyle.ccs” rel = “styleheet” type = “text / ccs” >

13.5. Збережемо файл ccs.html.

14. Проведемо оновлення нашої Web- сторінки у вікні браузері. Якщо у процесі виконання п.13 не було допущено помилок,то відображення Web- сторінки повинно зостатись без змін (рис.6).