Как с помощью css сделать ссылку красивой

В css, ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предлагают широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:

Как при помощи css сделать ссылку красивой

Преимущества использования 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>

Описанный стиль будет применен ко всем ссылкам внутри страницы:

Как при помощи css сделать ссылку красивой
  • Через селектор идентификатора – он задается внутри тега <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>

Как при помощи css сделать ссылку красивой Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс 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 сделать ссылку красивой

Псевдо классы ссылок в 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>

Как при помощи css сделать ссылку красивой
При помощи псевдо классов можно легко без проблем установить фоновое изображение ссылки, которое меняется в зависимости от действий посетителя. Пример:

<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 гораздо меньше.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *