Сегодня: 19 апреля 2024 г., пятница Время:

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-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.