КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

Оформление текста и другие базовые возможности

---

Удаление подчеркивания ссылок

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

Для того чтобы убрать подчеркивание ссылок, воспользуемся свойством text-decoration. По умолчанию броузер устанавливает значение underline данного свойства для всех элементов a. Поэтому нам достаточно всего лишь установить его значение none для ссылок:

text-decoration: none;

Такой результат был достигнут с помощью следующего CSS-кода:

a:link, a:visited{
  text-decoration: none;
}

Рис. 1. Использование свойства text-decoration позволяет убрать подчеркивание для ссылок

Помимо underline и none свойство text-decoration может принимать следующие значения:

• overline
• line-through
• blink

Эти значения можно комбинировать. К примеру, если бы вам захотелось оформить ссылку с помощью как нижнего, так и верхнего подчеркивания, как показано на рис. 2, то можно было бы использовать следующее правило стиля:

a:link, a:visited{
  text-decoration: underline overline;
}

Рис. 2. Комбинирование различных значений свойства text-decoration позволяет создавать ссылки с нижним и верхним подчеркиванием

Создание ссылки, меняющей цвет при наведении на нее указателя мыши

Можно создать привлекательный эффект изменения цвета или иных параметров ссылки при наведении на нее указателя мыши. Его можно с успехом использовать в созданных на основе CSS панелях навигации; он применим и по отношению к ссылкам в тексте.

Для создания описанного эффекта необходимо воспользоваться динамическими псевдоклассами якоря :hover и :active. Рассмотрим следующий пример. Ниже представлено типичное правило стиля, в котором описания всех псевдоклассов якоря одинаковы:

a:link, a:visited, a:hover, a:active {
  text-decoration: underline;
  color: #6A5ACD;
  background-color: transparent;
}

Если мы применим данное правило, ссылки будут отображаться синим цветом (#6A5ACD) с подчеркиванием, как на рис. 3.

Рис. 3. Использование одинакового описания для всех псевдоклассов ссылок

Для выполнения поставленной задачи нам нужно удалить селекторы псевдоклассов :hover и :active из общего описания и задать каждому из них свое собственное описание. В приведенном ниже CSS-коде к нижнему подчеркиванию добавлено еще и верхнее. Кроме того, в нем задан фоновый цвет и более темный цвет для текста ссылки. На рис. 4. показан результат обработки данного кода броузером:

a:link, a:visited {
  text-decoration: underline;
  color: #6A5ACD;
  background-color: transparent;
}

a:hover, a:active {
  text-decoration: underline overline;
  color: #191970;
  background-color: #C9C3ED;
}

Как вы уже наверняка догадались, остальным псевдоклассам также можно задавать отдельные описания. В частности, вы можете захотеть использовать специальное оформление для посещенных ссылок. Для этого нужно составить отдельное описание для псевдокласса :visited.

Рис. 4. Наведение указателя мыши на ссылку, для которой указан специальный стиль при данном событии

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

Совет Порядок следования описаний псевдоклассов. Псевдоклассы якоря должны следовать в порядке :link, :visited, :hover, :active. В противном случае результат обработки кода может отличаться от ожидаемого.

Использование на одной странице различных стилей ссылок

В предыдущей секции мы рассмотрели способ стилевого оформления различных селекторов элемента a, но что делать в том случае, если разные ссылки в одном и том же документе должны выглядеть по-разному? Например, ссылки на панели навигации должны отображаться без подчеркивания, но ссылки в тексте должны быть легко распознаваемы. Или же фон одной части документа темнее, чем фон другой, и здесь ссылки должны быть светлее.

Попробуем создать различные стили для ссылок на примере, в котором мы уже определили один обычный стиль для них:

a:link, a:visited {
  text-decoration: underline;
  color: #6A5ACD;
  background-color: transparent;
}

a:hover, a:active {
  text-decoration: underline overline;
  color: #191970;
  background-color: #C9C3ED;
}

 

Данные правила будут использоваться по умолчанию – они описывают стиль отображения обычных ссылок в вашем документе. Первое правило задает синий цвет ссылок, поэтому, если часть страницы будет залита синим фоном, их будет не видно. Следовательно, необходимо создать второй набор стилей, который будет применяться к ссылкам, расположенным в данной области.

Прежде всего, создадим class или id для элемента, в котором будут размещаться ссылки другого цвета. Если стиль контейнера уже задан средствами CSS, у него наверняка есть атрибут class или id, который мы можем использовать для выполнения поставленной задачи. Допустим, документ содержит следующую разметку:

<div class="boxout">
  <p>Visit our <a href="http://ya.ru">online store</a>, for all your widget
  needs.</p>
</div>

Создадим правило стиля, применимое по отношению ко всем ссылкам внутри элемента класса boxout:

.boxout {
  color: #FFFFFF;
  background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
  text-decoration: underline;
  color: #E4E2F6;
  background-color: transparent;
}
.boxout a:hover, .boxout a:active {
  background-color: #C9C3ED;
  color: #191970;
}

Как видно на ризультате, теперь все ссылки в документе будут отображены в соответствии с первым правилом, за исключением ссылок, размещенных внутри элемента div класса boxout – цвет текста последних будет бо- лее светлым.

Результат:

---