[решено]CSS. Как изменить цвет ссылки

И цвет из других мест ну никак не меняется. Так как мне изменить цвет только моей ссылки?

• Блог
• Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

EllECTRONC 29 ноября 2008 в 13:44

А. ЧЕГО.
У вас приведен css для всех ссылок, а не конкретно для вашей.
Вы же задали вашей ссылке id или class, вот и шагайте от туда.
a.class или a#id, а потом уже все остальное.
И знаете Firefox+Firebug — решит все ваши проблемы с незнанием css.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«EllECTRONC» wrote:
У вас приведен css для всех ссылок, а не конкретно для вашей.

Как сделать конкретно для моей я и пытаюсь выяснить
«Demimurych» wrote:
a.class или a#id, а потом уже все остальное.

нет. Не паботает
«Demimurych» wrote:
И знаете Firefox+Firebug — решит все ваши проблемы с незнанием css.

Установил, посмотрел. Но сохранять страницу полностью и смотреть исходный код в дримвьювере все равно лучше.

«Demimurych» wrote:
Предлагаю начать с
http://htmlbook.ru[/quote]
да, в общем-то всегда пользовался справочником стилей. Но собираюсь изучить

Тут мелкий вопрос: как ссылку перекрасить?

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«digital_sword» wrote:

Установил, посмотрел. Но сохранять страницу полностью и смотреть исходный код в дримвьювере все равно лучше.

убили наповал

по теме,
#bla-bla-bla a.style color:#ccc;
>

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«penexe» wrote:

убили наповал

Почему? Может я каких-то возможностей firebug не увидел?
«penexe» wrote:
по теме,
убили наповал
#bla-bla-bla a.style color:#ccc;
>

Не работает. Ни с id ни с class. А если указать
#bla-bla-bla <

>
То в этом случае изменяться будет все, кроме цвета.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«digital_sword» wrote:
нет. Не паботает

Что именно не работает? Примеры в сделию!. Мы не телепаты, мы можем только финалы фильмов угадывать.©
Почему не получается:

a .class : link < color : #ccc ; >
a .class : visited < color : red ; >
a .class : hover < color : #ccc ; >
a #id:link
a #id:visited
a #id:hover

Имейте в виду это все лишь примеры.

+ CSS это каскадные стил (т.е. вложенные), т.е. пробуйте перед классом ссылки добавить дивы и прочую «шушару», куда вы спрятали вашу ссылку.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«digital_sword» wrote:
Может я каких-то возможностей firebug не увидел?

К примеру я прямо сейчас в firebug могу сделать вот так:

и вы тоже можете!

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«EllECTRONC» wrote:
Примеры в сделию!. Мы не телепаты, мы можем только финалы фильмов угадывать.

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

a:hover <
color: #0062A0;
text-decoration: underline;
>

a.active, a: link .active, a:visited.active, a:hover.active <
color: #1f5ca1;
font-weight: 700 ;
>

/*EllECTRONC*/
a #linkid:link
a #linkid:visited
a #linkid:hover

/*penexe*/
#linkid a.style <
color: #red;
>

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

2 digital_sword
1)
CSS

покрасит все ссылки в красный
2)
CSS

#red.a, .red.a, div a(color:red)

покрасит ссылки которые (

< a style= "color:red;"

покрасят в красный не смотря на CSS
почитайте любой учебник по стилям

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

Дебаты )))
Может покажешь как присваиваешь id/class? Потом css копать можно )))

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«PVasili» wrote:
CSS
a
покрасит все ссылки в красный

Это понятно, но все мне не нужно
«PVasili» wrote:

#red.a, .red.a, div a(color:red)
покрасит ссылки которые

В данном примере (который выложил) по аналогии добавил стиль
#linkid.a, .linkid.a
Не помогло.
«PVasili» wrote:
< a style= "color:red;" покрасят в красный не смотря на CSS
почитайте любой учебник по стилям

Тоже известный факт, в случае со ссылкой в page.tpl.php так и сделал, но как быть со ссылками, которые формирует views?

Как в моем прикрепленном примере перекрасить ссылку, используя только css?

«Dimanic» wrote:
Может покажешь как присваиваешь id/class? Потом css копать можно )))

Мое сообщение 29/11/2008 — 13:57 — там прикрепил пример, он одним кодом вставляется в html просто.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

подскажите, что с css то делать.
пример моем комментарии сб, 29/11/2008 — 13:57

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

div#linkid a color: blue;
>
div#linkid a:hover color: red;
>
Сложности так и не понял ))) Просто нужно правильно css прописывать ))) Не поленись и почитай )))

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«Dimanic» wrote:
div#linkid a <
color: blue;
>
div#linkid a:hover <
color: red;
>

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

Реакции

закрой тему и постарайся давать данные в самой статье )))

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«Dimanic» wrote:
и постарайся давать данные в самой статье )))

А что не понятно то? В первом сообщении и писалось: «Как изменить цвет только одной ссылки, при том что общие стили для ссылок заданы?»
Еще раз спасибо за ответ.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

«digital_sword» wrote:
А что не понятно то?

ты хотел получить конкретный ответ или чтобы монотонно рассуждали как это можно сделать? Если конкретно, то надо приводить полные данные, которыми являются код html и код css, который стилизует этот код. Сам по себе css без html является пустым местом. Теперь понятно?

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

EllECTRONC 1 декабря 2008 в 13:10

Довольно! Хватит наезжать (давить) на человека. даже Аксель себе такого не позволяет.
Проблема решена.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

Dimanic 1 декабря 2008 в 14:21
«EllECTRONC» wrote:

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

EllECTRONC 1 декабря 2008 в 14:46

Проблемы с русским языком? Советую закончить русскую школу, а потом браться за китайскую. )))

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

PVasili 1 декабря 2008 в 14:49

Давайте не по теме свернем, бо смысла в этом мало.

• Войдите или зарегистрируйтесь, чтобы отправлять комментарии
• Реакции

Как изменить цвет ссылки в HTML

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

В HTML параметры цвета задаются стандартно цифрами в шестнадцатеричном коде, в виде #rrggbb, где каждая по отдельности буква отвечает за красную (r или red), зеленую (g или green) и синюю (b или blue) составляющую. Для каждого цвета применяется шестнадцатеричное значение от 00 до FF, что отвечает диапазону от 0 до 255 в десятичном исчислении. Далее эти значения соединяются в одно шестизначное число, в котором некоторые цифры могут быть заменены латинскими буквами. Использование символа решетка (#) является обязательным и он должен располагаться вначале заданного параметра цвета.

Помимо использования палитры всевозможных цветов, не исключено применение ключевых слов, таких как: yellow, gray, green и т.п.

Как поменять цвет ссылки в HTML

Линки в HTML выглядят следующим образом:

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

Так как все ссылки по умолчанию имеют подчеркивание в нашем примере мы его запретили, использовав свойство text-decoration: none

В независимости от цветового оформления сайта, цвет ссылок также установлен по умолчанию. Изначально все ссылки (за исключением некоторых) синего окраса. Для изменения этого параметра используется свойство color, после которого через двоеточие устанавливается цветовой код HTML.

Как изменить цвет ссылки в CSS

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

— a:active – активная ссылка;

— a:visited – ссылка, по которой осуществлялся визит;

— a:hover – ссылка при наведении мыши.

Для реализации задуманного создадим два файла.

Первым делом index.php:

Поменять цвет ссылки ? Легко !

Здравствуйте, сегодня мы поговорим о том как поменять цвет ссылки на сайтах под управлением движков с открытым для редактирования кодом. К таким CMS относится и WordPress.

Так-же, заодно, мы поменяем цвет ссылки при наведении на нее курсора мыши.

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

Для того, чтобы редактировать стиль ссылки нам нужно из админ-панели сайта зайти в редактор кода. Путь к редактору, если кто не знает такой: Консоль>Внешний вид>Редактор>Таблица стилей (style.css). Для редактирования цвета ссылки нам нужно в таблице стиля (style.css) найти такой участок кода, как показано на скриншоте.

Заходим в таблицу стиля и на клавиатуре набираем команду Сtrl+F и в появившееся в левом углу монитора набираем слово a:hover .
Вот участок кода:

Этот участок кода отвечает за цвет ссылки, цвет ссылки при наведении курсора мыши, подчеркивание ссылки. Где underline отвечает за подчеркивание ссылки, если убрать это слово, то подчеркивание ссылки при наведении курсора мыши исчезнет. А если мы удалим в коде none; и взамен напишем underline, то ссылка станет подчеркнутой всегда.

В a:hover поменять цвет ссылки при наведении курсора можно просто изменив цветовой номер color: #ff0012 ,на нужный нам.

a:hover < text-decoration: underline; /* подчеркивание ссылки при наведении курсора */ color: #ff0012; /* Цвет ссылки */

Поменять цвет ссылки вообще, можно изменив цвет в

Ну а если мы хотим установить цвет посещенной ссылки, то можно в этот отрывок кода добавить к селектору А добавить псевдокласс :visited , как показано ниже:

a:visited < color: #808000; /* Цвет посещенной ссылки */

В итоге должно получится как-то так:

a < text-decoration: none; color: #004b91; /* цвет ссылки */ >a:hover < text-decoration: underline; /* подчеркивание ссылки при наведении курсора */ color: #ff0012; /* Цвет ссылки при наведении курсора */ >a:visited < color: #808000; /* Цвет посещенной ссылки */ >

Но устанавливать цвет посещенной ссылки я у себя на сайте не стал.

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

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

Если вам понравилась эта статья, делитесь ей в соц.сетях. На этом все,до скорых встреч!

Лучший способ отблагодарить автора

Похожие по Тегам статьи

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….

2 thoughts on “ Поменять цвет ссылки ? Легко ! ”

1. Виктор26.09.2014 at 11:38 пп Попробовал.Ввел a:hover выдало 68 вариантов в таблице стилей и не оджного правильного.Порылся в коде и нашел в файле funktions.php запрет на изменения цвета ссылок.Тема у меня какая то злая.Но в целом большинству думаю подойдет!Респектуха!
   1. Егор Автор записи 03.10.2014 at 6:31 пп Спасибо!

   Разделы сайта

   • HTML СSS в примерах
   • Безопасность WordPress
   • Внешний вид и Функционал WP
   • Выбираем домен и хостинг
   • Оптимизация и продвижение
   • Перенос сайта из HTML в WordPress
   • Плагины WordPress
   • Сборник интересных скриптов
   • Сервисы и программы
   • Шаблоны WordPress
   • Юзаем Bootstrap

   CSS: Цвет и тень текста

   Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

        body < color:blue; >h1 
   Заголовок имеет свой собственный цвет текста
    
   Абзац будет наследовать цвет текста от родительского элемента, в качестве которого для него выступает элемент body.
     

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

   Добавление тени

   Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

   1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
   2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
   3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
   4. цвет для тени

        h1 
   Текст с тенью
     

   С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

        .test1 < background: #CCCCCC; color: #CCCCCC; font-size: 60px; text-align: center; text-shadow: 1px 1px 3px #666666, -1px -1px 3px #FFFFFF; >.test2 
   Текст с тенью
    
   Текст с тенью
     

   Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

   С этой темой смотрят:

   • Отступ текста в CSS
   • Выравнивание текста в CSS
   • Как изменить шрифт в CSS
   • CSS стиль и размер шрифта
   • Стандартные (безопасные) шрифты

   Копирование материалов с данного сайта возможно только с разрешения администрации сайта
   и при указании прямой активной ссылки на источник.
   2011 – 2023 © puzzleweb.ru | razumnikum.ru