Урок 13

Стильове оформлення вебсторінки за допомогою стилів CSS. Списки в CSS


Властивості:
Властивість LIST-STYLE-TYPE
Дозволяє визначати вид маркера елементів списку. Це можуть бути цифри, букви, квадратики, кружечки та ін. Нижче наведені основні значення цієї властивості:
  • disk - маркер у вигляді зафарбованого кола;
  • circle - маркер у вигляді незаповнених кіл;
  • square - маркер у вигляді зафарбованого квадрата;
  • decimal - звичайні десяткові числа, наприклад 1,2,3,4,5 і т. д.;
  • upper-roman - великі римські цифри, типу I, II, III, IV, V і т.д. ;
  • lower-roman - маленькі римські цифри типу i, ii, iii, iv, v і т.д.
  • upper-alpha - великі літери A, B, C, D, E і так далі;
  • lower-alpha - малі літери типу a, b, c, d, e і т.д .;
  • none - маркер списку відсутній.
Властивість LIST-STYLE-POSITION
Ця властивість визначає положення маркера. Може приймати два значення:
  • outside - за межами основного блоку елементу списку;
  • inside - в середині основного блоку списку.

Властивість LIST-STYLE-IMAGE
Це напевно найцікавіше властивість в списках. Воно дозволяє поставити замість маркера будь-яке зображення. Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення. У деяких застарілих версіях браузерів, працює некоректно.
ul {list-style-image: url (galka.gif);}
Дивіться приклад
Увага, url (galka.gif) означає що зображення galka.gif лежить в тій же папці, де і css-файл. Якщо у вас зображення не там, відповідно і шлях вказуйте інший!
Скорочена форма LIST-STYLE
Перераховані вище властивості можна записати більш компактно. Для цього існує скорочений варіант list -style;
Такий варіант з трьох рядків:
ul {list-style-type:
square;
list-style-position: inside;
list-style-image: url (galka.gif);
}
Раціонально замінити таким:
ul {list-style: square inside url (galka.gif)}
Властивості вказуються через пробіл і послідовність в такому випадку ролі не грає. Якщо будь-яку властивість не вказати, їй задаватиметься значення за замовчуванням.

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.

Практична частина.
"Використання списків для створення меню вебресурсів"
Виконати розмітку пунктів меню для вебсайту, із використанням списків та каскадних таблиць стилів
 * папка із маркерами
 * папка із практичною частиною
Варіант 1
 * заголовок: колір шрифту білий, тип шрифту Tahoma, колір фону CadetBlue
 * маркер картинка
 * шрифт основного тексту: Candara, розмір 14 pt
 * приклад документа

Варіант 2
 * заголовок: колір шрифту білий, тип шрифту Arial, колір фону ForestGreen
 * маркер картинка
 * шрифт основного тексту: Tahoma, розмір 16 pt
 * приклад документа

Немає коментарів:

Дописати коментар

Підписатися на: Дописи (Atom)