Материал: Лабораторна робота №13 Оформление

Лабораторна робота №13

Створення шаблона засобами CSS|

Мета: за допомогою таблиці стилів навчитися додавати на веб-сторінку фонове зображення та визначати прозорість, змінювати маркер списків та створювати горизонтальне меню, визначати розмір, рамку, прозорість та обтікання для зображень.

1. CSS| зображення - фон визначається за допомогою зображення.

Розглянемо такий приклад:

Результат :

2. CSS|  атрибути, що визначають прозорість фону.

Приклад 2

Результат:

CSS| прозорість фону була задана для Internet| Explorer| і для інших браузерів|.

3. CSS| атрибути і значення, що визначають положення фону

Зображення як фон web-сторінки|:

background-image:url|(../images/cvetok.png) визначає зображення-фон.

За умовчанням зображення-фон розповсюджується по горизонталі (repeat-x) і по вертикалі (repeat-y), заповнюючи собою весь простір, що видно з результату прикладу. |

Атрибути і значення

• margin| – визначає зовнішні відступи.

• margin:0| auto| – визначає центрування блоку по горизонталі.

• padding| – визначає поля усередині блоку.

• border| – визначає властивості меж.

• width| – визначає ширину в пікселях або у відсотках.

• height| – визначає висоту.

• color| – визначає колір тексту.

4. CSS| атрибути і значення, що визначають нерухомий фон

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

За умовчанням фонове зображення прокручується разом з іншими елементами сторінки.

• background-attachment:fixed| фіксує фонове зображення в заданій позиції.

• background-position|: задає точні координати фону по горизонталі і по вертикалі.

Результат:

5. CSS| атрибути і значення, що визначають властивості списків

Атрибути і значення

• Селектор * – визначає всі елементи документа. В даному випадку встановлений шрифт.

• padding:0| – відміняє внутрішні поля.

• margin:0| auto| – визначає центрування блоку.

• list-style:none| – визначає відсутність маркерів списку.

• margin:0| – відміняє зовнішні поля блоку

• display:inline| – визначає горизонтальне положення об'єктів.

• border-left|: – визначає властивості лівої межі.

• padding-top|: – визначає розмір верхнього внутрішнього поля.

• text-decoration:none| – відміняє підкреслення тексту.

• float:left| – визначає обтікання зліва (докладніше в одному з наступних уроків).

• a:link|, a:active|, a:visited|   замінені селектором а, тобто всі три псевдоелементи мають однакові властивості.

Ширина блоку підрахована так: 762 = 125 * 6 + 2 * 6, де 125 * 6 > довжина 6-ти посилань, 2 * 6 > загальна ширина атрибуту border-left|.

6, Визначуваний CSS| маркер списку у вигляді зображення

CSS| списки, у яких замість маркерів, – зображення, можна створювати так:

CSS|: Властивості списків

• list-style| — визначає властивості маркера або номера позиції списку:

• list-style|: list-style-image| | list-style-position| | list-style-type|

• list-style-image| — замість маркера елементу списку відображається малюнок:

• list-style-image|: url|(xxx|.jpg)

• list-style-position| — визначає позицію маркера:

• list-style-position|: outside| | inside|   >   значення outside| (за умовчанням) відображає маркер елементу списку на деякій відстані від рядка; inside| – відображає маркер елементу списку як перший символ рядка.

• list-style-type| — визначає тип маркера або номер позиції списку:

• list-style-type|: disc| | circle| | square| | decimal| | lower-roman| | upper-roman| | lower-alpha| | upper-alpha| | none|

• list-style-type|: disc|   >   відображає закрашений кружок (значення за умовчанням);

• list-style-type|: circle|   >   коло;

• list-style-type|: square|   >   закрашений квадрат;

• list-style-type|: decimal|   >   маркерами є арабські цифри;

• list-style-type|: lower-roman|   >   маленькі римські цифри;

• list-style-type|: upper-roman|   >   великі римські цифри;

• list-style-type|: lower-alpha|   >   маленькі латинські букви;

• list-style-type|: upper-alpha|   >   великі латинські букви;

• list-style-type|: none|   >   маркер відсутній.

6. CSS атрибути, що визначають прозоре зображення

7.1. CSS| дає можливість регулювати прозорість зображення:

Результат:

Атрибути і значення

• opacity:0.25 – визначає прозорість зображення. Значення: від 0 до 1.

• filter:alpha|(opacity=25|) – параметр для Internet| Explorer|. Значення: від 0 до 100.

• hspace="|" – визначає додаткові відступи від зображення по горизонталі.

• alt="|" – визначає альтернативний текст. Потрібно прописувати навіть порожній атрибут.

7.2. Визначаємо CSS| прозорість зображення

Розглянемо наступний код:

Проведіть покажчиком миші по картинках внизу:

7.3. CSS| розмір зображення, фон і рамка зображення.

Розглянемо наступний приклад:

Результат:

Позначайте реальний розмір зображення, щоб не спотворювати початкову якість.

Опис значень атрибутів

• width| – ширина картинки.

• height| – висота картинки.

• background| – фон картинки.

• padding| – поля картинки.

• border| – рамка картинки.

8. Обтікання елементів web-сторінки в CSS|

CSS| атрибут float| визначає обтікання одних елементів іншими.

Приклад CSS| обтікання з параметром float:left|:

Як результат обтікання зображень, ми маємо галерею:

1. Оформити звіт: тема, мета, виконані приклади (код+скріншот), скріншоти сторінок сайту з внесеними змінами.

Висновок: я за допомогою таблиці стилів навчився додавати на веб-сторінку фонове зображення та визначати прозорість, змінювати маркер списків та створювати горизонтальне меню, визначати розмір, рамку, прозорість та обтікання для зображень.

7