html, отображающий ссылку как обычный текст

ProgramBox

html, отображающий ссылку как обычный текст

Post author:admin
Запись опубликована:13 февраля, 2023
Post category:Вопросы по программированию

#html

#HTML

Вопрос:

Мне было интересно, можете ли вы отобразить ссылку как обычный текст.

 <a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>

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

Ответ №1:

В css:

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

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

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

Ответ №2:

Если вы посмотрите на каскадные таблицы стилей (CSS), вы можете изменить цвет и стиль текста ссылки.

В вашем примере вы могли бы использовать

 <a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
    <div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
        <font color="white">Log in</font>
    </div>
</a>

Однако я бы научился использовать внешние таблицы стилей и связывать их с вашим HTML через <link> тег в <head> вашем html. Затем вы можете стилизовать отдельные теги с помощью имени тега, идентификатора или класса css. Таким образом, обновленный пример будет:

 <link rel="stylesheet" href="link-to-your-css-file" />

в вашем файле css есть

 a.imgLink{
    color: white; text-decoration: none;
}
div.imgLink{ 
    position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}

Тогда ваш html будет

 <a class="imgLink" id="" href="" target="_parent">
    <img src="" width="121" height="20" alt="">
    <div class="imgLink">
         Log In
    </div>
</a>

Это не только делает ваш HTML «сухим», но и дает вам больший контроль над стилями вашего html, изменяя только файл css.

Ответ №3:

Если вы не хотите, чтобы ссылка подчеркивалась, установите «оформление текста: нет»

Ответ №4:

используйте этот код в своем HTML-файле

 <style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>

Ответ №5:

Короткий ответ: да.

Более длинный ответ: Да, здесь есть скрипка, но вы, вероятно, не хотите скрывать ссылки от своего пользователя.

stslavik делает хороший вывод с «оформлением текста: наследование». Вот еще одна скрипка. В моем браузере «blam» и «stslavic» отображаются с зачеркиванием, но я бы выбрал «inherit» вместо «none»; мне просто кажется лучше.

Ответ №6:

(P.S это не реклама и не спам. Нажмите «Ненависть к ИИ», чтобы перейти к моему проекту) Вы можете сделать это =>

 <h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
        <p>A personal assistant that hates you but still helps you.</p>

Логика здесь заключалась в добавлении стиля к тегу a, который содержит следующее:-

 text-decoration: none; 
color: inherit;

text-decoration для удаления подчеркивания под текстом.
color: inherit для удаления обычного фиолетового цвета ссылок.

Ответ №7:

Конечно — просто настройте CSS для элементов «a» на странице.

Ответ №8:

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

 <a href="https://www.website.com/">Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!</a>

<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>

<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>