Як прибрати підкреслення посилань? CSS властивість text-decoration

Посилання – невід’ємна частина будь-якої веб-сторінки. Вони можуть бути як текстовими, так і у вигляді кнопок. У цій статті будуть розглянуті тільки текстові посилання.

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

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

Створення посилання

Для демонстрації роботи цього методу, необхідно створити посилання. У цьому допоможе стандартний HTML 5.

Щоб створити посилання, потрібно використовувати парний тег «a», який не є блочним. Тому, щоб розміщувати посилання на окремих рядках, необхідно укладати їх в теги параграфа (p). Можна скористатися і альтернативним способом – встановити властивість display: block для кожного посилання.

Приступаємо до створення посилання. Вписуємо кілька тегів в наш HTML документ. Між відкриваючим і закриваючим тегом записуємо назву для нашої посилання, яке буде відображатися на сторінці.

Крім цього, тег «a» має цілий ряд атрибутів. Обов’язковим є атрибут href, без якого не буде здійснюватися перехід по посиланню. У ньому вказується шлях до сторінки або файлу, до якого буде вести наша посилання.

У представленому прикладі не буде здійснюватися перехід з інших посиланнях, тому можна вказати стандартне значення #.

Посилання створено, тепер її потрібно стилізувати. Існує кілька способів прибрати підкреслення посилання в CSS:

  • Атрибут style (розташовується всередині тега).
  • Тег style (розташовується в блоці head).
  • Зовнішнє підключення стилів за допомогою тега link.
  • Для скасування підкреслення посилання в CSS можна використовувати будь-який з цих способів, але найбільш придатним вважається підключення зовнішніх стилів.

    Порада: при стилізації веб-сторінки віддавайте перевагу зовнішніх посиланнях.

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

    У представленому прикладі буде використовуватися зовнішнє підключення посилань. Відкриваємо CSS файл, в якому і будемо змінювати дизайн посилань.

    Крім посилань на цій сторінці нічого немає. Тому будемо використовувати в якості селектора тег «a». При бажанні можете додати класи для кожного посилання, але це необов’язково.

    Записуємо селектор «a», в якому буде прописано властивість text-decoration: none;

    Одне просте властивість text-decoration використовується для того, щоб з допомогою CSS прибрати підкреслення посилання.

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

    Щоб прибрати підкреслення посилання, CSS документі введіть наступний код:

    Щоб спростити код, можна використовувати простий атрибут – style. У прикладі, не представлено повноцінного дизайну всієї сторінки, тому можна використати і цей спосіб.

    Головне — не розписувати такими способами всю HTML сторінку. В такому коді можна дуже легко заплутатися.

    Зміна наведеної посилання в CSS

    Припустимо, ви захотіли зробити так, щоб у звичайному стані посилання підкреслення залишилося, а при наведенні зникло. Щоб прибрати або поставити підкреслення посилання при наведенні, CSS використовується псевдоклас «:hover». Ось приклад:

    Стилі можна застосовувати не тільки до наведеної посиланню, але і до активованої або відвіданого. Для цього потрібно використовувати псевдокласи «:active» і «:visited».