Файл: Лабораторна робота №10 CSS.doc

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 15.06.2024

Просмотров: 16

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

2. Збережіть цей документ у файлі з іменем pryklad2.html. Скопіюйте у папку з цим документом зображення fly.jpg (можна використати інший файл, але його назва має збігатися з на-звою в HTML-документі).

Відкрийте файл pryklad2.html у браузері (рис. 10.5) — контейнери перекриваються згідно з розташуванням у документі.

Рис. 10.5. Позиціювання фрагментів тексту і зображення за допомогою стилів

4. Внесіть зміни у текст веб-сторінки, який стосується першого контейнера (із зображенням). Для цього клацніть правою кнопкою миші вільне місце сторінки у вікні браузера і виберіть пункт Перегляд HTML-коду (View Source). У вікні редакто­ра, що з'явиться, внесіть такі зміни:

<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100; z-index: 2">

<IMG SRC="fly.jpg"></DIV>

Решту документа залиште без змін. Хоча в тексті HTML-документа зображення описане першим, завдяки тому, що йому присвоєно індекс із більшим номером, воно відобразиться по­верх інших об'єктів.

5. Збережіть внесені зміни (командою Файл > Зберегти), закрийте текстовий редактор і оновіть веб-сторінку за допомогою команди Вигляд • Оновити або функціональної клавіші F5. Вигляд цього документа у вікні браузера показаний на рис. 10.6.

Рис. 10.6. Використання властивості z-index

Отже, використання властивості z-index дає змогу відображати об'єкти незалежно від порядку їх розташування в тексті HTML-документа.

Під час відображення сторінки може статися, що розміри елемента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямо-кутник. У таких випадках використовують властивість over­flow (переповнення). Вона може мати три значення:

• nоnе — якщо елемент вийде за межі наданого місця, він все одно буде показаний;

  • clip — об'єкти, що виходять за межі, будуть обрізані;

  • scroll — буде використано прокручування.

6. Відкрийте HTML-код сторінки і внесіть у другий контейнер, що містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», такі зміни:

7. Збережіть зміни та оновіть веб-сторінку в браузері. Який вигляд вона матиме, показано на рис. 10.7.

Рис. 10.7. Використання властивості overflow для реалізації прокручування

Завдання

  1. Виконати, наведені у лабораторній роботі, приклади.

  2. Оформити звіт.

  3. Знати відповіді на контрольні запитання.

КОНТРОЛЬНІ ПИТАННЯ

  1. Що таке каскадна таблиця стилів?

  2. Які є способи застосування каскадних таблиць стилів?

  3. Як застосовуються таблиці стилів з використанням класів?

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

  5. Назвіть властивості каскадних таблиць стилів для тексту.

  6. Які ви знаєте властивості для фону сторінки?

  7. Що таке абсолютне позиціонування?

  8. Яке позиціонування називається відносним?

  9. Яка властивість вказує на тип позиціонування?

  10. Яка дія властивості visibility?

8

Смотрите также файлы