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

Arwen · 03-07-2003, 07:44

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

Foks · 03-07-2003, 11: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, 06:26

Alex Spade · 04-07-2003, 14: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, 05: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, 06:17

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

Arwen · 07-07-2003, 10:31

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

Anafay · 07-07-2003, 11:16

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

Arwen · 07-07-2003, 11:41

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

Anafay · 07-07-2003, 12:15

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

Arwen · 07-07-2003, 12: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, 12: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, 12:59

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

Anafay · 07-07-2003, 13: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, 13:08

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

Anafay · 07-07-2003, 13:12

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

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

Arwen · 07-07-2003, 13:12

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

Anafay · 07-07-2003, 13:14

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

Arwen · 07-07-2003, 13:17

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

Anafay · 07-07-2003, 13:21

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

Arwen · 07-07-2003, 13:25

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

Arwen · 07-07-2003, 13:36

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

Anafay · 07-07-2003, 13: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, 14: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, 14:09

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

03-07-2003, 07:44	#1
Arwen Камрад Join Date: фев 2003 Сообщений: 106	высвечивание ссылок Как в хтмл сделать так, чтобы когда наводишь на ссылку курсор, она высвечивалась другим цветом?
	[Ответить с цитированием]

04-07-2003, 14:16	#4
Alex Spade Модератор Join Date: июл 2002 Location: Москва, Зеленоград Сообщений: 2,849	В дополнение есть ещё понятие A:link A:link, A:visited {color: #993333} A:active, A:hover {color: #FF0000} ЗЫ насколько я помню NНафигатор не понимает A:hover - поэтому в нём цвет не меняется. link - не просмотренная ссылка visited - просмотренная active - на которую нажимают hover - на которую наводят мышь
	[Ответить с цитированием]

07-07-2003, 05:53	#5
Arwen Камрад Join Date: фев 2003 Сообщений: 106	Чего-то не получается. Допустим строка выглядит вот так: <p><b><a href="http://www.lalala.ru/blank/music.html"><i><font color="#FFFF00">Музыка</font></i></a></b></p> "Музыка" должна выделятся при наведении. Как должна выглядеть эта строка?
	[Ответить с цитированием]

07-07-2003, 06:17	#6
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen Это не в строке делается, а в заголовке документа. См. пример от Foks'а.
	[Ответить с цитированием]

07-07-2003, 10:31	#7
Arwen Камрад Join Date: фев 2003 Сообщений: 106	В заголовке страницы, на которую ссылка или на странице, где расположена ссылка? Уточните плиз, а то опять не получилось.
	[Ответить с цитированием]

03-07-2003, 11:14	#2
Foks Intelligence Droid Join Date: мар 2002 Сообщений: 6,753	Самый простой вариант, но может не самый лучший: < 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>
	[Ответить с цитированием]

04-07-2003, 06:26	#3
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	<style> A {color:#ff0000;} A:hover {color:#00ff00;} </style> В данном случае нет ничего проще и лучше, чем CSS. Ссылка меняет цвет при наведении с красного на зелёный. Foks Параметр "text-decoration" относится к подчёркиванию, но никак не к цвету.
	Дневник [Ответить с цитированием]

07-07-2003, 11:16	#8
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen Между <head> и </head> страницы, на которой расположена ссылка.
	[Ответить с цитированием]

07-07-2003, 11:41	#9
Arwen Камрад Join Date: фев 2003 Сообщений: 106	У меня в HEAD есть тег <link rel="STYLESHEET" type="text/css" href="index.css">. Все ссылки, которые расположены на странице меняют цвет, а те которые добавила я - нет. Когда убираешь эту строку, и добавляешь то, что вы посоветовали, это работает. Только с теми же ссылками. А мои добавленные так и не выделяются. Может index.css надо править?
	[Ответить с цитированием]

07-07-2003, 12:15	#10
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen А можно ли взглянуть на css? Очевидно, эти определения уже есть в index.css.
	[Ответить с цитированием]

07-07-2003, 12:50	#11
Arwen Камрад Join Date: фев 2003 Сообщений: 106	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
	[Ответить с цитированием]

07-07-2003, 12:57	#12
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen Оно уже есть: a {color: #000000; font-size: 12px; text-decoration: none; font-weight: bold} a:hover {color: #ff0000; text-decoration: none;} Убери из своего примера ссылки тэг FONT, и все поедет.
	[Ответить с цитированием]

07-07-2003, 12:59	#13
Arwen Камрад Join Date: фев 2003 Сообщений: 106	Нравица? ) Тут, насколько я поняла, уже заданы параметры тех ссылок, которые есть. А как правильно добавить новые, я только догадываюсь. Может назвать это как-нить ss, поставить цвет, размер (мой любимый), а в ss: hover указать как это будет выглядеть после наведения курсора. Ну а затем в ХТМЛ перед ссылкой просто указать class="ss". Да?
	[Ответить с цитированием]

07-07-2003, 13:08	#14
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen a и a:hover - это ВСЕ ссылки в документе. Если хочешь сделать что-то свое, отличное ото всех остальных ссылок, то заводишь класс: .mylink { color:black; } .mylink a { color:black; } .mylink a:hover { color:red; } И пишешь: <p class="mylink"><a href="...">Text</a></p>
	[Ответить с цитированием]

07-07-2003, 13:12	#16
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen Цвет указан вот тут: a {color: #000000.... Если цвет должен быть другим, отличным от остальных ссылок, заводи класс.
	[Ответить с цитированием]

07-07-2003, 13:14	#18
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen Тэг FONT препятствует установке цвета через css, - он же внутри ссылки. Поэтому его использовать нельзя.
	[Ответить с цитированием]

07-07-2003, 13:17	#19
Arwen Камрад Join Date: фев 2003 Сообщений: 106	Вот именно, что мои ссылки другого цвета. Думаю что придется заводить класс. В этом то и проблема. А шрифт и размер обязательно указывать? Или достаточно цвета?
	[Ответить с цитированием]

07-07-2003, 13:21	#20
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Arwen Бери пример с mylink и переделывай на свое усмотрение. Там только цвет.
	[Ответить с цитированием]

07-07-2003, 13:25	#21
Arwen Камрад Join Date: фев 2003 Сообщений: 106	О, я счас сделала цвет ссылок одинаковый! Ни фига не получилось, блин. Мои стали какие-то кривые и по прежднему не высвечиваются.
	[Ответить с цитированием]

07-07-2003, 13:36	#22
Arwen Камрад Join Date: фев 2003 Сообщений: 106	А где это все можно прочитать?
	[Ответить с цитированием]

07-07-2003, 13:45	#23
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Делай по сему: <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> Сначала тут. А потом лучше первоисточник.
	[Ответить с цитированием]

07-07-2003, 14:05	#24
Dimitrius Камрад Join Date: апр 2002 Location: Internet Сообщений: 394	Пишу наиболее простой вариант Допустим твоя страничка выглядит так: <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, там правда ошибок довольно много, но что б понять что это такое и с чем его едят - в самый раз. еще есть официальная спецификация.... __________________ Я не гений, я только учусь......
	[Ответить с цитированием]

07-07-2003, 14:09	#25
Arwen Камрад Join Date: фев 2003 Сообщений: 106	Я счас вариант Anafey попробовала запустить. Не получилось. Сделала все, как написал. Попробуем другим способом. Если не получится, значит какая-то ошибка вышла. Ошибка ДНК.
	[Ответить с цитированием]