Як стилювати посилання в CSS

Програмування

Стилізація посилань

Посилання можуть бути стилізовані з будь-якого властивості CSS, такі як color, font-family, font-size, і padding. Ось простий приклад:

a { color: hotpink; }

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

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

  • a:link: непосилаване посилання без натискання
  • a:visited: відвідане, натиснуте посилання
  • a:hover: посилання, коли миша користувача знаходиться над ним
  • a:active: посилання при натисканні

Властивість відповідає за створення URL - адреси та може бути змінено з допомогою ряду таблиць стилів властивостей, хоча він має кілька за замовчуванням:

  1. Підкресли
  2. Синій колір

Ви можете змінити їх, додавши зміни властивостей colorі text-decoration.

 color: black; text-decoration: none;

Ви також можете стилізувати посилання на основі взаємодії, використовуючи ці властивості, також відомі як стани посилань:

  • a: link - звичайне, не відвідуване посилання
  • a: відвідував - посилання, яке відвідував користувач
  • a: hover - посилання, коли користувач наводить на нього курсор миші
  • a: активний - посилання в момент натискання

Ось декілька зразків CSS з використанням 4 станів:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Зверніть увагу, що існують деякі правила впорядкування, коли ви встановлюєте стиль для станів посилань.

  • a:hoverПОВИНЕН прийти після a:linkіa:visited

a:active ПОВИНЕН прийти після a:hover

a: посилання - звичайне, не відвідуване посилання a: відвідав - посилання, яке користувач відвідав: hover - посилання, коли користувач наводить на нього курсор a: активне - посилання в той момент, коли його натискають

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

Детальніше про стиль у CSS:

  • Як оформити HTML-тег безпосередньо в CSS
  • Як стилізувати списки за допомогою CSS
  • Як стилізувати кнопки за допомогою CSS