Лабораторна робота №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| списки, у яких замість маркерів, – зображення, можна створювати так:

<head|> <style| type="text/css"> ul|.list_img {list-style|: url|(smile1|.jpg) outside|; line-height|: 170%} </style> </head> <body|> <ul| class="list_img"|> <li>Sony</li> <li>Asus</li> <li>Dell</li> <li>Toshiba</li> <li>Acer</li> <li>Lenovo</li> </ul> </body>

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

---

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

• Кашепава М.Я. Современные отечественные и зарубежные координатно-расточные станки обзор.pdf

• Лабораторна робота №13.doc

• Косачев Г.Г. Экономическая оценка сельскохозяйственной техники.pdf

• Кофман Д.М. Проектирование прядильных фабрик по переработке хлопка и химических волокон учеб. пособие для студентов текстил. высш. учеб. заведений.pdf

• Лабораторна робота №13.doc