Форма "кульок"
Форма "кульки" у вигляді "жирної" крапки трохи незвична. Звичайно в машинописних документах використовують риску. З іншого боку, у рекламних матеріалах часто в якості "кульки" застосовують квадрат або інший символ типографського набору, а також графічну картинку.
CSS дозволяє керувати формою "кульки" через атрибут list-style-type:
<UL STYLE="list-style-type:square;">
<LI>У вигляді "кульки" використовуємо квадрат
</UL>
<UL STYLE="list-style-type:disk;">
<LI>У вигляді "кульки" використовуємо диск
</UL>
<UL STYLE="list-style-type:circle;">
<LI>У вигляді "кульки" використовуємо коло
</UL>
Дотепер ми говорили лише про невпорядковані списки (UL), але керувати відображенням "кульок" можна й в упорядкованих списках (OL):
<OL STYLE="list-style-type:lower-roman; color:black;">
<LI>...
...
</OL>
<OL STYLE="list-style-type:upper-alpha; color:black;">
<LI>...
...
</OL>
<OL STYLE="list-style-type:lower-alpha; color:black;">
<LI>...
...
</OL>
CSS дозволяє взагалі відмовитися від "кульок". Для цього потрібно вказати значення атрибута list-style-type рівним none.
"Кульки"-картинки
Якщо стандартні форми "кульок" автора сторінки не влаштовують, він може використовувати нестандартні. Для цього йому доведеться "кульку" намалювати самому й у вигляді графічного файлу розмістити на Web-вузлі. У такої "кульки" є URL, що використовується в CSS для звертання до неї.
<UL STYLE="list-style-image:url(bimage.gif);">
<LI>Елемент списку розташований за рисою
</UL>
Картинка може бути і більш цікавішою. Це вже залежить від фантазії автора документа. Наприклад, можна створити картинку-стрелочку:
<UL STYLE="list-style-image:url(barrow.gif);">
<LI>Елемент списку розташований за стрілкою
</UL>
Тут треба зізнатися в маленькому обмані. Якщо ви користувач Internet Explorer, то все, що тут написано — вірно. Фрагмент коду, представлений перед прикладом, є його точною копією. Однак перед користувачами Netscape Navigator прийдеться вибачитися: Netscape Navigator цей атрибут не підтримує. У тексті сторінки присутній JavaScript-код, що імітує застосування атрибута list-style-image у випадку перегляду сторінки браузером від Netscape.
5.1. Позиціонування |
<вверх> |
Цей розділ присвячений розміщенню блокових елементів HTML-розмітки в робочій області браузера з точністю до пікселя. До появи специфікації CSS-P, що ввійшла в специфікацію CSS2, нічого подібного робити на HTML-сторінках було не можна. Деякі найбільш упереджені читачі можуть запитати: "А як щодо елемента розмітки LAYER?". По-перше, LAYER був введений Netscape практично одночасно з появою CSS-P, а по-друге, він підтримується лише браузерами Netscape.
Позиціонування і його програмування на JavaScript - це суцільне "мінне поле" між двома основними браузерами. При перегляді цих сторінок варто усвідомлювати те, що для кожного браузера завантажується своя сторінка опису властивостей позиціонування і програмування цих властивостей. До появи CSS-P єдиним засобом щодо точного позиціонування були таблиці. Вони дозволяли точно розташувати компоненти HTML-сторінки відносно один одного на площині. CSS-P дозволяє точно розмістити елемент розмітки не лише щодо інших компонентів сторінки, але і щодо границь сторінки.
Крім того, CSS-P додає сторінці ще один вимір - елементи розмітки можуть "наїжджати" один на одного.
При цьому можна змінювати порядок "наїзду" - перекладати шари. Щоб у цьому переконатися, досить скористатися посиланням із наведеного приклада.
Але і це ще не все. Шари можна з’являти.
Тепер переходимо до обговорення атрибутів позиціонування.
