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

Разное 

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Html убрать подчеркивания в a. Использование фонового цвета

В Word можно подчеркнуть надписи, пробелы, знаки табуляции. Доступны разные виды линий: волнистые, прямые, двойные. Ещё есть разделители страниц, таблицы . Красными, зелёными и синими «волнами» программа выделяет ошибки и неправильно оформленный текст. Чтобы пользоваться данным инструментарием, разберитесь, как добавить эти линии, как изменить их атрибуты и как убрать подчёркивание в Word, если его нельзя выделить.

В редакторе Word есть несколько способов подчеркивания текста. О них мы расскажем ниже.

Сделать полоску под надписью можно так:

  1. Выделите фрагмент.
  2. На главной панели меню найдите букву «Ч» с чёрточкой под ней. Или нажмите Ctrl+U. Избавиться от линии можно этим же сочетанием клавиш.
  3. Чтобы печатать уже с полосками, кликните на значок «Ч», напишите что-то, и снова кликните на «Ч».

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

  1. Выделите фрагмент.
  2. Нажмите маленькую стрелочку рядом с буквой «Ч».
  3. В выпавшем списке выберите расцветку и тип: двойная линия, штриховая, толстая, волнистая.

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

  1. Через раздел «Таблицы» (или Вставка — Таблицы, если у вас Word 2007) добавьте сетку.
  2. Напишите в ней пару слов.
  3. Кликните по рамке правой кнопкой мыши.
  4. «Границы и заливка».
  5. Откроются параметры. Справа будет область, в которой есть настройки видимости границ. Оставьте только нижнюю линию. Она останется на месте, даже если вы удалите текст.
  6. В этом же меню выберите тип и толщину полоски.

Можно сделать проще:

  1. После добавления сетки вверху окна появится раздел «Работа с таблицами». В нём перейдите во вкладку «Конструктор».
  2. Нажмите стрелку рядом с «Границы».
  3. Оставьте активной только опцию «Нижняя граница».

Такие полоски нужны при работе с HTML-документами. Этот приём подходит для создания полей ввода и веб-форм.

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

Вот как подчеркнуть слово в Word:

  1. Выделите текст.
  2. Кликните на чёрную стрелочку рядом с буквой «Ч».
  3. Пункт «Другие».
  4. В поле «Подчёркивание» выберите «Только слово».

Подчёркивание пробелов

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

  1. Самый простой метод — нажмите Shift+[-] (дефис; без скобок). Появится линия. Это не часть оформления, а символ. К нему применимы все настройки шрифта.
  2. Чтобы изменить цвет полоски , найдите на панели меню кнопку с пиктограммой в виде буквы «А». Нажмите на стрелочку рядом с ней — откроется палитра.

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

В Word можно добавить полосы к знакам табуляции. Их разметку легче настроить.

  1. Нажмите клавишу «TAB». Она находится над кнопкой Caps Look. Курсор Word сдвинется.
  2. Лучше активировать отображение скрытых символов, чтобы видеть знаки табуляции, а не только набор слов. Для этого кликните на панели инструментов на иконку, похожую на букву «П» (кнопка называется «Абзац»). Или нажмите Ctrl+Shift+* (звёздочка). Табуляция в Word выглядит как стрелочка, указывающая вправо.
  3. Выделите её.
  4. Нажмите Ctrl+U.

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

Границы страниц

Если в Word ввести три звёздочки или три дефиса подряд, они могут стать горизонтальной линией (иногда для этого надо нажать Enter). Это автозамена превращает их в границу страницы . Чтобы создать определённый вид такой линии, надо сделать так:

  • Введите три знака равенства (=), чтобы создать двойную полосу.
  • Три звёздочки (*) — пунктирную.
  • Три дефиса (-) — простую.
  • Три нижних пробела (_) — жирную.

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

Вот как убрать подобную линию:

  1. Поставьте курсор Word в начало строки с полоской.
  2. Нажмите Delete.

Если этот способ не поможет, лучше сделать так:

  1. Раздел «Разметка страницы». Он находится в строке меню наверху окна.
  2. Кнопка «Границы страниц».
  3. В поле «Тип» задайте параметр «Нет». Горизонтальная линия пропадёт.

Красное, зелёное и синее подчёркивание — проверка орфографии

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

  • Красная. Неправильно написано слово, или его нет в базе данных Office.
    Красным цветом также обозначаются повторы.
  • Зелёная. Ошибки с грамматикой, стилистикой, пунктуацией. Лишние скобки. Несогласованный текст.
  • Синяя. Несоответствие формата.

Обычно эта функция приносит пользу. Но если вы правильно всё написали, то внезапно появившиеся волнистые линии будут раздражать и мешать. Как убрать подчёркивание в Word, если оно поставлено автоматически при проверке орфографии:

  1. Кликните правой кнопкой мыши на фрагмент, под которым появилась волнистая линия.
  2. Чтобы избавиться от неё, выберите пункт «Пропустить».
  3. Чтобы Word запомнил выбранное слово и записал его в свой словарь, нажмите «Добавить».

Если вы хотите совсем отключить проверку, откройте настройки:

  1. Перейдите в меню Сервис — Правописание (в Word 2007 для этого надо нажать на логотип Office в левом верхнем углу и в выпавшем списке выбрать «Параметры»).
  2. Уберите галочку в «Автоматически проверять орфографию» или отметьте «Скрыть ошибки только в этом документе». Автопроверка перестанет вам докучать. Но искать опечатки будет сложнее.

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

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

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

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

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

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

Hello, World!

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

Hello, World!

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

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

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

Hello, World!

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

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

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

Hello, World!

Это должно решить вашу проблему.

28 февраля 2017

Как убрать подчеркивание в Word? Если вы задались таким вопросом, значит с вашим текстом что-то не так. Дело в том, что так программа указывает вам на какие-то несовершенства написанного в документе материала. Какие именно недостатки выискивать и что делать, если на самом деле с текстом все в порядке?

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

Это самый простой вопрос. Как убрать подчеркивание в Word красного цвета, знают все, кто работает с программой не первый день. Красный цвет в данном текстовом редакторе — самый распространенный маркер. Он указывает на то, что в подчеркнутом тексте находится какая-то ошибка. Точнее, не какая-нибудь, а одна из этих:

  • подчеркнутое слово отсутствует в словаре,
  • слово написано с ошибкой,
  • также красным Word подчеркивает повторения.

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

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

Есть два варианта, как можно справиться с подчеркиванием красного или зеленого цвета:

  1. Чтобы убрать такое подчеркивание, достаточно исправить ошибки.
  2. Также можно нажать на «Пропустить», чтобы программа проверки перестала «видеть» этот участок.

Видео по теме

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

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

Как и с прочими ошибками, эту можно убрать одним из двух способов:

  1. Исправить её. Если вы не понимаете, в чем ошибка, нажмите на проблемный участок правой кнопкой мыши.
  2. Как и прочие ошибки, эту тоже можно пропустить, нажав на соответствующую кнопку.


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

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

  1. Выделить текст, под которым нужно убрать подчеркивание, после чего нажать сочетание клавиш Ctrl+U.
  2. Также можно пойти более долгим путем: выделить текст, найти в верхнем поле программы во вкладке «Главная» букву «Ч», подчеркнутую снизу. После нажатия на нее линия под выделенным текстом пропадет.

Источник: fb.ru

Актуально

Разное
Разное

Приложение 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 — Убрать синее подчеркивание со ссылки

Лучший ответ

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

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

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

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

Например:

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

См. W3.org для получения дополнительной информации о псевдодействии пользователя. -classes: hover,: active и: focus.

text-decoration: none !important должен его удалить .. Вы уверены, что border-bottom: 1px solid не скрывается? (Проследите вычисленный стиль в Firebug / F12 в IE)

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

style="text-decoration:none;"

Примере:

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

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

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

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

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

a:hover, a:visited, a:link, a:active {
    text-decoration: none!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

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

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

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

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

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

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

Этот фрагмент предполагает, что он привязан, измените его оболочку соответствующим образом … и используйте специфичность вместо «! Important» после того, как вы отследите основную причину.

Не видя страницы, сложно строить предположения.

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

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

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

a {
   text-decoration:none;
}

Это удалит подчеркивание КАЖДОЙ ССЫЛКИ на вашей странице!

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

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

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

border:0;

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

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

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

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

ИЛИ

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

ИЛИ

a{text-decoration: none !important;}

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

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

В моем коде. Как правило, независимо от того, какая это ссылка, цвет текста становится синим, а ссылка остается неизменной.

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

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

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

Как отмечали другие, похоже, что вы не можете переопределить вложенные стили оформления текста … НО вы можете изменить цвет текста-украшения.

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

text-decoration-color: transparent;

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

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

Код позади:

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

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

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

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

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

Пример 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;
}

Разочарованы синими ссылками в электронной почте? Покори их навсегда

Перейти к основному содержанию
  • Советы и ресурсы

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

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

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

  • Что такое синие ссылки?
  • Стоит ли их удалять?
  • Как изменить их для каждого почтового клиента
  • Пограничные случаи в качестве запасного варианта (и для Outlook)

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


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

    Общие проблемы и исправления →

    • Что такое синие ссылки?

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

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

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

    Большинство версий Apple Mail для iOS окрашивают телефонные номера, URL-адреса и адреса электронной почты в синий цвет, но оставляют физические адреса и время в исходном стилизованном цвете (красном, в приведенном ниже примере).

    В iOS 13 контент по-прежнему связан, но сохраняется исходный цвет стиля:

    В нашем тестировании эти вещи являются первыми кандидатами на получение связанного контента (синего или другого цвета):

    • Адреса
    • Даты
    • Адреса электронной почты
    • URL-адреса веб-сайтов
    • Преимущества Times
    00 Телефонные номера0 синие ссылки: удалять их или нет?

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

    Это поднимает вопрос: должны ли мы вообще переопределять это поведение?

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

    Что же делать емейл-дизайнерам?

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

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

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

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

    Итак, как дизайнеры электронной почты могут работать с синими ссылками?

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

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

    У этого метода много преимуществ. Вы можете:

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

    Это беспроигрышный вариант как для вас, так и для ваших подписчиков.

    Единственный нюанс? Различные почтовые клиенты делают разные вещи при автоматической привязке текста, поэтому вам нужно несколько правил CSS, чтобы переопределить стиль.

    В ваших письмах есть синие ссылки?

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

    Подробнее →

    Переопределение синих ссылок в Apple Mail

    При создании ссылок вокруг текста Apple Mail добавляет к этим ссылкам дополнительные атрибуты помимо обычного атрибута href. Вот простой пример:

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

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

    a[x-apple-детекторы данных] {
цвет: наследовать !важно;
            украшение текста: нет !важно;
            размер шрифта: наследовать !важно;
            семейство шрифтов: наследовать !важно;
            вес шрифта: наследовать !важно;
            высота строки: наследовать !важно;
}

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

    Чтобы люди знали, что контент доступен для кликов, измените значение цвета с inherit на шестнадцатеричный код цвета, который соответствует дизайну вашего бренда (например, #77d6fc для светло-голубого) и измените значение text-decoration на подчеркивание.

    Переопределение синих ссылок в Gmail

    Вместо добавления атрибутов к тексту с автоматической ссылкой Gmail делает совершенно другое. При обработке HTML-кода электронной почты Gmail преобразует тип документа в элемент подчеркивания (u). Зная это, вы можете затем добавить хук в свой собственный HTML для целевых элементов только для Gmail. Обычно это делается путем добавления идентификатора к элементу body.

    <тело>

    Хотя есть несколько способов исправить синие ссылки Gmail, мы рекомендуем следующее: Нацельте все ссылки, содержащиеся в теле письма Gmail, с помощью следующего тега стиля, отменяя любой добавленный стиль в процессе:

    ты + #тело а {
            цвет: наследовать !важно;
            украшение текста: нет !важно;
            размер шрифта: наследовать !важно;
            семейство шрифтов: наследовать !важно;
            вес шрифта: наследовать !важно;
            высота строки: наследовать !важно;
}

    Он использует те же свойства CSS, что и трюк Apple Mail, только специально примененный к Gmail.

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

    Переопределение синих ссылок в Samsung Mail

    Samsung Mail использует метод, аналогичный Gmail. Однако вместо преобразования одного элемента в другой Samsung Mail добавит в электронное письмо определенный идентификатор под названием «MessageViewBody». Как и в случае с Gmail, нацельтесь на этот идентификатор и любые ссылки, содержащиеся в вашем блоке стилей:

    #MessageViewBody {
            цвет: наследовать !важно;
            украшение текста: нет !важно;
            размер шрифта: наследовать !важно;
            семейство шрифтов: наследовать !важно;
            вес шрифта: наследовать !важно;
            высота строки: наследовать !важно;
}

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

    Теперь все вместе

    Хотя было бы удобно объединить все вышеперечисленные селекторы CSS в одно правило, Gmail разделяет CSS с помощью селекторов атрибутов, поэтому исправление будет удалено из Gmail, позволяя синим ссылкам свободно перемещаться.

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

    В совокупности ваш HTML может выглядеть так:

    
<голова>
<стиль>
a[x-apple-детекторы данных] {
цвет: #77d6fc !важно;
размер шрифта: наследовать !важно;
семейство шрифтов: наследовать !важно;
вес шрифта: наследовать !важно;
высота строки: наследовать !важно;
}
ты + #тело а {
цвет: #77d6fc !важно;
размер шрифта: наследовать !важно;
семейство шрифтов: наследовать !важно;
вес шрифта: наследовать !важно;
высота строки: наследовать !важно;
}
#MessageViewBody {
цвет: #77d6fc !важно;
размер шрифта: наследовать !важно;
семейство шрифтов: наследовать !важно;
вес шрифта: наследовать !важно;
высота строки: наследовать !важно;
}


<тело>
 <ваш код электронной почты идет сюда как обычно>

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

    без исправления с Fix со стилем Fix

    .

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

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

    Этот метод включает в себя обертывание кандидатов на автоматические ссылки с элементом, который затем используется с помощью CSS в заголовке электронного письма. Элемент контейнера имеет класс, применяемый для таргетинга. До того, как дизайнеры выяснили, что они могут использовать хак x-apple-data-detectors, этот трюк обычно использовался для синих ссылок Apple Mail, поэтому вы обычно увидите что-то вроде «appleLinks», используемого для класса, но это может быть что угодно.

    В нашем примере мы будем использовать класс blueLinks:

    +1 (800) 123-4567

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

    . blueLinks {
            цвет:наследовать !важно;
            украшение текста: нет !важно;
}

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

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

    Ваше исправление для клиентов Outlook для настольных ПК

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

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

    Если вы не хотите, чтобы это выглядело как ссылка, вы все равно можете добавить тег и оформить его так, чтобы он выглядел как остальная часть копии.

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

    www.litmus. com становится w‍ww‍.‍litm‍us.‍com

    Это не самая красивая вещь, но она работает. Однако это может вызвать трения с вашими подписчиками, если они попытаются скопировать и вставить URL-адрес. Иногда ‍ отображаются странно или мешают при вставке в разные программы. Например, копирование и вставка URL-адреса, когда он закодирован, как показано выше, в адресной строке Firefox приводит к поиску в Google, а не к Litmus.com:

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

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

    Исправьте стиль, а не функциональность

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

    Создавайте брендовые безошибочные электронные письма с Litmus

    Посмотрите, как выглядят ваши электронные письма (больше нет синих ссылок, верно?) в более чем 100 почтовых клиентах, приложениях и устройствах. Попрощайтесь со сломанными электронными письмами. Вау!

    Начать бесплатную пробную версию →

    Первоначально опубликовано 2 июля 2019 г. Джейсоном Родригесом. Последнее обновление: 23 июля 2021 г.

    Самые популярные

    1. Советы и ресурсы

      . Падать!

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

      Узнать больше

    Маркетинг по электронной почте стал лучше

    Удалить ссылку подчеркивания на кнопках — Beaver Builder

    злой хк

    #1

    Привет. Я использую Dynamik Website Builder с BB. Я заметил, что на всех моих кнопках при наведении курсора на текст появляется подчеркивание. Мне это не нравится и я хочу удалить это. Это то, что мне нужно сделать в BB или DWB? Пожалуйста, дайте возможность удалить ссылку на отдельных кнопках, а также на всем сайте. Спасибо.

    кччай

    #2

    Привет, Кассим,

    Не могли бы вы поделиться с нами URL-адресом своего веб-сайта, чтобы мы могли лучше рассмотреть вашу проблему? Я считаю, что это можно исправить с помощью специального CSS. Вы можете использовать вариант личного ответа ниже.

    Спасибо!

    КС

    evilhq

    #3

    Сайт еще не доступен для просмотра. Могу отправить скриншот.

    кччай

    #4

    Эй, Кассим,

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

     .fl-builder-content .fl-module.fl-module-button a.fl-button:hover {
    текстовое оформление: нет;
}

    Спасибо!

    КС

    evilhq

    #5

    Где разместить этот фрагмент кода?

    злойхк

    #6

    Это размещается где-то в фактических настройках модуля кнопок для BB? Я не вижу места для этого. Или это помещается в Dynamik Website Builder?

    кччай

    #7

    Привет, Кассим,

    Извините, я не использовал эту тему раньше. Вам нужно будет вставить его в раздел «Пользовательский код CSS» где-нибудь в настройках темы. Я нашел этот скриншот ниже по этой ссылке http://cobaltapps.com/dynamik-website-builder-screenshots/. Я думаю, вы просто вставите туда фрагмент CSS.

    View post on imgur.com

    Спасибо!

    КС

    evilhq

    #8

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

    лилечамней

    #9

    Hi Kassim and KC,

    Думал, что я хотел бы вмешаться, чтобы сказать, что поведение по умолчанию для DWB и BB должно иметь НИКАКОЕ подчеркивание на любых соединениях.

    Просто для проверки я установил новые локальные тестовые сайты в Windows 10 и OS X, используя последние версии WP 4.4, DWB 1.9.4, Genesis 2.2.5 и BB 1.6.4.6

    На новой странице я добавил Кнопка BB, выноска (с кнопкой) и призыв к действию (с кнопкой) с использованием значений по умолчанию для всех трех.

    Протестировано в FF, Chrome, IE 11, Edge и Opera в Windows 10, а также в Chrome и Safari на Mac. Никаких подчеркиваний при наведении на любой из них.

    Итак, я пошел в Dynamik> Дизайн> U-Control> Параметры шрифта> Ссылки на шрифты> Подчеркивание ссылки и установил для него значение «При наведении», которое изменяет ВСЕ ссылки шрифта на это значение (одна из удобных функций DWB).

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

    Я бы предположил, что, возможно, это делает что-то еще, поскольку это не поведение по умолчанию ни DWB, ни BB, ни комбинация из двух

    Ура!
    Лайл

    evilhq

    #10

    Согласен. Странно, потому что у меня ни одна из настроек DWB не изменена для подчеркивания каких-либо ссылок. Я проверил, прежде чем что-либо публиковать здесь, чтобы убедиться, что в DWB ничего не установлено для подчеркивания ссылок, и ничего не было.

    кччай

    #11

    Эй, Лайл,

    Спасибо за разъяснение!

    Kassim,

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

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

    Спасибо!

    КС

    evilhq

    #12

    Какой CSS необходим для удаления подчеркивания ссылки при наведении на кнопку формы подписки?

    Бенкарло

    №13

    Эй, Кассим,

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

    Бен

    evilhq

    №14

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

    Дэнни

    №15

    Привет Кассим,

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

     a.fl-кнопка: наведите {
    украшение текста: нет !важно;
}

    Спасибо,
    Дэнни

    evilhq

    №16

    Спасибо Дэнни. Это сработало.

    Дэнни

    # 17

    Нет проблем, Кассим. Рад слышать, что ваша проблема решена.

    система закрыто

    # 18

    Как убрать подчеркивание в ссылках — Webflow Tips — Forum

    thesergie (Сергей Магдалин)

    #1

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

    • Выберите ссылку (или, если у вас есть текст внутри блока кнопок, выберите его)
    • Присвойте ему класс
    • По умолчанию установлено подчеркивание:

    • Отмените выбор стиля подчеркивания, и мы добавим text-decoration:none к вашему классу:

    • БЛАМ! Теперь что-либо с тем же классом не имеет подчеркивания.

    ПРИМЕЧАНИЕ. Текст внутри блока ссылок получит подчеркивание, которое вы не сможете удалить, пока не выберете этот блок ссылок и не удалите из него подчеркивание. Нажмите стрелку вверх на клавиатуре или используйте навигатор, чтобы найти блок ссылок, внутри которого находится ваш текст.

    11 лайков

    Cesc_Vilanova (Сеск Виланова)

    #3

    Привет,

    Я пытаюсь сделать это с помощью блока ссылок, но у меня не получается.

    Это снимок экрана, на котором вы видите мое рабочее пространство веб-потока

    Я делаю что-то не так?

    Большое спасибо!

    Серджи (Сергей Магдалин)

    #4

    @Cesc_Vilanova вы выбираете текстовый диапазон, а не ссылку (которая применяет подчеркивание). Нажмите стрелку вверх на клавиатуре, чтобы перейти к родительскому элементу, который, вероятно, является блоком ссылок, затем вы можете удалить подчеркивание.

    Дайте мне знать, если это сработает.

    6 лайков

    Cesc_Vilanova (Сеск Виланова)

    #5

    Проблема решена. Большое спасибо!

    1 Нравится

    (боцман Одейеми)

    #6

    Нельзя ли просто установить это в теле? Или есть способ внедрить его в normalise.css. Я имею в виду, что в normalise.css есть раздел для типографики, и я должен был подумать, что webflow может установить их по умолчанию следующим образом:

    /* ============================================= ============================
    Ссылки
    ==================== ================================================== ===== /
    /     *

    • Удалить серый цвет фона у активных ссылок в IE 10.
      /
      a {
      фон: прозрачный;
      }
      /       *
    • Адрес схема несоответствие между Chrome и другими браузерами.
      /
      a:focus {
      контур: тонкий пунктирный;
      украшение текста: нет;
      }
      /       *
    • Улучшить читаемость при фокусировке, а также при наведении курсора мыши во всех браузерах.
      */
      a:активный,
      a:hover {
      контур: 0;
      текстовое оформление: нет;
      }
      a:link {
      text-decoration: none;

    }
    a:visited {
    text-decoration: none;

    }

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

    Серджи (Сергей Магдалин)

    #7

    Спасибо за предложение @topelovely. Итак, вы хотите, чтобы все ссылки по умолчанию не имели подчеркивания? Мы использовали браузер по умолчанию, но мы можем изменить его в normalize. Не уверен, что все хотят, чтобы ссылки не подчеркивались, но я вижу, что для большинства ссылок/кнопок будет удалено подчеркивание.

    1 Нравится

    (Крис Рэймонд)

    #8

    Довольно стандартно оформлять ссылки по-разному для каждого сайта и разрешать разные стили для нижнего колонтитула и основного контента. Кажется странным не позволять глобально стилизовать все ссылки так же, как все h2 и т. д., прямо на панели инструментов, без добавления класса. Мне кажется, это не лучшая практика написания css.

    Серджи (Сергей Магдалин)

    #9

    Я согласен @ChrisR! Действительно, это более эффективный способ разработки веб-сайта. У нас есть планы позволить пользователю либо выбрать всю ссылку (тег и ), либо просто добавить класс в будущем, но мы просто не смогли над этим поработать, потому что это большая функция, позволяющая использовать этот тип функциональности. . Я тоже не могу дождаться

    1 Нравится

    (Крис Рэймонд)

    No related posts.

    Автор записи

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

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