главная / FAQ / примеры по css / как задать стиль ссылке

Как задать стили для ссылки

Ссылки - один из главных атрибутов web-странички, поэтому, естесственно, хочется сделать их красивыми, цветными, не подчеркнутыми, да и чтобы при наведении меняли цвет и становились подчеркнутыми, вобщем, желаний - уйма. Вопрос: как реализовать? Ответ: с использованием CSS.

Для этого нужно создать файл листа стилей, к примеру, style.css и в нем определить стили для:

1. непосещенной ссылки (a:link);
2. посещенной ссылки (a:visited);
3. активной ссылки (a:active);
4. ссылки, на которую наводится мышь (a:hover):

Например:

a:link	{
	text-decoration: none;
	color: #6699CC; }
a:visited	{
	text-decoration: none;
	color: #336699; }
a:active	{
	text-decoration: underline;
	color: #ff0000; }
a:hover	{
	text-decoration: underline;
	color: #ff0000; }

В документ стили вставлять уже умеем :) см. статью «Как вставить стили в документ»

Каким способом еще отдекорить текст ссылки тоже умеем :) см. статью «Оформление текстовых элементов»

В данном примере на всех страницах сайта:

1. непосещенная ссылка будет голубого цвета и подчеркнутая;
2. посещенная ссылка будет синего цвета и подчеркнутая;
3. активная ссылка будет красного цвета и неподчеркнутая;
4. ссылка, на которую наводится мышь, - будет красного цвета и неподчеркнутая.

Как создать несколько классов для ссылки

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

Для этого нужно в файле листа стилей определить для ссылки несколько классов, например, class1 и class2:

a.class1:link	{ color:#CC6633 }
a.class1:visited	{ color:#CC6633 }
a.class1:active	{ color:#CC6633 }
a.class1:hover	{ color:#CC6633 }

a.class2:link	{ color:#999966 }
a.class2:visited	{ color:#999966 }
a.class2:active	{ color:#999966 }
a.class2:hover	{ color:#999966 }

...

В самом документе пишем:

<ol>
<li><a class="class1" href="URL">Десять причин,
	почему бутылка водки лучше,
	чем женщина</a></li>
<li><a class="class2" href="URL">Баллада о
	черном суппорте</a></li>
</ol>

Выглядеть будет так:

В описание класса ссылки можно добавить: стиль шрифта, размер шрифта, подчеркивание, отступы от края, границу - все, что пожелаете :)

Например:

a.class3:link, a.class3:visited {
	color:#336699;
	font-family:'Comic Sans MS';
	font-size:20px;
	text-decoration:none;
	background-color:#cccccc;
	padding:10px;
	border:1px solid #666666; }

a.class3:hover {
	color:#cccccc;
	font-family:'Comic Sans MS';
	font-size:20px;
	text-decoration:none;
	background-color:#336699;
	padding:10px;
	border:1px solid #000033; }

a.class3:active {
	color:#ffffff;
	font-family:'Comic Sans MS';
	font-size:20px;
	text-decoration:underline;
	background-color:green;
	padding:10px;
	border:1px solid #000033; }

В самом документе пишем:

<p><a class="class3" href="URL">Наведи на меня и нажми!</a></p>

Выглядеть будет так:

Определение стиля ссылок по умолчанию для различных тэгов

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

h1 a:link { color:green }
h1 a:visited { color:green }
h1 a:hover { color:olive }
h1 a:active { color:firebrick }

p a:link { color:darkgoldenrod }
p a:visited { color:darkgoldenrod }
p a:hover { color:orchid }
p a:active { color:firebrick }

ol a:link { color:royalblue }
ol a:visited { color:royalblue }
ol a:hover { color:steelblue }
ol a:active { color:firebrick }

ol a.two:link { color:yellowgreen }
ol a.two:visited { color:yellowgreen }
ol a.two:hover { color:seagreen }
ol a.two:active { color:firebrick }

В самом документе пишем:

<h1>Пример <a href="URL">ссылки по умолчанию</a> в заголовке</h1>
<p>Пример <a href="URL">ссылки по умолчанию</a> в параграфе</p>
<ol>
<li>Пример <a href="URL">ссылки по умолчанию</a> в списке</li>
<li>Пример <a class="two" href="URL">ссылки с классом</a> в списке</li>
</ol>

Выглядеть будет так:

главная / FAQ / примеры по css / как задать стиль ссылке