CSS Посилання
За допомогою CSS посилання можні стилізувати різними способами.
Текстове посилання Текстове посилання Кнопкове посилання Кнопкове посиланняСтилізація посилань
Посилання можуть бути оформлені за допомогою будь-якої CSS-властивості (наприклад, color, font-family, background і т.д.).
Крім того, посилання можуть бути оформлені по-різному в залежності від того, в якому стані вони знаходяться.
Чотири стани посилань:
a:link- звичайне, не відвідуване посиланняa:visited- посилання, яке вже відвідав користувачa:hover- посилання, коли користувач наводить на нього курсор мишіa:active- посилання в той момент, коли воно натиснуте (активне)
Приклад
/* невідвідуване посилання */
a:link {
color: red;
}
/* відвідуване посилання */
a:visited {
color: green;
}
/* посилання при наведенні миші */
a:hover {
color: hotpink;
}
/* активне посилання */
a:active {
color: blue;
}
Спробуйте самі »
При налаштуванні стилю для кількох станів посилань існують деякі правила порядку:
- a:hover ПОВИНЕН слідувати після a:link та a:visited
- a:active ПОВИНЕН слідувати після a:hover
Text Decoration - Оформлення тексту
Властивість text-decoration в основному використовується для видалення підкреслень із посилань:
Приклад
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Спробуйте самі »
Background Color - Колір фону
Властивість background-color може бути використано для визначення кольору фону для посилань:
Приклад
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Спробуйте самі »
Кнопки-посилання
Цей приклад демонструє більш складний приклад, де об’єднуються кілька властивостей CSS для відображення посилань у вигляді блоків / кнопок:
Приклад
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Спробуйте самі »
Більше прикладів
Приклад
Цей приклад демонструє, як додати інші стилі до гіперпосилань:
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}
Спробуйте самі »
Приклад
Ще один приклад того, як створювати поля / кнопки посилань:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
Спробуйте самі »
Приклад
Цей приклад демонструє різні типи курсорів (може бути корисно для посилань):
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>
Спробуйте самі »
