Фотографии Донецк, Киев, Москва
...
 
 

FAQ html, css, java-script, ssi

 

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

Ссылки - один из главных атрибутов 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>

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

Пример ссылки по умолчанию в заголовке

Пример ссылки по умолчанию в параграфе

  1. Пример ссылки по умолчанию в списке
  2. Пример ссылки с классом class="two" в списке

 

...

Немного о Донецке

Донецк. Каким ты был и каким стал
Фотографии Донецка: каким город был и каков он сейчас
 
Донецк. Скифская аллея
Скифская аллея
бульвар Пушкина, Донецк
 
Есть вопрос? Задайте!
  • ...
 
 
 
 
Стикер
...