Свойства, атрибуты ссылок

Свойства, атрибуты ссылок - ненормально сказано. По сути это одно и тоже, только названия разные. Просто кто то говорит так, кто то эдак, а люди путаются, особенно новички. Вот я и заострил внимание на этом моменте. Лучше перефразирую - что можно сделать со свойствами ссылок и при помощи ссылок. Более длинно получилось, но и более точно :)

Сразу оговорюсь и повторюсь. Что лучше задавать свойства ссылок в таблице CSS. Так как, если возникнет желание поменять цвет, размер и т.д. Надо будет заменить только пару цифр в таблице стилей и не ползать по всему сайту. А если сайт перевалил за 1000 страничек - совсем смертельный случай получится :) Да и просто удобнее, вместо набора свойств - класс поставил и ссылка приобретёт все нужные качества. Это собственно говоря касается всех часто повторяющихся элементов на сайте.


Так, теперь к сути. Для начала надо задать ссылкам на сайте основные свойства - шрифт, цвет, размер и т.д. Лучше всего конечно рассмотреть на примере:

a {font-family: Verdana, Geneva, sans-serif;font-size: 13px;color: #3232C8;}
a:link {text-decoration: none;color: #3232C8;}
a:visited {text-decoration: none;color: #3232C8;}
a:hover {text-decoration: underline;color: #000096;}
a:active {text-decoration: none;color: #3232C8;}
a:focus {outline: none !important;}

a - основные свойства. Шрифт - font-family: Verdana, Geneva, sans-serif; размер - font-size: 13px; цвет - color: #3232C8;

a:link - свойства ссылок. Всё аналогично. Только свойство - text-decoration: none; указывает, что ссылку подчёркивать не надо.

a:visited - свойства просмотренных ссылок.

a:hover - выделение ссылок. Свойства ссылок при наведении на них курсора. Тут другое значение свойства - text-decoration: underline; Теперь оно указывает, что нужно подчеркнуть ссылку при наведении курсора. Кстати подчеркнуть можно по разному. Можно к примеру пунктирной линией.

a:active - активные ссылки.

a:focus - это очень полезное свойство. С его помощью осуществляется перемещение по сайту с помощью клавиатуры. Но многих вебмастеров бесит рамка вокруг ссылок. Особенно бесит рамка вокруг изображений, которые являются ссылками. И если поставить значение - {outline: none !important;} то эта рамка пропадёт. !important; - это указать на важность данной команды, она перекроет все остальные, если на вашем сайте несколько таблиц CSS.

Так будут выглядеть все ссылки на вашем сайте. Если хотите разнообразия, что бы ваши ссылки выглядели по разному. Тут достаточно создать свой стиль для определённого класса. И назначить разным группам ссылок разные классы. Только сперва немного поизучайте стили CSS. Если конечно не знакомы с ними. Пункт назначения - Таблица стилей, CSS, класс, идентификатор, id :)


Так, с основным разобрались. Теперь о мелких приятностях. Что происходит, когда мы нажимаем на ссылку? Правильно, нас переносит на новую страничку сайта, или скачиваем какой-нибудь файл. А вот сам переход можно сделать по разному. Можно что бы страничка открылась в старом, или новом окне. Для этого достаточно задать ссылке атрибут - target="_blank" Пример:

<a target="_blank" href="http://seozar.ru/sozdanie-raskrutka-sajta/tablica-stiley-css/tablica-stiley-id.php" class="z008">Таблица стилей, CSS, класс, идентификатор, id :)</a>

Эта ссылка откроется в новом окне браузера. Где - href="http://seozar.ru/sozdanie-raskrutka-sajta/tablica-stiley-css/tablica-stiley-id.php" - это адрес странички, куда я вас послал :) Извините за каламбур :) class="z008" - класс присвоенный ссылке. Таблица стилей, CSS, класс, идентификатор, id :) - название ссылки.

_blank - открывает страницы, файлы в новом окне браузера. В новом окне можно открыть не только страничку сайта, но и фотографию, документ и т.д.

_self - открывает страницу в текущем окне, но можно его не ставить. Браузеры и так откроют страничку в старом окне. Это у них в настройках по умолчанию. А с другой стороны, возьмут и поменяют эти настройки. Они могут. Иногда складывается впечатление, что разработчики некоторых браузеров специально давят на мозги бедным вебмастерам. К примеру тот же IE, лично мне уже весь мозг вынес.

Есть ещё пара атрибутов, но ими практически не пользуются. Точнее я ими практически не пользуюсь.

_parent - открывает странички во фрейме-родителе.

_top - отменив все фреймы, открывает страницы в полном окне браузера.


Вот теперь точно с основным разобрались. Тут ещё много чего. Ведь ссылками могут быть и изображения. А можно переходить по ссылке на туже страничку, но в разные места. Тут много чего ещё, но об этом уже на следующих страничках.

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP