Css убрать подчеркивание ссылки – Как через CSS убрать подчеркивание ссылок? Пособие для новичка. Оформление ссылок

Содержание

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

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

Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.

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

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

Создание ссылки

Для демонстрации работы этого метода, необходимо создать ссылку. В этом поможет стандартный HTML 5.

Вам будет интересно:Redirect: что это и как убрать из браузера?

Чтобы создать ссылку, нужно использовать парный тег «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».

    Источник

    Как через CSS убрать подчеркивание ссылок? Пособие для новичка. Оформление ссылок

    По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам . Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline . Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.

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

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

    a { text-decoration: none; }

    С помощью этой строки кода можно удалить CSS underline style всех ссылок.

    Предостережение относительно удаления подчеркивания

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

    Не подчеркивайте текст, не связанный со ссылкой

    Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color ) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом ), вы вводите пользователей сайта в заблуждение.

    Измените сплошное подчеркивание точками или пунктиром

    Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid « ), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom :

    a { text-decoration: none; border-bottom:1px dotted; }

    Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

    То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed :

    a { text-decoration: none; border-bottom:1px dashed; }


    Изменение цвета подчеркивания

    Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:

    a { text-decoration: none; border-bottom:1px solid red; }


    Двойное подчеркивание

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

    a { text-decoration: none; border-bottom:3px double; }


    Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:

    a { border-bottom:1px double; }


    Не забывайте о различных состояниях ссылок

    Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline :

    a { text-decoration: none; } a:hover { border-bottom:1px dotted; }


    Перевод статьи «How to Change Link Underlines on a Webpage » был подготовлен дружной командой проекта .

    Хорошо Плохо

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

    Как вставить ссылку?

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

    Чтобы связать какой-либо элемент с другой страницей, можно воспользоваться специальным тегом , внутри которого следует указать параметр ссылки href. Если необходимо перейти на какой-то другой сайт, то после этого атрибута следует полностью прописать адрес сайта, а если ссылка является внутренней, то достаточно воспользоваться лишь его частью, начав её с «/», как представлено в примере:

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



    Доброго времени суток всем читателям моего блога! Сегодня хотелось бы написать заметку, о том как убрать подчеркивание ссылок на наших сайтах.

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

    Так что не будем тянуть и перейдем к процессу.

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

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

    <style> a { text-decoration: none; /* Отменяем подчеркивание у ссылки */ } </style>

    <style>

       a {

        text-decoration: none; /* Отменяем подчеркивание у ссылки */

       }

      </style>

    Так же, если не хотите править CSS стили, то можно его вставить до закрытия тега HEAD (в WordPress файл который нужно исправить, обычно называется header.php). Вот и все, теперь подчеркивание убрано под всеми ссылках вашего сайта.

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

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

    <a href=»URL»>анкор</a>

    <a href=»URL»>анкор</a>

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

    Подпишитесь и получайте новые статьи мгновенно на электронную почту

    Как убрать подчеркивание ссылок? CSS свойство text-decoration :: SYL.ru

    Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.

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

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

    Создание ссылки

    Для демонстрации работы этого метода, необходимо создать ссылку. В этом поможет стандартный HTML 5.

    Чтобы создать ссылку, нужно использовать парный тег «a», который не является блочным. Поэтому, чтобы размещать ссылки на отдельных строчках, необходимо заключать их в теги параграфа (p). Можно воспользоваться и альтернативным способом – задать свойство display: block для каждой ссылки.

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

    Кроме этого, тег «a» имеет целый ряд атрибутов. Обязательным является атрибут href, без которого не будет осуществляться переход по ссылке. В нем указывается путь к странице или файлу, к которому будет вести наша ссылка.

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

    Ссылка создана, теперь ее нужно стилизовать. Существует несколько способов убрать подчеркивание ссылки в CSS:

    1. Атрибут style (располагается внутри тега).
    2. Тег style (располагается в блоке head).
    3. Внешнее подключение стилей с помощью тега link.

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

    HTML код

    Совет: при стилизации веб-страницы отдавайте предпочтение внешним ссылкам.

    Стилизация ссылки в CSS

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

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

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

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

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

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

    CSS код

    Чтобы упростить код, можно использовать простой атрибут – style. В примере, не представлено полноценного дизайна всей странице, поэтому можно использовать и данный способ.

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

    Изменение наведенной ссылки в CSS

    Допустим, вы захотели сделать так, чтобы в обычном состоянии ссылки подчеркивание осталось, а при наведении исчезло. Чтобы убрать или задать подчеркивание для ссылки при наведении, в CSS используется псевдокласс «:hover». Вот пример:

    CSS код для наведенной ссылки

    Стили можно применять не только к наведенной ссылке, но и к активированной или посещенной. Для этого нужно использовать псевдоклассы «:active» и «:visited».

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

    Ссылки – неотъемлемая часть любой веб-страницы. Они могут быть как текстовыми, так и в виде кнопок. В этой статье будут рассмотрены только текстовые ссылки.

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

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

    Создание ссылки

    Для демонстрации работы этого метода, необходимо создать ссылку. В этом поможет стандартный HTML 5.

    Чтобы создать ссылку, нужно использовать парный тег «a», который не является блочным. Поэтому, чтобы размещать ссылки на отдельных строчках, необходимо заключать их в теги параграфа (p). Можно воспользоваться и альтернативным способом – задать свойство display: block для каждой ссылки.

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

    Кроме этого, тег «a» имеет целый ряд атрибутов. Обязательным является атрибут href, без которого не будет осуществляться переход по ссылке. В нем указывается путь к странице или файлу, к которому будет вести наша ссылка.

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

    Ссылка создана, теперь ее нужно стилизовать. Существует несколько способов убрать подчеркивание ссылки в CSS:

    1. Атрибут style (располагается внутри тега).
    2. Тег style (располагается в блоке head).
    3. Внешнее подключение стилей с помощью тега link.

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

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

    Совет: при стилизации веб-страницы отдавайте предпочтение внешним ссылкам.

    Стилизация ссылки в CSS

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

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

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

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

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

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

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

    Чтобы упростить код, можно использовать простой атрибут – style. В примере, не представлено полноценного дизайна всей странице, поэтому можно использовать и данный способ.

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

    Изменение наведенной ссылки в CSS

    Допустим, вы захотели сделать так, чтобы в обычном состоянии ссылки подчеркивание осталось, а при наведении исчезло. Чтобы убрать или задать подчеркивание для ссылки при наведении, в CSS используется псевдокласс «:hover». Вот пример:

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

    Стили можно применять не только к наведенной ссылке, но и к активированной или посещенной. Для этого нужно использовать псевдоклассы «:active» и «:visited».

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

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

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

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

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

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

    Первый веб-документ с гиперссылками

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

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

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

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

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

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

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

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

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

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

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

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

    a {
      text-decoration: none;
    }
    Ссылки с подчеркиванием и без подчеркивания

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

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

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

      

     

    Приветствую Вас, уважаемый читатель! Сегодня я расскажу Как убрать подчеркивание ссылки.

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

    И так, наконец-то решил написать этот небольшой пост: всё откладывал в долгий ящик, и вот на конец-то..

    Ну, в первых буквально пару слов, зачем это нужно?

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

    Это конечно хорошо, но бывают (правда, редко) случаи, когда подчёркивание ссылки при наведении курсора, или сразу подчёркнутая ссылка, будут нежелательны.

      

     

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

    В общем, применять эту технологию: «Убрать подчеркивание ссылки» 

    можно где угодно и как угодно, тут всё будет зависеть только от вашей фантазии и полёта мысли…

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


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

    Сначала я просто сделал её стилистически одинаковой с окружающим текстом, но её выдавало автоматическое подчёркивание.

    Проблему удалось решить с помощью следующего кода:

    <a href="ССЫЛКА">ТЕКСТ ССЫЛКИ</a>

    Тестировал технологию: «Убрать подчеркивание ссылки» на движке Вордпресс — работает отлично!

    Вот такие дела… В общем, можете пользоваться, авось кому-то и сгодится.


    P.S.

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

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

     

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *