Как с помощью css сделать ссылку красивой
В css, ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предоставляют широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:
Преимущества использования CSS
Появление каскадных таблиц стилей (CSS) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.
В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.
Сравните объем кода с использованием каскадных таблиц стилей и без них:
А вот, насколько уменьшается код после включения в него CSS:
Даже визуально заметно, что объем уменьшился в несколько раз. При этом одно стилевое описание CSS ссылки применено ко всем остальным.
Ссылки в CSS
CSS включает в себя большой набор средств для установки стилевых характеристик ссылок. Доступ к тегу <a href> может быть реализован несколькими способами:
- С помощью селектора элемента – при этом стиль ссылки задается селектором элемента а. Пример:
<style type="text/css">
a{font-size:24px;
font-background-color:#33CC99;
}
</style>Описанный стиль будет применен ко всем ссылкам внутри страницы:
- Через селектор идентификатора – он задается внутри тега <a href>. А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:
<style type="text/css">
#a1{font-size:24px;
font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" id="a1" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" id="a1" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" id="a1" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" id="a1" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" id="a1" target="_blank">Да еще много, много раз!</a>
</body>Результат аналогичен предыдущему.
- Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:
<style type="text/css">
.a1{font-size:24px;
font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" class="a1" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" class="a1" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" class="a1" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" class="a1" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" class="a1" target="_blank">Да еще много, много раз!</a>
</body>С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:
<style type="text/css">
a{font-size:24px;
font-background-color:#33CC99;
background-color:#FFCCCC;
}
#a2
{background-color:#FF0033;
}
.a3
{background-color:#339999;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" id="a2" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" class="a3" target="_blank">Еще хоть раз!</a>
</br>
</body>
Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс a3 и идентификатор a2, доминируют над цветом, установленным через селектор элемента a.
Таким же образом можно убрать подчеркивание ссылок. Для этого внутри селектора свойству text-decoration присваивается значение none. Пример:
<style type="text/css">
a{
font-size:24px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
</body>
Псевдо классы ссылок в CSS
Ссылка является не совсем обычным элементом html. Да и в css отношение к тегу <a href> тоже особенное. Для установки характеристик внешнего вида ссылки в каскадных таблицах стилей применяются встроенные псевдо классы.
Псевдо классом называется класс CSS, применяемый к стилю элемента в зависимости от его состояния (активный, неактивный, при нажатии).
В CSS различают несколько псевдо классов ссылок:
- A:link – задает стиль ссылки до посещения;
- A:visited – стиль после посещения;
- A:active – устанавливает, как будет выглядеть активная ссылка;
- A:hover – вид ссылки при наведении на нее курсора мыши.
A:link по своему действию аналогичен селектору элемента a (оба задают внешний вид не посещенной ссылки).
Пример, в котором подчеркивание ссылки и размер шрифта будут меняться в зависимости от ее состояния:
<style type="text/css">
A:link { text-decoration: none; font-size:24px; }
A:visited { text-decoration: overline; }
A:hover {
text-decoration: underline overline; font-size:30px;
color: #FF00FF;
}
A:active { text-decoration: underline; color: #00FF00; font-size:40px; }
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
С помощью псевдо классов можно легко установить фоновое изображение ссылки, которое меняется в зависимости от действий пользователя. Пример:
<style type="text/css">
A:link {
display: block;
width: 200px;
height: 70px;
background: url(im/1.gif)no-repeat;
}
A:visited {
display: block;
width: 200px;
height: 70px;
background: url(im/2.gif)no-repeat;
}
A:hover {
display: block;
width: 200px;
height: 70px;
background: url(im/3.gif)no-repeat;
}
A:active {
display: block;
width: 200px;
height: 70px;
background: url(im/4.gif)no-repeat;
}
</style>
</head>
<body>
<p><a href="4.html"></a></p>
</body>Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html. Да и писанины c CSS намного меньше.