Урок 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
 * приклад документу



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

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