Ссылки, списки и меню
Стажировка HTML5
Ирина Панова
Псевдоклассы для стилизации ссылок
a:link - определяет стиль для обычной непосещенной ссылки.
a:visited - определяет стиль для посещенной ссылки.
a:hover - определяет стиль для ссылки при наведении на нее мышью.
a:active - определяет стиль для активной ссылки. Активной ссылка становится при нажатии
на нее.
Форматировать ссылки нужно в указанной последовательности, в противном случае
состояние стилей перестанет работать (в силу механизма каскадности)!
Псевдоклассы для стилизации ссылок
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;
}
Увеличение размера на :hover
a {
color: blue;
font-size: 1.5rem;
padding: 0.5rem;
text-decoration: none;
}
a:hover {
font-size: 2rem;
}
.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
<ul class=”list--unord”>
<li class=”list--unord__item”>Ссылки</li>
<li class=”list--unord__item”>Списки</li>
<li class=”list--unord__item”>Меню</li>
</ul>
Маркированный список
<ol class=”list--ord”>
<li class=”list--ord__item”>Ссылки</li>
<li class=”list--ord__item”>Списки</li>
<li class=”list--ord__item”>Меню</li>
</ol>
Нумерованный список
hiragana
katakana
lower-greek
Стили маркера списка list-style-type
Убрать маркер списка: list-style-type: none;
disc
armenian
circle
Маркер списка в виде изображения,
положение маркера списка
.list {
list-style-image: url("images/img.png");
list-style-position: inside; /* По умолчанию - outside */
}
.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>
Маркер списка псевдоэлементом
Кастомный номер с помощью 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>
Используя :nth-of-type и :last-child, создайте список следующего вида:
Задание
Стилизация с помощью псевдокласса :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;
}
Меню
Основное меню (чаще всего в 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>
Полезные ссылки
Типы маркера списков
http://html5book.ru/css-spiski/

Ссылки, списки и меню (HTML5 тема 06 - ссылки, списки и меню)

  • 1.
    Ссылки, списки именю Стажировка HTML5 Ирина Панова
  • 2.
    Псевдоклассы для стилизацииссылок a:link - определяет стиль для обычной непосещенной ссылки. a:visited - определяет стиль для посещенной ссылки. a:hover - определяет стиль для ссылки при наведении на нее мышью. a:active - определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности)!
  • 3.
    Псевдоклассы для стилизацииссылок 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; }
  • 4.
    Увеличение размера на:hover a { color: blue; font-size: 1.5rem; padding: 0.5rem; text-decoration: none; } a:hover { font-size: 2rem; }
  • 5.
    .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
  • 6.
    <ul class=”list--unord”> <li class=”list--unord__item”>Ссылки</li> <liclass=”list--unord__item”>Списки</li> <li class=”list--unord__item”>Меню</li> </ul> Маркированный список
  • 7.
    <ol class=”list--ord”> <li class=”list--ord__item”>Ссылки</li> <liclass=”list--ord__item”>Списки</li> <li class=”list--ord__item”>Меню</li> </ol> Нумерованный список
  • 8.
    hiragana katakana lower-greek Стили маркера спискаlist-style-type Убрать маркер списка: list-style-type: none; disc armenian circle
  • 9.
    Маркер списка ввиде изображения, положение маркера списка .list { list-style-image: url("images/img.png"); list-style-position: inside; /* По умолчанию - outside */ }
  • 10.
    .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> Маркер списка псевдоэлементом
  • 11.
    Кастомный номер спомощью 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>
  • 12.
    Используя :nth-of-type и:last-child, создайте список следующего вида: Задание
  • 13.
    Стилизация с помощьюпсевдокласса :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; }
  • 14.
    Меню Основное меню (чащевсего в 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>
  • 15.
    Полезные ссылки Типы маркерасписков http://html5book.ru/css-spiski/