EasyCode365EasyCode365

Створення посилань і навігації

Посилання допомагають людям переміщатися сайтом.

Меню навігації - це група посилань, яка веде на головні сторінки, наприклад Home, About, Blog або Contact. Зрозумілі стилі посилань і проста навігація роблять сайт легшим для розуміння та використання.

У цьому уроці ти навчишся стилізувати стани посилань і створювати базові вертикальні та горизонтальні меню навігації.

Що таке посилання в HTML

В HTML посилання створюється тегом <a>.

Атрибут href говорить браузеру, куди має вести посилання.

Лише читання
<a href="https://www.easycode365.com/" target="_blank">Відвідати Example</a>

Текст між відкривальним і закривальним тегами - це клікабельний текст, який бачать користувачі.

Базове стилізування посилань у CSS

Браузери стилізують посилання автоматично.

За замовчуванням посилання зазвичай сині й підкреслені. Після того як користувач відвідає посилання, браузер може показувати його іншим кольором.

CSS дозволяє змінити стандартний стиль посилання:

Можна редагувати
<p>Відвідай <a href="https://www.easycode365.com/" target="_blank">сторінку практики CSS</a>.</p>

<style>
  a {
    color: blue;
    text-decoration: underline;
  }
</style>

Також можна стилізувати лише конкретні посилання за допомогою класу:

Можна редагувати
<p>
  Прочитай
  <a href="https://www.easycode365.com/" target="_blank" class="text-link"
    >CSS-гід для початківців</a
  >.
</p>

<style>
  .text-link {
    color: #2563eb;
    font-weight: bold;
  }
</style>

Стани посилань

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

CSS використовує псевдокласи, щоб стилізувати ці стани:

  • :link: посилання, яке користувач ще не відвідував
  • :visited: посилання, яке користувач уже відкривав раніше
  • :hover: посилання, коли курсор миші знаходиться над ним
  • :active: посилання в момент натискання
  • :focus-visible: посилання, вибране з клавіатури, зазвичай клавішею Tab

Стан фокуса з клавіатури важливий для доступності. Деякі користувачі переглядають сайти без миші, тому їм потрібен чіткий візуальний стиль фокуса.

Коли ти стилізуєш :link, :visited, :hover і :active, часто використовують такий порядок:

Лише читання

Багато розробників запам'ятовують цей порядок як LoVe HAte: link, visited, hover, active.

Розміщуй :focus-visible поруч зі стилями hover, бо обидва стани показують, що користувач зараз націлений на посилання.

Поширені властивості для посилань

Посилання - це текст, але вони також можуть поводитися як невеликі коробки.

Корисні властивості:

  • color: змінює колір тексту
  • text-decoration: керує підкресленням
  • font-weight: робить посилання легшим або жирнішим
  • padding: додає клікабельний простір усередині посилання
  • background-color: додає колір позаду посилання
  • border-radius: заокруглює кути, коли посилання має фон

Будь обережним із text-decoration: none;. Якщо прибрати підкреслення, переконайся, що посилання все одно відрізняється від звичайного тексту.

Padding найкраще працює, коли посилання використовує display: block або display: inline-block, як ти побачиш у прикладах навігації нижче.

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

Цей приклад стилізує посилання у звичайному стані, hover, active і фокусі з клавіатури.

Можна редагувати
<p>
  Прочитай наш
  <a href="https://www.easycode365.com/" target="_blank" class="text-link"
    >CSS-гід для початківців</a
  >.
</p>

<style>
  .text-link:link,
  .text-link:visited {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
  }

  .text-link:hover {
    color: #ea580c;
    text-decoration: underline;
  }

  .text-link:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
  }

  .text-link:active {
    color: #dc2626;
  }
</style>

Спробуй навести мишу на посилання. Ти маєш побачити стиль hover.

Якщо користуєшся клавіатурою, натискай Tab, доки посилання не отримає фокус. Ти маєш побачити контур фокуса.

Що таке меню навігації

Меню навігації - це група посилань.

Розробники часто створюють навігацію за допомогою елемента <nav> і списку:

Лише читання
<nav>
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Головна</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Про нас</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Контакти</a></li>
  </ul>
</nav>

Елемент <nav> говорить браузеру, пошуковим системам і допоміжним технологіям, що ця група посилань призначена для навігації.

Вертикальне меню навігації

Вертикальне меню складає посилання згори вниз.

Це добре працює для сайдбарів або простих меню курсу.

Можна редагувати
<nav class="vertical-nav" aria-label="Бічна навігація">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Головна</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Уроки</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Контакти</a></li>
  </ul>
</nav>

<style>
  .vertical-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;
    font-family: Arial, sans-serif;
  }

  .vertical-nav a {
    display: block;
    padding: 10px 12px;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #d1d5db;
  }

  .vertical-nav a:hover,
  .vertical-nav a:focus-visible {
    background-color: #dbeafe;
    color: #1d4ed8;
  }
</style>

Важлива частина - display: block;.

Вона робить клікабельною всю область посилання, а не лише літери.

Горизонтальне меню навігації

Горизонтальне меню розміщує посилання поруч.

Це часто використовують біля верхньої частини сайту.

Можна редагувати
<nav class="horizontal-nav" aria-label="Головна навігація">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Головна</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Уроки</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Контакти</a></li>
  </ul>
</nav>

<style>
  .horizontal-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    font-family: Arial, sans-serif;
  }

  .horizontal-nav a {
    display: inline-block;
    padding: 10px 14px;
    color: white;
    background-color: #1f2937;
    text-decoration: none;
    border-radius: 6px;
  }

  .horizontal-nav a:hover,
  .horizontal-nav a:focus-visible {
    background-color: #2563eb;
  }
</style>

Тут display: flex; розміщує елементи списку в ряд.

Посилання використовують padding і колір фону, тому відчуваються як зрозумілі клікабельні кнопки.

Стилізація навігаційних посилань як кнопок

Можна зробити посилання схожим на кнопку за допомогою кількох CSS-властивостей.

Можна редагувати
<a href="https://www.easycode365.com/" target="_blank" class="button-link">Почати урок</a>

<style>
  .button-link {
    display: inline-block;
    padding: 10px 18px;
    background-color: #16a34a;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  .button-link:hover,
  .button-link:focus-visible {
    background-color: #15803d;
  }
</style>

Використовуй display: inline-block;, коли хочеш, щоб padding, ширина, висота або колір фону відчувалися більше як кнопка.

Типові помилки початківців

  • Прибрати підкреслення без іншої візуальної підказки: якщо посилання виглядає як звичайний текст, користувачі можуть не зрозуміти, що воно клікабельне.
  • Забути стилі фокуса з клавіатури: hover допомагає користувачам із мишею, але користувачам клавіатури теж потрібен видимий стан фокуса.
  • Зробити клікабельні області занадто малими: додавай padding і використовуй display: block або inline-block, коли посилання мають бути легшими для натискання.
  • Забути href: тег <a> без href не є справжнім навігаційним посиланням.
  • Додавати подвійні рамки у вертикальних меню: якщо кожен елемент має повну рамку, рамки можуть накладатися і виглядати занадто товстими. Використовуй лише border-bottom, коли потрібні прості розділювачі.

Міні завдання

Подивись на це CSS-правило:

Лише читання

Яка дія користувача робить фон посилання жовтим?

Перевір відповіді до тесту, коли будеш готовий.

Короткий тест із відповідями

  1. Яка CSS-властивість прибирає стандартне підкреслення посилання?
  2. Який псевдоклас стилізує посилання, коли курсор миші над ним?
  3. Який HTML-елемент використовується для позначення групи навігаційних посилань?

Відповіді:

  1. text-decoration: none;
  2. :hover
  3. <nav>

Відповідь до міні завдання: фон стає жовтим, коли користувач наводить курсор миші на посилання.

Невеликий виклик

Створи просте горизонтальне меню навігації.

Твої цілі:

  • Використай елемент <nav>.
  • Додай <ul> із трьома посиланнями.
  • Прибери маркери списку.
  • Розмісти посилання поруч.
  • Додай padding і колір фону до кожного посилання.
  • Зміни колір фону на :hover і :focus-visible.

Почни з цього редагованого коду:

Можна редагувати
<nav class="challenge-nav" aria-label="Практична навігація">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Головна</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Уроки</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Контакти</a></li>
  </ul>
</nav>

<style>
  .challenge-nav ul {
    /* Прибери маркери */

    /* Прибери стандартні відступи */

    /* Розмісти елементи поруч */

    font-family: Arial, sans-serif;
  }

  .challenge-nav a {
    /* Зроби так, щоб padding і background працювали як коробка */

    /* Додай padding */

    /* Додай колір тексту */

    /* Додай колір фону */

    /* Прибери підкреслення */
  }

  .challenge-nav a:hover,
  .challenge-nav a:focus-visible {
    /* Зміни колір фону */
  }
</style>

Підсумок

  • Посилання створюються тегом <a>.
  • Атрибут href говорить браузеру, куди веде посилання.
  • Стани посилання включають :link, :visited, :hover, :active і :focus-visible.
  • Використовуй text-decoration, щоб керувати підкресленням.
  • Меню навігації - це групи посилань, зазвичай усередині елемента <nav>.
  • Вертикальна навігація складає посилання згори вниз.
  • Горизонтальна навігація розміщує посилання поруч.
  • Padding робить навігаційні посилання легшими для натискання.