Online-учебник по CSS
Автор учебника: Евгений Андросов
Урок 7. Свойства и значения (ссылки)
Может быть, вы обратили внимание, что все ссылки на этом сайте отображаются жирным шрифтом и имеют голубой цвет. Эти значения заданы в таблице стилей следующими значениями:
a {font-weight:bold; color: #0099FF; alink: #33CCFF; text-decoration:none };
Как видно из этого примера, к ссылкам применяются те же свойства, что и к тексту, так как ссылка представляет собой ни что иное, как выделенный участок текста.
Например, по умолчанию все ссылки имеют подчеркивание и на многих сайтах так и есть, замечали? Однако, если вы не ходите применения этого эффекта на вашем сайте, вы можете легко его отключить:
a {text-decoration:none};
Попробуйте сделать это применительно к какой-нибудь своей учебной странице сайта. Не сложно, правда?
Но кроме общих с шрифтами свойств, ссылки имеют и свои специфические дополнительные свойства или псевдо классы, как их иногда называют. С помощью этих дополнительных свойств вы можете задать, например, разные цвета ссылки до того, как на нее кликнули мышкой, во время клика и после клика. Рассмотрим их.
- дополнительное свойство link – отображает состояние ссылки, которую пользователь еще не посещал, другими словами – на которую он еще не кликал мышкой. Пример:
a:link {color: #6699CC;}
- active (или alink) – ссылка во время нажатия на нее мышкой. Пример:
a:active {color: #FFFFFF};
- visited (или vlink)- ссылка после нажатия на нее мышкой. Пример:
a:visited {color: #990099};
- hover – ссылка в тот момент, когда над ней находится указатель мыши (без клика). Пример:
a:hover {
color: #FF3300;
font-weight:bold;
}
Кроме цвета самой ссылки можно задать и цвет ее фона во всех вышеперечисленных действиях. Пример:
a: active {color: #FFFFFF; background: #FFFF66};
Вообще, используя свойства и значения, которые мы изучили в предыдущих уроках, с ссылками можно делать много разных и довольно неожиданных для пользователя вещей. Например:
a:hover {
letter-spacing: 15px;
font-weight:bold;
font-style:italic
text-decoration:none;
}
Подобные вещи хороши в качестве показательного примера для учебы, но при создании сайтов ими увлекаться не стоит. Перегруженность эффектами вызывает раздражение у пользователей, поэтому применять их стоит только в том случае, когда это оправдано.
Предыдущий урок | К началу урока | К оглавлению | Следующий урок
Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!
Комментарий добавил(а): Дмитрий
Дата: 29.06.2011
http://ru.html.net/tutorials/css/ с этого сайта спиженно не так ли?
Комментарий добавил(а): Евгений Андросов
Дата: 30.06.2011
За нецензурные слова ваш комментарий вполне можно было бы удалить без дискуссий. Но я почему-то решил ответить. Язык CSS достаточно простой и в нем трудно изобрести что-то свое. Поэтому почти все учебники похожи по структуре изложения (я могу привести вам еще 3-5 ссылок, где материал излагается похожим образом). То слово, которое вы употребили, подразумевает копипаст - скопировать и вставить. Но даже при беглом просмотра видно, что здесь помимо сходства, есть огромное количество различий - в тексте, в названии и структуре разделов, в примерах и т.д. Но вы и дальше можете думать все, что вам захочется.
Комментарий добавил(а): Евгений
Дата: 19.03.2012
Мне понравился Ваш сайт и я много нового для себя подчерпнул. Огромное Вам спасибо.А Ваш ответ на такой дурацкий комментарий?! Вы правы.
Задать вопрос
Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.