filter cancel-circle open in new tab
Режим слайдов

HTML5

Ссылки, списки, меню

Стажировка HTML5

Дмитрий Мещеряков

Псевдоклассы для стилизации ссылок

a:link - определяет стиль для обычной непосещенной ссылки.

a:visited - определяет стиль для посещенной ссылки.

a:hover - определяет стиль для ссылки при наведении на нее мышью.

a:active - определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).
a {
    color: blue;
    text-decoration: none;
}
a:visited {
    color: green;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active{
    color: magenta;
    text-decoration: underline;
}
Link

Ссылка или кнопка?

Часто в макетах интерактивные элементы (ссылки и кнопки) изображаются в одном стиле, практически одинаково (по крайней мере, редко когда дизайнер оставляет подчеркивание у ссылки).

Из-за этого многие разработчики некорректно используют теги <a> и <button> для разметки таких элементов страницы.

Существует простое правило определения, когда элемент является ссылкой, а когда кнопкой:

Если клик по элементу влечет за собой переход на другой ресурс (страницу, часть страницы, файл), то это ссылка, иначе - кнопка.

Мини-викторина

1. Наверх
1. Наверх
2. Меню
2. Меню
3. Забронировать
3. Забронировать

Правильные ответы:

  • Ссылка, так как клик по ней осуществляет переход наверх страницы (якорь).
  • Кнопка, так как нет перехода на другую страницу (просто действие - показ меню).
  • Однозначного ответа нет. В зависимости от структуры сайта может быть как ссылкой (бронирование происходит на отдельной странице), так и кнопкой (если по нажатию на нее появляется модальное окно).

Списки

В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений.

Виды списков в HTML:

  • ul - неупорядоченный (маркированный) список (порядок перечисляемых объектов не важен);
  • ol - упорядоченный список (важен порядок объектов или действий);
  • dl - список определений.

Неупорядоченный список

<ul class="list">
    <li class="list__item">Элемент списка 1</Li>
    <li class="list__item">Элемент списка 2</Li>
    <li class="list__item">Элемент списка 3</Li>
</ul>
  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3

Упорядоченный список

<ol class="list">
    <li class="list__item">Действие 1</Li>
    <li class="list__item">Действие 2</Li>
    <li class="list__item">Действие 3</Li>
</ol>
  1. Действие 1
  2. Действие 2
  3. Действие 3

Списки

Список определений

<dl>
    <dt>Термин 1</dt>
    <dd>Определение 1</dd>

    <dt>Термин 2</dt>
    <dd>Определение 2</dd>

    <dt>Термин 3</dt>
    <dd>Определение 3</dd>
</dl>
Термин 1
Определение 1
Термин 2
Определение 2
Термин 3
Определение 3

Стили маркера списка

Свойство list-style-type

list-style-type: disc;
  • Элемент списка
list-style-type: square;
  • Элемент списка
list-style-type: armenian;
  1. Элемент списка
list-style-type: upper-roman;
  1. Элемент списка
list-style-type: none;
  1. Элемент списка

Маркер списка в виде изображения

.list {
    list-style-image: url('images/img.png')
}
  • Элемент 1
  • Элемент 2
  • Элемент 3

Положение маркера списка

.list {
    list-style-position: inside;
}
  • Очень-очень длиииииииииииииииииииинное название элемента списка
  • Элемент 2
.list {
    list-style-position: outside;
}
  • Очень-очень длиииииииииииииииииииинное название элемента списка
  • Элемент 2

Стили маркера списка

Маркер списка псевдоэлементом

<ul class=”list”>
    <li class=”list__item”>Элемент 1</li>
    <li class=”list__item”>Элемент 2</li>
</ul>
.list {
    list-style: none;
}

.list__item::before {
    content: '$';
    vertical-align: middle;
    color: blue;
    padding-right: .5rem;
}
  • Элемент 1
  • Элемент 2

Кастомный номер с помощью counter и ::before

<ul class=”list”>
    <li class=”list__item”>Элемент 1</li>
    <li class=”list__item”>Элемент 2</li>
</ul>
.list {
    counter-reset: list;
}
.list__item::before {
    counter-increment: list;
    content: counter(list) ". ";
    background: #f00;
    color: #fff;
    margin-right: 0.5em;
    padding: 0.2em;
}
  • Элемент 1
  • Элемент 2

Свойство counter-reset инициирует счетчик и устанавливает идентификатор (в нашем случае переменная li), в котором будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика (просто указание переменной означает, что счетчик будет начинаться с 1).

Свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset (просто указание переменной означает, что к счетчику будет прибавляться 1).

При помощи псевдоэлемента ::before и его свойства content значение счетчика выводится на экран и стилизуется.

Пример стилизации списка

Задача. Стилизовать список в следующем виде:

  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4

Решение 1. Псевдокласс :not

.list {
    list-style-type: none;
}
.list__item {
    display: inline-block;
    padding: 0.2em 0.5em;
}
.list__item:not(:last-child) {
    border-right: 1px solid #000;
}

Решение 2. Селектор +

.list {
    list-style-type: none;
}
.list__item {
    display: inline-block;
    padding: 0.2em 0.5em;
}
.list__item + .list__item {
    border-left: 1px solid #000;
}

Задание

Используя псевдоклассы, сверстайте следующий список:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. Item 7
  8. Item 8