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

Реклама. Продолжение ниже
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тому, щоб вирівняти маркери ліворуч, тепер можна задати поле для пунктів списку, щоб все лежало на одній прямій:
Впорядковані списки Числові маркери пунктів 1-9 мають додаткове заповнення, щоб вони вирівнювалися праворуч до пункту 10
Код вирівнювання тексту списків:
Тема: Оформлення списків та посилань
При створенні коду CSS необхідно бути уважним при підтримці чіткої ключової інформації, щоб показати ставлення між вкладеним списком і списком, що містить
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
За замовчуванням більшість браузерів задає для всіх посилань підкреслення, а стан фокусу клавіатури посилань має рамку, як показано на малюнку:
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
Тема: Оформлення списків та посилань
1/27
Средняя оценка: 4.9/5 (всего оценок: 2)
Код скопирован в буфер обмена
Скачать (324 Кб)
Реклама. Продолжение ниже
1

Первый слайд презентации: Тема: Оформлення списків та посилань

Изображение слайда
1/1
2

Слайд 2

Питання, що розглядаються: Оформлення списків Оформлення посилань

Изображение слайда
1/1
3

Слайд 3

Цілі і завдання вивчення теми: Company Logo Ознайомитися з оформленням списків та посилань.

Изображение слайда
1/1
4

Слайд 4

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

Изображение слайда
Изображение для работы со слайдом
1/2
5

Слайд 5

Кілька поширених типів списків

Изображение слайда
Изображение для работы со слайдом
1/2
6

Слайд 6

Спеціальні маркери, що використовують зображення Специфікація CSS містить властивість list-style-image для додавання спеціального зображення списку. Уявімо, що є список стрічок RSS і необхідно змінити маркер на стандартну помаранчеву іконку RSS. Ми задаємо для списку клас “rss”, щоб виділити його з інших списків: <ul class="rss">   <li><a href="http://example.com/rss.xml">News</a></li> <li><a href="http://example.com/rss.xml">Sport</a></li> <li><a href="http://example.com/rss.xml">Weather</a></li> <li><a href="http://example.com/rss.xml">Business</a></li> <li><a href="http://example.com/rss.xml">Entertainment</a></li> <li><a href="http://example.com/rss.xml">Funny News</a></li> </ul>

Изображение слайда
1/1
7

Слайд 7

Перш за все, визначаємо для списку відсутність list-style-type і видаляємо поле і заповнення. Потім ми додаємо просто фонове зображення для кожного пункту списку, деяке заповнення зліва, щоб змістити текст, дозволяючи вивести зображення, і якесь заповнення знизу, щоб розтягнути простір між пунктами списку: Спеціальні маркери, що використовують зображення .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; }

Изображение слайда
Изображение для работы со слайдом
1/2
Реклама. Продолжение ниже
8

Слайд 8

Демонстрація вертикально центрованих маркерних зображень на багаторядковому пункті списку

Изображение слайда
Изображение для работы со слайдом
1/2
9

Слайд 9

Company Logo Демонстрація вирівняних по верху маркерних зображень на багаторядковому пункті списку

Изображение слайда
Изображение для работы со слайдом
1/2
10

Слайд 10

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

Изображение слайда
Изображение для работы со слайдом
1/2
11

Слайд 11

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

Изображение слайда
Изображение для работы со слайдом
1/2
12

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

Поля і заповнення списків ul { margin-left: 0; padding-left: 0; } ul li { margin-left: 1em; }

Изображение слайда
1/1
13

Слайд 13: Впорядковані списки Числові маркери пунктів 1-9 мають додаткове заповнення, щоб вони вирівнювалися праворуч до пункту 10

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
14

Слайд 14: Код вирівнювання тексту списків:

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

Изображение слайда
1/1
Реклама. Продолжение ниже
15

Слайд 15

Поля і заповнення списків Списки визначень Зазвичай списки визначень не вимагають великої уваги, за винятком завдання стилю dt (зазвичай жирний текст) та управління відступом визначень: dt { font-weight: bold;3 } dd { margin-left: 2em; } Це задає чітке і просте оформлення списків визначень :

Изображение слайда
Изображение для работы со слайдом
1/2
16

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

Поля і заповнення списків ul, ol { margin-left: 0; padding-left: 0; } i { margin-left: 2em; }

Изображение слайда
1/1
17

Слайд 17

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
18

Слайд 18

Поля і заповнення списків Щоб домогтися цього, необхідно зробити зі списком три речі: Видалити margin і padding з <ul> Поставити для пунктів списку display : inline ; Поставити для пунктів списку деякий пробіл праворуч, щоб уникнути їх злипання. Код має вигляд: #mainmenu { margin: 0; padding: 0; } #mainmenu li { display: inline; padding: 0 1em 0 0; }

Изображение слайда
1/1
19

Слайд 19

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

Изображение слайда
1/1
20

Слайд 20

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

Изображение слайда
1/1
21

Слайд 21

Поля і заповнення списків Стилі посилань повинні розташовуватися так: L ink V isited F ocus H over A ctive Різні стани посилань оформляють за допомогою їх “псевдо класів” – :link, :visited, :focus, :hover, :active – які додають до селектора елемента посилання, a. Тому початковий CSS повинен виглядати наступним чином: a {} a:link{} a:visited{} a:focus{} a:hover{} a:active{}

Изображение слайда
1/1
22

Слайд 22: За замовчуванням більшість браузерів задає для всіх посилань підкреслення, а стан фокусу клавіатури посилань має рамку, як показано на малюнку:

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

Изображение слайда
Изображение для работы со слайдом
1/2
23

Слайд 23

Поля і заповнення списків Підкреслення Підкреслення задається за допомогою властивості text-decoration : a { text-decoration: underline; }

Изображение слайда
1/1
24

Слайд 24

Поля і заповнення списків Створення рамки Створення рамки фокусу управляється властивістю outline. Рамка майже те ж саме, що і кордон, але вона не потребує простору і не викликає при появі зміни потоку сторінки (зверніть увагу, що це не підтримується в браузері IE7 і більш ранніх версіях). Найлегше керувати рамкою за допомогою скороченої властивості: a:focus{ outline: thick solid #000; }

Изображение слайда
Изображение для работы со слайдом
1/2
25

Слайд 25

Іконки на посиланнях Деякі сайти використовують іконки і символи для додавання інформації про свої посилання. Наприклад, деякі сайти використовують стрілку для вказівки, що посилання вказує на зовнішній сайт, або використовують символ “галочки”, щоб показати, що посилання було відвідано. <a href="http://example.com/" class="external">external link</a> Поля і заповнення списків

Изображение слайда
Изображение для работы со слайдом
1/2
26

Слайд 26

Поля і заповнення списків У таблиці стилів задається фонове зображення для цього класу – не забуваючи додати заповнення для розміщення зображення: 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; }

Изображение слайда
1/1
27

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

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

Изображение слайда
1/1
Реклама. Продолжение ниже