html — Как убрать подчеркивание?
Вопрос задан
Изменён 5 лет 8 месяцев назад
Просмотрен 994 раза
Добрый день! Я дико извиняюсь за следующий глупый вопрос, но факт остается фактом, впервые за много лет работы со стилем к моему большому стыду не могу справиться вот с чем: как у span убрать подчеркивание, в том числе и при наведении как на картинку, так и на сам span? При чем у a подчеркивание есть и должно быть, т.е. на странице ссылки при наведении подчеркиваются, и при этом мне нужно исключить подчеркивание именно у <span>. Каким только способом не пытался, хоть тресни — подчеркивает. Никогда бы не подумал, что приду сюда с таким вопросом.
span.help,
a span.help,
a:hover span.help {
text-decoration: none;
}<p> <a href="#"><img src="kartinka.jpg"> <span>Мемориальный комплекс</span> </a> </p>
- html
- css
Это происходит, потому что подчеркивание применяется именно к a, а не span, и манипулируя стилями span, вы не сможете повлиять на стили a. Поэтому единственный выход — ввести новый класс, например, help-a:
a {
text-decoration: none
}
a:hover {
text-decoration: underline;
}
a.help-a:hover {
text-decoration: none;
}<p>
<a href="#"><img src="kartinka.jpg">
<span>Мемориальный комплекс</span>
</a>
</p>1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как убрать подчеркивание ссылки в HTML и CSS
По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам.
Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline. Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.
- Как убрать подчеркивание ссылки 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 мы удалили, будет отображаться только линия из точек:
То же самое можно сделать, чтобы получить пунктирное подчеркивание.
a { text-decoration: none; border-bottom:1px dashed; }Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:
a { text-decoration: none; border-bottom:1px solid red; }Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:
a { text-decoration: none; border-bottom:3px double; }Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:
a { border-bottom:1px double; }Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline:
a { text-decoration: none; }
a:hover { border-bottom:1px dotted; }Пожалуйста, опубликуйте ваши мнения по текущей теме статьи.
Мы крайне благодарны вам за ваши комментарии, лайки, отклики, дизлайки, подписки!
Вадим Дворниковавтор-переводчик статьи «How to Change Link Underlines on a Webpage»
html — Удаление подчеркивания ссылки в css
спросил
Изменено 8 лет, 5 месяцев назад
Просмотрено 20 тысяч раз
Я пытался удалить уродливое подчеркивание с веб-страницы, но по какой-то причине оно не исчезает.
Я пытался использовать украшение текста: нет; и цвет: #FFFFFF; безрезультатно.
Исходный CSS:
#noday {
цвет: #ECECEC;
семейство шрифтов: "Times New Roman",Times,serif;
размер шрифта: 1em;
}
Фрагмент кода:
Здесь случайный текст
Я смотрел: удалить упрямое подчеркивание из ссылки, но это не помогло: /
- HTML
- CSS
0
Просто добавьте text-decoration:none; От до тег для #noneall :
#noneall a{
текстовое оформление: нет;
}
Вот jsfiddle.
1
Попробуйте это, добавьте id (или class ) к вашему a href
случайный текст здесь
и добавьте это в свой файл css:
#thisLink{
текстовое оформление: нет;
}
Это должно убрать подчеркивание!
Вот Jsfiddle этого:
http://jsfiddle.net/c0c6g4rd/4/
Добавьте в начало файла css:
a{
текстовое оформление: нет;
}
С помощью этих строк вы удалите это подчеркивание из всех ссылок в вашем html.
На всякий случай попробуйте добавить «!important» после text-decoration: none… это «{text-decoration: none !important}». Если это действительно работает, то существует проблема с иерархией, и что-то другое переопределяет ваше объявление. Также попробуйте поместить свое объявление в КОНЕЦ вашего CSS, чтобы переопределить любые другие объявления.
Корень этой проблемы в том, что вы не можете поместить div (блочный элемент) внутрь a (строчный элемент). Однако есть лучшие способы сделать то, что вы пытаетесь сделать ,
Как сказали другие, это будет применяться ко всем ссылкам:
a { text-decoration: none; }
Однако, если вы хотите применить его только к этой одной ссылке, добавьте идентификатор к a следующим образом, а не используйте другой элемент:
...
Затем стилизуйте таким же образом.
Скрипты примеров:
http://jsfiddle.net/9gsu9ok3/ (стилизовать все ссылки)
http://jsfiddle.net/9gsu9ok3/3/ (стилизовать только определенные ссылки)
Надеюсь, это поможет.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как убрать подчеркивание ссылки в HTML?
спросил
Изменено 4 года, 10 месяцев назад
Просмотрено 530 тысяч раз
На моей странице я поместил несколько ссылок, под которыми мне не нужна строка, так как я могу удалить это с помощью HTML?
5
Встроенная версия:
com/">ваш сайт
Однако помните, что обычно вы должны отделять содержимое вашего веб-сайта (которое представляет собой HTML) от представления (которое представляет собой CSS). Поэтому обычно следует избегать встроенных стилей.
См. ответ Джона, чтобы увидеть эквивалентный ответ с использованием CSS.
3
Это удалит все подчеркивания со всех ссылок:
{украшение текста: нет; }
Если у вас есть конкретные ссылки, к которым вы хотите применить это, дайте им имя класса, например nounderline , и сделайте следующее:
a.nounderline {text-decoration: none; }
Это будет применяться только к этим ссылкам и не затронет все остальные.
Этот код относится к вашего документа или к таблице стилей:
<тип стиля="текст/CSS">
a.nounderline {украшение текста: нет; }
А в теле:
Ссылка
0
Я предлагаю использовать :hover, чтобы избежать подчеркивания, если указатель мыши находится над привязкой
a:hover {
текстовое оформление: нет;
}
