Настройка ссылок CSS
CSS - Оформление ссылок
| |
 | |
| Селектор: | a; a:link; a:hover; a:visited; #name |
| Свойство: | 1) font-family; 2) size; 3) color; 4) background; 5) text-decoration; |
| Значения: | 1) Verdana, Times New Roman и др. 2) px; 3-4) red; white; blue и др. 5) underline; none; |
Вид ссылок на странице очень важен, так как они являются для пользователей путеводителями по сайту. Они должны быть оформлены соответствующим образом, чтобы были заметны и в тоже время не отвлекали внимания от основного содержимого сайта.
Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.
Настройки ссылок
CSS даёт возможность выделить их так, как этого пожелает веб-мастер. Ссылки в html обозначаются тэгом <a href="">Текст ссылки</a>, поэтому их внешний вид можно настроить так:
a {
font-family: Verdana;
size: 12px;
color: blue;
text-decoration: none;
}
font-family- тип шрифтаsize- размер шрифта ссылки, можно задавать в пикселяхcolor- цвет ссылкиtext-decoration- даёт возможность подчеркнуть линией ссылку, если вместо "none", написать "underline"
Если по умолчанию тип шрифта был уже задан, то указывать его не обязательно. С помощью CSS можно настроить внешний вид ссылок при наведении на нее курсора, делается это так:
a:hover {
font-family: Verdana;
size: 12px;
color: black;
text-decoration: underline;
}
В этом случае, когда пользователь наводит курсор на ссылку, то она меняет свой цвет на чёрный и подчёркивается. здесь можно включить свою фантазию и "поиграть" с настройками, например добавить отступ слева "padding-left: 3px;", то это сделает эффект "живой" ссылки, она при наведении будет немного сдвигаться вправо. Можно сделать так, чтобы при наведении шрифт становился жирным, это тоже добавляет эффект. В общем тут вариантов очень много, всё на Ваше усмотрение.
Подобным образом можно настроить внешний вид ссылок, по которым пользователь уже перешёл. Это удобно, т.к. посетители сайта могут видеть, какие страницы они посетили. Делается это таким образом:
a:visited {
font-family: Verdana;
size: 12px;
color: gray;
text-decoration: none;
}
В этом случае ссылка, по которой уже был переход окрасится в серый цвет и пользователь интуитивно поймёт, что данную страницу уже посещал.
Стоит отметить, что вышеприведенный пример настраивает внешний вид ссылок всего сайта, можно также присваивать значения ссылкам в отдельно взятом блоке, которому нужно присвоить id, например:
#id_name a {
font-family: Verdana;
size: 12px;
color: blue;
text-decoration: none;
}
Таким образом данные свойства ссылок будут присвоены только тем, которые находятся внутри блока id_name.
CSS тэги для оформления ссылок
Таким образом все ссылки оформляются при помощи следующих CSS тэгов:
a:link- для настроек внешнего вида нормальной ссылки.a:visited- для настроек внешнего вида ссылок, по которым был уже сделан переход. Очень удобно для пользователей сайта, где много ссылок, чтобы они видели свои сделанные переходы.a:hover- для настроек внешнего вида ссылок, на которые наводится курсор.a:active- для настроек внешнего вида ссылки, по которой в настоящий момент осуществляется переход.
Примечание
Если же возникли трудности и есть какие-либо вопросы, как оформить ссылки на своём сайте, то можно задать вопрос в специально созданной теме про CSS на нашем форуме.
