Как сделать сайт в программе Dreamweaver ?
Цвет ссылки.
Коды с данной страницы см.здесь - Сcылки. Тема № 5 - цвет ссылки.
Не путать с цветом текста ссылки!!!
Новые шрифты для сайта – качаем отсюда!
Добрались мы до темы ссылок! И сегодня займёмся цветом ссылки! Вы уже заметили, что у ссылки, в самом начале страницы есть цвет. Почему именно этот цвет и такой вариант ссылки? Ну просто на других сайтах цвета и варианты декорирования ссылок другой, а здесь, вот захотелось сделать так!
Но!
Здесь закралось некое противоречие!
В терминологии и визуализации!
И я никогда об этом даже и не задумывался, пока не стал писать об этом! Когда люди пишут "цвет ссылки", то они подразумевают "цвет текста ссылки"!
Но согласитесь, что это и звучит, и выглядит по-разному! И если вы посмотрите на ссылку, и когда мы исключим текст ссылки - останется лишь цвет ссылки!
Поэтому, мне кажется, что правильнее задний фон ссылки, все-таки называть цветом ссылки. Хотя вы, можете думать, как вам нравится!
Закончили со вступлением, теперь, что касается ссылок! Для того, чтобы сделать цветную ссылку, можно воспользоваться двумя способами!
- Изменить цвет ссылки,
(т.е.
1.1. - Cоздадим новую, простую, пустую страницу, в неё вставим стили, в которых пропишем свойство - цвет ссылки.
1.2. - Поменяем цвет ссылки на данной странице, к которой уже прикреплён файл css(И в котором, уже прописан цвет ссылки вот он..)Здесь нужно отметить, что если вам нужно сделать цвет ссылки отличной от всех основных ссылок на странице – этот вариант, как раз тот, что нужно!
- Создать цвет ссылки через файл css.
Конечно, я предпочитаю второй вариант, но для полноты картины начнём с первого!
1.1.
Цвет ссылки без файла css.
Для того, чтобы сделать ссылку цветной в новом документе, нам потребуется:
- Новая, пустая, простая страница.
- Код ссылки.
- Стиль, с прописанным в нём цветом ссылки.
Код ссылки обыкновенный, и цвета здесь нет никакого!
<a href="#">Код цветной ссылки.</a>
Где:
<a href="#"> начало ссылки.
</a> - конец ссылки
# - сама ссылка.
"Код цветной ссылки" – текст ссылки.
Далее, мы должны создать, на самой странице, стиль для тега <a>
Где:
background-color: #F4F307; - цвет нашей ссылки.
font-size: 17px; - размер текста ссылки.
Код стиля цветной ссылки.
<style type="text/css">
<!--
/* CSS Document */
a{
background-color: #F4F307;
font-size: 17px;
}
-->
</style>
Вот так будет выглядеть код нашей страницы с приписанным цветом ссылки!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример цветной ссылки.</title>
<style type="text/css">
<!--
/* CSS Document */
a{
background-color: #F4F307;
font-size: 17px;
}
-->
</style>
</head>
<body>
<p><a href="#">Код цветной ссылки.</a></p>
</body>
</html>
Смотрим, на эту цветную ссылку в натуре.
1.2.
Поменяем цвет ссылки на данной странице.
Теперь, приступим ко второму варианту – изменим цвет ссылки на данной странице. К данной странице прикреплён файл css, в котором уже прописан цвет ссылки.
Для того, чтобы перебить данной цвет ссылки, нам нужно прописать в самой ссылки новый класс либо id.
Назовём этот класс – Primer-ismenenoy-ssilki
И та верхняя строчка с ссылкой, будет у нас выглядеть так:
<p class="Primer-ismenenoy-ssilki"><a href="#" >Код цветной ссылки.</a></p>
Объяснение всех элементов см. в пункте 1.1.
Далее, нам нужно прописать стиль для этой цветной ссылки!
Если мы в первом варианте прописали свойства для ссылки таким образом,
<style type="text/css">
<!--
/* CSS Document */
a{
background-color: #F4F307;
font-size: 17px;
}
-->
</style>
то здесь она не сработает, т.к. ссылка, прописанная в файле css, будет исполняться в первую очередь и задавит данный код!
Поэтому, мы и прикрепили к ссылке новый класс. Теперь нам нужно стиль изменить и прописать в нем свойство этого класса.
Ещё отметим, что нужно добавить к калассу id, в которм и находится остновной текст на данной странице!
<style type="text/css">
<!--
/* CSS Document */
#rightPan .Primer-ismenenoy-ssilki a{
background-color: #F4F307;
font-size: 17px;
}
-->
</style>
Где:
#rightPan - id, основного дива, в которой написаны эти строки.
.Primer-ismenenoy-ssilki – новый класс, в котором прописан цвет, отличающийся от осинового цвета ссылок на данном сайте.
Вставим код ссылки и стиль в данную страницу и получим вот такое:
Ещё отметим, что, когда вы наведёте мышку на ссылку, то будет исполнено свойство a:hover – основной, для всех ссылок на этом сайте. Для того чтобы изменить свойства a:hover, для данной ссылки, вы должны прописать для класса Primer-ismenenoy-ssilki - a:hover отдельно! Мы напишем скоро и об этом!
2.
Цвет ссылки через css.
Мы уже создали файл css, прикрепили его к странице и теперь надо прописать цвет ссылки в данном документе.
Для того, чтобы прописать цвет ссылки в файле css, как например на этой странице, нам понадобится код, вот такой:
a{
background-color: #D3F1EF;
font-size: 16px;
}
И он бы сработал, но сам текст находится в диве, который имеет название rightPan, поэтому, его нужно добавить в данный код.
+ добавим отступ слева и справ - padding: 0 10px 0;
+ добавим цвет текста ссылки - color: #2F5958;
- сам цвет ссылки - background-color: #D3F1EF;
+ отменим всякое декорирование текста - text-decoration: none;
+ добавим размер текста - font-size: 16px;
Код ссылки в цвете, через файл css.
#rightPan a{
padding: 0 10px 0;
color: #2F5958;
background-color: #D3F1EF;
text-decoration: none;
font-size: 16px;
}
Вот и всё! Теперь на всех страницах сайта цвет ссылки будет именно такой!
А теперь самое время развлечься!
Улучши поведенческий фактор на своём сайте!
Если понравится игра, то можно забрать код для своего сайта отсюда!