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

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

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

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

Как убрать подчеркивание из ссылки? Это мой код Я пытаюсь ввести там какой-то код, но все равно не получается @charset utf-8; /* CSS Document */ .top { color:black; font-family:Calibri;…

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

Я изо всех сил пытаюсь избавиться от ссылки подчеркивания, которая появляется при наведении курсора мыши на элемент a в HTML. Я добавил атрибут style=text-decoration: none к ссылке a , но когда я…

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

Я ищу, как удалить подчеркивание из этого бита HTML Я попробовал это сделать, но понятия не имею, где его разместить в этой строке. (Я не являюсь разработчиком) <a…

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

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

Как убрать подчеркивание в Microsoft Word.

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

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

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

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

В зависимости от поставленных задач, внешний вид ссылки можно изменять. Так, можно выбрать цвет, стиль шрифта, его тип (жирный, курсив), а также провести коррекцию, убрав подчеркивание. Таким образом, встает вопрос, как убрать подчеркивание в ссылке HTML? Очень просто!

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

Среди множества атрибутов тега присутствует свойство css-стиля text-decoration. По умолчанию этот параметр включён для ссылок, и, отключив его с помощью обозначения text-decoration:none , вы увидите, что получилась HTML-ссылка без подчеркивания. В данном примере ссылка будет иметь только выделение синим цветом, а подчёркивание будет убрано.

• Ссылка без подчеркивания

Когда требуется убрать подчеркивание?

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

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

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

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

Инструкция: как в CSS убрать подчеркивание ссылок

За подчеркивание текста отвечает свойство text-decoration. Чтобы полностьюубрать нижнее подчеркивание ссылки CSS на странице, мы можем использовать один из следующих способов:

• непосредственно к тегу ссылки в HTML назначить атрибут style , в котором прописать: text-decoration: none ;
• назначить ссылке id и применить к нему аналогичные свойства;

• чтобы убрать подчеркивание ссылок CSS для нескольких элементов, необходимо присвоить им класс атрибутом class и прописать такое же свойство, как и для одиночной ссылки.

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

• a {text-decoration: none;}.

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

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

Ссылки очень привередливы в плане управления ими через CSS. Например, интуитивно кажется, что если установить цвет текста для абзаца красным, то и ссылка в нем должна быть красной — но не тут то было. К каждой ссылке нужен «индивидуальный» подход, а если выражаться более технически точно — сначала в CSS мы должны указать либо id, либо class, либо селектор «a» в виде его местоположения в веб-документе, для которого мы хотим задать свойства. Если свойства прописывать просто для тега «a», то это определит базовые стили ссылок на странице, которые можно переназначить для отдельных элементов на странице с помощью CSS.

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

Что мы имеем в виду, говоря о наведении на ссылку? С технической точки зрения, это является псевдоклассом селектора и определяет его состояние на данный момент. Разнообразие псевдоклассов и их функционал обширные настолько, что им можно выделить отдельную статью, а сейчас нас интересует лишь один псевдокласс — hover. Именно он отвечает за поведение ссылки (или любого другого HTML-тега) при наведении. Теперь, понимая структуру процесса обработки браузером вашего кода, можете использовать данный пример:

• a: hover {text-decoration: none}.

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

Приложение MS Word выделяет некоторые слова документа, прорисовывая линию под ними. Как убрать подчеркивание в Word? Этим вопросом задаются многие пользователи. Способ, которым ликвидируется линия, находящаяся под текстом, зависит от её вида. Существует стандартная форма подчеркивания, задаваемая настройками форматирования, и специальные варианты, автоматически возникающие при наборе документа.

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

Как убрать подчеркивание в Word: настройка форматирования

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

Если под словом находится линия, самый простой способ её удалить – изменить параметры начертания текста. Сделать это можно, используя инструмент вкладки «Главная» , который визуально представляется собой кнопку с буквой «Ч ». В англоязычной версии программы этой функции соответствует кнопка «U ».

Вот последовательность действий, которая приведёт к требуемому результату:

• выделить текст;
• на вкладке «Главная» сделать неактивной кнопку «Ч », нажав на неё мышкой.

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

Специальные виды подчеркивания

Встроенная опция проверки правильности написания и расстановки знаков препинания отмечает фрагменты с ошибками линиями разных цветов. Красная волнистая линия означает, что слово написано неверно (или оно не присутствует в словаре Word), зелёная волнистая линия – требуется корректировка знаков препинания.

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

1. Проверить правильность написания слова и исправить его, если при наборе была допущена опечатка.
2. Навести курсор на слово, нажать правую кнопку мышки и в контекстном меню выбрать один из вариантов, предлагаемых программой.
3. Отказаться от исправления. Для этого также следует навести курсор мышки на слово, нажать правую кнопку и выбрать в меню «Пропустить» или «Добавить в словарь». Слово, включённое пользователем в словарь, впоследствии ошибкой считаться не будет.

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

А как убрать зеленое подчеркивание в Word? Ответ: используйте способы, описанные выше. Отличие состоит в том, что приложение обнаружило ошибку грамматики.

Настройки программы

Кардинальный способ избавиться от цветных волнистых линий – отключить автопроверку текста. Выполняется эта операции через окно настроек программы. В версии 2007 – щелчок мышкой по логотипу Office, в новых версиях – переход в меню «Файл». Далее необходимо на вкладке «Правописание» убрать отметки в полях «Скрыть ошибки».

Итак, теперь вопрос о том, как убрать подчеркивание в Word, перестанет тревожить пользователя. Автоматическое исправление отключено. Но есть и минус – искать ошибки в документе придётся вручную.

По умолчанию, браузеры применяют определенные наборы стилей 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 » был подготовлен дружной командой проекта .

Хорошо Плохо

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

• ссылки без подчёркивания;
• декоративное подчёркивание;
• выделение фоновым цветом;
• рамки;
• рисунок возле ссылки.

Ссылки без подчёркивания

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

Пример 1. Отсутствие подчёркивания у ссылок

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration , они наследуют свойства селектора a .

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration : none , следует воспользоваться псевдоклассом :hover . Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

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

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom , которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed , получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none , чтобы одновременно не получилось две линии (рис. 1).

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

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background , присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover , тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Рамка вокруг ссылки

В примере 6 показано, как изменять цвет рамки, используя свойство border . Подчёркивание текста через text-decoration можно убрать или оставить без изменения.

Пример 6. Изменение цвета рамки у ссылок

Чтобы рамка не «прилипала» к тексту, в примере вокруг него установлены поля с помощью padding . Можно также вместе с применением рамки добавить и фон, воспользовавшись свойством background .

Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover . Прозрачный цвет указывается с помощью ключевого слова transparent , в остальном стиль не поменяется.

A { border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */ } a:hover { border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ }

Рисунки возле внешних ссылок

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

Использование рисунков возле внешних ссылок хорошо тем, что оформленная таким образом ссылка однозначно отличается от обычных ссылок внутри сайта, а правильно подобранный рисунок говорит посетителю, что ссылка ведёт на другой сайт. Чтобы разделить стиль для локальных и внешних ссылок воспользуемся селектором атрибута. Поскольку все ссылки на другие сайты пишутся с указанием протокола, например http, то достаточно задать стиль для тех ссылок, у которых значение атрибута href начинается на http://. Это делается с помощью конструкции a {…} , как показано в примере 7.

Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right . Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left .

Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a , он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.

Facebook

Twitter

Вконтакте

Одноклассники

Google+

юзабилити — В чем разница между стилями ссылок?

Есть больше способов стилизации ссылок, чем просто «подчеркивание линии», пунктирное подчеркивание и пунктирное подчеркивание. Вы можете стилизовать ссылки любым способом, определенным в спецификации каскадных таблиц стилей (CSS) W3C. Например:

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

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

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

На скриншоте с сайта work.ua подчеркнутые слова «бухгалтер» и «продажи» не переносят вас на другую страницу (или другую часть той же страницы), а заполняют подчеркнутое слово в форме. Таким образом, они должны быть стилизованы таким образом, чтобы предполагалось, что они делают что-то , не выглядя как (навигационные) ссылки. Напротив, строка «Расширенный поиск» работает как ссылка и реализована как обычная ссылка. Таким образом, проблема на снимке экрана заключается в том, как отличить правильные навигационные ссылки («Расширенный поиск») от «ссылок», которые используют JavaScript для работы как кнопки («бухгалтер»).Как настоящие кнопки (с использованием элемента button ), так и «поддельные» кнопки (элементы и с обработчиками событий JavaScript) могут быть стилизованы под кнопки. Однако, если традиционный стиль кнопок будет отклонен, то, насколько мне известно, нет альтернативного соглашения , к которому можно было бы прибегнуть.

Пунктирное подчеркивание в гиперссылках — Nicepage Forum

Группа поддержки опубликовал это 18 февраля 2021 г.

Привет, Дик,

Извините за поздний ответ.

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

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

Введите требуемый текст (описание) в области «Код» на панели свойств.

Установите для желаемых гиперссылок отдельный класс, например, назовем его «подчеркивание».
Lorem ipsum

Затем выделите блок HTML и присвойте классу CSS имя «подчеркивание» >> Редактировать CSS

Вставьте этот код в CSS свойств страницы.

подчеркивание {
текстовое оформление: нет;
нижняя граница: 1px пунктирная # 444;
цвет: # 444;
}

В итоге в итоге у вас должно получиться что-то похожее на эти блоки.

Обратите внимание: Если вы хотите применить пунктирное подчеркивание для всех ваших гиперссылок, измените предыдущий фрагмент кода и добавьте его в Настройки сайта >> CSS:

. u-text a {
text-decoration: нет; }
.u-text a: link {
border-bottom: 1px dashed! important; }
.u-text a: visit {
border-bottom: 1px dashed! Important; }
.u-text a: active {
border-bottom: 1px dashed! Important; }

Если у Вас возникнут другие вопросы, свяжитесь с нами.
…………………………………………. ..
С уважением,
Ахмад М.
Группа поддержки Nicepage

Подпишитесь на наш канал YouTube: http: // youtube.com / nicepage? sub_confirmation = 1.
Следуйте за нами в Facebook: http://facebook.com/nicepageapp.

Последняя правка отредактирована командой поддержки

Как изменить цвета ссылок в HTML

Вы можете стилизовать ссылки по-разному с помощью свойств CSS.Как правило, для стилизации ссылок используются свойства color, font-family и background-color.

Есть три способа изменить цвет ссылки: встроенный , внутренний и внешний .

Встроенный метод¶

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

Пример изменения цвета ссылки встроенным методом: ¶

  

  
    
  
  
    
 Посетите наш веб-сайт . 
 
  

Результат

Внутренний метод¶

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

Посетите наш веб-сайт .

Существует 4 состояния ссылок, которые могут быть стилизованы в зависимости от того, в каком состоянии они находятся:

• a: ссылка - обычная, непосещенная ссылка,
• a: посещенная - ссылка, которую посетил пользователь,
• a: hover - ссылка, когда пользователь наводит на нее курсор,
• a: active - момент нажатия на ссылку.

При установке стиля для нескольких состояний ссылки следуйте этим правилам:

• a: hover ДОЛЖЕН идти после: link и a: loaded,
• a: active ДОЛЖЕН идти после: hover.

Пример использования различных состояний ссылки: ¶

  

  
    
    <стиль>
      
      ссылка {
        цвет: #ccc;
      }
      
      а: посетил {
        цвет: # 095484;
      }
      
      a: hover {
        цвет: # 8ebf42;
      }
      
      a: active {
        цвет: # 800000;
      }
    
  
  
    
 Посетите наш
      веб-сайт .
    
  
  

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

Чтобы изменить цвет подчеркивания, в первую очередь необходимо удалить его со значением« нет »текста -decoration и установите значение «none», затем добавьте свойство border-bottom с шириной (в данном случае, используемой как ширина подчеркивания гиперссылки) и свойствами стиля границы (сплошная, пунктирная или пунктирная). Для цвета текста привязки используйте свойство color.

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

  

  
    
    <стиль>
      a {
        текстовое оформление: нет;
      }
      ссылка {
        цвет: # 000;
        нижняя граница: сплошной 1px # ff0000;
      }
      а: посетил {
        цвет: # e600e6;
        нижняя граница: сплошная 1px # b3b3b3;
      }
      a: hover {
        цвет: # 2d8653;
        нижняя граница: 1px solid # 000099;
      }
    
  
  
    
 Посетите наш
      веб-сайт .
    
  
  

Пример стилизации ссылок указанными методами: ¶

  

  
    
    <стиль>
      a.one:link {
        цвет: #ccc;
      }
      a. one:visited {
        цвет: # 095484;
      }
      a.one:hover {
        цвет: # 8ebf42;
      }
      а.two: link {
        цвет: #ccc;
      }
      a.two: visit {
        цвет: # 095484;
      }
      a.two: hover {
        размер шрифта: 150%;
      }
      a.three: link {
        цвет: #ccc;
      }
      a.three: visit {
        цвет: # 095484;
      }
      a.three: hover {
        фон: # 8ebf42;
      }
      a.four: link {
        цвет: #ccc;
      }
      a.four: visit {
        цвет: # 095484;
      }
      а.four: hover {
        семейство шрифтов: моноширинный;
      }
      a.five: link {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: visit {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: hover {
        оформление текста: подчеркивание подчеркивания;
      }
    
  
  
    
 Наведите указатель мыши на ссылки и посмотрите, как они будут изменены: 
    

       Эта ссылка меняет цвет 
    
    

       Эта ссылка изменяет размер шрифта 
    
    

       Эта ссылка меняет цвет фона 
    
    

       Эта ссылка изменяет семейство шрифтов 
    
    

       Эта ссылка изменяет оформление текста 
    
  
  

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

Пример изменения цвета ссылки с помощью значения "наследовать" свойства цвета: ¶

  

  
    
    <стиль>
      п {
        цвет: зеленый;
      }
      p a {
        цвет: наследовать;
      }
    
  
  
     
 Пример 
 
    W3docs.com 
    
 Посетите наш
      Веб-сайт  W3docs.com .
    
  
  

Пример стилизации ссылок с помощью свойства CSS text-decoration-color: ¶

  

  
    
    <стиль>
      a {
        цвет оформления текста: серый;
      }
      ссылка {
        цвет: # 777777;
      }
      a: hover {
        цвет: # 2d8653;
      }
    
  
  
    
 Посетите наш  w3docs.com/">веб-сайт . 
  
  

Внешний метод¶

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

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

Подробнее о ссылках CSS.

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

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

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

   Это 

это ссылка без подчеркивания   

оформление текста: над чертой

   Это
это ссылка с надписью   

оформление текста: сквозное

   php">Это
это ссылка со сквозной строкой   

оформление текста: подчеркивание поверх

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

оформление текста: подчеркивание поверх линии синим пунктиром

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

оформление текста: подчеркивание поверх линии красным пунктиром

   Это
это ссылка с подчеркиванием поверх красного цвета   

оформление текста: подчеркивание поверх двойного красного цвета

   plus2net.com/html_tutorial/css_underline.php">Это
это ссылка с подчеркиванием поверх двойного красного цвета   

текст-украшение: подчеркивание поверх линии волнисто-зеленый

   Это
это ссылка с подчеркиванием наверху волнистым зеленым   

оформление текста: подчеркнутый верхний штрих пунктирный зеленый

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

Кнопки как ссылки

Эта статья написана командой plus2net.com .

Гиперссылки должны быть видны, но не слышны

Из-за того, что подчеркивание нарушает ход прозы, чтение гипертекста с множеством ссылок может быть затруднено, сродни чтению некоторых ранних информационных бюллетеней, опубликованных на компьютере, или электронной почты в формате HTML (я могу использовать 4 разных шрифта с 3 разными кеглями в 8 разных цветах? И курсив? Тогда я так и сделаю!). Все подчеркивания нарушают течение прозы и добавляют дополнительный акцент к словам и фазам, которые могут быть нежелательными в контексте обычного текста. Та же проблема возникает при выделении гиперссылок жирным шрифтом. Можно сделать ссылки другого цвета без подчеркивания, но иногда бывает трудно отличить текст от ссылок.

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

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

** Вот код CSS для добавления пунктирных подчеркиваний к вашим гиперссылкам:

A: ссылка {
цвет: # 000000;
оформление текста: нет;
нижняя граница: # 666666;
ширина границы: 0px 0px 1px 0px;
стиль границы: нет нет точек нет;
}

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

Комментарии читателей

Эта тема закрыта для новых комментариев. Спасибо всем кто ответил.

Подчеркивание с помощью CSS - tempertemper

Если вы не подчеркиваете ссылки, то должны. Есть несколько способов подчеркнуть ссылки; text-decoration: подчеркивание является наиболее очевидным, поскольку именно так оформляются ссылки по умолчанию, а border-bottom предлагает нам немного больше гибкости.Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью text-decoration: underline ?

Зачем вообще беспокоиться, если это уже работает для нас с границами? Что ж, text-decoration: подчеркивание лучше типографически , поскольку подчеркивания хорошо сидят на базовой линии слов, проходя через нисходящие элементы (части букв, которые идут ниже базовой линии в таких буквах, как g , p и y ), тогда как border-bottom подчеркивания располагаются под подстрочными элементами, что означает слишком большое расстояние между словами и их подчеркиванием, когда.

Не только это, но браузеры теперь обнаруживают нисходящие элементы, а text-decoration underline аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому по умолчанию он включен.

Итак, как мы можем получить это визуальное чутье с text-decoration: underline , которое у нас всегда было через border-bottom ?

Подчеркнутый, надстрочный

Здесь мы говорим о подчеркивании, но стоит указать это заранее с помощью небольшого тангенса: text-decoration-line , как и text-decoration , имеет 3 позиции:

• Под текстом ( подчеркивание )
• Сквозной текст ( сквозной )
• Над текстом ( над текстом )

text-decoration-line также допускает несколько значений, поэтому мы можем иметь строки под, сквозь и над одним и тем же блоком текста.Немного странно, но оно есть:

  оформление текста: подчеркивание; 
 текст-украшение-строка: подчеркивание поверх;  

Как выглядит подчеркивание

Вернуться к подчеркиванию. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; есть 5 вариантов:

• штриховая
• двойной
• пунктирная
• цельный
• волнистый

Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. Д.Просто добавьте объявление text-decoration-style :

  оформление текста: подчеркивание; 
 стиль оформления текста: волнистый;  

Цвет подчеркивания

Отличный. text-decoration-color позволяет изменить цвет подчеркивания. Он принимает любое нормальное значение цвета CSS, будь то ключевое слово, шестнадцатеричное, RGB, RGBA, HSL и т. Д .:

  оформление текста: подчеркивание; 
 цвет-оформления-текста: красный;  

Просто убедитесь, что подчеркивание соответствует желаемой цветовой контрастности!

Утолщение подчеркиваний

Наконец, мы можем контролировать толщину подчеркивания с text-decoration-Thickness , например:

  оформление текста: подчеркивание; 
 толщина украшения текста: 5 пикселей;  

Комбинации

Конечно, мы можем делать лоты одновременно:

  оформление текста: подчеркивание; 
 стиль оформления текста: волнистый; 
 цвет оформления текста: красный; 
 толщина украшения текста: 5 пикселей;  

Или мы можем использовать text-decoration-line вместо text-decoration :

  текст-украшение-строка: подчеркивание; 
 стиль оформления текста: волнистый; 
 цвет-оформления-текста: красный; 
 толщина украшения текста: 5 пикселей;  

стенография

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

  оформление текста: подчеркивание волнистым красным;  

Обратите внимание, что в этом примере я не добавил свойство text-decoration-Thickness .Для этого есть веская причина: поддержка браузера.

Постепенное улучшение

Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Более старые версии (и Internet Explorer 11 и ниже, разумеется) должны получить стандартный, но все же очень удобный для пользователя подчеркивание, если в вашем сбросе CSS нет ничего подобного:

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

Но имейте в виду, поддержка браузером зависит от:

• недвижимость, которую вы используете
• ценностей в собственности

Префиксы, необходимые для сокращения

Если вы используете стенографию, вам понадобятся префиксы поставщиков для Safari, чтобы делать ставки:

  оформление текста: подчеркивание волнистым красным; 
 -webkit-text-decoration: подчеркивание волнистым красным цветом;  

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

Браузер поддерживает text-decoration-line , text-decoration-style и text-decoration-color довольно хорошо. Каждый браузер реализовал все три одновременно, но управление толщиной подчеркивания было введено намного позже.Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).

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

  оформление текста: сплошной красный подчеркивание; 
 text-decoration: подчеркивание сплошным красным 5px;  

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

Хорошая новость заключается в том, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-Thickness: 0,1em совпадает с text-decoration-Thickness: 10% , так что вы можете также придерживаться em s, поскольку они фактически делают то же самое.

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

Будьте осторожны при объединении text-decoration-style с text-decoration-Thickness . Все, кроме стандартной сплошной линии (и, возможно, двойной линии ), может выглядеть беспорядочно, если толщина установлена ​​слишком большой. Эти волнистые , пунктирные и пунктирные почти всегда обрезаются в неопрятных местах, когда пропускают нижние элементы, и в конце слова.

Рекомендации по удобству использования

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

Значит, у вас все в порядке, если вам нужно:

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

Но будьте осторожны со всем остальным:

• text-decoration-line: line-through - это в основном то, как выглядят элементы с зачеркиванием
• text-decoration-line: overline выглядит странно, и вместо этого текст над ссылкой может выглядеть как ссылка
• волнистый , пунктирный или пунктирный подчеркивания может выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки

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

Что бы я сделал

Shorthand поставляется с префиксами поставщиков и изворотливыми двойными объявлениями, поэтому я бы начал с классического text-decoration: underline; и улучшите его. Я был бы склонен избегать чего-либо, кроме прямого подчеркивания, которое хорошо известно пользователям, поэтому text-decoration-line отсутствует; что оставляет у меня всплеск цвета и приятную толщину на основе для браузеров, отличных от Chromium:

  a {
 оформление текста: подчеркивание; 
 цвет-оформления-текста: красный; 
 толщина украшения текста: 0.1em; 
}  

Убрать подчеркивание из главного меню a: hover

Здравствуйте,

Это происходит из настроек эффекта ссылки, и вы можете настроить его через «Внешний вид»> «Настройка»> «Заголовок»> «Меню», а также установить эффект ссылки как отсутствие эффекта или установить его по необходимости.

Если проблема не решена, поделитесь URL-адресом веб-сайта, чтобы проверить это.

Спасибо за ответ. Упомянутый вами параметр уже установлен на «none», но, насколько я могу судить, эффекты подчеркивания в настройке «link effect» - это настройка контура css.Что у меня есть и от чего я хочу избавиться, так это, на мой взгляд, однозначно text-decoration: underline.

Вы можете проверить это здесь, в главном меню вверху страницы:
https://www.thomaswasserab.com/photo/

Спасибо за уделенное время.

Томас

Здравствуйте,

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

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

Привет,

не понимаю, что вы имеете в виду. У меня не установлен плагин кеширования.

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

Томас

Здравствуйте,

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

  a: hover {
оформление текста: подчеркивание! важно;
}  

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

Абхишек,

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

Еще раз спасибо за помощь и с наступающим Новым годом!
Томас

Добро пожаловать и с новым годом вас.

Информацию об этой проблеме с подчеркиванием см. В сообщении: https: // www.facebook.com/groups/OceanWP/permalink/3673478266074966/