Ссылки, списки и меню (html5 тема 06 - ссылки, списки и меню)
TRANSCRIPT
![Page 1: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/1.jpg)
Ссылки, списки и менюСтажировка HTML5
Ирина Панова
![Page 2: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/2.jpg)
Псевдоклассы для стилизации ссылок
a:link - определяет стиль для обычной непосещенной ссылки.a:visited - определяет стиль для посещенной ссылки.a:hover - определяет стиль для ссылки при наведении на нее мышью.a:active - определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма
каскадности)!
![Page 3: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/3.jpg)
Псевдоклассы для стилизации ссылокa { color: blue; padding: 0.5rem; text-decoration: none;}a:visited { color: green;}a:hover { text-decoration: underline;}a:active{ color: red; text-decoration: underline;}
![Page 4: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/4.jpg)
Увеличение размера на :hover
a { color: blue; font-size: 1.5rem; padding: 0.5rem; text-decoration: none;}a:hover { font-size: 2rem;}
![Page 5: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/5.jpg)
.link { color: blue; font-size: 1.5rem; text-decoration: none;}.link:hover { color: red; text-decoration: underline;}.link__line:hover { color: blue;}
<a href="#" class="link"> <span class="link__line">Link</span></a>
Увеличение изменение цвета подчеркивания на :hover
![Page 6: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/6.jpg)
<ul class=”list--unord”> <li class=”list--unord__item”>Ссылки</li> <li class=”list--unord__item”>Списки</li> <li class=”list--unord__item”>Меню</li></ul>
Маркированный список
![Page 7: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/7.jpg)
<ol class=”list--ord”> <li class=”list--ord__item”>Ссылки</li> <li class=”list--ord__item”>Списки</li> <li class=”list--ord__item”>Меню</li></ol>
Нумерованный список
![Page 8: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/8.jpg)
hiragana
katakana
lower-greek
Стили маркера списка list-style-type
Убрать маркер списка: list-style-type: none;
disc
armenian
circle
![Page 9: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/9.jpg)
Маркер списка в виде изображения,положение маркера списка
.list { list-style-image: url("images/img.png"); list-style-position: inside; /* По умолчанию - outside */}
![Page 10: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/10.jpg)
.list { list-style: none;}
.list__item::before { content: "*"; vertical-align: middle; color: blue; padding-right: .5rem;}
<ul class=”list”> <li class=”list__item”>Ссылки</li> <li class=”list__item”>Списки</li></ul>
Маркер списка псевдоэлементом
![Page 11: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/11.jpg)
Кастомный номер с помощью counter и :before
.list--num { counter-reset: li; }.list--num__item::before { counter-increment: li; content: counter(li) ". "; background: #FF0000; color: #ffffff; margin-right: .5rem; padding: .2rem;}
<ul class=”list--num”> <li class=”list--num__item”>Ссылки</li> <li class=”list--num__item”>Списки</li></ul>
![Page 12: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/12.jpg)
Используя :nth-of-type и :last-child, создайте список следующего вида:
Задание
![Page 13: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/13.jpg)
Стилизация с помощью псевдокласса :notДля псевдокласса :not в скобках указываем селектор или псевдокласc, к которому не будут применены заданные стили.
.list { list-style-type: none; }
.list__item { display: inline-block; padding: .2rem .5rem;}
.list__item:not(:last-child) { border-right: 1px solid black;}
![Page 14: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/14.jpg)
Меню
Основное меню (чаще всего в header):
<nav> <ul> <li><a>...</a></li> <li><a>...</a></li> </ul></nav>
Дополнительное меню, например, для каталога:
<ul class=”catalog-nav”> <li class=”catalog-nav__item”><a>...</a></li> <li class=”catalog-nav__item”><a>...</a></li></ul>
![Page 15: Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)](https://reader033.vdocuments.pub/reader033/viewer/2022061608/58ef6fb21a28ab0e3b8b45dd/html5/thumbnails/15.jpg)
Полезные ссылки
Типы маркера списков
http://html5book.ru/css-spiski/