Внимание! На сайте будут проходить большие изменения.
Все проблемы будут решены в ближайшее время..

Меню Сайта



Форма входа



Друзья сайта

RU.SocialPoster.com


Новое на Форуме



Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0





По просьбе Digital'а написал небольшой урок по тому, как настроить ссылки для шаблона. В этом уроке мы разберём, как поменять цвета ссылок.


Если зайти в CSS шаблона и воспользоваться технологиями браузера, а именно CTRL+F (поиск), можно найти строчки, начинающиеся с a: или link. Наша задача - выучить значение и вид использования этих двух классов, а так же познакомимся с ещё подобными.

Начнём с цитаты.

Quote (HTMLBook.ru)
Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.

Quote (HTMLBook.ru)
Псевдокласс active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

Quote (HTMLBook.ru)
Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление.

Quote (HTMLBook.ru)
Hover - определяет стиль элемента при наведении на него курсора мыши, при этом элемент не активирован, иными словами кнопка мыши не нажата.

Давайте научимся делать ссылки, вокруг которых при наведении будет отображаться светло-серый фон.

В CSS вставляем:

Code
a.navig:link {text-decoration: none; color:#666666; font-size:16px;}
a.navig:active {text-decoration: none; color:#666666; font-size:16px;}
a.navig:visited {text-decoration: none; color:#666666; font-size:16px;}
a.navig:hover {text-decoration: none; color: #666666;background: #f7f7f7; font-size:16px;}

Определения:
navig - название класса (указанный после или перед href="")
text-decoration: none; - нижнее подчёркивание ссылки (если указать underline то ссылка будет подчёркиваться.
color:#666666; - цвет шрифта, точнее шрифт самой ссылки (так же доступен font-color:#666666;, но при ссылках он работать не будет.
font-size:16px; - размер шрифта (можно выражать в px можно и в pt).
background: #f7f7f7; - цвет фона который будет отображаться при наведении на ссылку (это в нашем с вами случае).

После чего в нужное нам место вставляем:

Code
<a href="ссылка" class="navig">Название ссылки</a>
<a href="ссылка" class="navig">Название ссылки</a>
<a href="ссылка" class="navig">Название ссылки</a>

Здесь я думаю всё понятно.

Почти по такому принципу можно и перекрашивать цвет ссылок, используя полученные навыки прочитав данный урок.

Категория: HTML & CSS |Просмотров: 1032 |Добавил: gL00m | Теги: link, underline, Active, font, size, color, href, navig, Class, Hover| Рейтинг: 2.5/11


3)Vladimir   (22.01.2010)[ Материал]
Хорошая статейка , спасибо

1)LMhope   (22.01.2010)[ Материал]
А пример можно ?

2)gL00m   (22.01.2010)[ Материал]
Добавил в сам урок скриншот.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


InuCoz.Com © 2009 - 2010 | Design by TRUST | Хостинг от uCoz | Sitemap | Sitemap-forum