Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

html — CSS. Задать стиль для ссылки для телефона

Задать вопрос

Вопрос задан

Изменён 7 лет 2 месяца назад

Просмотрен 2k раз

Можете подсказать, как поменять стиль у ссылки для телефона в CSS?
Меняю стиль, а изменяется только шрифт. Т.е в браузере телефон отображается, как ссылка. Мне же нужно отобразить телефон, как текст, но при этом сделать его «кликабельным».

Сам код:

.telephonereplymidle {
    color: black;
    font-size: 48px;
    font-family: "OpenSans";
    font-weight: bold;
    line-height: 0.208;
    text-align: left;
    position: absolute;
    left: 22. 58px;
    top: 129.009px;
    width: 414px;
    height: 42px;
    border-bottom-style: dashed;
}
<div><a  href="tel:+78422993366">8 (8422) 99 - 33 - 66</a></div>
  • html
  • css
  • шрифты
  • href

Вообще в <div> нет необходимости… Можно объединить в один a тэг с классом.

Ну если Вам надо убрать синее подчеркивание, то используйте text-decoration: none.

.telephonereplymidle {
    color: black;
    font-size: 48px;
    font-family: "OpenSans";
    font-weight: bold;
    line-height: 0.208;
    text-align: left;
    position: absolute;
    left: 22.58px;
    top: 129.009px;
    width: 414px;
    height: 42px;
    border-bottom-style: dashed;
    text-decoration: none;
}
<a  href="tel:+78422993366">8 (8422) 99 - 33 - 66</a>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Цветные ссылки — Учебник HTML

❮ Назад Далее ❯

HTML ссылка отображается другим цветом в зависимости от того, была ли она посещена, не посещена или активна.

HTML Цвет ссылок

По индексу ссылка будет выглядеть так (во всех браузерах):

  • Непосещенная ссылка подчеркнута синим цветом
  • Посещенная ссылка подчеркнута фиолетовым цветом
  • Активная ссылка подчеркнута красным цветом

Вы можете изменить цвета состояния ссылки, используя CSS:

Пример

Здесь непосещенная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовой без подчеркивания. Активная ссылка будет желтой и подчеркнутой. Кроме того, при наведении курсора мыши на ссылку (a:hover) она станет красной и подчеркнутой:

<style>
a:link {
  color: green;
  background-color: transparent;

  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Попробуйте сами »

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

Ссылка также может быть стилизована как кнопка с помощью CSS:

Это ссылка

Пример

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

Попробуйте сами »

Чтобы узнать больше о CSS, перейдите на CSS Учебник.

HTML Тег ссылка

Тег Описание
<a>Определяет гиперссылку

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

❮ Назад Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть

ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3. CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

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

Прозрачно до невозможности.

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

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

Есть 3 способа удалить эти строки под ссылкой с помощью CSS. Кто они такие?

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

Не весь интерактивный текст нуждается в подчеркивании.

В CSS строка под ссылкой управляется свойством text-decoration.

Свойство text-decoration является сокращением для 4 различных свойств:

  1. text-decoration-line (управляет наличием линии под текстом, над текстом или под ссылкой)
  2. text-decoration-thickness (управляет толщиной линии над или под ссылкой или текстом)
  3. text-decoration-color (управляет цветом подчеркивания)
  4. text-decoration-style (может быть сплошным, волнистым, двойным)

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

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

Как убрать строку под ссылкой

Чтобы удалить подчеркивание ссылки с помощью встроенного CSS, вы можете установить для text-decorection значение none:

.
 Моя ссылка

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

Но как убрать подчеркивание со всех ссылок на странице с помощью одной команды CSS?

Код CSS для удаления подчеркивания со всех гиперссылок

Чтобы убрать подчеркивание со всех гиперссылок на вашей странице, назначьте text-decoration: none самому тегу a, как показано в этом примере:

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

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

Вы должны поместить этот код в теги стиля в исходном коде HTML-страницы.

Еще один способ удалить строку из ссылки в CSS

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

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

Примечание: это удалит подчеркивание со всех ссылок на вашей странице.

Вот ссылка на эту страницу с text-deocration-line: none apply:

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

Скрыть строку под ссылкой, изменив ее цвет на цвет фона

Это не просто взлом.

Для этого есть вариант использования.

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

 а {
  цвет оформления текста: #ffffff;
}

Это установит цвет подчеркивания на белый, такой же, как и фон.

(Конечно, text-decoration-line:none; все еще можно использовать для того же эффекта.)

 а: наведите {
  цвет оформления текста: #ff0000;
}

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

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

Помните, что гиперссылки имеют 4 разных состояния:

  1. a:ссылка ссылка не была посещена, наведена или нажата ссылка
  2. a:посещена эта ссылка была посещена (нажата)
  3. a:наведение курсора мыши в данный момент находится над текстовой ссылкой
  4. a:активно кнопка мыши нажата, но еще не отпущена

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

.
 a:link {украшение текста: нет}
a: посетил {украшение текста: нет}
a:hover {украшение текста: нет}
a:active {украшение текста: нет}

#css #remove #underline #from #link

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

html

6 месяцев назад

от Aqsa Yasin

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

Пример 01:
Давайте рассмотрим первый пример HTML, чтобы добавить ссылку на веб-страницу HTML. Затем мы обсудим способ удаления подчеркивания этой ссылки. Мы создали новый текстовый файл с названием «CSS». Этот файл был открыт в коде Visual Studio. Мы начали наш код с использования основного HTML-тега «html». В теге «head» этого HTML-скрипта мы использовали тег «title», чтобы назвать или назвать нашу веб-страницу «Удалить подчеркивание».

Внутри тега body мы добавили наш контент для отображения на веб-странице с помощью некоторых полезных тегов HTML. Первый тег, который мы использовали, — это тег заголовка размера 2, «h3». H3 — второй по величине заголовок в HTML-скриптах. Этот заголовок будет отображаться на странице без оформления и в другом формате. Следующий тег, который мы использовали, — это тег абзаца «p». Он содержит простой текст вместе со ссылкой в ​​нем, которая прикреплена к нему с помощью тега привязки «a», за которым следует «href» для добавления URL-адреса. Эта ссылка может быть путем к какому-либо изображению на вашем локальном компьютере или какой-либо веб-странице в Интернете. Мы предоставили путь к изображению на нашем локальном компьютере (например, index.png). Все, что вы указали в теге привязки «a», будет подчеркнуто и выделено на веб-странице. Речь идет об использовании ссылок на HTML-странице. Давайте сохраним и запустим этот код, используя кнопку «Выполнить» на панели задач кода Visual Studio. Запустите этот код в браузере Chrome.

Веб-страница с названием «Удалить подчеркивание» была открыта в браузере, как видно из приведенного ниже вывода. На белом экране есть заголовок «Ссылка с подчеркиванием». После этого у вас есть простой однострочный абзац под ним со ссылкой, прикрепленной к его слову «Логотип». Вы можете видеть, что слово «Логотип» подчеркнуто и выделено синим цветом. Нажмите на слово «Логотип», чтобы увидеть, что получится.

Веб-страница была направлена ​​на показанное ниже изображение (index.jpg), расположенное на нашем локальном компьютере. Изображение содержит простой анимированный логотип.

Давайте обновим наш HTML-код, чтобы удалить строку, используемую для подчеркивания ключевого слова ссылки «Логотип». Для этого мы сначала обновили заголовок h3 (т. е. «Ссылка без подчеркивания»). После этого мы использовали тег CSS «стиль» в теге привязки «а», чтобы установить для свойства «текстовое оформление» значение «нет». Свойство «text-decoration», установленное в «none», удалит все стили, примененные к конкретному ключевому слову ссылки «Лого», и сделает его простым обычным текстом. Давайте сначала сохраним этот код.

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

Пример 2:
Давайте посмотрим на новый пример удаления подчеркивания из ссылок, представленных на веб-странице HTML. Этот пример будет отличаться, потому что мы использовали две ссылки разных типов во внутреннем теге абзаца тега body для скрипта HTML. Мы добавили два заголовка и два абзаца в тело веб-страницы с помощью тегов. Первый и второй заголовки: «Ссылка с подчеркиванием» показывают, что обе ссылки будут подчеркнуты. Внутри тегов абзаца мы использовали тег привязки «a» для добавления ссылок на определенные URL-адреса. Самый первый URL-адрес абзаца указывал на то же самое изображение index.png. Тег стиля CSS использовался для установки фиолетового цвета ключевого слова ссылки «Лого» в соответствии со свойством цвета. URL-адрес второго абзаца указывал на новый URL-адрес простого текстового файла, расположенного на нашем локальном компьютере (например, test.txt), а тег стиля CSS использовался для установки коричневого цвета его ключевого слова ссылки «Файл» в соответствии с свойство цвета.

Давайте стилизуем их с помощью тега стиля в теге заголовка HTML-файла. Мы установили поля в 15 пикселей для заголовков и абзацев, а также установили свойства ссылки и наведения. Свойство text-decoration использует значение «подчеркивание», чтобы подчеркнуть оба ключевых слова. Толщина линии установлена ​​на 6 пикселей. Цвет свойств при наведении был установлен на «Аква». Давайте сохраним и отладим этот код в Visual Studio.

Вывод для приведенного выше кода показывает два заголовка с двумя абзацами. Подчеркнутое ключевое слово «Логотип» содержит путь к изображению, а подчеркнутое слово «Файл» направит вас к текстовому файлу (например, test.txt.)

Когда вы нажмете на ключевое слово «Файл», вы перейдете к файлу test.txt, как показано ниже.

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

Чтобы удалить подчеркивание из обоих слов ссылки, нам нужно установить для свойства text-decoration ссылки значение «none». Мы не обновляли остальную часть кода, чтобы избежать неудобств. Чтобы увидеть, как он работает, нам нужно сначала сохранить его, нажав Ctrl+S, а затем отладить его с помощью кнопки «Выполнить» в коде Visual Studio.

Оставить комментарий

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

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