Убрать подчеркивание ссылок css: Как убрать подчеркивание у ссылок?

Разное 

Содержание

Как убрать стили у ссылок css

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега «а» (anchor). Современные браузеры по умолчанию отображают подобный элемент с нижним подчеркиванием. Зачастую верстальщики или веб-дизайнеры предпочитают либо изменять этот стиль, либо удалять его вообще.

В некоторых случаях это действительно необходимо. К примеру, в плотном ссылочном блоке, где лишнее оформление будет только перегружать восприятие, и затруднять чтение документа. Однако в некоторых случаях целесообразно сохранять разграничение текста и ссылок. Если дизайн сайта полностью исключает подобное форматирование, то стоит применить любой другой вид выделения таких элементов. Самым распространенным видом разграничения сегодня является цветовой контраст анкоров в тексте. Это эффективно. Единственным небольшим минусом такого варианта станет проблема выделения текста людьми, которые не могут воспринимать различные цвета (дальтонизм). Но это настолько низкий процент пользователей, что им можно пренебречь.

Если все-таки было принято решение убрать подчеркивание ссылок, то тут понадобится некоторые знания структуры формирования интернет страницы, а именно CSS.

Удалить подчеркивание ссылок на всем сайте

Эта небольшая строка удалит полностью на всем сайте подчеркивание всех элементов прописанных при помощи тега «а».

Но что делать, если у вас нет доступа к файлу CSS?

В таком случае целесообразным является применения тега Style в начале документа. Работает так же, как и файл CSS. Для того чтобы применить стили, необходимо в самом начале документа (или HTML страницы) дописать конструкцию, в которой действуют обычные правила CSS стилей.

Эти стили применяются только к определенной странице. В других разделах или документах сайта они действовать не будут.

Удалить подчеркивание ссылок при наведении

Но как быть, если необходимо убрать подчеркивание ссылки при наведении? CSS и в этом случае сможет нам помочь. Код будет выглядеть так:

Именно псевдокласс « :hover » отвечает за декорацию элементов при наведении курсора.

Скомпоновав эти два варианта, мы можем сделать так, что подчеркивание ссылки будет отображаться только при наведении, в противном случае все будет выглядеть как обычный текст:

Применение идентификаторов и классов

Как видно из вышеописанного, изменить стилизацию элемента на сайте или html-документе достаточно легко. Минусами таких вариантов являются невозможность выборочного применения стилей: не ко всему сайту или документу, а к конкретной ссылке.

Есть несколько вариантов решения этой проблемы.

Убрать подчеркивание ссылок можно инлайново. Хотя это категорически не рекомендуется делать с точки зрения оптимизации работы сайта.

Для этого необходимо непосредственно в теге ссылки указать параметр Style:

Второй вариант является более приемлемым.

Вводим в элемент дополнительный класс или id и уже этим селекторам присваиваем нужные нам стили:

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

Класс прописывается с точкой перед его названием:

Идентификатор обозначается знаком #:

Данное правило применимо как к файлу CSS, так и к тегу Style

Изменение стиля отображения ссылки в тексте

Помимо возможности убрать подчеркивание ссылки, CSS позволяет применить и другие виды стилизации. Часто веб-дизайнеры или верстальщики используют для выделения ссылочного текста изменение его цвета относительно основного текста.

Сделать это тоже достаточно просто:

color:*указать нужный цвет в любом формате (*red, #c2c2c2, rgb (132, 33, 65)*)*;

Применяется подобная стилизация по тем же правилам, что описаны для отмены подчеркивания ссылки. CSS-правила в данном случае идентичны. Изменение цвета ссылки и отмена подчеркивания могут быть применены как отдельная стилизация (тогда ссылка останется подчеркнутой, но изменит цвет со стандартного синего на необходимый вам).

Замена стандартной стилизации

Еще ремарка напоследок. Вместо того, чтобы отменить подчеркивание ссылки CSS дает возможность замены стандартных значений оформления. Для этого достаточно подставить нижеприведенные значения в конструкцию text-decoration:

  • Если нужна сплошная линия, указываем значение solid.
  • Для волнистой линии – wavy.
  • Двойная линия – соответственно double.
  • Линию можно заменить на последовательность точек – dotted.
  • Подчеркнуть слово в виде пунктира – dashed

А также можно изменить положение линии относительно текста:

Конструкция line-text-decoration-line может принимать значения:

  • Стандартное (подчеркнуть снизу)- underline .
  • Перечеркнуть слово (фразу) – through .
  • Линия находится сверху – overline.
  • Знакомое нам none – без стилизации.

И цвет (не путать с цветом текста!):

text-decoration-line: (любой цвет в любом формате *red, #c2c2c2, rgb (132, 33, 65)*).

Дизайнеры, создавая концепцию будущему проекту, продумывают каждую деталь до мелочей. И стандартное подчеркивание браузером ссылок может не входить в их планы.

И как убрать это ненужное подчеркивание, я сейчас расскажу.

Как убрать подчеркивание у ссылок в HTML на CSS

В CSS существует свойство под названием «text-decoration» – именно с помощью него мы и будем убирать стандартное подчеркивание ссылок.

Вариант с отдельным CSS:

Или с CSS, прописанным в HTML:

В первом случае «.link» – это класс нужной вам ссылки, у которой необходимо убрать подчеркивание.

Как убрать подчеркивание у ссылок в HTML на jQuery

В jQuery существует метод «css», который позволяет работать со стилями элемента. Воспользуемся им и получим следующее:

Где «.link» – идентификатор нужного элемента.

Обратите внимание, что если ни один из способов вам не помог – есть вероятность того, что стили элемента уже где-то определены.

Для этого в любом из вариантов добавьте «!important» через пробел, например:

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега «а» (anchor). Современные браузеры по умолчанию отображают подобный элемент с нижним подчеркиванием. Зачастую верстальщики или веб-дизайнеры предпочитают либо изменять этот стиль, либо удалять его вообще.

В некоторых случаях это действительно необходимо. К примеру, в плотном ссылочном блоке, где лишнее оформление будет только перегружать восприятие, и затруднять чтение документа. Однако в некоторых случаях целесообразно сохранять разграничение текста и ссылок. Если дизайн сайта полностью исключает подобное форматирование, то стоит применить любой другой вид выделения таких элементов. Самым распространенным видом разграничения сегодня является цветовой контраст анкоров в тексте. Это эффективно. Единственным небольшим минусом такого варианта станет проблема выделения текста людьми, которые не могут воспринимать различные цвета (дальтонизм). Но это настолько низкий процент пользователей, что им можно пренебречь.

Если все-таки было принято решение убрать подчеркивание ссылок, то тут понадобится некоторые знания структуры формирования интернет страницы, а именно CSS.

Удалить подчеркивание ссылок на всем сайте

Для человека, хорошо разбирающегося в веб-дизайне и в частности в CSS, убрать подчеркивание ссылок не составит особого труда. Для этого всего лишь необходимо в файлах сайта найти и открыть файл, отвечающий за стилевое оформление. Обычно он лежит в корневом каталоге и имеет расширение .css. Убрать подчеркивание ссылок можно при помощи нехитрого кода:

Эта небольшая строка удалит полностью на всем сайте подчеркивание всех элементов прописанных при помощи тега «а».

Но что делать, если у вас нет доступа к файлу CSS?

В таком случае целесообразным является применения тега Style в начале документа. Работает так же, как и файл CSS. Для того чтобы применить стили, необходимо в самом начале документа (или HTML страницы) дописать конструкцию, в которой действуют обычные правила CSS стилей.

Эти стили применяются только к определенной странице. В других разделах или документах сайта они действовать не будут.

Удалить подчеркивание ссылок при наведении

Но как быть, если необходимо убрать подчеркивание ссылки при наведении? CSS и в этом случае сможет нам помочь. Код будет выглядеть так:

Именно псевдокласс « :hover » отвечает за декорацию элементов при наведении курсора.

Скомпоновав эти два варианта, мы можем сделать так, что подчеркивание ссылки будет отображаться только при наведении, в противном случае все будет выглядеть как обычный текст:

Применение идентификаторов и классов

Как видно из вышеописанного, изменить стилизацию элемента на сайте или html-документе достаточно легко. Минусами таких вариантов являются невозможность выборочного применения стилей: не ко всему сайту или документу, а к конкретной ссылке.

Есть несколько вариантов решения этой проблемы.

Убрать подчеркивание ссылок можно инлайново. Хотя это категорически не рекомендуется делать с точки зрения оптимизации работы сайта.

Для этого необходимо непосредственно в теге ссылки указать параметр Style:

Второй вариант является более приемлемым.

Вводим в элемент дополнительный класс или id и уже этим селекторам присваиваем нужные нам стили:

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

Класс прописывается с точкой перед его названием:

Идентификатор обозначается знаком #:

Данное правило применимо как к файлу CSS, так и к тегу Style

Изменение стиля отображения ссылки в тексте

Помимо возможности убрать подчеркивание ссылки, CSS позволяет применить и другие виды стилизации. Часто веб-дизайнеры или верстальщики используют для выделения ссылочного текста изменение его цвета относительно основного текста.

Сделать это тоже достаточно просто:

color:*указать нужный цвет в любом формате (*red, #c2c2c2, rgb (132, 33, 65)*)*;

Применяется подобная стилизация по тем же правилам, что описаны для отмены подчеркивания ссылки. CSS-правила в данном случае идентичны. Изменение цвета ссылки и отмена подчеркивания могут быть применены как отдельная стилизация (тогда ссылка останется подчеркнутой, но изменит цвет со стандартного синего на необходимый вам).

Замена стандартной стилизации

Еще ремарка напоследок. Вместо того, чтобы отменить подчеркивание ссылки CSS дает возможность замены стандартных значений оформления. Для этого достаточно подставить нижеприведенные значения в конструкцию text-decoration:

  • Если нужна сплошная линия, указываем значение solid.
  • Для волнистой линии – wavy.
  • Двойная линия – соответственно double.
  • Линию можно заменить на последовательность точек – dotted.
  • Подчеркнуть слово в виде пунктира – dashed

А также можно изменить положение линии относительно текста:

Конструкция line-text-decoration-line может принимать значения:

  • Стандартное (подчеркнуть снизу)- underline .
  • Перечеркнуть слово (фразу) – through .
  • Линия находится сверху – overline.
  • Знакомое нам none – без стилизации.

И цвет (не путать с цветом текста!):

text-decoration-line: (любой цвет в любом формате *red, #c2c2c2, rgb (132, 33, 65)*).

Давайте сегодня решим такую проблему, как стилизация ссылок на страницах вашего сайта, а именно как в CSS убрать подчеркивание ссылки. Данный вопрос в большинстве случаев возникает у начинающих веб-разработчиков и у тех людей, которые не особо разбираются в CSS, но хотят внести некоторые изменения в оформление своего сайта.

Навигация по статье:

Отключаем подчеркивание

Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.

Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:

Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.

Если вам нужно убрать подчёркивание ссылки для всех ссылок на сайте, то в CSS пишем:

Убираем подчеркивание ссылки CSS при наведении

Если же у вас изначально ссылки не имеют подчеркивания, и это подчеркивание появляется при наведении указателя мышки, то вам нужно указывать немного другой селектор, а именно:

В этом случае мы дописали к селектору псевдокласс hover, который как раз и позволяет задать стили для элемента при наведении указателя.

Используя показанные в данной статье стили, вы сможете с легкостью убрать или добавить подчеркивание для ссылок на вашем сайте. Если у вас возникнут вопросы, вы всегда можете задать их в комментария.

Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!

Как на сайте убрать подчеркивание ссылок на CSS? — RUUD

11-06-2018 13:25

Содержание статьи:

  • Зачем подчеркивают ссылки
  • Выделение ссылок
  • Изменение стиля гиперссылки
  • Поддержка браузерами

Исторически сложилось так, что при обработке веб-документа браузеры подчеркивают и выделяют особым цветом гиперссылки. Это может серьезно нарушать дизайнерскую задумку и портить внешний вид сайта. Веб-мастер может применить специальные инструкции CSS и убрать подчеркивание ссылки, чтобы красиво вписать ее в страницу.

Зачем подчеркивают ссылки?

С самого зарождения всемирной паутины гиперссылки имеют особенное значение. Именно они выполняют важнейшую функцию объединения миллионов разных веб-документов в одну сеть.

Вам будет интересно:Неисправимые ошибки секторов жестких дисков

Особый статус элемента определил необходимость его выделения на странице каким-либо способом. Чтобы ссылка не сливалась с остальным текстом (который изначально был просто черным), решено было ее подчеркивать и раскрашивать синим цветом. Кроме того, были добавлены эффекты при наведении мыши (исчезновение подчеркивания, изменение курсора) и изменение цвета уже посещенных ссылок.

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

Такое поведение элементов закрепилось, и браузеры стали применять его по умолчанию.

Выделение ссылок

С развитием CSS появилось множество возможностей сделать ссылочный элемент заметным, не прибегая к подчеркиванию. Более того, в ряде случаев эта тонкая линия стала нежелательной, так как не вписывалась в дизайн веб-страницы.

Верстальщикам нужна была возможность с помощью CSS убрать нижнее подчеркивание ссылок, например, в главном меню сайта и сайдбарах.

Таким образом, сохранилась основная идея, устанавливающая, что гиперссылка должна быть заметной, но способ ее реализации по умолчанию не всегда соответствовал потребностям.

Изменение стиля гиперссылки

Убрать подчеркивание ссылки на CSS очень просто. Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.

Список значений, которые может принимать это свойство:

  • underline – нижнее подчеркивание;
  • overline – верхнее подчеркивание, линия проходит над текстом;
  • line-through – зачеркивание, линия проходит посередине строки;
  • none – отсутствие оформления.

По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.

Чтобы убрать подчеркивание ссылки на CSS, следует применить к ней следующее правило:

a { text-decoration: none; }

Поддержка браузерами

Свойство text-decoration и его значение none отлично поддерживаются всеми существующими браузерами, включая их старые версии, так что убрать подчеркивание ссылки на CSS можно без особенных трудностей.

Источник

Автор: Зинаида Потапова

Похожие статьи

«Система «Виндовс» защитила ваш компьютер»: как отключить появление этого сообщения? Простейшие методы

Ошибка статуса VPN в «Хамачи»: способы быстрого решения проблемы

Как сделать рассылку в «Вайбере»: подробная инструкция и способы

Как сделать бизнес-аккаунт в «Фейсбук»: создание, настройка и раскрутка

Как восстановить переписку в «Телеграмме»: пошаговая инструкция, советы

Как получить в «ES Проводник» Root-права?

Как отключить «Протект» в «Яндекс.

Браузере» на компьютере?

Как сохранять контакты в «Гугл»: простые способы, правила переноса, рекомендации и советы

Как на «Андроиде» переименовать приложение: подробная инструкция

Продукты «Гугла»: список, функции и возможности, отзывы

CSS: как удалить подчеркивание из ссылки, которая не находится непосредственно в теге привязки?

спросил

Изменено 4 года, 9 месяцев назад

Просмотрено 64к раз

 
    <дел>
        Управление строками меню
.action_box { текстовое оформление: нет; }

не работает =\

7

Ваш код пытается удалить подчеркивание из div (которого, вероятно, нет), а не из ссылки (что, вероятно, имеет). Просто

 {
текстовое оформление: нет;
}

будет работать, хотя это удалит подчеркивание со всех ссылок.

Если вам нужно уточнить эту ссылку, используйте

 
    <дел>
        Управление строками меню
a.action_link { текстовое оформление: нет; }

Это предполагает, что подчеркивание на самом деле является text-decoration на элементе link, а не border-bottom на div.

1

Вам по-прежнему необходимо применить стиль оформления текста к внешнему тегу href.

Следующий пример:

 
    <голова>
        <стиль>
        .noUnderline {
        текстовое оформление: нет;
        }
        
    
  <тело>
    
        <дел>
            Управление строками меню

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

 a, a .action_box { text-decoration: none; }

Вполне возможно, что проблема в том, что другой класс/свойство переопределяет вашу последнюю попытку; однако попробуйте то, что сказал Сайленс Догуд:

 a div .action_box {
   текстовое оформление: нет;
}

Если это не сработает, нам нужно увидеть остальную часть CSS.

1

Ты не можешь просто использовать это.

 #контент > ул {
             текстовое оформление: нет;
           }

Очевидно, что вышеприведенное принадлежит мне.

Вы пытаетесь удалить подчеркивание из div, который находится внутри тега привязки

Просто используйте

 a{
текстовое оформление: нет;
}

Вы можете указать идентификатор для тега привязки для лучшего использования,

 
    <дел>
        Управление строками меню

и используйте css

 a#linkid{
     текстовое оформление: нет;
}

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Как удалить подчеркивание из ссылки в CSS

Последнее обновление: 1 июля 2023 г.

IN — CSS

В этом уроке мы покажем вам, как удалить подчеркивание из ссылки в CSS, вы, возможно, захотите удалить подчеркивание по умолчанию из ссылки при стилизации веб-сайта. К счастью, CSS предоставляет различные варианты удаления подчеркивания из ссылки.

В этом руководстве вы узнаете, как использовать CSS для удаления подчеркивания в ссылках. Мы также покажем, как использовать CSS-свойство text-decoration для удаления подчеркивания ссылки в HTML.

Пошаговое руководство по удалению подчеркивания ссылки в CSS: —

Текст можно украсить с помощью атрибута text-decoration. Удаление подчеркивания может быть именно тем, что вы ищете с точки зрения внешнего вида, но вы должны действовать осторожно.

В следующих разделах мы рассмотрим, как использовать свойство text-decoration для полного удаления подчеркивания ссылок на вашем HTML-сайте.

Вот пример Как убрать подчеркивание ссылки в CSS

 

<голова>
<название>
<стиль>
.div а {
цвет: #000000;
текстовое оформление: нет;
}


<тело>
<дел>
Эта страница
Следующая страница
  1. Сначала мы набираем , который сообщает веб-браузеру, в какой версии HTML написан файл.
  2. С другой стороны, элемент используется для обозначения начала HTML-документа.
  3. Тег теперь содержит информацию о веб-страницах. В этом теге используется элемент, позволяющий указать заголовок веб-страницы. К парным тегам относятся теги<head> и<title>. В результате оба имеют завершающие теги</head> и.
  4. Наконец, элемент используется для определения содержимого веб-страницы. Здесь вы будете писать все содержимое веб-сайта. Внутри div мы создали span с классом Page и div с классом контейнера.
    Эта страница была помещена в пространство между тегами span. Мы добавили тег привязки к следующей строке.
  5. Затем мы изменили атрибут href на # внутри тега привязки и создали новый диапазон с классом DifferentPage. Текст NextPage был установлен между промежутками.
  6. В теге head использовался тег