Варианты стилизации ссылок в CSS. Включение CSS в HTML (стр.3)
Гипертекст представляет собой текст, содержащий ссылки на другой текст. Примером могут служить примечания автора на сложные определения или сноски переводчиков внизу страницы книги, если в ней встречается текст на иностранном языке. Сайты Интернета представляют собой сложную систему гипертекстовых переходов с одной страницы на другую, в пределах самой страницы, а также между несвязанными единой тематикой ресурсами. Такая структура практична, экономит много времени, позволяет посетителю быстро найти необходимую информацию и не растеряться в большом количестве переходов.
Вставка гиперссылки
В HTML для вставки гиперссылки используется дескриптор (тег) , который вставляется в нужное место. Обычно его располагают среди текста, так как гиперссылка сама по себе является текстовой структурой. Но ссылки бывают ещё графическими (иконки, кнопки, картинки); о них будет рассказано дальше. Их расположение на веб-странице не ограничивается текстом, а зависит от дизайнерского решения создателя сайта.
Это пример того, как вставить гиперссылку в HTML-документ, что осуществляется посредством тега . Посетитель сайта увидит подчёркнутый текст, отличный от цвета окружающего текста (цвет HTML-ссылки может быть любым), «главная страница Google», нажав на который, он попадёт на главную страницу поисковой системы «Гугл». Следует отметить, что текст гиперссылки должен содержать информацию о том, куда будет осуществлён переход. Этого принципа следует придерживаться и принять за правило!
Структура тега ...
Можно заметить, что тег - парный: необходим закрывающий тег .
href—атрибут тега, указывает назначение ссылки.
https://google.com/ - значение атрибута , заключающее в себе URL-адрес ресурса, на который осуществится переход. Оно заключается в двойные или одинарные кавычки. Это зависит от структуры вложенности тегов по правилам HTML.
вся эта конструкция называется элементом веб-документа.
По правилам HTML, одни элементы могут содержать другие элементы. Тег не исключение. Если программисту необходимо выделить жирным слово Google, то делается это с помощью тега по общим правилам форматирования текста, соблюдая последовательность вложенности тегов. Веб-мастер должен знать, как создать гиперссылку в HTML без ошибок, иначе они не будут работать. Неработающие ссылки на компьютерном слэнге называют «битыми».
Здесь: элемент
содержит вложенный элемент
Гугл
Абсолютные гиперссылки
протокол://название домена/путь к файлу
Пример адреса распространённого в Америке поисковика: https://aol.com — абсолютный, так как содержит имя домена.com.
Абсолютные гиперссылки используются для переходов на страницы других сайтов или для доступа к ресурсам, расположенным на другом сервере. Переход осуществляется с помощью протоколов Интернета. Протоколы — это не тема данной статьи, но поскольку они участвуют в создании гиперссылок, необходимо хотя бы вкратце о них упомянуть:
- http и https — наиболее часто встречающиеся; по ним осуществляется переход между интернет-страницами разных сайтов;
- ftp — протокол для загрузки файлов на сервер или скачивания пользователем с сайта;
- mailto — почтовый протокол, по которому отправляется электронная почта непосредственно с сайта, не заходя в личную почту.
Существуют ещё несколько протоколов особого назначения (gopher, telnet), встречающихся довольно редко, использование которых требует специальных знаний в программировании или системном администрировании.
Относительные гиперссылки
При относительной адресации использование гиперссылок в HTML служит для переходов внутри ресурса и не ведёт за его пределы. Если страница настолько большая, что работает вертикальная полоса прокрутки, иногда очень длинная, как, например, в словарях, то очень удобно и целесообразно использовать относительные ссылки для быстрого перехода к нужной букве.
Создавая интернет-словарь, программист в начале страницы располагает алфавит, и если бы не применение ссылок, то пользователю пришлось бы очень долго крутить колесо мыши, чтобы добраться до буквы «Я».
где ya называется якорем, а Перейти к букве Я - якорем назначения. Для правильного отображения якорей рекомендуется использование латинских букв и цифр, поэтому не стоит писать «Я», хотя так было бы понятнее.
Теперь, чтобы осуществлялся переход от алфавита в начале страницы к букве «Я», нужно сделать привязку якоря в том месте HTML-документа, в котором начинаются слова на букву «Я»:
перед якорем стоит знак решётки, без которого переход к букве не будет работать.
Относительная адресация при создании сайта
Удобный и самый общепринятый алгоритм создания сайта программистом:
- создание папки в компьютере и расположение её в месте быстрого доступа для удобства;
- создание в этой папке главной ;
- создание второстепенных веб-страниц (index.html/page2);
- и размещение в ней графических файлов;
- создание папки и размещение в ней других объектов (файлы для скачивания, например);
- наполнение сайта контентом;
- размещение файлов сайта на хостинге.
Обязательно придётся использовать ссылки для связи между элементами сайта, и очень кстати будет знать, как вставить гиперссылку в HTML на другую страницу этого же сайта. Если файлы сайта находятся в одной директории, на одном сервере, то нет необходимости использовать абсолютную адресацию. При передаче файлов сайта на хостинг связь между объектами сохранится, потому что они на хостинге также разместятся в одной директории.
Допустим, программист создал главную страницу сайта index.html, на которой имеется ссылка на другую страницу page2.html, украшенную картинкой img.png. Тогда относительный путь к этой картинке будет выглядеть так:
Совет: при изучении этой темы лучше всего использовать простой редактор текста по причине того, что нужно приобрести сноровку в правильном написании адресов перехода и чтобы научиться разбираться в чужом коде. На этом этапе будет хорошим результатом без ошибок прописанная гиперссылка в блокноте, HTML их не прощает и выдаёт ошибки.
Способы переходов по гиперссылкам
По умолчанию новая страница открывается в текущем окне браузера, когда пользователь кликает по гиперссылке. Но веб-программист может изменить значение по умолчанию и заставить открываться страницу, к примеру, в новом окне. Для этого существует атрибут target с определённым своим значением. Нагляднее всего это можно выразить таблицей.
Синтаксис применения атрибута target:
Главная страница «Гугл» откроется в новом окне.
Примечание: для открытия страниц в новой вкладке не существует значений для данного атрибута, а задаётся самим пользователем в настройках браузера.
Цвет гиперссылок
Опытный пользователь Интернета со временем должен был заметить, что гиперссылки отличаются по цвету от окружающего текста, и обычно они синие. Ссылки, по которым он переходил и затем вернулся на прежнюю страницу, становятся сиреневыми. Использование гиперссылок в HTML в нестандартной цветовой гамме немного, но выделяет сайт среди остальных.
Задаются цвета ссылок в теге
с помощью атрибутов и их значений, в которых выступает цвет HTML в системе rgb (#00FF00) или с прямым указанием имени цвета («green»). Существует три вида атрибутов для ссылок:- link — задаёт цвет непосещённой ссылки;
- vlink — задаёт цвет ссылки, по которой пользователь уже переходил;
- alink — задаёт цвет ссылки в момент перехода на другую страницу. Это происходит быстро, поэтому не всегда можно уловить этот эффект.
Пример разметки:
Если применить эти атрибуты в теге
, ссылки данного веб-документа будут тёмно-синими, посещённые - лилового, а активные - оранжево-красного цвета.Графические гиперссылки
Прогресс и развитие веб-дизайна обязывают знать, как вставить гиперссылку в HTML в качестве изображения. Понятно, что картинка должна соответствовать содержимому страницы назначения. Например, главная страница сайта о лекарственных растениях может быть представлена в виде фотографий растений, кликнув по которым, пользователь перейдёт на страницу, на которой описываются лекарственные свойства растения.
Широко применяется способ замены статичных кнопок () на красивые графические, созданные веб-дизайнером в редакторах графики (GIMP, Photoshop).
Для вставки графики в качестве гиперссылок на страницы сайта используется тот же синтаксис, только вместо текста используется тег вставки изображения по правилам HTML:
К точно так же применимы атрибуты задания альтернативного текста, ширины, высоты и другие.
Звонки с сайта
Стандарт html5 расширил функциональные возможности использования Интернета, и теперь совершать звонки можно не только с телефона, но непосредственно с сайта. Для этой цели также можно использовать гиперссылки в HTML документе, и они имеют такой синтаксис:
...абонент ...
Вместо слова «абонент» прописывается понятный звонящему контакт, как в телефонной книге. Также можно разместить графический файл (фотографию абонента).
Чтобы звонки совершались с сайта, необходимо наличие не только ссылки на номер телефона абонента, но и гарнитуры (микрофон, наушники), установленной на компьютере VoIP-программа, скорость интернета должна превышать 0,5 Мб/сек. Оплата за звонки осуществляется расходом траффика. Поэтому, если Интернет безлимитный, то звонки бесплатные.
Этика создания гиперссылок
Размещая сайт в Интернете, веб-мастер должен знать, какие виды гиперссылок существуют в HTML, и не только правильно, профессионально их применять, но и придерживаться следующих положений:
- Гиперссылка должна быть хорошо видна, отличаться от окружающего её текста. Пользователь должен знать, что это - гиперссылка.
- Пользователю должно быть понятно, куда он попадёт, нажав на ссылку. Для этого целесообразно использовать ещё атрибут title, который лаконично описывает страницу перехода. Синтаксис применения атрибута такой:
- Пользователь должен получить правдивую информацию о файле, который будет скачан при переходе по ссылке.
Попав не на ожидаемую страницу или скачав не тот файл, пользователь в 99% случаев тут же покинет сайт и в будущем никогда на него не зайдёт.
Анти-Seo при создании гиперссылок
Кроме технической стороны вопроса о том, как вставить гиперссылку в HTML, следует осветить ещё и нравственный аспект. Существует много сайтов, доступ к которым пользователям блокируется программами безопасности (антивирусом) или даже государством. Это те сайты, которые были созданы нечистыми на руку веб-программистами.
Одна из уловок, к которой они прибегают, - это вставка «невидимых» гиперссылок на веб-страницу. Мошенники знают, как создать гиперссылку в HTML, а при помощи атрибутов убрать подчёркивание ссылки и назначить ей цвет окружающего текста с тем, чтобы рядовой пользователь не увидел её. А при помощи других инструментов веб-технологий (CSS, JavaScript, PHP) можно запрограммировать их поведение. К примеру, событие OnMouseOver языка JavaScript активирует действие элемента веб-страницы. Когда пользователь проводит курсором по невидимой ссылке, он попадает на рекламную страницу другого сайта. Или ещё хуже, когда присутствует невидимая ссылка на файл и на его компьютер начинает скачиваться и устанавливаться ненужное программное обеспечение. Обычно это вирусы, которые меняют домашнюю страницу браузера, захламляют жёсткий диск массой программ и прочее.
Скоро такие сайты попадают в «чёрный список» вирусных баз, систем безопасности и среди самих пользователей Интернет. Такие сайты долго не живут, и им приходится менять свои названия, бесконечно мигрировать по Интернету, меняя хост-провайдеров. Это не способствует раскрутке сайта, к чему всегда стремится его создатель, никогда не сделает его мегапорталом, таким как, например, соцсети. Кроме прочего, такие уловки вызывают много отрицательных эмоций у пострадавших от этих действий людей.
Как создавать ссылки в HTML документе(Вы найдете больше примеров внизу этой страницы)
HTML Гиперссылки (Ссылки)
Тег может быть использован двумя способами:
- Чтобы создать ссылку на другой документ - используя атрибут href
- Чтобы сделать закладку внутри документа - используя атрибут name
HTML Синтаксис Ссылки
Пример
Посетите сайт |
это отобразится браузером так:
HTML Ссылки - Атрибут Target
Атрибут target (назначение) указывает где открывать залинкованный (тот, на который ссылается ссылка) документ.
Пример ниже откроет залинкованный документ в новом окне браузера или на новой вкладке:
HTML Ссылки - Атрибут Name
Атрибут name используется для создания закладки ("якоря" / "анкера") внутри HTML документа.
Замечание:
Грядущий в обозримом будущем стандарт HTML5 предлагает использовать атрибут id
вместо атрибута name для указания имени ссылки.
Использование атрибута id фактически работает и в HTML4 во всех современных браузерах.
Закладки не отображаются каким-либо специальным образом. Они не видимы для читателя.
Замечание: Всегда добавляйте замыкающий слэш к ссылкам на поддиретории. Если вы создаете ссылку так: href="http://сайт/html", то генерируется два запроса к серверу, сначала сервер добавляет слэш к адресу, и затем создает новый запрос: href="http://сайт/html/".
Совет: Именованные ссылки часто используются для создания "таблицы содержания" в начале большого документа. Каждой главе внутри документа приписывается именованная ссылка, и ссылки на каждую из этих именованных анкеров вставляются в начало документа.
Совет: Если браузер не находит указанную именованную ссылку, он идет в начало документа. Никаких ошибок не возникает.
Зачастую эта ссылка не слишком заметна. Специально ее искать будет лишь тот, кто сообразит, что статья не закончилась на втором-третьем абзаце, и есть там что-то еще. Чтобы как-то выделить данную ссыль, нужно ее соответствующим образом оформить. Но как это грамотно сделать? Ведь если заглянуть в код большинства шаблонов WordPress, то можно обнаружить, что текст данной ссылки как бы «зашит» в php-код вывода статьи. Вот в таком, например, виде:
Оформление тэга more в WordPress. Способ 1
Во-первых, у движка WordPress уже есть на сей счет заготовка в виде класса more-link . То есть, как бы вы не извращались с шаблоном, но сам движок в любом случае подставит к данной ссылке class="more-link" . И это очень полезная штуковина. Она говорит о том, что мы преспокойно можем использовать данный класс, просто добавив для него некоторый набор правил в лист стилей css нашей темы. По сути, нам остается лишь дописать в файле style.css шаблона что-то вроде:
More-link {
background: #ffc;
}
Но! Здесь есть небольшая засада. Дело в том, что слишком вольно с данной ссылкой мы обращаться не можем по одной простой причине: ссылка эта наследует все те правила, которые уже предопределены для ссылок в посте. Фон изменить можно, размер шрифта тоже можно. Но цвет ссылок уже не поменяешь. Кроме того, заменить текстовую ссылку картинкой - тоже задачка не из простых. Поэтому читаем другой способ.
Оформление тэга more в WordPress. Способ 2
Во-вторых, можно эту ссылку вынести вообще в отдельный блок, которому задать какие угодно правила отображения. Как это сделать? Леххко и непринужденно! Для начала в файле index.php немного исправим то место, где говорится о выводе содержимого статьи. Это все та же часть:
Здесь мы просто удалим все, что находится между одинарными кавычками и оставим вот такую запись:
Если за вывод текста отвечал какой-либо класс типа entry, то самое время здесь закрыть данный блок (ставим
Понятно, что картинка уже должна лежать в папке images вашего шаблона и иметь заданные размеры и название bg-more.gif .
Все просто! Если у вас есть другие варианты решения данной проблемы, буду рад услышать.
Между открывающим и закрывающим тегом могут содержаться строчные и строчно-блочные элементы, такие как: span, code, strong, img .. ,
а также перенос строки
Предупреждение!
Атрибуты ссылки
Тег а может содержать несколько атрибутов. Наряду с общими для большинства тегов class, style, id , используется с некоторыми специфическими атрибутами.
href
URL (Uniform Resource Locator) - универсальный указатель ресурсов.
Значением href может быть любой допустимый абсолютный или относительный url, включающий идентификатор фрагмента или фрагмент кода JavaScript.
target
Не обязательный. Обычно этот атрибут использует 2 значения:
target="_self" - значение по умолчанию для тега a . Документ, на который указывает гиперссылка, должен быть отображен в том же окне.
target="_blank" - Документ, на который указывает гиперссылка, будет открыт в новом безымянном окне.
title
Необязательный атрибут. Позволяет определить текст, который вы сочтете нужным вывести на экран в виде подсказки, при наведении указателя на гиперссылку.
Значением атрибута является произвольная строка, заключенная в кавычки. Можно использовать для вывода названия документа, или при использовании вместе с атрибутом target="_blank" , вежливо предупредить, что документ откроется в новом окне
"откроется в новом окне" > "название изображения" / > </ a >Остальные атрибуты, при необходимости, вы можете посмотреть в справочнике. Они не так часто употребляются, поэтому здесь не рассматриваются.
путь/документ.html
Обычно в относительном URL имя сервера опущено, и указывается сокращенный адрес документа, который автоматически комбинируется с базовым адресом.
× Базовый URL
Должен быть определен в документе при помощи тега
Разберем как будет формироваться относительный URL, в зависимости от расположения файлов. Легче понять на примере.
Основной документ - ссылающийся документ в котором находится ссылка
Текущая папка - где расположен основной документ
Вложенная папка - внутри текущей
Соседняя папка - вместе с текущей, располагается в общей родительской
Родительская папка - внешняя по отношению к текущей
Цель-1</ a > "вложенная/цель-2.html" > Цель-2</ a > "../соседняя/цель-3.html" > Цель-3</ a > Цель-4</ a >Бывают и более сложные варианты с большим числом уровней вложенности.
Можно сформулировать несколько простых правил:
Если цель находится в другой папке текущего каталога (вложенной),
путь = имя_каталога/цель
Имя внешнего (по отношению к текущему) каталога не указывается, а в начале пути ставится 2 точки и слэш - ../ и далее путь
Абсолютные ссылки
Если запрашиваемый документ находится на другом сервере, то необходимо указывать абсолютный URL
http://сервер/путь/документ.html
URL типа http
Самый обычный URL, наиболее часто применяемый в качестве цели гиперссылки. Выглядеть может вот так:
http://www.site-name.com
В общем виде данный тип имеет следующий формат: http://сервер:порт/путь
Путь
- это иерархическая последовательность, указывающаяся местоположение документа на сервере.
Одно или несколько имен, разделенных наклонной чертой. Все имена, кроме последнего - имена каталогов. Последнее имя - имя документа (по умолчанию веб-серверы принимает имя файла index.html)
Сервер - компьютерная система, хранящая и выдающая по внешнему запросу веб-ресурс и обладающая уникальным IP-адресом. Имя состоит из нескольких частей, включая собственное имя сервера и последовательность доменных имен, отделенных друг от друга точками.
Порт - (обычно может быть опущен, указывается редко) - номер коммуникационного порта сервера, через который подключается браузер клиента.
URL типа file
Файловый URL указывает на файл, хранящийся на компьютере, без регламентирования протокола, применяемого для его загрузки. Это позволяет вам загружать и выводить на экран локальный документ.
File://сервер/путь
File-сервер, как и http-сервер, должен быть доменным именем или IP-адресом компьютера, содержащего скачиваемый файл. Отличие - протокол соединения не указывается. Файловый сервер может быть неквалифицированным, но уникальным именем компьютера в личной сети, или устройством хранения информации.
Путь к запрашиваемому файлу на указанном сервере может различаться в зависимости от операционной системы на сервере
URL для mailto
письмо мне</ a > "mailto:fоg@fоgnsnow.ru?subject=Test mailto" > письмо мне + тема</ a >URL типа ftp
Указатель ресурса типа ftp используется для получения документов с FTP-серверов. В общем виде выглядит так:
ftp://пользователь:пароль@сервер:порт/путь;тип=код_типа
FTP
(Fail Transfer Protocol) - служба, требующая аутентификации. Значит для получения документа с сервера, вы должны быть зарегистрированным пользователем и знать пароль.
Многие FTP-серверы дают ограниченный доступ к своему содержимому всем желающим под логином - anonymous или quest, а порой и без всякого логина (подразумевается по умолчанию)
Никогда
!
Не помещайте ftp URL с именем пользователя и паролем ни в какой документ!
Браузер сам предложит вам их ввести после соединения с сервером
Сервер и порт указываются по тем же правилам, что и в http URL (если порт не указан, то по умолчанию назначается порт 21)
Путь - последовательность каталогов, разделенных символом наклонной черты, ведущей к запрашиваемому файлу.
Код_типа передачи - по умолчанию файлы передаются как двоичные. Если указать type=
d - название каталога
a - файл содержащий ASCII-текст
остальное смотрите в справочнике...
Ссылки внутри одной страницы
- Создать фрагмент, который будет служить целью для гиперссылки
- Создать ссылку на этот фрагмент
Для создания фрагмента применяется атрибут id , с помощью которого мы помещаем цель ссылки прямо в определяющий тег, например в заголовок.
Атрибуты ссылки</ h3 > ... Фрагмент "Атрибуты ссылки"</ a >
Если бы фрагмент, созданный выше, находился на другой странице, например somepage.html, то адрес этой страницы должен быть включен в URL перед знаком #
Фрагмент на другой странице</ a >При использовании абсолютного URL, адрес формируется аналогично:
"http://site-name.com/somepage.html#Atribut_link" > Абсолютная ссылка на фрагмент </ a >Изображение по умолчанию является строчно-блочным элементом и может быть использовано как содержимое гиперссылки.
"Изображение-ссылка" / > </ a >В приведенном примере при клике на изображение в этом же окне откроется document.html
Если нужно, чтобы при клике открылось полноразмерное фото в новом окне, нужно в качестве цели указать адрес этого фото и добавить атрибут target .
</ a >Для оформления гиперссылок используются встроенные стили, присваиваются классы и идентификаторы, т.е применяются те же методы оформления, что и к прочим тегам.
Как сделать ссылку блочной
Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.
/* CSS. Создаем классы и индексы для ссылки */ /* делаем ссылку блочной */ a.block_link { display : block ; } /* плавающей (автоматически становится блочной */ a#float_link { float : left ; } /* абсолютной (автоматически становится блочной */ а.absolut_link { position : absolute ; } Блочная ссылка</ a >можно обращаться как с блочным элементом.
Примечание
href - обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/ .При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.
Псевдоклассы
Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):
- Цвет
. Обычно браузеры отображают не посещенную ссылку синим цветом
- Подчеркивание
- При наведении
на ссылку, вид курсора меняется
- При клике
, цвет ссылки меняется на красный
- После посещения
, цвет ссылки становится фиолетовым
При отображении гиперссылок большинство браузеров по умолчанию использует определенные стилевые правила.
Мы можем установить по умолчанию собственные правила для отображения ссылок. Например, выводить их более крупным и/или плотным шрифтом, задать цвет по-вкусу, применить курсив, убрать подчеркивание и многое другое.
Но что делать с изменением цвета при клике на ссылку, или после посещения?
Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс { набор стилевых правил;}
Различают 4 специальных состояния гиперссылок.
- a:link - не выбранная пользователем, непосещенная гиперссылка
- a:visited - ссылка, посещенная ранее
- a:hover - выбранная ссылка, на которую наведен указатель курсора 12px ; border : 1px solid #CDECD3 ; background : #E9FFEE ; border-radius: 6px ; } .link_button :hover { background : black ; color : #fff ; } .link_button :active { color : red ; }
Внимание специфичность!
Почему иногда псевдоклассы не работают?
Т.к все рассмотренные псевдоклассы имеют одинаковый приоритет, то следующий переопределяет предыдущий. Здесь важен порядок записи стилей .
"L oV e & HA te" - любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.
Что можно делать с помощью только CSS без использования сценариев JavaScript и пр.
Секрет достаточно прост. Псевдокласс:hover позволяет управлять параметрами элементов, содержащихся в теге a , А он может содержать разные элементы, например изображение или текст.
Значит при наведении курсора на ссылку, содержащую определенный элемент, мы можем изменять цвет текста (color), видимость элемента (visibility: hidden|visible), управлять выводом элементов (display: none|block|inline|...), цветом фона, адресом фонового рисунка (background: цвет url(имя файла)) и т.п.
Этот элемент мы можем позиционировать абсолютно (position:absolute)! Он тут же выпадет из общего потока и прилипнет к верхнему левому углу ближайшего позиционированного родительского блока.
Остается лишь поместить элементы в нужную область содержащего позиционированного блока с помощью свойств left, top, right и bottom (более того, мы можем вынести элемент за пределы родительского блока, присвоив соответствующему из перечисленных свойств отрицательное значение), при необходимости, задав размеры, отступы и прочие параметры.
Вот и все. Создается визуальная иллюзия самостоятельности элемента.
Не забываем, что наш "независимый элемент" остается частью ссылки и при наведении на него курсора (если не отменен вывод) происходит то же, что и при наведении на ссылку. Это можно считать минусом рассмотренного метода. Немного смягчить столь явную связь ссылки с удаленным объектом можно, присвоив свойству cursor:default . По крайней мере, при наведении курсора на объект он будет выглядеть как обычный указатель.
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A . Поэтому этот псевдокласс можно опустить.
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover .
Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Результат данного примера показан на рис. 1.