Лабораторна робота №11
Хід роботи:
При виконанні лабораторної роботи, для пошуку необхідних тегів та параметрів рекомендовано користуватись сайтом http://htmlbook.ru/.
- У Вашій робочій папці створіть папку Списки. В цій папці створіть html-документ prizvyshe_spysky.html. В ньому створіть три маркованих та три нумерованих списки (кожен список повинен містити не менше п’яти пунктів). Для того, щоб для різних списків можна було застосовувати різні стилі, при створенні списків задайте їм різні ідентифікатори (ID селектори). Перевірте результат у браузері.
- В папці Списки створіть файл style.css. В файлі prizvyshe_spysky.html підключіть таблиці стилів style.css.
- Використовуючи властивість list-style-type задайте для кожного створеного списку різні стилі відображення.
- Створіть ще один список. Використовуючи властивість list-style-image задайте у якості маркера довільний малюнок.
- Вставте нижче створених списків блок з шириною не більше 150px. Додайте в цей блок два довільних списки. Перевірте як на ці списки впливає використання властивості list-style-position.
- Поясніть чим відрізняється властивість list-style від властивостей, розглянутих вище.
- Іноді для оформлення списків необхідно використовувати нестандартну нумерацію, наприклад: А.1, А.2, А.3 або 1.1, 1.2, 1.3. Розглянемо яким чином це можна зробити. Створіть новий файл під назвою prizvyshe_spysky_1.html та підключіть в ньому таблицю стилів style.css. В створений файл додайте довільний нумерований список з п’яти пунктів.
- В файл style.css додайте наступне:
<![CDATA[
ol {
list-style-type: none;
counter-reset: item;
}
li:before {
content: 'A.' counter(item) ' ';
counter-increment: item;
}
]]>
Перевірте зміни в браузері. Поясніть чому відбулися такі зміни.
- Додайте в файл prizvyshe_spysky_1.html ще один нумерований список. Перевірте як він відображається в браузері.
- Внесіть необхідні зміни для того, щоб новий список мав стандартний маркер нумерованого списку.
Контрольні запитання:
- Для чого використовуються ідентифікатори?
- Яке призначення властивості list-style-type?
- Для якого типу списку використовують властивість list-style-image?
- Поясніть відмінність між значеннями inside та outside атрибуту list-style-position.
- Для чого використовується псевдоелемент :before?