ссылки

Можно ли оборачивать ссылкой блок?

В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то <a> мы добавляем внутрь <h1>, но никак не наоборот.

<h1><a href="1.html">Заголовок</a></h1>

При этом надо помнить, что область ссылки ограничена размером текста. <h1> элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.

a {
  display: block;
}

Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.

Как заголовок сделать ссылкой?

В блогах заголовок сообщения обычно служит и ссылкой на полный текст. Чтобы заголовок, который создаётся с помощью тега <h1> превратить в ссылку, следует текст обернуть тегом <a>. В HTML5 порядок тегов не имеет значения, поэтому блочный элемент <h1> можно вставить внутрь строчного элемента <a>, но в HTML4 и XHTML тег <a> обязан находиться внутри <h1>, но никак не наоборот.

Последняя линия справа

Придумайте три способа, как убрать последнюю линию справа от ссылки. При этом допускается только редактировать стили без изменения HTML-кода внутри <body>.

Ссылки с линией справа

Рис. 1. Ссылки с линией справа

Разноцветные ссылки

С помощью стилей задайте цвет ссылок, как показано на рис. 1.

Разноцветные ссылки

Рис. 1. Разноцветные ссылки

Как открыть ссылку в новом окне?

По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу <a> следует добавить атрибут target со значением _blank.

Как добавить рисунок к внешним ссылкам?

Внешними называются ссылки, которые ведут на другой сайт. Чтобы пользователь мог отличить такие ссылки от обычных, к внешним ссылкам добавляют небольшой рисунок (например, такой ), который информирует о том, что ссылка указывает на другой ресурс.

Для изменения стиля ссылок создадим новый стилевой класс external и для него добавим рисунок в виде фона с помощью свойства background. При этом следует указать значение no-repeat, чтобы фон не повторялся.

Как добавить пунктирное подчеркивание к ссылкам?

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчеркивание у ссылок с помощью свойства text-decoration со значением none.

Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?

Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью атрибута class применяем его к желаемым тегам <a>.

Как на странице сделать ссылки разных цветов?

Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На темном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.

Как изменить вид ссылки при наведении на нее курсора мыши?

Псевдокласс :hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A, потом через двоеточие hover.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.