Ссылки | htmlbook.ru
Цвет ссылки устанавливается через свойство color, которое добавляется к селектору A. Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition, значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.
В блогах заголовок сообщения обычно служит и ссылкой на полный текст. Чтобы заголовок, который создаётся с помощью тега <h2> превратить в ссылку, следует текст обернуть тегом <a>. В HTML5 порядок тегов не имеет значения, поэтому блочный элемент <h2> можно вставить внутрь строчного элемента <a>, но в HTML4 и XHTML тег <a> обязан находиться внутри <h2>, но никак не наоборот.
При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню.
По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу <a> следует добавить атрибут target со значением _blank.
Внешними называются ссылки, которые ведут на другой сайт. Чтобы пользователь мог отличить такие ссылки от обычных, к внешним ссылкам добавляют небольшой рисунок (например, такой ), который информирует о том, что ссылка указывает на другой ресурс.
Для изменения стиля ссылок создадим новый стилевой класс external и для него добавим рисунок в виде фона с помощью свойства background. При этом следует указать значение no-repeat, чтобы фон не повторялся.
Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе.
Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Для создания линии следует использовать свойство border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчеркивание у ссылок с помощью свойства text-decoration со значением none.
Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью атрибута class применяем его к желаемым тегам <a>.
Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На темном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.
Псевдокласс :hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши.
В таблице стилей вначале указывается
селектор A, потом через двоеточие hover.
Чтобы задать вид оформления посещенных ссылок, используйте псевдокласс :visited, который через двоеточие добавляется к селектору A, как показано в примере 1.
CSS стиль ссылки — свойства и оформление анкора
О том, что представляют собой ссылки в HTML, я уже подробно рассказал. С точки зрения CSS работать с тегом
Так вот, для оформления ссылок используется четыре псевдокласса:
- :link — ссылка, по которой ещё не переходили.
- :hover — ссылка, над которой сейчас находится курсор мыши.
- :active — ссылка, которую в данный момент нажимает пользователь.
- :visited — посещённая ссылка, то есть та, по которой уже переходили.
Всё остальное — уже изученный и ещё не пройденный материал, имеющий к ссылкам такое же отношение, как и к другим элементам HTML.
Код ниже демонстрирует оформление ссылок в зависимости от перечисленных выше четырёх событий.
<!DOCTYPE html>
<html>
<head>
<title>Ссылки</title>
<style type="text/css">
a:link {
color: #DC143C;
}
a:hover {
color: #FF00FF;
text-decoration: none;
font-size: 18px;
}
a:active {
color: #FFFF00;
text-decoration: overline;
}
a:visited{
color: #228B22;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">Ссылка, ведущая сама на себя. Подведите к ней курсор, подержите нажатой кнопку мыши, отпустите.
Всё это время наблюдайте за изменениями.</a>
</body>
</html>
Разберём стилевое оформление.
color: цвет — меняет цвет ссылки в зависимости от того, нажали её или нет, только подвели к ней курсор или уже по ней перешли.
text-decoration: none; — убирает заданное ссылкам по умолчанию подчёркивание текста.
font-size: 18px; — меняет размер шрифта ссылки в момент, когда к ней подводится курсор. В момент нажатия ссылки размер шрифта не меняется и остаётся равным 18px, так как пользователь, нажимая ссылку, по-прежнему не убирает с неё курсор мыши, а псевдоклассу :active другой размер шрифта не задан.
text-decoration: overline; — зато свойству :active задано отличное от псевдокласса
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Стилизация HTML-ссылок (a hrefs) | CSS Tutorial
Гиперссылки являются основой веб-страниц. Это позволяет нам связать группу веб-страниц, сделав их веб-сайтом. С помощью CSS вы можете значительно изменить внешний вид этих ссылок и сделать свою веб-страницу еще более привлекательной.
Пример:
а {
размер шрифта: 12px;
цвет: #222222;
} Гиперссылки могут быть оформлены разными способами, конечно, цвет, семейство шрифтов, фон и т. д. работают для ссылок, но они также могут быть оформлены в соответствии с состояние , в котором они находятся.
Существует четыре типа состояний, в которых может находиться ссылка:
- a:link → Обычная, непосещенная ссылка.
- a:visited → Ссылка, которую пользователь посещал (щелкал) ранее.
- a:hover → Когда пользователь наводит указатель мыши на ссылку.
- a:active → Момент перехода по ссылке.
При настройке стиля для состояний ссылок необходимо помнить о нескольких правилах.
-
a:hoverвсегда идет послеa:linkиa:visited -
a:activeвсегда идет послеa:hover
Рассмотрим следующий пример:
/* непросмотренная ссылка */
а: ссылка {цвет: #00ffff; }
/* посещенная ссылка */
а: посетили {цвет: #808080; }
/* наведите курсор на ссылку */
а: наведите { цвет: # 000088; }
/* выбранная ссылка */
а: активный { цвет: # 0000ff; } Живой пример →
Вызов 9Свойство 0005 text-decoration мы изучали ранее.
Свойство украшения текста используется для изменения внешнего вида ваших ссылок, например, для удаления подчеркивания или добавления к нему поперечных линий. Также вернемся к свойствам фона. Ссылки могут быть оформлены по-разному с помощью селекторов class и id . Все эти свойства работают с тегом , так что не стесняйтесь экспериментировать по своему усмотрению.
Небольшое изменение с большим эффектом
курсор:указатель; Всякий раз, когда мы наводим указатель мыши на ссылку, курсор мыши превращается из стрелки в указатель в виде руки. Вы когда-нибудь думали, почему? Или как? Это осуществляется с помощью свойства курсора . Он может принимать различные значения, одним из которых является указатель .
а: наведите {
цвет: #000088;
курсор : указатель ;
} Живой пример →
Ниже приведены некоторые часто используемые значения для курсора 9.
0006 свойство:
-
курсор:перекрестие -
курсор:помощь -
курсор:переместить -
курсор:указатель -
курсор:прогресс -
не разрешено -
курсор:подождитеи т.д.
Кроме того, это не обязательно должно использоваться только для ссылок, это можно использовать с любым элементом/тегом HTML.
Живой пример →
Стилизация ссылок в виде кнопок
Мы даже можем стилизовать наши ссылки, чтобы они выглядели как прямоугольные кнопки, меняющие цвет при наведении, как показано ниже:
Маленькая зеленая кнопка Средняя синяя кнопка Большая белая кнопка
Эти ссылки стилизованы, чтобы удивлять . Мы узнаем, как это делается, когда закончим с margin и padding . Если вы не можете удержаться от проверки кода CSS для оформления ссылок, таких как эти кнопки, ознакомьтесь с руководством.
Фу! К настоящему времени вы изучили все о селекторах, фонах и шрифтах. Пришло время перейти к следующему уровню в CSS. Далее идут списки, таблицы и рамки. Продолжать идти! До встречи на следующем уроке!
- ← Назад
- Далее →
Стилизация различных состояний ссылки с помощью CSS
Рекламные объявления
В этом уроке вы узнаете, как стилизовать различные состояния ссылки с помощью CSS.
Стилизация ссылок с помощью CSS
Ссылки или гиперссылки являются неотъемлемой частью веб-сайта. Это позволяет посетителям перемещаться по сайту. Поэтому правильное оформление ссылок является важным аспектом создания удобного веб-сайта.
См. руководство по HTML-ссылкам, чтобы узнать больше о ссылках и о том, как их создавать.
Ссылка имеет четыре разных состояния — ссылка , посещенная , активная и наведение . Эти четыре состояния ссылки могут быть оформлены по-разному с помощью следующих селекторов псевдокласса привязки.
- a:link — определить стили для обычных или непосещенных ссылок.
- a:visited — определить стили для ссылок, которые пользователь уже посещал.
- a:hover — определить стили для ссылки, когда пользователь наводит на нее указатель мыши.
- a:active — определить стили для ссылок при переходе по ним.
Вы можете указать любое свойство CSS, которое вы хотите, например. цвет , шрифт , фон , граница и т. д. для каждого из этих селекторов, чтобы настроить стиль ссылок, как вы делаете с обычным текстом.
Пример
Попробуйте этот код » a:link { /* непросмотренная ссылка */
цвет: #ff0000;
текстовое оформление: нет;
нижняя граница: 1px сплошная;
}
a:visited { /* посещенная ссылка */
цвет: #ff00ff;
}
a:hover { /* наведите указатель мыши на ссылку */
цвет: #00ff00;
нижняя граница: нет;
}
a:active { /* активная ссылка */
цвет: #00ffff;
} Порядок, в котором вы устанавливаете стиль для различных состояний ссылок, важен, потому что то, что определяется последним, имеет приоритет над правилами стиля, определенными ранее.
Примечание: В общем, порядок псевдоклассов должен быть следующим — :link , :visited , :hover , :active , :focus эти для работы правильно.
Изменение стандартных стилей ссылок
Во всех основных веб-браузерах, таких как Chrome, Firefox, Safari и т. д., ссылки на веб-страницах имеют подчеркивание и используют цвета ссылок браузера по умолчанию, если вы не устанавливаете стили исключительно для них.
По умолчанию в большинстве браузеров текстовые ссылки отображаются следующим образом:
- Непосещенная ссылка в виде подчеркнутого синего текста.
- Посещенная ссылка в виде подчеркнутого фиолетового текста.
- Активная ссылка в виде подчеркнутого красного текста.
Однако внешний вид ссылки в состоянии наведения не меняется. Он остается синим, фиолетовым или красным в зависимости от того, в каком состоянии (т.
е. непосещенный, посещенный или активный) они находятся.
Теперь давайте посмотрим, как настроить ссылки, переопределив стиль по умолчанию.
Настройка пользовательского цвета ссылок
Просто используйте свойство CSS color , чтобы определить цвет по вашему выбору для различных состояний ссылки. Но при выборе цветов убедитесь, что пользователь может четко отличить обычный текст от ссылок.
Давайте попробуем следующий пример, чтобы понять, как это работает:
Пример
Попробуйте этот код » a:link {
цвет: #1ebba3;
}
а: посетил {
цвет: #ff00f4;
}
а: наведите {
цвет: #a766ff;
}
а: активный {
цвет: #ff9800;
} Удаление подчеркивания по умолчанию из ссылок
Если вам не нравится подчеркивание по умолчанию в ссылках, вы можете просто использовать свойство CSS text-decoration , чтобы избавиться от него. В качестве альтернативы вы можете применить к ссылкам другие стили, такие как цвет фона, нижняя граница, полужирный шрифт и т.
