Изменить цвет ссылки в html: Как изменить цвет ссылки и фона под ней?

html — Как поменять цвет текста на кнопках?

Заранее говорю, что я в коде понимаю очень мало (практически ничего), поэтому не кидайте в меня пожалуйста помидоры. Поставила подвал на сайт, просто сторонний код на другом сайте нашла. После вставки кода поменялся цвет на ссылках в меню и названиях товаров. Был черный, стал ярко синий. Вот код, который вставила:

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Footer -->
    <section>
        <div>
            <div>
                <div>
                    <h5>Информация</h5>
                    <ul>
            <li><a href="http://kiprus.ru/feedback"><i></i>Обратная связь</a></li>
            <li><a href="tel:8(969)400-46-90"><i></i>+7(969)400-46-90</a></li>
                        <li><a href="mailto:info@kiprus.  ru"><i></i>[email protected]</a></li>
            <li><a href="https://kiprus.ru/blog"><i></i>Полезные статьи</a></li>
                        <li><a href="https://kiprus.ru/o-kompanii"><i></i>О компании</a></li>
                        
                        <li><a href="https://kiprus.ru/dostavka"><i></i>Доставка</a></li>
                        <li><a href="https://kiprus.ru/oplata"><i></i>Оплата</a></li>
                    </ul>
                </div>
                <div>
                    <h5>Наша продукция</h5>
                    <ul>
                        <li><a href="https://kiprus.ru/avtomatika"><i></i>Автоматика</a></li>
                        <li><a href="https://kiprus.ru/pribory-kontrolya"><i></i>Приборы контроля</a></li>
                        <li><a href="https://kiprus.
  ru/pribory-dlya-tehnologicheskih-protsessov"><i></i>Приборы для технологических процессов</a></li>
                        <li><a href="https://kiprus.ru/zapornaya-i-reguliruyuschaya-armatura"><i></i>Запорная и регулирующая арматура</a></li>
                        <li><a href="https://kiprus.ru/kontrolno-izmeritelnye-pribory"><i></i>Контрольно-измерительные приборы</a></li>
            <li><a href="https://kiprus.ru/pribory-ucheta"><i></i>Приборы учета</a></li>
            <li><a href="https://kiprus.ru/soputstvuyuschie-tovary"><i></i>Сопутствующие товары</a></li>
                    </ul>
                </div>
                <div>
                    <h5>Наш адрес</h5>
                    <ul>
                        <script type="text/javascript" charset="utf-8" async src="https://api-maps.   yandex.ru/services/constructor/1.0/js/?um=constructor%3A64c60aaf0a2ad265d0326abe3f4401c25673b2549427962ba2a7f47bcd2374e0&amp;width=320&amp;height=200&amp;lang=ru_RU&amp;scroll=true"></script>
</ul>
                </div>
            </div>
            <div>
                <div>
                    
                </div>
                <hr>
            </div>  
            <div>
                <div>
                    <a href="https://kiprus.ru/" target="_blank">© 2019-2022 Kiprus.ru Все права защищены </a></p>
                </div>
                <hr>
            </div>  
        </div>
    </section>
    <!-- ./Footer -->

Заметила, что если убрать в начале HTML кода вот это

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.  0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

то ссылки становятся снова черными, но и подвал становится уродливым.

Нашла в интернете еще такой код:

    a:link {    /* unvisited link */    color: #384B7A;
    text-decoration: none;
}
a:visited {    /* visited link */    color: #384B7A;
      text-decoration: none;
}
a:hover {    /* mouse over link */    color: #6FFF57;
      text-decoration: none;
    border-bottom: none;
}
a:active {    /* active link */    color: #000000;
      text-decoration: none;
}

Это помогло исправить цвет на ссылках, но при этом на всех градиентных кнопках текст тоже поменялся. Был белым, а теперь его практически не видно.

Как сделать так, чтобы текст на кнопках снова стал белый, а все остальное осталось темного цвета? В тех поддержке платформы мне написали: Чтобы оставить подвал и вернуть стандартные стили вы можете добавить код сторонних стилей (из файла bootstrap. min.css) в файл user.css и убрать те, что перезаписывают стандартные. Это не гарантирует исправной работы системы. В вашем случае перезаписываются стили ссылок (тег ).

Но мне ничего к сожалению не понятно, а больше они ничего не говорят. Может кто-то поможет мне… Буду очень благодарна. Сайт https://kiprus.ru/

Как задать цвет шрифта с помощью HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

<p>Конструктор сайтов <font>"Нубекс"</font></p>

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

 Конструктор сайтов <font color="blue">"Нубекс"</font>

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

• color – задает цвет текста;
• size – устанавливает размер текста;
• face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи HTML</title>
 </head>
 <body>
 <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p>
 </body>
</html>

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи CSS</title>
  <style>
 .nubex {
  color:#fa8e47;
  font-size: 150%;
  }
  .constructor {
  color: blue;
  }
  .saitov {
  color: green;
  font-size: 125%;
  }
  </style>
 </head>
 <body>
 <p><span>Конструктор</span> <span>сайтов</span> <span>"Нубекс"</span></p>
 </body>
</html>

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Удаление подчеркивания и цвета ссылок

Содержание | Старт | Конец | Предыдущий: KB0046: Как сделать ссылку из заголовков разделов на оглавление? | Далее: KB0048: Как добавить водяной знак на все страницы в Epub или Kindle?

По умолчанию программное обеспечение для просмотра (например, приложение Kindle, Kobo или Nook) отвечает за добавление цвета и/или подчеркивания к ссылкам. Однако, если вы предпочитаете, вы можете создать стилей ссылок и применять их к различным категориям ссылок.

Чтобы удалить подчеркивание и/или цвет, создав новый стиль ссылки и связав его со всей книгой, выполните следующие действия:

1. Нажмите на команду меню Формат | Редактировать стили | Ссылка для отображения диалогового окна «Стили связи»

2. Введите имя нового стиля ссылки, например «Гиперссылки», и нажмите OK .

3. Установить Подчеркивание до Нет и Цвет текста от до Нет или Указывается , по мере необходимости.

4. Нажмите на страницу Defaults и в Whole book выберите стиль «Гиперссылки», который вы только что создали.

5. Нажмите OK и OK еще раз.

6. Скомпилируйте и просмотрите книгу.

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

Дополнительные сведения о стилях ссылок см. в разделе Работа со стилями ссылок в руководстве Jutoh.

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

Создание CSS вручную

Вы можете добавить CSS либо глобально, если вы не хотите использовать символы подчеркивания повсюду, либо для каждого раздела. Чтобы добавить его глобально, перейдите на страницу Styles в диалоговом окне Project Properties и нажмите Edit Properties в верхней части диалогового окна. Проверить Используйте пользовательский CSS и вставьте код CSS.

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

  a:link    { цвет: красный; текстовое оформление: нет; }
  a:посещено { цвет: красный; текстовое оформление: нет; }
  a:hover   { color: red; текстовое оформление: нет; }
  a:active  { цвет: красный; текстовое оформление: нет; }

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

  a:link    { color: inherit; оформление текста: подчеркивание; }
  a:посещено {цвет: наследовать; оформление текста: подчеркивание; }
  a:hover   { color: inherit; оформление текста: подчеркивание; }
  a:active  { color: inherit; оформление текста: подчеркивание; }

Чтобы применить CSS только к отдельному разделу, щелкните правой кнопкой мыши раздел в структуре проекта, выберите Свойства , а затем установите флажок Дополнительный CSS . Вставьте на вышеуказанную страницу и нажмите OK.

Вы можете заметить, что при просмотре HTML-кода, сгенерированного Jutoh для ссылок, стиль, который вы применили к ссылке, был удален. Это связано с тем, что если параметр свойства конфигурации стиль удаления атрибутов URL имеет значение стиля, атрибуты в стиле будут удалены из ссылки до того, как она будет записана в файл HTML. Это позволяет избежать конфликтов между стилями, указанными в редакторе, и стилями по умолчанию, используемыми программой чтения — такие конфликты могут сделать ссылки неопрятными, особенно если цвета URL-адреса Jutoh и программы чтения немного отличаются. Лучше, чтобы ридер показывал ссылки в стиле по умолчанию, чем в смеси. Вы можете повторно применить предполагаемые атрибуты, используя свойства CSS, как указано выше.

Ключевые слова: гиперссылка, гиперссылки

Содержание | Старт | Конец | Предыдущий: KB0046: Как сделать ссылку из заголовков разделов на оглавление? | Далее: KB0048: Как добавить водяной знак на все страницы в Epub или Kindle?

css — Дилемма цвета ссылки электронной почты HTML

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

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

Просмотрено 101 тысяч раз

Я создал электронное письмо в формате HTML, и у меня возникли следующие проблемы: во-первых, весь мой дизайн основан на синем цвете, поэтому любой синий текст не будет читаться читателем/пользователем, текст должен быть белым. GMAIL автоматически окрашивает телефонные номера и ссылки в синий цвет, но основная проблема заключается в Microsoft Outlook OWA.

Для исправления цвета номера телефона и ссылки в GMAIL я сделал следующее:

 
       <диапазон>
           1800-000-0000
       

 

Это прекрасно работает для GMAIL и везде, где бы то ни было, НО, как я уже упоминал, большинство моих клиентов использует Outlook или MS OWA (веб-приложение Outlook).

OWA игнорирует цвет, установленный в моем встроенном стиле, и делает ссылку по умолчанию синей; это происходит только при предварительном просмотре электронной почты. Если вы на самом деле откроете электронное письмо, все стили сработают.

Моя дилемма: что мне делать? Я уже потерял надежду, но это мое последнее средство. Есть ли способ переопределить цвет ссылки для Outlook OWA? Я использовал !ВАЖНО, тег FONT, ВКЛАДЫВАНИЕ до 5 степени.

Проблема не в Outlook, а в OWA.

Вот скриншот, когда я проверяю элемент в Chrome:

А вот FF:

Есть идеи?

Пожалуйста!

• html
• css
• html-email
• email-клиент

Вы добьетесь успеха, включив объявление , которое устарело в современном HTML, хотя некоторые версии OWA все еще соблюдают его:

 
  <диапазон>
    1800-000-0000
  

 

 Белая ссылка
 

 Белая ссылка (почти)
 

 
    <таблица>
        
            Текст ссылки здесь
        
    

 

 <тд>
Ссылка

 

 #outlookLink {text-decoration: none; цвет: #ffffff !важно}
Ваш текст и ссылка здесь.
 

 
  Пример ссылки

 

 ...
 

 ...
 

 
 1800-000-0000

 

 
  1800-000-0000

 

 
  1800-000-0000

 

 . my-link a,
a[x-apple-детекторы данных] {
  цвет:наследовать !важно;
  оформление текста: подчеркивание !важно;
}
 

 .my-link a,
a[x-apple-детекторы данных] {
    цвет: наследовать !важно;
    украшение текста: нет !важно;
    размер шрифта: наследовать !важно;
    семейство шрифтов: наследовать !важно;
    вес шрифта: наследовать !важно;
    высота строки: наследовать !важно;
}
 

 

ТЕКСТ ССЫЛКИ