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

html — Почему я не могу убрать подчеркивание текста?

Вопрос задан 2 года 2 месяца назад

Изменён 2 года 2 месяца назад

Просмотрен 282 раза

У меня прописано свойство 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 и css изменить цвет ссылки и убрать подчеркивание

Создаем свой сайт

Здравствуйте уважаемые читатели. Сегодня мы поговорим как с помощью html и css изменить ссылку на Вашем сайте: поменять цвет, добавить или убрать подчеркивание.

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

Как вы помните, ссылка вставляется следующим образом:

<a href="URL адрес страницы">Анкор</a>

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

<a href="URL адрес страницы">Изменяем цвет ссылки</a>

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

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

Для того, чтобы убрать подчеркивание, необходимо в кодировку html ссылки добавить:

<a href="URL адрес страницы">Убираем подчеркивание</a>

Как видите, подчеркивание исчезло.

Как изменить цвет ссылки с помощью CSS.

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

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

 a { color:#537CBC; text-decoration:none;}

Ну вот и все. Не забывайте оценивать статью и ставить лайки. Ну и, разумеется, комментируйте.

Похожие записи

Создаем свой сайт

Как сделать иконку для сайта

Авторadmin 29 июня 20139 августа 2019

Всем привет. Сайтов в сети много, поэтому надо пользоваться любой возможностью сделать свой сайт уникальным, выделить его из серой массы других сайтов. Для этого, есть один отличный способ. Я говорю об иконках для сайтов, так называемых Favicon(фавикон). Я продемонстрирую Вам как создается favicon.ico и каким образом вставить его на Ваш сайт или блог.

Читать далее Как сделать иконку для сайтаПродолжить

Создаем свой сайт

Какую тему для сайта выбрать

Авторadmin 16 июля 201323 декабря 2016

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

Читать далее Какую тему для сайта выбратьПродолжить

Создаем свой сайт

Палитра цвета html

Авторadmin

2 сентября 201227 декабря 2016

Палитра цвета RGB, как правильно задавать цвета в CSS и Html . Как известно, для решения задач по цветовому оформлению текста применяют общепринятое построение RGB ( то есть, Red — Красный, Green – Зеленый, и соответственно Blue — Синий)

Читать далее Палитра цвета htmlПродолжить

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

Спросил 10 лет, 4 месяца назад

Изменено 4 года, 5 месяцев назад

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

148

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

На моей странице я поместил несколько ссылок, под которыми мне не нужна строка, так как я могу удалить это с помощью HTML?

5

Встроенная версия:

 ваш сайт
 

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

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

3

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

 a {text-decoration: none; }
 

Если у вас есть определенные ссылки, к которым вы хотите применить это, дайте им имя класса, например nounderline , и сделайте следующее:

 a.nounderline {text-decoration: none; }
 

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

Этот код относится к вашего документа или к таблице стилей:

 
    <тип стиля="текст/CSS"> 
        a.nounderline {украшение текста: нет; }
    

 

А в теле:

 Ссылка
 

0

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

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

1. Добавьте это во внешнюю таблицу стилей (предпочтительно ):

    {украшение текста:нет;}
    

2. Или добавьте это к вашего HTML-документа:

    <тип стиля = "текст/css">
    {украшение текста:нет;}
   
    

3. Или добавить к

   сам элемент ( не рекомендуется ):

    
    com">Текст
    

Во всех других ответах упоминается украшение текста. Иногда вы используете тему WordPress или чужой CSS, где ссылки подчеркиваются другими методами, так что text-decoration: none не отключит подчеркивание.

Border и box-shadow — еще два известных мне метода подчеркивания ссылок. Чтобы отключить их:

 граница: нет;
 

и

 box-shadow: нет;
 

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

 ваш сайт
 

Следующее не рекомендуется, но иногда может оказаться полезным

Лучше использовать решение, предоставленное Джоном Конде, но иногда использование внешнего CSS невозможно. Таким образом, вы можете добавить в свой HTML-тег следующее:

 Моя ссылка
 

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

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

CSS

a{
 
 text-decoration:none;
 
}

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

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

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

Четыре разных псевдокласса.

1. a:visited —пользователь посетил ссылку и она сохраняется в истории браузера
2. a:active  – прямо в тот момент,когда пользователь нажимает на ссылку
3. a:hover —пользователь наводит указатель мыши на ссылку
4. a:link — состояние ссылки по умолчанию,означающее,что пользователь еще не посещал,не наводил курсор или не нажимал на ссылку.

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

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

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

Вот несколько способов убрать подчеркивание ссылки с помощью свойства CSS.

CSS

a{
 
 text-decoration:none;
 
}
a:link{
 
 украшение текста:нет;
 
}
a:visited{
 
 text-decoration:none;
 
}

В приведенных выше примерах мы заставили CSS удалить подчеркивание для ссылки,добавив text-decoration:none ко всем состояниям ссылки.

Важно отметить,что порядок имеет значение для псевдоклассов,a:link и a:visited должен предшествовать a:hover и hover должен предшествовать a:active . Если подумать,это здравый смысл. Ссылка находится в состоянии по умолчанию,прежде чем вы сможете ее посетить,и она будет наведена до того,как пользователь щелкнет по ней,и,наконец,она установит состояние в активное. Вы можете запомнить состояния с помощью удобной аббревиатуры LVHA (ссылка,посещено,наведено,активно).

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

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

:any-link соответствует всем элементам,которые соответствуют :link или :visited ,поэтому мы можем легко удалить подчеркивание для любого элемента ссылки,имеющего атрибут href .