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

css — Упорно не меняется именно цвет ссылки в шапке Bootstrap

Вопрос задан 4 года 6 месяцев назад

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

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

В то время, когда любые другие свойства (такие, как цвет фона, рамки и тд) легко переопределяются. Код HTML:

header {
background-color: #00008B;
margin: 0;
font-size: 18px;
}

.menu {
  border: none;
}
.nav-left li,
.navbar-right li {
  padding: 15px 15px;
}

.navbar-right li {
  padding-right: 50px;
}

.navbar-logo {
  padding-right: 60px;
  padding-left: 60px;
}

.navbar-logo img {
  position: relative;
  top: 25px;
}

. nav-left li:hover,
.navbar-right li:hover {
  text-transform: uppercase;
  color: #32CD32;
}

.navbar-nav .active-link {
  text-transform: uppercase;
}

<header>
      <nav>
  <div>
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#"><img src="img/logo.png"></a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div>
      <ul>
        <li><a href="#">Professional skills</a></li>
        <li><a href="#">Projects</a></li>

        <li>
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About me <span></span></a>
          <ul>
            <li><a href="#">Education</a></li>
            <li><a href="#">Hobby</a></li>
          </ul>
        </li>
        <li><a href="#">Interesting in web</a></li>
      </ul>


      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /. 
  navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

• css
• css3
• bootstrap

Вы задаете стиль на li, а не на ссылку, нужно задавать изменения на ссылку попробуйте так:

.nav-left li:hover a,
.navbar-right li:hover a {
  text-transform: uppercase;
  color: #32CD32;
}

header {
background-color: #00008B;
margin: 0;
font-size: 18px;
}

.menu {
  border: none;
}
.nav-left li,
.navbar-right li {
  padding: 15px 15px;
}

.navbar-right li {
  padding-right: 50px;
}

.navbar-logo {
  padding-right: 60px;
  padding-left: 60px;
}

.navbar-logo img {
  position: relative;
  top: 25px;
}

.nav-left li:hover a,
.navbar-right li:hover a {
  text-transform: uppercase;
  color: #32CD32;
}

.navbar-nav .active-link {
  text-transform: uppercase;
}

<header>
      <nav>
  <div>
    <!-- Brand и toggle сгруппированы для лучшего отображения на мобильных дисплеях -->
    <div>
      <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span>Toggle navigation</span>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <a href="#"><img src="img/logo. png"></a>
    </div>

    <!-- Соберите навигационные ссылки, формы, и другой контент для переключения -->
    <div>
      <ul>
        <li><a href="#">Professional skills</a></li>
        <li><a href="#">Projects</a></li>

        <li>
          <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About me <span></span></a>
          <ul>
            <li><a href="#">Education</a></li>
            <li><a href="#">Hobby</a></li>
          </ul>
        </li>
        <li><a href="#">Interesting in web</a></li>
      </ul>


      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.
   navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

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

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Ссылка меняет цвет при наведении — Dudom

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

В таблице стилей у ссылки есть специальный псевдокласс :hover . Он отвечает за стиль при наведении. Как только курсор будет убран с ссылки, она вернется в исходное состояние.

Примеры с изменением вида ссылки при наведении

Пример 1.

Преобразуется на странице в следующее:

Пример 2. Как изменить фон ссылки при наведении

Преобразуется на странице в следующее:

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor : pointer . В следующем примере мы изменим его на другой.

Преобразуется на странице в следующее:

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

+ Сделали отдельное видео посвященное цветам ссылок!

Цвет ссылки css

Цвет ссылки по умолчанию

Как подобрать цвет ссылки, изменить цвет ссылки пример

Я пользуюсь подбором старым способом, который узнал ещё при царе горохе!

Но этот способ такой простой и надежный и не требует хождения по другим страницам и выяснения, как это работатет в той или иной программе, и чем еще хорош этот способ!? Вы просто изменяете в реальном времени цвети ссылки и вы сразу же сможете увидеть результат.

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

1. Нажимаем по ссылке ПКМ и выйдет новое окно — где ищем показать код и для Яндекс браузера и Google Chrome — быстро показать код — кнопка «F12»
2. Ищем в коде нашу ссылку — она справа показана — видим, что напротив нашей ссылки цвет — нажимаем по нему и выбираем в новом окне тот цвет, который нужен.

Цвет ссылки css

Рассмотрим несколько вариантов — как задать цвет ссылки:

Задать цвет только для этой ссылки

Как вы наверное увидели, то довольно странное поведение ссылки — это от того, что установленные свойства ссылки для всего сайта влияют и на данную ссылку.

Задать цвет ссылки через стили на странице

Результат : цвет ссылки через style на странице

Задать цвет ссылки через стили через файл css

В основном везде пользуются именно этим способом!

Если мы выведем здесь вот такой код? то увидим стили прописанные через файл css:

border-bottom: 1px solid #b3b3b3;

border-bottom: 1px solid #b3b3b300;

Цвет ссылки при наведении

Лишь давайте сделаем быстрый пример, для того стиля. Что мы описали сверху и присвоим ему эффект при наведении на ссылку.

Берем тот же код, что шел выше добавляем ему «:hover» и в строке «color» — поставим, ну например красный.

Код ссылки не изменен

Цвет ссылки посещенной

Ну и собственно тоже самое, что и с верхнем кодом, изменяем вместо hover поставим «visited»

убрать синий цвет ссылки css

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

Использование ссылок CSS с реальными примерами

TL;DR — свойства могут добавлять цвета ссылок CSS в соответствии с состояниями ссылок.

Содержание

• 1. Цвет ссылки CSS: основные советы
• 2. Состояния ссылки
• 3. Цвет ссылки CSS
• 4. Оформление текста
• 5. Цвет фона
• Меню 9007 6. Кнопки навигации
• 7. Цвет ссылки CSS: Сводка

Цвет ссылки CSS: Основные советы

• Есть 4 ссылка состояния: a:active , a:hover , a:посетили и a:ссылка .
• Чтобы избежать перекрытия поведения, эти состояния должны идти в следующем порядке:
  • a:hover должен идти после a:link и a:visited .
  • a:active должен идти после a:hover .
• Для оформления ссылки можно применить множество свойств стиля CSS (например, фон CSS, цвет CSS, семейство шрифтов CSS, оформление текста CSS и т. д.).

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

Вот состояний , для которых вы можете изменить цвет ссылки с помощью CSS:

• a:link – unvisited.
• a:hover – при наведении на него указателя мыши.
• а:активный — когда пользователь переходит по ссылке.
• a:visited – посещенная ссылка.

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

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

Чтобы изменить цвет ссылки, значение CSS должно быть присвоено свойству стиля цвета. Существует несколько способов описания цветов. Вы можете использовать названия цветов, индикаторы RGB (

 a {
    цвет: зеленый;
}