Тема: Оформлення списків та посилань

посилань.

з квадратними маркерами
Фундаментальним питанням розгляду при створенні оформлення

списку є форма маркера або спосіб нумерації, який бажано використовувати. Можна також взагалі не використовувати маркери і числа. Існує безліч різних можливостей, що задаються за допомогою властивості list-style-type.
Наприклад, щоб задати для всіх невпорядкованих списків на сайті квадратні маркери, використовуйте наступний код CSS:

ul li { list-style-type: square; }
який створює щось подібне:

додавання спеціального зображення списку. Уявімо, що є список стрічок RSS

і необхідно змінити маркер на стандартну помаранчеву іконку RSS. Ми задаємо для списку клас “rss”, щоб виділити його з інших списків:

 
• News
• Sport
• Weather
• Business
• Entertainment
• Funny News

поле і заповнення.
Потім ми додаємо просто фонове зображення для

кожного пункту списку, деяке заповнення зліва, щоб змістити текст, дозволяючи вивести зображення, і якесь заповнення знизу, щоб розтягнути простір між пунктами списку:

Спеціальні маркери, що використовують зображення

.rss { margin: 0; padding: 0; list-style-type: none; }
.rss li { background: #fff url("icon-rssfeed.gif") 0 3px no-repeat; padding: 0 0 5px 15px; }

списку

використання полів і заповнення може надати списку більш професійний та

бездоганний вигляд, але ви повинні знати, що робите, і пам’ятати також, що ситуація може відрізнятися для різних типів списків.
Розглянемо невпорядковані списки.

потрібно, щоб пункти неупорядкованого списку перебували в тій же точці

вирівнювання ліворуч, що й інший контент, знадобиться задати кілька стилів для управління відступом відповідно до вимог. Різні браузери вимагають різних настроювань – деяким потрібне видалення полів, для інших потрібно видалити заповнення. Тому, щоб задовольнити всі браузери, обнуляємо обидва значення:
ul { margin: 0; padding: 0; } Це може створювати не той результат, який очікується, тому що текст буде притиснутий вліво, а маркери будуть розташовуватися за межами тексту :

пунктів списку, щоб все лежало на одній прямій:
Поля і заповнення

списків

ul { margin-left: 0; padding-left: 0; } ul li { margin-left: 1em; }

щоб вони вирівнювалися праворуч до пункту 10
Поля і заповнення

списків

Вигляд списку після вставки list-style-type: decimal-leading-zero:

ul, ol { margin-left: 0; padding-left:

0; } li { margin-left: 2em; }
Потрібно як мінімум 2em лівого поля, щоб розмістити як впорядковані, так і невпорядковані списки.

великої уваги, за винятком завдання стилю dt (зазвичай жирний текст)

та управління відступом визначень:
dt {
font-weight: bold;3
}
dd { margin-left: 2em; }
Це задає чітке і просте оформлення списків визначень:

ключової інформації, щоб показати ставлення між вкладеним списком і списком,

що містить його. Безсумнівно, найбільш поширеним способом для цього є використання відступів для пунктів вкладеного списку – це, фактично, настройка за замовчуванням в різних браузерах. Розглянемо наступний код CSS:

Поля і заповнення списків

ul, ol { margin-left: 0; padding-left: 0; } i { margin-left: 2em; }

списком, є створення горизонтального списку – тобто, висновок пунктів списку

поруч один з одним, а не один під іншим. Це звичайний прийом при створенні навігації сайту. Давайте скористаємося прикладом зі статті про навігаційні меню.


Давайте перетворимо його в горизонтальний список

Поля і заповнення списків

три речі:
Видалити margin і padding з
Поставити для пунктів списку

display: inline;
Поставити для пунктів списку деякий пробіл праворуч, щоб уникнути їх злипання.
Код має вигляд:

#mainmenu { margin: 0; padding: 0; } #mainmenu li { display: inline; padding: 0 1em 0 0; }

– стан посилання за замовчуванням, коли воно не було раніше

активоване або відвідане.
Відвідане (visited) – cтан посилання, яке користувач вже відвідав.
Фокус (focus) – застосовується, коли посилання має фокус – наприклад, курсор клавіатури користувача перебуває на посиланні.
Примітка: Браузер IE не підтримує в даний час стан фокусу, і використовує просто стан active замість focus.
Під покажчиком (hover) – застосовується, коли користувач “утримує” над посиланням покажчик, такий як покажчик миші, але ще не клацнув по ньому.
Активне (active) – застосовується, коли користувач активує посилання – буквально в той час, коли робить по ньому клацання. У деяких браузерах цей стиль застосовується також, коли посилання відкрите в іншому вікні або вкладці.

очікують, що посилання відрізняються від решти тексту, який не є

посиланням
Користувачі очікують, що посилання реагують, коли вони наводять на них курсор або фокус клавіатури
Користувачі очікують, що посилання змінюються після того, як вони відвідали посилання
Користувачі люблять узгодженість в оформленні посилань однаковими функціями, щоб знати, де треба клацнути
Користувачі очікують, що підкреслений текст буде посиланням – тому не використовуйте підкреслення для чогось іншого
Ці очікування транслюються в кілька простих правил кодування:
1. Задавайте оформлення для всіх станів посилань
2. Використовуйте підкреслення тільки для посилань

оформляють за допомогою їх “псевдо класів” – :link, :visited, :focus,

:hover, :active – які додають до селектора елемента посилання, a. Тому початковий CSS повинен виглядати наступним чином:
a {} a:link{} a:visited{} a:focus{} a:hover{} a:active{}

стан фокусу клавіатури посилань має рамку, як показано на малюнку:
Поля

і заповнення списків

a {

text-decoration: underline; }

Рамка майже те ж саме, що і кордон, але вона

не потребує простору і не викликає при появі зміни потоку сторінки (зверніть увагу, що це не підтримується в браузері IE7 і більш ранніх версіях). Найлегше керувати рамкою за допомогою скороченої властивості:

a:focus{ outline: thick solid #000; }

інформації про свої посилання. Наприклад, деякі сайти використовують стрілку для

вказівки, що посилання вказує на зовнішній сайт, або використовують символ “галочки”, щоб показати, що посилання було відвідано.

external link

Поля і заповнення списків

цього класу – не забуваючи додати заповнення для розміщення зображення:

a.external

{
background: #fff url("icon-external.gif") center right no-repeat;
padding-right: 30px;
}

Цей приклад буде застосовувати іконку для всіх примірників відвіданих посилань у всіх станах. Якщо потрібно обмежити іконки тільки невідвідуваними зовнішніми посиланнями, можна об’єднати класи і псевдо-класи станів посилань в селекторі:

a.external:link{
background: #fff url("icon-external.gif") center right no-repeat;
padding-right: 30px;
}

римські цифри для впорядкованого списку?
Що таке спрайт зображення і

навіщо він використовується?
Чому важливий колірний контраст, і як перевірити, що посилання використовують відповідні кольори?
Що таке правильний порядок завдання оформлення різних станів посилань?