Отображать неподчеркнутые ссылки с помощью CSS.Чтобы удалить подчеркивание из ссылок HTML,просто введите следующий код в CSS:Html ссылки подчеркивание: Ссылки без подчеркивания | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Html ссылки подчеркивание: Ссылки без подчеркивания | htmlbook.ru

Разное 

Содержание

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



Я пытаюсь сделать так, чтобы ссылка отображалась белым цветом, без подчеркивания. Цвет текста правильно отображается как белый, но синее подчеркивание упорно сохраняется. Я попробовал text-decoration: none; и text-decoration: none !important; в CSS, чтобы удалить подчеркивание ссылки. Ни то, ни другое не сработало.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div>
  <h3>
    <span>Current Page</span>
    <a href="myLink"><span>Different Page</span></a>
  </h3>
</div>

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

css hyperlink underline
Поделиться Источник dmr     07 мая 2010 в 15:29

19 ответов

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

    С этим: a sup { text-decoration: none !important; color: red; <a href=http:/example. com//>Example<sup>&trade;</sup></a> Можно ли удалить подчеркивание из элемента <sup> ? css явно нацелен на правильный элемент (он окрашивает его в красный цвет), но…

  • Не удается удалить подчеркивание из ссылки

    У меня есть простой div в якорном теге, и я пытаюсь удалить синее подчеркивание из ссылки. .removelinkdefault { color: black; text-decoration: none !important; } <a href=/user/reillylawless23><div class=removelinkdefault>Reilly Lawless</div></a> Вся документация, которую я…


792

Вы применяете text-decoration: none; не к якорю (.boxhead a ), а к элементу span (.boxhead ).

Попробуйте это:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Поделиться Davor Lucic     07 мая 2010 в 15:50


218

Якорный тег (ссылка) также имеет псевдоклассы, такие как visited, hover, link и active.

Убедитесь, что ваш стиль применяется к данному состоянию(состояниям) и что никакие другие стили не конфликтуют.

Например:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Дополнительные сведения о псевдоклассах действий пользователя :hover, :active и :focus см. В разделе W3.org.

Поделиться JYelton     07 мая 2010 в 15:35


33

text-decoration: none !important должен удалить его .. вы уверены, что там не скрывается

border-bottom: 1px solid ? (Trace вычисленный стиль в Firebug/F12 в IE)

Поделиться Alex K.     07 мая 2010 в 15:35

  • как удалить подчеркивание из метки ссылки в compact framework (windows ce)

    Как удалить подчеркивание из метки ссылки в compact framework? Поскольку для label и textbox нет события click, я должен использовать linklabel в качестве его вспомогательного события click. Попробовал это решение, но оно не работает, показывая ошибку Error: Operator ‘! ‘не может быть применен к…

  • Как удалить подчеркивание из ссылки, которая имеет номер, но сохранить подчеркивание на обычной ссылке, которая имеет алфавиты

    Пожалуйста, скажите мне, как удалить подчеркивание из ссылки, которая имеет номер, но сохранить подчеркивание на обычной ссылке, которая имеет алфавиты? Я создал демо здесь, но не знаю, как это сделать a{ text-decoration:underline; } /* TODO — Write code either with CSS or JS for the anchors which…


27

Просто добавьте этот атрибут в свой якорный тег

style="text-decoration:none;"

Пример:

<a href="page.html" ></a>

Или используйте способ CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

Поделиться Nagarajan S R     11 декабря 2013 в 05:52


16

Иногда то, что вы видите, — это тень коробки, а не подчеркивание текста.

Попробуйте это (используя любые селекторы CSS, которые вам подходят):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

Поделиться jeffmjack     11 марта 2017 в 22:58


14

Вы пропустили text-decoration:none для якорного тега . Поэтому код должен быть следующим.

.boxhead a {
    text-decoration: none;
}
<div>
    <h3>
        <span>Current Page</span>
        <a href="myLink"><span>Different Page</span></a>
    </h3>
</div>

Более стандартные свойства для оформления текста

Поделиться Santosh Khalse     19 января 2017 в 12:50


10

Как правило, если ваш «underline» не имеет того же цвета, что и ваш текст [и ‘color:’ не переопределяется inline], он не исходит из «text-decoration:», он должен быть «border-bottom:»

Не забудьте также убрать границу с ваших псевдоклассов!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Этот фрагмент предполагает, что он находится на якоре, и соответственно меняется на его оболочку.

.. и используйте специфичность вместо»! важно » после того, как вы отследите первопричину.

Поделиться Joel Crawford-Smith     07 мая 2010 в 20:30


9

Не видя страницы, трудно строить догадки.

Но мне кажется, что у вас может быть применен border-bottom: 1px solid blue; . Возможно, добавить border: none; . text-decoration: none !important прав, вполне возможно, что у вас есть другой стиль, который все еще переопределяет этот CSS.

Именно здесь использование панели инструментов веб-разработчика Firefox является потрясающим, вы можете отредактировать CSS прямо там и посмотреть, работают ли вещи, по крайней мере для Firefox. Он под номером CSS > Edit CSS .

Поделиться artlung     07 мая 2010 в 15:44


4

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

a {
   text-decoration:none;
}

Это уберет подчеркивание с каждой отдельной ссылки на Вашей странице!

Поделиться

yarz-tech     30 июня 2017 в 18:23


2

Если text-decoration: none или border: 0 не работают, попробуйте применить встроенный стиль в вашем html.

Поделиться Deke     12 июня 2018 в 01:09


1

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

border:0;

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

Поделиться

MK Sandhu     22 сентября 2016 в 09:11


1

Ни один из ответов не сработал для меня. В моем случае был стандарт

a:-webkit-any-link {
text-decoration: underline;

в моем коде. В принципе, какой бы ни была ссылка, цвет текста становится синим, и ссылка остается тем, чем она является.

Поэтому я добавил код в конце заголовка следующим образом:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

и проблемы больше нет.

Поделиться Neo     12 июля 2018 в 04:22


1

  a {
    color: unset;
    text-decoration: unset;
  }

Поделиться itzhar     25 ноября 2019 в 12:54


0

Вот пример для элемента управления asp.net webforms LinkButton:

 <asp:LinkButton runat="server" ForeColor="Blue" />

За код :

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

Поделиться JoshYates1980     08 марта 2017 в 16:21


0

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

Вы можете использовать этот код

. boxhead h3 a{text-decoration: none;}

OR

.boxhead a{text-decoration: none !important;}

OR

a{text-decoration: none !important;}

Поделиться Md Abul Bashar     22 июня 2018 в 19:50


0

Поставьте следующий код HTML перед тегом <BODY> :

<STYLE>A {text-decoration: none;} </STYLE>

Поделиться qarly_blue     26 июня 2019 в 17:58


0

В моем случае у меня было плохо сформировано HTML. Ссылка была внутри тега <u> ,а не <ul> .

Поделиться mwilcox     10 июля 2019 в 22:48


0

Как указывали другие, похоже, что вы не можете переопределить вложенные стили оформления текста. .. BUT вы можете изменить text-decoration-color.

В качестве взлома я изменил цвет, чтобы быть прозрачным:

text-decoration-color: transparent;

Поделиться Ben     07 апреля 2020 в 16:04


0

установить текстовое оформление: нет; для якорного тега.

Пример html.

<body>
    <ul>
        <li><a href="#"><i></i>Business</a></li>
        <li><a href="#"><i></i>Expertise</a></li>
        <li><a href="#"><i></i>Quality</a></li>
    </ul>
</body>

Пример CSS:

.nav-tabs li a{
  text-decoration: none;
}

Поделиться Lord     04 июля 2020 в 15:03

Похожие вопросы:


Как удалить подчеркивание из ссылки и добавить подчеркивание при наведении курсора? (изображения прилагаются)

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


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

У меня есть текстовый абзац, который может содержать некоторые ссылки url. Мне нужно удалить подчеркивание _ только из этой строки. Но, как я уже сказал, текст имеет url ссылок и url ссылки также…


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

Я пытался удалить уродливое подчеркивание с веб-страницы, но по какой-то причине оно просто не исчезает. Я пытался использовать text-decoration:none; и color: #FFFFFF; безрезультатно. Оригинальный…


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

С этим: a sup { text-decoration: none !important; color: red; <a href=http:/example.com//>Example<sup>&trade;</sup></a> Можно ли удалить подчеркивание из…


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

У меня есть простой div в якорном теге, и я пытаюсь удалить синее подчеркивание из ссылки. .removelinkdefault { color: black; text-decoration: none !important; } <a…


как удалить подчеркивание из метки ссылки в compact framework (windows ce)

Как удалить подчеркивание из метки ссылки в compact framework? Поскольку для label и textbox нет события click, я должен использовать linklabel в качестве его вспомогательного события click….


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

Пожалуйста, скажите мне, как удалить подчеркивание из ссылки, которая имеет номер, но сохранить подчеркивание на обычной ссылке, которая имеет алфавиты? Я создал демо здесь, но не знаю, как это…


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

Я пытаюсь удалить подчеркивание из ссылок на веб-сайте. Я попытался использовать text-decoration: none;, но это не сработало. Какой синтаксис я сделал неправильно? или есть лучший способ убрать…


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

Гугл я хочу удалить подчеркивание текста ссылки


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

Можно ли удалить подчеркивание при отображении ссылки на странице html? <dt class=center>Value <dt class=center><a href=/test>Details</a>

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

По умолчанию текстовое содержимое, которое связано с HTML с помощью элемента <a> или «якоря», подчеркивается подчеркиванием. Часто веб-дизайнеры выбирают этот стиль по умолчанию, удаляя подчеркивание.

Причины за и против подчеркивания

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

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

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

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

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

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

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

Это оно! Эта простая строка CSS отключила бы подчеркивание (которое на самом деле использует свойство CSS для «украшения текста») на всех ссылках.

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

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

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

Одна вещь, которую многие веб-дизайнеры выбирают, — это снова включить ссылку, когда кто-то наводит курсор мыши на текст. Это можно сделать с помощью псевдокласса : hover CSS , например:

a { 
текстовое оформление: нет; 
} 
a: hover { 
text-украшение: подчеркивание; 
}

Использование встроенного CSS

В качестве альтернативы внесению изменений во внешнюю таблицу стилей вы также можете добавить стили непосредственно к самому элементу в HTML .

Проблема этого метода заключается в том, что он помещает информацию о стиле в структуру HTML, что не является наилучшей практикой. Стиль (CSS) и структура (HTML) должны храниться отдельно. 

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

В заключение

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

Декоративное подчеркивание у ссылок > О том, как правильно делать сайты! > LILIA-WEB.

NAROD.RU

Декоративное подчеркивание у ссылок

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

  • картинка должна быть бесшовной, иными словами, состыковываться сама с собой по горизонтали, это необходимо для получения плавной неразрывной линии;
  • высота линии не должна превышать 3 пиксела, все остальное будет «обрезано».

Высоту линии можно сделать и больше трех пикселов, если добавить к селектору A параметр padding.

На рис. 1 показно исходное изображение, которое годится для создания подчеркивания, а также его увеличенный вариант.

 

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

После создания рисунка в графическом редакторе, следует определить стиль, как показано в примере 1. Основным элементом для установки линии выступает стилевой параметр background. Это универсальный атрибут, который определяет характеристики фонового изображения, в частности, путь к графическому файл, а также смещение фона относительно левого верхнего угла элемента. В данном случае требуется только сдвинуть фоновый рисунок вниз на высоту текста, для этого используется относительная единица em, равная высоте шрифта элемента. Кроме того, чтобы рисунок повторялся только по горизонтали, добавляем к параметру background аргумент repeat-x.

Пример 1. Добавление графической линии к ссылкам
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
A {
text-decoration: none;
padding: 3px;
white-space: nowrap
}

A:hover {
background: url(‘/images/arrow.gif’)
0px 1.1em
repeat-x
}
</style>
</head>
<body>

<p><a href=»link1.html»>Ссылка 1</a></p>
<p><a href=»link2.html»>Ссылка 2</a></p>
<p><a href=»link3.html»>Ссылка 3</a></p>

</body>
</html>

Если текст ссылки достаточно длинный и занимает две и более строки, то рисунок отображается только под первой строкой. Чтобы ликвидировать эту особенность, для селектора A введен атрибут white-space со значением nowrap, он отменяет переносы в тексте и отображает его одной строкой. Учтите, что при этом возможно появление горизонтальной полосы прокрутки. Это, пожалуй, единственный недостаток данного способа, который следует принимать во внимание.

Путь к изображению указывается с помощью ключевого слова url, после которого в скобках пишется адрес рисунка. Число 0px в данном примере означает смещение изображения по горизонтали, а 1.1em — вниз по вертикали. Вы можете незначительно менять это число в ту или иную сторону, подбирая наилучший вариант в зависимости от используемого рисунка. Окончательный результат использования графической линии в ссылках показан ниже.

В примере у ссылок убирается подчеркивание (text-decoration: none), чтобы оно не мешало восприятию. К тому же классическая линия под текстом плохо сочетается с линией декоративной.

Интересный эффект можно получить, если использовать анимированное изображение. Например, в качестве подчеркивания добавить статичный рисунок, а при наведении на ссылку он будет меняться на другой. Для этого уже потребуется две картинки, первая показана на рис. 1, а вторая, статичная приведена на рис. 2.

 

Рис. 2. Картинка для анимации линии подчеркивания

После чего добавление линии происходит, как уже было описано в примере 1, за исключением того, что фоновый рисунок устанавливается для селектора A и псевдокласса hover (пример 2).

Пример 2. Добавление анимированной линии к ссылкам

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
A {
text-decoration: none;
padding: 3px;
background: url(‘/images/arrow1.gif’)
0px 1.1em repeat-x
}

A:hover {
background: url(‘/images/arrow2.gif’)
0px 1.1em repeat-x
}
</style>
</head>
<body>

<p><a href=»link1.html»>Ссылка 1</a></p>
<p><a href=»link2.html»>Ссылка 2</a></p>
<p><a href=»link3.html»>Ссылка 3</a></p>

</body>
</html>

У стилевого параметра background для разных селекторов меняется только значение url. Остальные аргументы совпадают, чтобы не произошло смещения рисунков. Полученный результат данного примера показан ниже.

 

Примечание
Приведенные способы не работают в браузере Opera версии 6 и ниже, поскольку он не применяет свойство background к тегу <A>. В браузере Internet Explorer 5 и ниже для ссылок не устанавливаются поля, задаваемые атрибутом padding. По этой причине смещение линии вниз следует уменьшить, например, до 0.9em. В любом случае это значение индивидуально и связано с используемым рисунком.

Оформление ссылок с использованием стиля css

 

 

По умолчанию все ссылки в сайте выделяются синим цветом и имеют стандартный вид.

При помощи  CSS можно создавать следующие виды ссылок:

  • — a:link — ссылки не посещенные;
  • — a:visited — ссылки после посещения  пользователем;
  • — a:hover —  пользователь провел над;
  • — a:active — ссылки активные. 

Для оформления ссылок используются псевдоклассы. Для каждой ссылки можно установить и применить  следующие параметры: 

{font-size; text-decoration; color; font-weight;  font –family; } 

При этом создается новый стиль, а последовательность выше описанную —  необходимо соблюдать.

Существует возможность оформления ссылки в любом тэге, так называемый комбинированный способ. Далее приводится несколько примеров  оформления ссылок. 

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

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5. 

Пример: Изменение цвета подчеркивания у ссылок

<html>
<head> 

<style>
a:link { color: blue; text-decoration: none }
 a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style> 

<body>
<a href=link1.html><span class=link>Ссылка</span></a>
</body>

</head>

</html> 

Создание подчеркивания

Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль, в котором будем использовать параметр border-bottom, он создает линию под текстом; 

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

<html>
<head>

<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }</style>

</head> 

<body>
<a href=1.html>Подчеркнутая ссылка</a>
</body>

</html>  

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

 

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

Подготовил: Евгений Рыжков Дата публикации: 19.12.2009

Задача

Сделать особое оформление подчеркивания ссылок не прибегая к использованию дополнительных тегов. Примеры таких задач:

  • цвет подчеркивания ссылки отличается от цвета самой ссылки
  • сделать подчеркивание не сплошной линией (например, пунктирной)

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

налепленные ссылки на europages.com

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

приглушенное подчеркивание на livejournal.ru пунктирное подчеркивание на b2b-club.ru

Решение

Для примера сделаем цвет подчеркивания отличным от цвета текста ссылки, плюс сразу сделаем его пунктиром. Т.к. напрямую нельзя влиять на цвет и вид подчеркивания ссылки, воспользуемся свойством border-bottom:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
}

Очень простое решение. Таким же образом можно сделать любого вида подчеркивание используя свойство background-image при заданном background-position: left bottom.

Но данное решение не всегда подходит. Например, нужно оформить следующую ссылку:

При чем картинка должна быть тоже кликабильной. Попробуем простой путь:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
background: url(path-to/wheel.png) no-repeat;
padding-left: 47px;
}

Жаль, но такой вариант в данном случае не подойдет — подчеркивание у нас бордюром, а бордюр тянется по всей ширине элемента:

IE7 оказался более тендитным к применению свойств чисто блочных (padding-top и padding-bottom) к строчному элементу:

В общем, придется немного усложнить html код ровно на один элемент. Для этого возьмем нейтральный — span:

<a href="#"><span>Авто</span></a>


.wheel {
color: #FF6600;
text-decoration: none;
background: url(path-to/wheel.png) no-repeat;
padding: 8px 0 8px 47px;
font-size: 16px;
font-weight: bold;
color: #084463;
zoom: 1; /* spacial for ie 7 */
}
.wheel span {
border-bottom: 1px solid #b7d2e0;
}

Демо пример. Проверено в:

Заметки

  • В данном примере для IE сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.
  • Такой прием можно применять не только к ссылкам.

Как изменить подчеркивание HTML-ссылки на веб-странице

Что нужно знать

  • Удалите подчеркивание в текстовых ссылках с помощью свойства CSS text-decoration, набрав a {text-decoration: none; } .
  • Измените подчеркивание на точки с помощью свойства стиля border-bottom a {text-decoration: none; нижняя граница: 1px с точками; } .
  • Измените цвет подчеркивания, набрав a {text-decoration: none; нижняя граница: сплошной красный 1px; } .Замените сплошной красный другим цветом.

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

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

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

Чтобы удалить подчеркивание из текстовых ссылок, используйте свойство CSS text-decoration. Вот CSS, который вы пишете для этого:

а {текст-украшение: нет; }
class = «ql-syntax»>

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

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

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

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

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

Как изменить подчеркивание на точки или тире

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

а {текст-украшение: нет; нижняя граница: 1px с точками; }

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

Вы можете сделать то же самое, чтобы получить тире. Просто измените стиль нижней границы на пунктирную:

а {текст-украшение: нет; нижняя граница: пунктирная линия 1px; }

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

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

а {текст-украшение: нет; нижняя граница: сплошной красный 1px; }

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

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

а {текст-украшение: нет; нижняя граница: 3px двойной; }

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

{border-bottom: 1px двойной; }

Не забывайте о состояниях связи

Вы можете добавить стиль нижней границы к своим ссылкам в разных состояниях, таких как: hover,: active или: посещено.Это может создать для посетителей приятный опыт в стиле «наведения», когда вы используете псевдокласс «hover». Чтобы при наведении курсора на ссылку появлялась вторая пунктирная линия подчеркивания:

а {текст-украшение: нет; } 
 a: hover {border-bottom: 1px с точками; }

Почему вы должны (почти) всегда подчеркивать свои ссылки — tempertemper

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

Рукописный ввод по сравнению с цифровым текстом

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

  • для выделения / выделения слов или фраз
  • для обозначения товарных позиций

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

В цифровом формате, таком как HTML, использование курсива, полужирного шрифта или большего размера текста не только намного эффективнее визуально, но и очень просто.

Подчеркивание уже занято

HTML дает нам гораздо больше, чем простой старый текст; В конце концов, буква «H» в HTML означает «Hyper»!

Условные обозначения, установленные в самом начале Интернета, по сути, являются тем, к чему мы должны стремиться визуально. Подумайте, как выглядит HTML, прежде чем добавлять какие-либо стили:

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

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

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

Альтернативы

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

  • Более жирный шрифт
  • Другой цвет

Но оба этих подхода могут иметь проблемы с доступностью.

Более тяжелый шрифт

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

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

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

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

Другой цвет

Цветовая слепота поражает чуть более 8% мужчин и 0,5% женщин во всем мире, поэтому около 4,5% людей, просматривающих веб-страницы, будут иметь ту или иную форму дефицита цветового зрения.

Кроме того, есть люди с не совсем идеальным зрением, которые полагаются на приличный контраст при чтении контента в своем веб-браузере.От больниц и клиник Университета Айовы:

Только около 35 процентов всех взрослых имеют зрение 20/20 без очков, контактных линз или корректирующих операций. С корректирующими мерами примерно 75 процентов взрослых имеют такую ​​остроту зрения, в то время как другие 25 процентов населения просто не очень хорошо видят

Если мы прибавим 75% от наших исходных 4,5% (процент людей с какой-либо формой дальтонизма, у которых зрение 20/20), это будет партия людей, которым не удастся разглядеть связь между своими окружающий текст.

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

Использование одного цвета для передачи смысла — плохая идея.

Комбинации

Сочетание цвета и полужирного текста лучше , но все же есть довольно серьезные недостатки, когда мы начинаем смешивать визуальные метафоры (жирный шрифт выделен и т. Д.).

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

  1. Текст без ссылки на его фоне
  2. Текст ссылки на ее фоне
  3. Ссылка по сравнению с обычным текстом находится в пределах

Третье можно смягчить подчеркиванием, если первое и второе в порядке.

Исключения

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

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

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

Как удалить подчеркивание из гиперссылок, использующих FrontPage 2003, Поместите следующий HTML-код перед тегом: В по крайней мере, вам нужно знать, как вставлять CSS и HTML в веб-страницу.Свойство text-decoration. Свойство CSS, которое обрабатывает подчеркивание, называется text-decoration. По умолчанию для ссылок используется подчеркивание. Чтобы все ссылки не подчеркивались, добавьте в таблицу стилей следующее правило:

«Подчеркнуть с помощью CSS-оформления текста и элемента HTML U», Как удалить подчеркивание с гиперссылки в Powerpoint ? Чтобы удалить подчеркивание из ссылок HTML, просто введите следующий код в CSS: . N.B. Псевдокласс: ссылка позволяет настраивать таргетинг только на гиперссылки () и якоря () и не является обязательной.

Как удалить подчеркивание из документа в Microsoft Word, Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration. Используйте его с атрибутом стиля. Атрибут style указывает, что я пытаюсь отобразить ссылку белым цветом без подчеркивания.Цвет текста отображается правильно как белый, но синее подчеркивание упорно сохраняется. Я пробовал оформление текста: нет; и текстовое оформление: нет! важно; в CSS, чтобы удалить подчеркивание ссылки. Ни то, ни другое не сработало.

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

Как удалить подчеркивание в гиперссылках, использующих FrontPage 2003, Как удалить подчеркивание в гиперссылке в CSS? Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration. Используйте его с атрибутом стиля.Атрибут style определяет встроенный стиль для элемента. Используйте атрибут style со свойством CSS text-decoration, чтобы удалить подчеркивание из ссылки в HTML. Просто имейте в виду, что использование атрибута стиля переопределяет любой набор стилей глобально.

Как удалить подчеркивание из ссылки в HTML ?, Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration. Используйте его с атрибутом стиля. Атрибут style определяет подавляющее подчеркивание для нечетной ссылки.Если у вас есть только одна ссылка, из которой вы хотите удалить подчеркивание, вы можете поместить правило непосредственно в атрибут стиля этой ссылки.

Как удалить подчеркивание из документа в Microsoft Word, Встроенная версия: ваш сайт . Однако помните, что вы должны обычно разделяться. Чтобы удалить подчеркивание из HTML-ссылок, просто введите следующий код в CSS: .N.B. Псевдокласс: ссылка позволяет настраивать таргетинг только на гиперссылки () и якоря () и не является обязательной.

Css button link

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

CSS Styling Links, В принципе, мне нравится стиль оформления с нажатой кнопкой, когда вы добавляете немного CSS. Однако обычные кнопки не являются W3.CSS HOME W3.CSS Intro W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Карты W3.CSS Шрифты W3.CSS Текст W3.CSS Round W3.CSS Padding W3.CSS Поля W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Котировки W3.CSS Предупреждения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Входы W3.Значки CSS Теги W3.CSS Значки W3.CSS W3.CSS

Создание кнопки

Автор записи

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

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