Як використовувати CSS для стилювання гіперпосилань на веб-сторінках

Квітня 26, 2024

Якщо ви знайомі з HTML, ви знаєте, що можете керувати кольором тексту та гіперпосиланнями на веб-сторінці. Але з каскадними таблицями стилів ви можете зробити набагато більше. Деякі теги, такі як тег гіперпосилання з якоря, мають те, що називається псевдокласами, пов'язаними з різними станами тегу. Наприклад, тег гіперпосилання має чотири стани; посилання, відвідане, наведення та активний.

Коли посилання не використовується (не вибрано), то це посилання псевдоклас або стан. The відвідав стан після використання посилання. The завис стан, коли миша переходить через посилання та активний стан - це коли ви натискаєте на посилання. Магія CSS полягає в тому, що кожен стан посилання контролюється незалежно за допомогою псевдокласів. Таким чином, ви можете встановити різні властивості для кожного стану. Ви можете використовувати будь-яке властивість, пов’язане з тегом прив’язки гіперпосилання в CSS.

У наведеному нижче прикладі ми встановимо стан посилання на червоний, відвідане стан на фіолетове (# 400040), наведення курсора та активні стани на червоне, підкреслене та курсивне.

Примітка--Стрілка

вказує на те, що код прив’язаний до другого рядка і дійсно повинен бути весь на одному рядку.

Як бачите, ми встановили властивість кольору червоним для всіх станів, крім відвідуваного стану, який ми встановили на фіолетовий. Оскільки ми хочемо лише підкреслити гіперпосилання для наближених та активних станів, для двох інших станів ми встановили властивість оформлення тексту жодним. Нарешті, ми встановили стиль шрифту курсивом для наведення курсора та активних станів, що призведе до того, що текст стане курсивом, коли ви переходите або натискаєте на посилання, і ми повернули підкреслення тексту назад, щоб підкреслити. Це лише простий приклад. Ви можете зробити свої стилі настільки ж простими або вишуканими, як хочете. Однак слід пам’ятати кілька речей.

Веб-браузери відрізняються тим, як вони справляються з цим. Зазвичай, якщо ви задаєте властивості певне значення, воно буде успадковане (передане) будь-яким державам, переліченим після нього. У нашому прикладі вище, першим станом, зазначеним у нашому коді, був стан посилання, і ми встановили властивість кольору на червоний. Здебільшого це було б передано іншим трьом штатам, якщо ми не змінимо його з кодом, як це було зроблено для відвідуваної держави. Крім того, якби ми не повернули підкреслення тексту, щоб підкреслити, текст для курсора та активних станів не було б підкреслено, оскільки ми вимкнули його в першому стані. Але ви не можете розраховувати, що всі браузери це роблять. Тому найкраще встановити всі властивості для кожного стану окремо.

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

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

Відео Інструкція: The Internet: How Search Works (Квітня 2024).

Як використовувати CSS для стилю гіперпосилань на веб-сторінках, HTML, псевдокласи, пов'язані з різними станами тегу, псевдоклас, гіперпосилання, кодування гіперпосилань у CSS, псевдоклас CSS, стани CSS, стан тегу, фантазійні посилання на веб-сторінці з CSS, фантазійними посиланнями

Попередня Стаття

Наступна Стаття

Схожі Статті

комп’ютери

Кодування для швидкого перегляду сторінок

Квітня 2024

Незалежно від того, чи кодуєте ви ASP або прямий HTML, ви хочете, щоб ваша сторінка відображалася користувачам якомога швидше. Якщо ваша сторінка відображається повільно, ваші користувачі можуть...

комп’ютери

Ми любимо катамарі

Квітня 2024

Поговоримо про дивну гру, яка майже не відповідає опису! У іграх Катамарі ви катаєте липку кульку. Це воно! Дивно, наскільки це може викликати звикання. Це вже друга гра після катамарі Дамасі. Ти...