CSS дает возможность по особенному оформлять ссылки на страницах веб-сайта. Эта особенность заключается в том, что ссылки оформляются разными способами в зависимости от состояния, в котором они находятся.
Ссылки могут находиться в 4 состояниях:
Свойства
В каком состоянии будет ссылка
Теперь перейдем непосредственно к самому оформлению ссылок.
Цвет ссылки в css.
С помощью CSS вы можете добавить к каждому свойству цвет ссылки. Смотрите оформление на примере:
Свойства и оформление ссылок в CSS a:link /* не посещенная ссылка */ a:visited /* посещенная ссылка */ a:hover /* ссылка при наведении на нее мышкой */ a:active /* нажатая ссылка */
ссылка
a:link – это свойство ссылки;
color:#006400; — это оформление ссылки, которое ставится между скобками <>.
○ не посещенная ссылка a:link будет зеленого цвета;
○ посещенная ссылка a:visited будет желтого цвета;
○ ссылка, при наведении на нее мышкой, a:hover будет красного цвета;
○ нажатая ссылка a:active будет серого цвета.
Цвет фона ссылки в css.
Этот метод часто используется для создания меню или кнопок на веб-сайтах. Для этого воспользуемся правилом background-color.
Для примера пропишем правило background-color для свойства a:link и a:hover .
Пример :
Свойства и оформление ссылок в CSS a:link < color:#ffffff; background-color:#000000; >/* не посещенная ссылка */ a:visited /* посещенная ссылка */ a:hover /* ссылка при наведении на нее мышкой */ a:active /* нажатая ссылка */
ссылка
Результат :
Если навести курсор мышки на ссылку, то цвет фона ссылки изменится.
Как изменить размер ссылки?
Здесь тоже ничего сложного нет. Для того, чтобы изменялся размер ссылки при наведении на нее мышкой, воспользуемся правилом font-size для свойства a:hover .
Свойства и оформление ссылок в CSS a:link /* не посещенная ссылка */ a:visited /* посещенная ссылка */ a:hover /* ссылка при наведении на нее мышкой */ a:active /* нажатая ссылка */
ссылка
Результат :
Если навести курсор мышки на ссылку, тогда ее размер увеличится на 25 пикселей (размер можете выставлять на ваше усмотрение).
Ссылка без подчеркивания.
Также CSS дает возможность сделать ссылку без подчеркивания. Для этого воспользуемся правилом text-decoration для свойства a:link .
Пример :
Свойства и оформление ссылок в CSS a:link < color:#006400; text-decoration:none; /* убираем подчеркивание */ >/* не посещенная ссылка */ a:visited /* посещенная ссылка */ a:hover /* ссылка при наведении на нее мышкой */ a:active /* нажатая ссылка */
ссылка
Результат :
Ссылка отображается в виде простого слова, без какого-либо подчеркивания.
Если вы хотите сделать, чтобы при наведении курсора появлялось подчеркивание, тогда добавьте правило text-decoration для свойства a:hover .
Свойства и оформление ссылок в CSS a:link < color:#006400; text-decoration:none; /* уберем подчеркивание */ >/* не посещенная ссылка */ a:visited /* посещенная ссылка */ a:hover < color:#FF0000; text-decoration: underline; /* ссылка будет подчеркнутой */ >/* ссылка при наведении на нее мышкой */ a:active /* нажатая ссылка */
ссылка
Изменение цвета подчеркивания.
Не знаю, пригодится ли вам этот метод для сайта, но для общего развития вам нужно это знать.
Пример :
Свойства и оформление ссылок в CSS A:link < color: #0000FF; text-decoration: none; >A:hover < color: #cc0000; text-decoration: underline; >.link
Результат :
Цвет ссылки при наведении на нее мышкой, не изменится, но зато появится подчеркивание другим цветом.
Ссылки разных цветов и размеров.
Бывают такие ситуации, когда на одной странице веб-сайта необходимо использовать ссылки разного цвета и размера.
Пример :
Свойства и оформление ссылок в CSS A < font-size: 18px; color: #cc0000; >A.link1 < font-size: 15px; color:#228B22; >A.link2
| Ссылка 1 |
Результат :
Как сделать изображение ссылкой?
Заменить текстовую ссылку можно изображением (рисунком). Изображение должно быть прописано в коде между тегами и , смотрите в примере.
Пример :
Свойства и оформление ссылок в CSS A IMG < border: 0; >/* убрать рамку для всех изображений */
Результат :
Результат, я думаю, и так всем ясен. Картинка становится активной ссылкой.
Этот метод можно использовать для графического меню или кнопок на веб-сайте.
Источник: bloggood.ru
Тег link
Тег link подключает CSS файлы на HTML страницу. Кроме того, link подключает некоторые другие файлы, например, фавикон. (Фавикон — это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).
У данного тега очень много атрибутов и они могут принимать разнообразные значения, однако в реальной жизни они все практически не используются. Самое популярное — это подключение CSS и добавление фавикона.
Как подключить CSS в HTML5: . В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.
Тег link не требует закрывающего тега.
Атрибуты
| Путь к подключаемому файлу. |
| Тип устройства, для которого следует подключить файл. Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen ) или только для маленьких экранов: для мобильников или планшетов (значение handheld ). Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже. |
| Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение stylesheet указывает на то, что подключается CSS файл, значение alternate используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей. |
| Кодировка подключаемого файла. В настоящее время стандартом является utf-8 . |
| Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon. |
Значения атрибута media
В HTML5 в качестве значений могут быть указаны медиа-запросы.
| Все устройства. |
| Экран монитора. |
| Телефоны, смартфоны, устройства с маленьким экраном. |
| Устройства, основанные на системе Брайля, предназначены для слепых людей. |
| Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры. |
| Принтеры. |
| Проекторы. |
| Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения. |
| Телевизоры, которые умеют открывать web страницы (бывает и такое). |
Значение по умолчанию: all .
Пример
Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:
Это заголовок тайтл Это основное содержимое страницы.
Смотрите также
- тег style ,
который добавляет CSS прямо на странице - атрибут style , который задает стили конкретному тегу
Источник: www.code.mu
Гиперссылки и якоря
Для создания ссылок предназначен тег .
Атрибуты тега :
Ссылка на другой сайт
Это основной способ использования элемента гиперссылки :