html — Почему я не могу убрать подчеркивание текста?
У меня прописано свойство text-decoration: underline; для всех элементов, которые находятся в div. Но прописав text-decoration: none; для одной из надписей, я все равно не могу избавиться от подчеркивания. В чем тут дело?
.one { display: block; text-align: right; font-size: 30px; text-decoration: none; } div { width: 50%; height: 500px; background: yellow; text-align: center; font-size: 50px; color: purple; text-decoration: underline; }
<div> <span>Hello, world!</span> <br> <span>Hello!</span> </div>
- html
- css
2
Как указано в MDN
Украшения текста отрисовываются вокруг дочерних элементов. Это значит, что если у элемента установлено свойство
text-decoration
, то дочерний элемент не может удалить его для себя.
перевод ответа @xpy
В спецификации указано, что при применении данного свойства к элементу, оно будет распространено на все внутренние in flow элементы (то есть на элементы, у которых не указан float
, либо абсолютное позиционирование).
Так же есть уточнение
декорация текста не распространяется на любые вложенные out of flow элементы, ни на вложенные атомарные inline-level элементы, такие как
inline-block
иinline-table
.
.one { display: inline-block; text-align: right; font-size: 30px; text-decoration: none; } div { width: 50%; background: yellow; text-align: center; font-size: 50px; color: purple; text-decoration: underline; padding: 10px; }
<div> <span>Hello, world!</span> <br> <span>Hello!</span> </div>
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Как убрать подчеркивание?
Вопрос задан
Изменён 5 лет 7 месяцев назад
Просмотрен 977 раз
Добрый день! Я дико извиняюсь за следующий глупый вопрос, но факт остается фактом, впервые за много лет работы со стилем к моему большому стыду не могу справиться вот с чем: как у 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?
спросил
Изменено 4 года, 10 месяцев назад
Просмотрено 529 тысяч раз
На моей странице я поместил несколько ссылок, под которыми мне не нужна строка, так как я могу удалить это с помощью HTML?
5
Встроенная версия:
com/">ваш сайт
Однако помните, что обычно вы должны отделять содержимое вашего веб-сайта (которое представляет собой HTML) от представления (которое представляет собой CSS). Поэтому обычно следует избегать встроенных стилей.
См. ответ Джона, чтобы увидеть эквивалентный ответ с использованием CSS.
3
Это удалит все подчеркивания со всех ссылок:
а {украшение текста: нет; }
Если у вас есть определенные ссылки, к которым вы хотите применить это, дайте им имя класса, например nounderline
, и сделайте следующее:
a.nounderline {text-decoration: none; }
Это будет применяться только к этим ссылкам и не затронет все остальные.
Этот код относится к
вашего документа или к таблице стилей:
<тип стиля="текст/CSS"> a.nounderline {украшение текста: нет; } стиль> голова>
А в теле:
Ссылка
0
Я предлагаю использовать :hover, чтобы избежать подчеркивания, если указатель мыши находится над привязкой
a:hover { текстовое оформление: нет; }
Добавьте это во внешнюю таблицу стилей (предпочтительно ):
{украшение текста:нет;}
Или добавьте это к
<тип стиля = "текст/css"> {украшение текста:нет;} стиль>
Или добавить к
сам элемент
( не рекомендуется ):
Во всех других ответах упоминается украшение текста. Иногда вы используете тему WordPress или чужой CSS, где ссылки подчеркиваются другими методами, так что text-decoration: none не отключит подчеркивание.
Border и box-shadow — еще два известных мне метода подчеркивания ссылок. Чтобы их отключить:
граница: нет;
и
box-shadow: нет;
Все вышеуказанные коды у меня не работали. Когда я копаюсь в проблеме, я понимаю, что она не работает, потому что я поместил стиль после href. Когда я поместил стиль перед href, он работал, как и ожидалось.
ваш сайт
Следующее не рекомендуется, но иногда может оказаться полезным
Лучше использовать решение, предоставленное Джоном Конде, но иногда использование внешнего CSS невозможно. Таким образом, вы можете добавить в свой HTML-тег следующее:
Моя ссылка
Приведенного выше кода будет достаточно.Просто вставьте его в ссылку,из которой вы хотите убрать подчеркивание.
html —Как убрать подчеркивание из гиперссылки?
Задавать вопрос
спросил
Изменено 2 года,8 месяцев назад
Просмотрено 2к раз
Я пытаюсь создать подпись электронной почты со ссылкой на веб-сайт. Однако ссылка отображается как подчеркнутая. Я пробовал много вариантов,чтобы удалить подчеркивание из ссылки на веб-сайт,но не смог. Любая идея решить эту проблему?
<голова>Подпись электронной почты голова><тело><таблица отступ="0" расстояние между ячейками="0" граница="0"> <тд выровнять="сверху" выровнять="по центру"><изображение граница="0" alt="Логотип" источник="логотип. png"/>а><тд выровнять="сверху"><сильный>{имя}{фамилия}
<промежуток>{название
<промежуток>Т:{телефон}
промежуток><промежуток>М:{мобильныйпромежуток><промежуток>Э:{электронная почта}
промежуток>
{компания}<тд выравнивание="центр"><изображение alt="Значок инстаграма" граница="0" src="it. png"/>а> <изображение alt="Значок Pinterest" граница="0" источник="pt.png"/>а><тд><промежуток>{веб-сайт}а> <тд colspan="2"><изображение граница="0" источник="баннер.png" alt="Баннер"/>а> таблица>тело>
- HTML
- CSS
4
Это должно сделать это:
дополнительная информация о стилях ссылки в css можно найти здесь:https://www.w3schools.com/css/css_link.asp
1
Использование Оформление текста:нет;
вы также можете использовать его в css и inline.
Подпись электронной почты голова><тело>
{имя}{фамилия} {название Т:{телефон} М:{мобильный E:{email} {компания} | |