Kamrad.ru - высвечивание ссылок

Kamrad.ru (https://kamrad.ru/index.php)
- Веб-дизайн, вёрстка и веб-программирование (https://kamrad.ru/forumdisplay.php?forumid=87)
-- высвечивание ссылок (https://kamrad.ru/showthread.php?threadid=51349)

Arwen 03-07-2003 08:44:

высвечивание ссылок

Как в хтмл сделать так, чтобы когда наводишь на ссылку курсор, она высвечивалась другим цветом?

Foks 03-07-2003 12:14:

Самый простой вариант, но может не самый лучший:
< HEAD>
< STYLE type="text/css">
A { text-decoration:none; }
A:active { text-decoration:none; }
A:visited { text-decoration:none; }
a:hover{color:#dc143c}
< /STYLE>
< /HEAD>

Dark 04-07-2003 07:26:

Alex Spade 04-07-2003 15:16:

В дополнение есть ещё понятие A:link
A:link, A:visited {color: #993333}
A:active, A:hover {color: #FF0000}

ЗЫ насколько я помню NНафигатор не понимает A:hover - поэтому в нём цвет не меняется.

link - не просмотренная ссылка
visited - просмотренная
active - на которую нажимают
hover - на которую наводят мышь

Arwen 07-07-2003 06:53:

Чего-то не получается. Допустим строка выглядит вот так:
<p><b><a href="http://www.lalala.ru/blank/music.html"><i><font color="#FFFF00">Музыка</font></i></a></b></p>

"Музыка" должна выделятся при наведении. Как должна выглядеть эта строка?

Anafay 07-07-2003 07:17:

Arwen
Это не в строке делается, а в заголовке документа. См. пример от Foks'а.

Arwen 07-07-2003 11:31:

В заголовке страницы, на которую ссылка или на странице, где расположена ссылка? Уточните плиз, а то опять не получилось.

Anafay 07-07-2003 12:16:

Arwen
Между <head> и </head> страницы, на которой расположена ссылка.

Arwen 07-07-2003 12:41:

У меня в HEAD есть тег
<link rel="STYLESHEET" type="text/css" href="index.css">.
Все ссылки, которые расположены на странице меняют цвет, а те которые добавила я - нет. Когда убираешь эту строку, и добавляешь то, что вы посоветовали, это работает. Только с теми же ссылками. А мои добавленные так и не выделяются.
Может index.css надо править?

Anafay 07-07-2003 13:15:

Arwen
А можно ли взглянуть на css? Очевидно, эти определения уже есть в index.css.

Arwen 07-07-2003 13:50:

td,p {color: #000000; font-size: 11px; font-family: Verdana, Tahoma, Arial, Geneva;}
a {color: #000000; font-size: 12px; text-decoration: none; font-weight: bold}
a:hover {color: #ff0000; text-decoration: none;}
.mn {color: #336699; font-size: 11px; font-family: Tahoma, Arial Cyr, Geneva; font-weight: bold; text-decoration: none;}
a.mn:hover {color: #ff0000; font-family: Tahoma, Arial Cyr, Geneva; text-decoration: none;}
.header {color: #ffffff; font-size: 11px; font-weight: bold;}
.text {color:#2D261F; font-size:10px; font-family:Verdana, Tahoma, Arial, Geneva; margin-top:5; margin-left:10; margin-right:18; vertical-align:top; text-align:justify;}

.menu {color:#2D261F; font-size:12px; font-family:Arial; margin-top:25; margin-left:10; margin-right:0; text-align:left; font-weight:bold;}
.small {color:#2D261F; font-size:10px; font-family:Courier; margin-top:5; margin-right:5; margin-left:5;}
.sl {color:#2D261F; font-size:12px; font-family:Courier; font-weight:bold;}
.body {color:#2D261F; font-size:14px; font-family:Verdana, Tahoma, Arial, Geneva; margin-top:45; margin-left:20; margin-right:20; font-weight:bold;}
.produce { color:#2D261F; font-size:7px; font-family:Arial; margin-right:15;}
.table {color:#002760; font-size:11px; font-family:Verdana, Tahoma, Arial, Geneva; margin-left:5; margin-right:30; font-size:11px; vertical-align:top; text-align:justify;}

H1 {color:#000000; font-size:10pt; font-family: Verdana, Tahoma, Arial, Geneva; text-align:left;}
LI {font-family: Verdana, Tahoma, Arial, Geneva; font-size

Anafay 07-07-2003 13:57:

Arwen
Оно уже есть:
a {color: #000000; font-size: 12px; text-decoration: none; font-weight: bold}
a:hover {color: #ff0000; text-decoration: none;}

Убери из своего примера ссылки тэг FONT, и все поедет.

Arwen 07-07-2003 13:59:

Нравица? ) Тут, насколько я поняла, уже заданы параметры тех ссылок, которые есть. А как правильно добавить новые, я только догадываюсь.
Может назвать это как-нить ss, поставить цвет, размер (мой любимый), а в
ss: hover указать как это будет выглядеть после наведения курсора.
Ну а затем в ХТМЛ перед ссылкой просто указать class="ss".
Да?

Anafay 07-07-2003 14:08:

Arwen
a и a:hover - это ВСЕ ссылки в документе.

Если хочешь сделать что-то свое, отличное ото всех остальных ссылок, то заводишь класс:
.mylink
{
color:black;
}
.mylink a
{
color:black;
}
.mylink a:hover
{
color:red;
}

И пишешь: <p class="mylink"><a href="...">Text</a></p>

Arwen 07-07-2003 14:08:

Не поняла.
<p><b><a href="http://www.lalala.ru/blank/music.html"><i>Музыка</i></a></b></p>
Это должно выглядеть вот так? А как же цвет?

Anafay 07-07-2003 14:12:

Arwen
Цвет указан вот тут:
a {color: #000000....

Если цвет должен быть другим, отличным от остальных ссылок, заводи класс.

Arwen 07-07-2003 14:12:

Это я про "убрать FONT".

Anafay 07-07-2003 14:14:

Arwen
Тэг FONT препятствует установке цвета через css, - он же внутри ссылки. Поэтому его использовать нельзя.

Arwen 07-07-2003 14:17:

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

Anafay 07-07-2003 14:21:

Arwen
Бери пример с mylink и переделывай на свое усмотрение. Там только цвет.

Arwen 07-07-2003 14:25:

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

Arwen 07-07-2003 14:36:

А где это все можно прочитать?

Anafay 07-07-2003 14:45:

Делай по сему:
<html>
<head>
<link rel="stylesheet" href="index.css">
<style type="text/css">
mylink
{
color:#ffff00;
}
.mylink a
{
color:#ffff00;
}
.mylink a:hover
{
color:red;
}
</style></head>
<body>
<a href="#">Это обычная ссылка</a>
<p class="mylink"><a href="#">Это твоя особая ссылка</a></p>
</body>
</html>

Сначала тут. А потом лучше первоисточник.

Dimitrius 07-07-2003 15:05:

Пишу наиболее простой вариант

Допустим твоя страничка выглядит так:

<html>
<head>
<title>GalМоя страничка</title>
<meta http-equiv="Content-Type" content="text/html;">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<a href="http://www.kamrad.ru" target="_blank">Форум</a>
</body>
</html>

Создаешь новый стиль(в любом редакторе стилей, я пользуюсь Top Style pro 3.1), и прописываешь следующее

a:hover{
color: #000066;
}

Все. Сохраняешь его обзsваешь style.css(либо другим угодным тебе именем(токо не забудь его прописать ))

Запускаеш, все работает.

А вообще зайди на css.manual.ru, там правда ошибок довольно много, но что б понять что это такое и с чем его едят - в самый раз.
еще есть официальная спецификация....
__________________
Я не гений, я только учусь......

Arwen 07-07-2003 15:09:

Я счас вариант Anafey попробовала запустить. Не получилось. Сделала все, как написал. Попробуем другим способом. Если не получится, значит какая-то ошибка вышла. Ошибка ДНК.

Dark 08-07-2003 05:34:

А может ну его, это изменение цвета?

Arwen 08-07-2003 06:52:

Доброе утро, камрады! Ну что, продолжим? Сегодня я думаю получится

Dimitrius 08-07-2003 08:04:

Доброе утро

Давай я тебе вышлю страничку и маленький файлик css, ты посмотришь и разберешся
__________________
Я не гений, я только учусь......

Dimitrius 08-07-2003 08:05:

Dark
А может ну его, это изменение цвета?

Низзя,это свято

Arwen 08-07-2003 08:18:

Dimitrius, высылай конечно. У меня получилось высветить ссылку. Я просто посмотрела как прописаны другие ссылки на страничке. Но она такого же цвета и размера как и те. Так что высылай, буду разбираться до конца.

Dimitrius 08-07-2003 11:30:

Arwen

Куда слать? адрес E-MAIL напиши

Arwen 09-07-2003 08:36:

[email]karamel_747@rambler.ru[/email]

Dimitrius 09-07-2003 10:24:

Выслал, принимай почту

Там архив запакован WinRar 3.20.

В файле CSS самай первая строчка отвечает за изменение цвета ссылки при наведении.

Вторая и третья строчки - это примеры использования классов.
__________________
Я не гений, я только учусь......

Arwen 09-07-2003 13:04:

Чего-то не пришло. Вышли еще раз, если не трудно на [email]office@energot.ru[/email].

Dimitrius 09-07-2003 15:56:

Выслал еще раз В двух копиях
__________________
Я не гений, я только учусь......

Arwen 11-07-2003 10:47:

Спасибо, все получила

Укуренный Зомби 04-09-2003 01:17:

<body text="white" link="#ff0000" alink="#ff0000" vlink="#FF0099">
про подсветку не знаю но:

body text="***" -- это цвет текста воопче
alink="***" -- это цвет ссылок(непосещённых)
vlink="***" -- это цвет посещённых ссылок

ЗЫ: вместо звёзд нужный цвет

Укуренный Зомби 04-09-2003 01:23:

опс... опять я не удосужился всё прочитать...

Mips 13-09-2003 17:46:

Дабы прекратить раздувание темы, объясню в кратце. Итак,
a{...} - действует на все ссылки в документе и на все виды (см.ниже).
a:что-то {...} - действует на все ссылки в документе определённого вида. Под видом понимается, как говорил
Alex Spade, следующие названия:
link - не просмотренная ссылка
visited - просмотренная
active - на которую нажимают
hover - на которую наводят мышь
Т.е. a{color: red;} сделает все ваши ссылки красного цвета. Стили применяются последовательно, т.е. если вы напишите a{color: red;}, а потом a{color: green;}, то все ссылки будут зелёного цвета. Далее, при наведении используется hover. Выглядит как
a{color: red;}
a:hover{color: green;}
Это означает, что все ссылки красные, а при наведении на них, они станут зелёными.
Так, с этим разобрались. Теперь классы. Классы действуют только на те объекты, в которых указан class. Классы в стилях начинаются с точки. Итак, все ссылки у нас красные. Пишем следующую строку: .myclass{color:blue;}, а в ссылке пишем <a href="#" class="myclass">новый линк</a> и видим, что этот линк стал синего цвета, в то время как все остальные красные. На классы действует hover и еже с ним, если этот класс применяется к ссылкам. Например, .myclass:hover{color:yellow} задаёт всем ссылкам, у которых прописан class=myclass, что при наведении на них эти ссылки будут жёлтыми.
Порой бывает, что нужно создать таблицу или область, в которой ссылки должны быть другого цвета, отличного от цвета всех ссылок. Да, можно каждой ссылке прописать класс, но это неудобно. Можно сделать проще. Создадим область, вернее контейнер div.
<style>
a{color:red;}
a:hover{color:green;}
.toDiv a {color: blue;}
.toDiv a:hover{color:yellow;}
</style>
Теперь создаём контейнер <div> с классом toDiv и пишем в нём несколько ссылок.
<a href="#">обычный линк</a>
<div class="toDiv">
<a href="#">линк в DIV'е</a>
<a href="#">линк в DIV'е</a>
</div>
Видим, что первый линк красный, остальные два синие. Заметьте, что в стилях указана не запятая, а пробел. Запятая - это перечисление к кому относится данный стиль, а пробел указывает, что в контейнере с классом toDiv содержатся <a> и к последним применяется данный стиль.
Теперь добавим таблицу, в которой нужно изменить цвет ссылок. Добавим это в наш стиль.
<style>
.toTable a{color:blue;}
.toTable a:hover{color:yellow;}
</style>
А теперь сама таблица.
<a href="#">обычный линк</a>
<table class="toTable">
<tr><td><a href="#">линк в таблице</a></td></tr>
<tr><td><a href="#">линк в таблице</a></td></tr>
</div>

Далее, стили можно указывать и по id. В стилях передименем пишется номер, а в ссылке пишется id="имя"
<style>
#myID {color:red;}
</style>
<a href="#" id="myID">линк в DIV'е</a>

Комментировать строки в стилях можно ставя перед строкой собаку, но лучше так: /* это закомментировано */
Есть несколько НО. Во-первых, чтобы цвета работали, должен быть прописан href в ссылках. Во-вторых, нельзя использовать в ссылках <font> и еже с ним (цвета работать не будут). Всё задаётся в стилях. В-третих, стили дополняют друг друга, а не заменяют. Заменяется только то, что было уже указано. Т.е. если вы написали a{color:red;text-decoration:none;}, а потом a{color:green;}, то ссылка будет без подчёркивания и зелёная. В-четвёртых, hover и еже с ним (в общем всё то, что пишут после двоеточия) работает ТОЛЬКО на тэг <а>.

ps: Думаю, что описАл понятно. Если есть вопросы, обращайтесь в аську. Только сначала сами помучайтесь, перечитайте этот пост, а потом уже в асю.

Текущее время: 03:15