Содержание

CSS стиль ссылки — свойства и оформление анкора

О том, что представляют собой ссылки в HTML, я уже подробно рассказал. С точки зрения CSS работать с тегом <a> можно, как и с любым другим HTML-тегом. Для ссылок в таблицах стилей предусмотрено четыре специальных псевдокласса. От классов псевдоклассы отличаются тем, что по факту они прикреплены не к тегам, а к событиям или правилам. Изменить рамку поля, в которое сейчас вводится текст, подчеркнуть красным неправильно заполненные поля формы, задать отдельное оформление тексту, написанному на другом языке — всё это и многое другое могут псевдоклассы. От прочих типов селекторов они отличаются двоеточием в начале: :read-only.

Так вот, для оформления ссылок используется четыре псевдокласса:

  • :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 задано отличное от псевдокласса :hover правило декорирования текста. Именно поэтому в момент нажатия ссылки появляется надчёркивание, тогда как при наведении курсора без щелчка ничего нет.

Полезные ссылки:

Как с помощью css сделать ссылку красивой

В css, ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предоставляют широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:

Появление каскадных таблиц стилей (CSS) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.

В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.

Сравните объем кода с использованием каскадных таблиц стилей и без них:


А вот, насколько уменьшается код после включения в него CSS:
Даже визуально заметно, что объем уменьшился в несколько раз. При этом одно стилевое описание CSS ссылки применено ко всем остальным.

CSS включает в себя большой набор средств для установки стилевых характеристик ссылок. Доступ к тегу <a href> может быть реализован несколькими способами:

  • С помощью селектора элемента – при этом стиль ссылки задается селектором элемента а. Пример:
<style type="text/css">
a{font-size:24px;
  font-background-color:#33CC99;
}
</style>

Описанный стиль будет применен ко всем ссылкам внутри страницы:

  • Через селектор идентификатора – он задается внутри тега <a href>. А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:
<style type="text/css">
#a1{font-size:24px;
  font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>

</body>

Результат аналогичен предыдущему.

  • Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:
<style type="text/css">
.a1{font-size:24px;
  font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>

</body>

С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:

<style type="text/css">
a{font-size:24px;
  font-background-color:#33CC99;
  background-color:#FFCCCC;
}
#a2
{background-color:#FF0033;
}
.a3
{background-color:#339999;
}

</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>

</body>

Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс a3 и идентификатор a2, доминируют над цветом, установленным через селектор элемента a.

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

<style type="text/css">
a{
font-size:24px;
text-decoration: none;
}

</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
</body>

Ссылка является не совсем обычным элементом html. Да и в css отношение к тегу <a href> тоже особенное. Для установки характеристик внешнего вида ссылки в каскадных таблицах стилей применяются встроенные псевдо классы.

Псевдо классом называется класс CSS, применяемый к стилю элемента в зависимости от его состояния (активный, неактивный, при нажатии).

В CSS различают несколько псевдо классов ссылок:

  • A:link – задает стиль ссылки до посещения;
  • A:visited – стиль после посещения;
  • A:active – устанавливает, как будет выглядеть активная ссылка;
  • A:hover – вид ссылки при наведении на нее курсора мыши.

A:link по своему действию аналогичен селектору элемента a (оба задают внешний вид не посещенной ссылки).

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

<style type="text/css">

    A:link { text-decoration: none; font-size:24px; }
    A:visited { text-decoration: overline; }
    A:hover { 
     text-decoration: underline overline; font-size:30px;
     color: #FF00FF; 
   }
   A:active { text-decoration: underline; color: #00FF00; font-size:40px; } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>

</body>

С помощью псевдо классов можно легко установить фоновое изображение ссылки, которое меняется в зависимости от действий пользователя. Пример:
<style type="text/css">

    A:link {
	display: block;
    width: 200px;
    height: 70px;
    background: url(im/1.gif)no-repeat; 
	}
    A:visited {
	display: block;
    width: 200px;
    height: 70px;
    background: url(im/2.gif)no-repeat; 
	}
    A:hover { 
    display: block;
    width: 200px;
    height: 70px;
    background: url(im/3.gif)no-repeat;  
   }
   A:active {
    display: block;
    width: 200px;
    height: 70px;
    background: url(im/4.gif)no-repeat; 
   } 
  </style>
 </head>
 <body>
  <p><a href="4.html"></a></p>

</body>

Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html. Да и писанины c CSS намного меньше.

Links ссылки в CSS при наведении. Уроки для начинающих академия


С CSS, ссылки могут быть стилизованы по-разному.

Text Link Text Link Link Button Link Button

Укладка ссылки

Ссылки могут быть стилизованы под любое свойство CSS (например, color, font-family, background и т.д.).

Пример

a {
    color: hotpink;
}

Кроме того, ссылки могут быть стилизованы по-разному в зависимости от того, в каком состоянии они находятся.

Четыре ссылки состояний:

  • a:link — Обычная, непосещаемая ссылка
  • a:visited — ссылка, которую посетил пользователь
  • a:hover — ссылка, когда пользователь мыши над ним
  • a:active — Ссылка момент щелчка

Пример

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

При задании стиля для нескольких состояний ссылок существуют некоторые правила заказа:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Оформление текста

Свойство text-decoration в основном используется для удаления подстрочных ссылок:

Пример

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Цвет фона

Свойство background-color может использоваться для указания цвета фона для ссылок:

Пример

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

Дополнительные кнопки-ссылки

В этом примере демонстрируется более продвинутый пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде полей/кнопок:

Пример

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Другие примеры

Добавление различных стилей к гиперссылкам
В этом примере демонстрируется добавление других стилей к гиперссылкам.

Advanced-создание кнопки связи с границами
Еще один пример создания полей/кнопок ссылок.

Изменение курсора
Свойство Cursor указывает тип отображаемого курсора. В этом примере демонстрируются различные типы курсоров (могут быть полезны для ссылок).


Стилизация ссылок с помощью CSS

Ссылка имеет четыре различных состояния: обычное, посещенная, активная и наведение. Эти четыре состояния ссылки могут быть по-разному стилизованы через свойства CSS с использованием псевдоклассов элемента привязки в зависимости от того, в каком состоянии они находятся.

Ниже рассмотрены псевдоклассы CSS, связанные с тегом HTML <a>, которые можно использовать для определения различных стилей для разных состояний гиперссылки.

  1. a:link — устанавливает стили для обычных или не посещенных ссылок, на которые не наведен указатель мыши.
  2. a:visited — устанавливает стили для ссылки, которую посетил пользователь, но на нее не наведен указатель мыши.
  3. a:hover — устанавливает стили для ссылки, когда пользователь наводит на нее указатель мыши.
  4. a:active — устанавливает стили для ссылки, по которой происходит клик.

Вы можете указать любое свойство CSS, например, color, font-family, background и т. д. для каждого из этих селекторов, чтобы переопределить стиль ссылок.

a:link { /* непосещенная ссылка, обычное состояние */
  color: #FF0000;
  text-decoration: none;
}
a:visited { /* посещенная ссылка */
  color: #00FF00;
}
a:hover { /* курсор мыши над ссылкой (hover) */
  color: #FF00FF;
  text-decoration: underline;
}
a:active { /* активная ссылка */
  color: #0000FF;
}

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

Стандартные стили ссылок

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

блок 1

Например, цвета ссылок по умолчанию в веб-браузерах на основе Gecko, таких как Firefox, — синий для не посещенных, фиолетовый для посещенных и красный для активной ссылки.

Установка цвета ссылок в CSS

Для установки цвета ссылки достаточно использовать селектор а. Однако считается хорошей практикой добавить стили для посещенных ссылок и состояния hover (момент, когда курсор находится над ссылкой). Это делается для удобства пользователя, который всегда может видеть какие ссылки он уже посетил и на какие может перейти.

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

CSS-свойство text-underline обычно используется для удаления или добавления подчеркивания для ссылок. В следующем примере демонстрируется, как удалить или установить свойство text-underline для разных состояний гиперссылки.

a:link { /* непосещенная ссылка, обычное состояние */
  color: #FF0000;
  text-decoration: none;
}
a:visited { /* посещенная ссылка */
  color: #00FF00;
  text-decoration: none;
}
a:hover { /* курсор мыши над ссылкой (hover) */
  color: #FF00FF;
  text-decoration: underline;
}
a:active { /* активная ссылка */
  color: #0000FF;
  text-decoration: underline;
}

блок 3

Псевдоклассы. Учебник CSS.

Глава 15

Псевдоклассы — это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.

Вот список всех псевдоклассов:

  • hover — Стиль элемента на который наведён курсор мыши.
  • active — Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
  • visited — Стиль для недавно посещённой ссылки.
  • link — Стиль для нечасто посещаемой ссылки.
  • focus — Стиль элемента находящегося в фокусе.
  • first-child — Стиль первого дочернего элемента.
  • lang — Определяет язык, который используется в фрагменте документа.

О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:

a:hover { color:#ff0000}

где:

a — элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover — после двоеточия собственно нужный нам псевдокласс.
{color:#ff0000} — ну и блок объявления стилей в фигурных скобках.

А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку — то она покраснеет.

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдоклассы</title>
<style type=»text/css»>
.menu {
display: block;
width: 180px;
background-color:#fff8dc;
color:#008;
font-size: 16px;
text-decoration: none;
padding: 3px;
}
.menu:hover {
display: block;
width: 180px;
background-color:#b8860b;
color:#fff;
padding: 3px;
font-size: 16px;
text-decoration: none;
}
tr:hover {
background-color:#b8860b;
}
</style>
</head>
<body>
<p>Чем Вам не блок навигации по сайту?</p>
<a href=»#»>Главная</a>
<a href=»#»>Карта сайта</a>
<a href=»#»>Купить слона</a>
<a href=»#»>Продать слона</a>
<a href=»#»>Взять слона на прокат</a>
<hr>
<p>А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.</p>
<table border=»1″ bordercolor=»#ccc» cellpadding=»1″ cellspacing=»0″>
<tr>
<td>Иванов</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>Петров</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td>
</tr>
<tr>
<td>Сидоров</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td>
</tr>
</table>
</body>
</html>

Несколько слов к примеру выше..

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент — тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:

.menu:hover { color:#ff0000;}

Не запутались в терминологии?

Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс.menu ), а остальное оставь как есть!

Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу <tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок — тег <a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!

Рассмотрим сразу три псевдокласса созданных для работы со ссылками.

  • active — Стиль активной ссылки.
  • visited — Стиль для недавно посещённой ссылки.
  • link — Стиль для нечасто посещаемой ссылки.

Сначала покажу пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдоклассы и ссылки</title>
<style type=»text/css»>
a:link {color:#0000ff}
a:active {color:#ff0000}
a:visited {color:#008000}
</style>
</head>
<body>
<a href=»#1″>Ссылка на первый якорь</a>
<a href=»#2″>Ссылка на второй якорь</a>
<a href=»#3″>Ссылка на третий якорь</a>
<hr>
<a name=»1″><h5>Первый якорь</h5></a>
<p>Псевдокласс link, в этом примере, указывает, что все не посещенные ссылки должны отображаться синим цветом.</p>
<a name=»2″><h5>Второй якорь</h5></a>
<p>Попробуйте нажить и удерживать на одну из не посещенных ссылок, чтобы увидеть для работу псевдокласса active.</p>
<a name=»3″><h5>Третий якорь</h5></a>
<p>visited — псевдокласс который, в этом примере, говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.</p>
</body>
</html>

Теперь расскажу более подробно.

Псевдокласс active присваивает ссылке определённый стиль в тот момент когда эта ссылка активна, то есть в тот момент когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active — это стиль ссылки в момент клика по ней.

Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited указывает стиль ссылки которая недавно посещалась пользователем.

Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {…} и a:link {…} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.

Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу — работать будет везде, кроме браузера Internet Explorer 6 и ниже.

Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя — пользователя. Такими элементами могут быть теги <a> <input> <select> и <textarea>.

Посмотрите на пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдокласс focus</title>
<style type=»text/css»>
input:focus {color: red}
</style>
</head>
<body>
<form>
<input type=»text» value=»Введите текст в эту форму» size=»30″>
</form>
<p>Ввели? а теперь щелкните по пустому месту на экране чтобы форма потеряла фокус.</p>
</body>
</html>

В примере текст в текстовом поле <input> изначально чёрный, но как только элемент получает фокус — то есть тогда когда пользователь кликнет по данному полю и начнет набирать текст, он окрасится красным.

Вот и весь фокус-покус..

Думаю, в ходе обучения CSS Вы уже поняли, что все элементы можно определить как родительские или дочерние и что элемент родитель может содержать в себе несколько дочерних элементов, ну например:

<div>— блок родитель
<p></p> — первый дочерний элемент
<p></p> — второй дочерний элемент
</div>

Так вот псевдокласс first-child определят стиль первого дочернего элемента находящегося в родительском контейнере.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдокласс first-child</title>
<style type=»text/css»>
div {
margin: 20px;
padding: 30px;
background-color: #c0e4ff;
border: 2px solid #008000
}
p {
color: #555;
background-color: #dcdcdc;
border: 2px solid #555
}
p:first-child {
color: #f00;
background-color: #c5ffa0;
border: 2px solid #008000
}
</style>
</head>
<body>
<div>
<p>первый дочерний параграф — он выделен псевдоклассом first-child</p>
<p>второй дочерний параграф</p>
<p>третий дочерний параграф</p>
</div>
<div>
<p>и здесь первый дочерний параграф выделен хотя блок родитель уже другой</p>
<p>второй дочерний параграф</p>
</div>
</body>
</html>

Обратите внимание на тот факт, что если бы в блоке родителе перед дочерними параграфами стоял любой другой тег, заголовок <h2> к примеру, то псевдокласс first-child уже не действовал бы к первому параграфу.. так как хоть параграф то он и первый, но элемент в блоке родителе уже второй.

Применяют данный псевдокласс в тех случаях , если требуется задать разный стиль для первого и последующих элементов, например сделать «буквицу»- одну единственную в начале документа или обозначить первый абзац текста на всех страницах сайта , выделить первый пункт в списках…и т.д.

Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Если Вы помните из курса HTML, язык документа определяют атрибуты: charset — кодировка документа и content — язык документа для тега <meta>.

<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>

Так вот для того чтобы определить язык отдельно взятого текстового блока используют псевдокласс lang() — в круглых скобках которого собственно и указывается язык.

Язык может быть:

  • ru — Русский
  • en — Английский
  • de — Немецкий
  • fr — Французский
  • it — Итальянский

Всё вместе пишется так:

span:lang(en) {font-style: italic}

— здесь мы указали, что текст взятый в контейнер <span> английский и что он должен отображаться курсивом.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<title>Псевдокласс lang</title>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>
<style type=»text/css»>
p:lang(ru) {color: #00f;}
p:lang(en) {color: #f00;}
</style>
</head>
<body>
<p lang=»ru»>Русский текст выделен синим</p>
<p lang=»en»>English text is chosen red</p>
</body>
</html>

Обратите внимание, что в теге, в нашем случая параграфе, мы указываем с помощью атрибута lang используемый язык и его стиль: <p lang=»en»>текст</p> прописанный в блоке CSS.

Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения quotes — кавычки. В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

Пишется так:

q:lang(en) {quotes: «\201C» «\201D»}

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<title>Псевдокласс lang. Цитаты.</title>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>
<style type=»text/css»>
div {
color:#000;
font-size: 24px;
}
q:lang(en) {quotes: «\201C» «\201D»}
q:lang(de) {quotes: «\201E» «\201C»}
q:lang(fr) {quotes: «\00AB» «\00BB»}
q:lang(ru) {quotes: «ёклмн..» «..ёпрст»}
</style>
</head>
<body>
<div>
<p>Обратите внимание на вид кавычек для цитат:<p>
<q>Цитата по умолчанию</q><br>
<q lang=»fr»>Французская цитата</q><br>
<q lang=»de»>Немецкая цитата</q><br>
<q lang=»en»>Английская цитата</q><br>
<q lang=»ru»>Русская цитата</q><br>
</div>
</body>
</html>

  • Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style. Можно только с помощью тега <style> в голове документа или внешнего CSS файла.

  • Если селектор, какого либо псевдокласса, явно не указывать, а написать вот так, например:

    :hover {color: #ff0}

    — то это будет значить, что действие данного псевдокласса будет распространятся на все элементы документа.

  • Браузер IE6 и ниже игнорирует практически все псевдоклассы.



Основы работы со ссылками и границами через CSS

В данном уроке мы с вами продолжим изучать различные CSS свойства.

Блок . Свойство text-decoration

Свойство text-decoration позволяет задавать некоторые эффекты для текста: подчеркивание, перечеркивание, линию сверху, а также отменять такие эффекты, если какой-либо тег имеет их по умолчанию.

Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты).

Давайте посмотрим, какие значения может принимать свойство text-decoration.

Значение underline

Значение underline добавляет подчеркивание тексту:

p {
	text-decoration: underline;
}
<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение overline

Значение overline добавляет линию над текстом:

p {
	text-decoration: overline;
}
<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение line-through

Значение line-through добавляет линию, перечеркивающую текст:

p {
	text-decoration: line-through;
}
<p>
	Lorem ipsum dolor sit amet.
</p>

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение none

Значение none отменяет все эффекты, обычно используется для отмены подчеркивания ссылок.

В следующем примере ссылка по умолчанию будет подчеркнута, а вторая ссылка с id=»link» будет без подчеркивания, так как мы ей зададим text-decoration в значении none:

#link {
	text-decoration: none;
}
<a href="#">Ссылка по умолчанию</a>
<a href="#">Ссылка без подчеркивания</a>

Так код будет выглядеть в браузере:

Блок . Состояния ссылок

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

К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание.

Конструкция :hover называется псевдоклассом. Псевдоклассы позволяют отлавливать разные состояния элементов.

Кроме :hover если еще псевдоклассы :link, которые отлавливают не посещенную ссылку, и :visited, которые отлавливают посещенную ссылку.

На некоторых сайтах с их помощью показывают пользователям, где они были, а где — нет.

Есть еще и псевдокласс :active, который отлавливает следующее состояние: на элемент нажали мышкой, но еще не отпустили.

В следующем примере для ссылки в состоянии :hover убирается подчеркивание, в состоянии :link будет красный цвет, в состоянии :visited — зеленый, в :active — голубой:

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}
<a href="#">Ссылка</a>

Так код будет выглядеть в браузере:

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния :link, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Часто состояния :link и :visited объединяют вместе через запятую:

a:link, a:visited {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

В таком случае можно их вообще и не указывать:

a {
	color: red;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

Блок . Сложные селекторы с учетом состояний ссылок

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

Давайте научимся обращаться к таким ссылкам.

Пусть у нас есть ссылки с классом .test и без него. Выберем только ссылки с этим классом:

<a href="#">Ссылка без класса</a>
<a href="#">Ссылка с классом test</a>
<a href="#">Ссылка с классом test</a>
<a href="#">Ссылка с классом test</a>

a:link.test, a:visited.test {
	color: red;
}
a:hover.test {
	color: blue;
}

Пусть у нас есть ссылки внутри блока с id test. Выберем только ссылки только из этого блока:

<a href="#">Ссылка вне блока</a>
<div>
	<a href="#">Ссылка внутри блока</a>
	<a href="#">Ссылка внутри блока</a>
	<a href="#">Ссылка внутри блока</a>
</div>
#test a:link, #test a:visited {
	color: red;
}
#test a:hover {
	color: blue;
}

Если вам не очень понятно, как обращаться со ссылками, то специально для вас я снял следующее видео:

Здесь скоро появится видео по работе с состояниями ссылок.

Блок . Работа с границами на CSS

Сейчас мы с вами научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color — цвет, а border-style задает тип границы.

Первые два свойства работают очевидным образом: border-color принимает цвета в том же формате, что и свойство color, а толщина границы может задаваться в любых единицах измерения (кроме процентов), чаще всего в пикселях.

А вот свойство border-style может принимать одно из нескольких значений: solid (сплошная линия), dotted (граница в виде точек), dashed (граница в виде черточек), ridge (выпуклая граница), double (двойная граница), groove (вогнутая граница), inset (рамка), outset (рамка) или none (отменяет границу).

Сделаем, к примеру, границу толщиной 3 пикселя, в виде точек, красного цвета:

div {
	border-width: 3px; /* толщина 3px */
	border-style: dotted; /* в виде точек */
	border-color: red;  /* красный цвет */
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Давайте теперь посмотрим на примерах, как выглядят различные типы границы.

Значение solid

Значение solid — сплошная линия:

div {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение dotted

Значение dotted — линия в виде точек:

div {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение dashed

Значение dashed — линия в виде тире:

div {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение ridge

Значение ridge — выпуклая линия:

div {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение double

Значение double — двойная линия:

div {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение groove

Значение groove — вогнутая линия:

div {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение inset

Значение inset — рамка:

div {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Значение outset

Значение outset — рамка:

div {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Так код будет выглядеть в браузере:

Блок . Свойство-сокращение для границ

Так же, как и для шрифтов, для границ тоже существует свойство-сокращение border, которое мы можем использовать вместо того, чтобы писать 3 разных свойства для толщины, цвета и типа границы. В свойстве border мы можем просто перечислить эти значения, их порядок при этом не важен. Смотрите пример:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
}

Так код будет выглядеть в браузере:

Чаще всего гораздо удобнее пользоваться свойством-сокращением, чем отдельными свойствами.

Блок . Граница для отдельных сторон

Существуют также свойства-сокращения для отдельных сторон: border-left (левая граница), border-right (правая граница), border-top (верхняя граница), border-bottom (нижняя граница).

Давайте сделаем блоку только левую границу с помощью свойства border-left:

<div></div>
div {
	width: 300px;
	height: 100px;
	border-left: 1px solid red;
}

Так код будет выглядеть в браузере:

А теперь одновременно сделаем и левую, и правую границы:

<div></div>
div {
	width: 300px;
	height: 100px;
	border-left: 1px solid red;
	border-right: 1px solid red;
}

Так код будет выглядеть в браузере:

Блок . Скругленные уголки

Сейчас мы с вами научимся скруглять уголки у границ. Это избавит наши сайты от некоторой угловатости и придаст им плавность линий.

Уголки границ (и фона, который мы разберем ниже) скругляются свойством border-radius, которое принимает значение в пикселях или процентах (или других единицах CSS).

Давайте скруглим уголки блоку, задав ему скругление в 10px:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px;
}

Так код будет выглядеть в браузере:

Что означает то, что мы указали скругление в 10px? Это радиус круга, который можно вписать в это скругление. Если у вас нелады с математикой и вам не понятно последнее предложение — забудьте о нем и просто подбирайте скругление на глаз. При некотором опыте это сделать не проблема (измерительного инструмента для измерения скруглений не существует, по крайней мере я о таком не слышал).

Имейте ввиду, что border-radius не входит в свойство-сокращение border, это разные свойства, хоть и имеют похожие названия.

Блок . Разные скругления для разных углов

Сейчас мы с вами научимся делать разные скругления для разных углов. Как это сделать: свойство border-radius может не только одно значение, но и два, три или четыре. Каждое значение будет задавать скругление для своего угла. Давайте посмотрим более подробно.

Четыре значения

Свойство border-radius может принимать 4 значения. Как в этом случае будут скругляться уголки — смотрите на следующем примере: border-radius: 10px 20px 30px 40px — 10px — верхний левый угол, 20px — верхний правый угол, 30px — нижний правый угол, 40px — нижний левый угол.

Смотрите, что у нас получится:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px 40px;
}

Так код будет выглядеть в браузере:

Два значения

Если же в border-radius написать два значения, то первое задаст скругление углов одной диагонали, а второе — другой.

Смотрите на примере:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 40px;
}

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если в border-radius написать три значения, то первое задаст скругление верхнего левого угла, третье — нижнего правого, а второе — скругление углов диагонали (двух оставшихся углов).

Смотрите на примере:

<div></div>
div {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px 20px 30px;
}

Так код будет выглядеть в браузере:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Подключение CSS Стилей — 3 Варианта

Sait

access_time

9 декабря, 2020

hourglass_empty

3мин. чтения

Существует 3 способа, как осуществить подключение CSS стилей для вашего сайта: вы можете использовать глобальные стили CSS, добавив CSS правила в контейнер <head> HTML документа, вы можете добавить ссылку на внешний .css файл, содержащий все необходимые правила или использовать внутренний CSS для применения правил к определенному элементу. В этом руководстве мы рассмотрим все три варианта подключения CSS, узнаем их достоинства и недостатки.

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Вариант 1 — Глобальный CSS

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы — вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Преимущества глобальных CSS:

  • Таблица стилей влияет только на одну страницу.
  • В глобальной CSS могут быть использованы классы и идентификаторы (ID).
  • Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

  • Увеличенное время загрузки страницы.
  • Подключается только к одной странице — неэффективно, если вы хотите использовать одну и ту же CSS для нескольких страниц.

Как произвести подключение CSS к HTML странице
  1. Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
  2. Найдите открывающий тег <head> и добавьте после него следующий код:
<style type="text/css">
  1. Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:
body {
     background-color: blue;
 }
 h2 {
     color: red;
     padding: 60px;
 }
  1. Как только вы закончите добавление CSS правил, добавьте закрывающий тег:
</style>

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h2 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h2>Руководство Hostinger</h2>
<p>Это наш текст.</p>

</body>
</html>

Вариант 2 — Внешний CSS

Возможно самый удобный вариант для подключения CSS к вашему сайту, это его привязка к внешнему .css файлу. В этом случае все изменения сделанные во внешнем CSS файле, будут в целом отражаться на вашем сайте. Ссылка на внешний CSS файл помещается в контейнер <head> страницы:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Тогда как, сами таблицы стилей располагаются в файле style.css. К примеру:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Преимущества внешних CSS:

  • Меньший размер страницы HTML и более чистая структура файла.
  • Быстрая скорость загрузки.
  • Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

  • Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 — Внутренний CSS

Внутренний CSS используется для конкретного тега HTML. Атрибут <style> используется для настройки этого тега. Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности. К тому же управление вашим сайтом может стать довольно трудным, если вы будете использовать только внутренний CSS. Однако в некоторых случаях этот способ может быть весьма полезным. К примеру, в случае если у вас нет доступа к CSS файлам, или вам необходимо применить правила только для одного элемента. Пример HTML страницы с внутренним CSS должен выглядеть так:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h2 style="color:white;padding:30px;">Руководство Hostinger</h2>
<p style="color:white;">Здесь что-нибудь полезное.</p>

</body>
</html>

Преимущества внутреннего CSS:

  • Полезен для проверки и предпросмотра изменений.
  • Полезен для быстрых исправлений.
  • Меньше HTTP запросов.

Недостатки внутреннего CSS:

  • Внутренние CSS должны быть применены для каждого элемента в отдельности.

Заключение

Теперь вы узнали, как произвести подключение CSS к вашему сайту тремя разными способами, и узнали их основные отличия.

CSS: селектор ссылок


Пример

Выбрать и оформить непосещенные ссылки:

ссылка {
цвет фона: желтый;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Селектор : ссылка используется для выбора непосещенных ссылок.

Примечание: Селектор: link не стилизует ссылки, которые вы уже посетили.

Совет: Используйте селектор: посещенный для стилизации ссылок на посещенные страницы, : селектор наведения для стилизации ссылок при наведении на них указателя мыши, а : активный селектор для стилизации ссылок при нажатии на них.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.

Селектор
: ссылка 4.0 7,0 2,0 ​​ 3,1 9,6

Синтаксис CSS

: ссылка {
css декларации ;
}

Другие примеры

Пример

Выбор и стиль непосещенных, посещенных, наведенных и активных ссылок:

/ * непосещенная ссылка * /
a: ссылка {
цвет: зеленый;
}

/ * посещенная ссылка * /
a: посетил {
цвет: зеленый;
}

/ * наведение курсора мыши на ссылку * /
a: наведение {
цвет: красный;
}

/ * выбранная ссылка * /
а: активный {
цвет: желтый;
}

Попробуй сам »

Пример

Стили ссылок с разными стилями:

а.ex1: hover, a.ex1: active {
цвет: красный;
}

a.ex2: hover, a.ex2: active {
font-size: 150%;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: ссылки CSS

Учебное пособие по CSS: Псевдоклассы CSS



HTML тег ссылки


Пример

Ссылка на внешнюю таблицу стилей:



Попробуй сам »

Определение и использование

Тег определяет связь между текущим документом и внешним ресурс.

Тег чаще всего используется для ссылки на внешние таблицы стилей.

Элемент — пустой элемент, он содержит только атрибуты.

Поддержка браузера

При использовании для таблиц стилей тег поддерживается во всех основных браузерах.Никакой реальной поддержки ни для чего другого.

Элемент
<ссылка> Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
перекрестное происхождение анонимно
учетные данные		 Определяет, как элемент обрабатывает запросы из разных источников.
href URL Задает расположение связанного документа
hreflang language_code Задает язык текста в связанном документе
СМИ media_query Указывает, на каком устройстве будет отображаться связанный документ
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url		 Указывает, какой реферер использовать при выборке ресурса
отн. альтернативный
автор
dns-prefetch
справка
значок
лицензия
следующие
pingback
предварительное подключение
предварительная загрузка
предварительная загрузка
предварительная загрузка
предыдущая
поиск
таблица стилей		 Обязательно.Определяет связь между текущим документом и связанным документом
размеры Высота x Ширина
любая		 Задает размер связанного ресурса. Только для rel = «icon»
название Определяет предпочтительную или альтернативную таблицу стилей
тип media_type Указывает тип носителя для связанного документа

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебное пособие по HTML: стили HTML

Ссылка на HTML DOM: объект ссылки

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

ссылка {
дисплей: нет;
}



Стили ссылок — Изучение веб-разработки

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

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

Состояния ссылок

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

  • Ссылка : Ссылка, у которой есть пункт назначения (т.е.е. не просто именованный якорь), стилизованный с использованием псевдокласса : link .
  • Посещено : Ссылка, когда она уже была посещена (существует в истории браузера), оформленная с использованием псевдокласса : посещена .
  • Hover : ссылка при наведении указателя мыши на нее, стилизованная с использованием псевдокласса : hover .
  • Фокус : ссылка, когда она была сфокусирована (например, перемещена пользователем клавиатуры с помощью клавиши Tab или аналогичной, или программная фокусировка с использованием HTMLElement.focus () ) — это стилизовано с использованием псевдокласса : focus .
  • Активный : ссылка, когда она активирована (например, нажата), оформленная с использованием псевдокласса : active .

Стили по умолчанию

В следующем примере показано, как ссылка будет вести себя по умолчанию (CSS увеличивает и центрирует текст, чтобы он больше выделялся).

  
  Простая ссылка  

  
  п {
  размер шрифта: 2rem;
  выравнивание текста: центр;
}

Примечание : Все ссылки в примерах на этой странице являются поддельными — вместо реального URL-адреса ставится # (решетка или знак фунта).Это потому, что если бы были включены настоящие ссылки, нажатие на них нарушило бы примеры (вы бы получили ошибку или страницу, загруженную во встроенном примере, с которой вы не могли бы вернуться). # просто ссылки на текущую страницу.

Вы заметите несколько вещей, исследуя стили по умолчанию:

  • Ссылки подчеркнуты.
  • Непосещенные ссылки синие.
  • Посещенные ссылки фиолетовые.
  • При наведении на ссылку указатель мыши превращается в маленький значок руки.
  • Сфокусированные ссылки имеют контур вокруг них — вы должны иметь возможность сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac вам нужно будет использовать опцию + вкладку или включить Полный доступ с клавиатуры: возможность выбора всех элементов управления путем нажатия Ctrl + F7 .)
  • Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы щелкаете по ней.)

Интересно, что эти стили по умолчанию почти такие же, какими они были в первые дни браузеров в середине 1990-х.Это связано с тем, что пользователи знают и ожидают такого поведения — если ссылки будут иметь другой стиль, это запутает многих. Это не означает, что вам вообще не следует стилизовать ссылки, просто вы не должны слишком далеко отклоняться от ожидаемого поведения. Вы должны как минимум:

  • Используйте подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, по крайней мере, выделите их другим способом.
  • Заставить их каким-то образом реагировать при наведении / фокусировке и немного иначе при активации.

Стили по умолчанию можно отключить / изменить с помощью следующих свойств CSS:

  • цвет для цвета текста.
  • курсор для стиля указателя мыши — вы не должны отключать это, если у вас нет очень веской причины.
  • контур для контура текста (контур похож на границу, с той лишь разницей, что граница занимает место в поле, а контур — нет; он просто располагается поверх фона).Контур — это полезное средство для обеспечения доступности, поэтому хорошо подумайте, прежде чем отключать его; вы должны как минимум удвоить стили, заданные для состояния наведения ссылки, и для состояния фокуса.

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

Стилизация некоторых ссылок

Теперь мы подробно рассмотрели состояния по умолчанию, давайте рассмотрим типичный набор стилей ссылок.

Для начала напишем наши пустые наборы правил:

  a {

}

ссылка {

}

а: посетил {

}

фокус {

}

a: hover {

}

a: active {

}

Этот порядок важен, потому что стили ссылок основаны друг на друге, например, стили в первом правиле будут применяться ко всем последующим, и когда ссылка активируется, она обычно также наводится. Если вы разместите их в неправильном порядке и измените одни и те же свойства в каждом наборе правил, все будет работать не так, как вы ожидаете.Чтобы запомнить порядок, вы можете попробовать использовать мнемонику, например, L o V e F уши HA te.

Теперь давайте добавим дополнительную информацию, чтобы правильно оформить этот стиль:

  кузов {
  ширина: 300 пикселей;
  маржа: 0 авто;
  размер шрифта: 1,2 бэр;
  семейство шрифтов: без засечек;
}

п {
  высота строки: 1,4;
}

a {
  наброски: нет;
  текстовое оформление: нет;
  отступ: 2px 1px 0;
}

ссылка {
  цвет: # 265301;
}

а: посетил {
  цвет: # 437A16;
}

фокус {
  нижняя граница: сплошная 1px;
  фон: # BAE498;
}

a: hover {
  нижняя граница: сплошная 1px;
  фон: #CDFEAA;
}

a: active {
  фон: # 265301;
  цвет: #CDFEAA;
}

Мы также предоставим образец HTML для применения CSS к:

  
 Доступно несколько браузеров, например  Mozilla
Firefox ,  Google Chrome  и
 Microsoft Edge .

Если сложить два вместе, мы получим следующий результат:

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

  • Первые два правила не так интересны для этого обсуждения.
  • Третье правило использует селектор a , чтобы избавиться от подчеркивания текста по умолчанию и контура фокуса (который в любом случае различается в разных браузерах), и добавляет небольшое количество отступов к каждой ссылке — все это станет ясно позже.
  • Затем мы используем селекторы a: link и a :hibited , чтобы установить несколько цветовых вариаций для непосещенных и посещенных ссылок, чтобы они были различны.
  • Следующие два правила используют a: focus и a: hover , чтобы установить для сфокусированных и зависших ссылок разные цвета фона, а также подчеркивание, чтобы ссылка еще больше выделялась. Здесь следует отметить два момента:
    • Подчеркивание было создано с использованием border-bottom , а не text-decoration — некоторые люди предпочитают это, потому что первый имеет лучшие варианты стилей, чем второй, и нарисован немного ниже, поэтому не пересекает нижние элементы подчеркнутого слова (e.грамм. хвосты на g и y).
    • Значение нижней границы было установлено как 1px сплошной , без указания цвета. При этом граница приобретает тот же цвет, что и текст элемента, что полезно в таких случаях, когда текст в каждом случае имеет другой цвет.
  • Наконец, a: active используется, чтобы дать ссылкам инвертированную цветовую схему во время их активации, чтобы было понятно, что происходит что-то важное!

Активное обучение: создавайте собственные ссылки

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

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

Распространенной практикой является включение значков в ссылки, чтобы лучше понять, на какой контент указывает ссылка. Давайте посмотрим на действительно простой пример, который добавляет значок к внешним ссылкам (ссылкам, ведущим на другие сайты.) Такой значок обычно выглядит как маленькая стрелка, указывающая из коробки — для этого примера мы будем использовать отличный пример с icons8.com.

Давайте посмотрим на HTML и CSS, которые дадут нам желаемый эффект. Во-первых, простой HTML-код для стилизации:

  
 Для получения дополнительной информации о погоде посетите нашу  страницу погоды ,
посмотрите  погоду в Википедии  или проверьте
из  погоды на сайте Extreme Science .

Далее, CSS:

  кузов {
  ширина: 300 пикселей;
  маржа: 0 авто;
  семейство шрифтов: без засечек;
}

п {
  высота строки: 1,4;
}

a {
  наброски: нет;
  текстовое оформление: нет;
  отступ: 2px 1px 0;
}

ссылка {
  цвет синий;
}

а: посетил {
  цвет: фиолетовый;
}

a: focus, a: hover {
  нижняя граница: сплошная 1px;
}

a: active {
  красный цвет;
}

a [href * = "http"] {
  фон: url ('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  размер фона: 16 пикселей 16 пикселей;
  отступ справа: 19 пикселей;
}

Так что здесь происходит? Мы пропустим большую часть CSS, так как это та же информация, которую вы просматривали раньше.Последнее правило, однако, интересно — здесь мы вставляем настраиваемое фоновое изображение во внешние ссылки аналогично тому, как мы обрабатывали настраиваемые маркеры в элементах списка в предыдущей статье — на этот раз, однако, мы используем сокращение фона вместо отдельных характеристики. Мы устанавливаем путь к изображению, которое хотим вставить, указываем без повтора , чтобы была вставлена ​​только одна копия, а затем указываем позицию как 100% пути справа от текстового содержимого и 0 пикселей от вершина.

Мы также используем background-size , чтобы указать размер, который мы хотим, чтобы отображалось фоновое изображение — полезно иметь значок большего размера, а затем изменять его размер, как это необходимо для адаптивного веб-дизайна. Однако это работает только с IE 9 и более поздними версиями, поэтому, если вам нужно поддерживать эти старые браузеры, вам просто нужно изменить размер изображения и вставить его как есть.

Наконец, мы устанавливаем padding-right для ссылок, чтобы освободить место для отображения фонового изображения, чтобы мы не перекрывали его с текстом.

Последнее слово — как мы выбирали только внешние ссылки? Что ж, если вы правильно пишете свои HTML-ссылки, вы должны использовать только абсолютные URL-адреса для внешних ссылок — более эффективно использовать относительные ссылки для ссылки на другие части вашего собственного сайта (как с первой ссылкой). Поэтому текст «http» должен появляться только во внешних ссылках (таких как вторая и третья), и мы можем выбрать его с помощью селектора атрибутов: a [href * = "http"] выбирает элементы , но только если у них есть атрибут href со значением, содержащим «http» где-то внутри.

Вот и все — попробуйте еще раз вернуться к разделу активного обучения выше и опробовать эту новую технику!

Примечание : Значения href выглядят странно — здесь мы использовали фиктивные ссылки, которые на самом деле никуда не ведут. Причина этого в том, что если бы мы использовали реальные ссылки, вы могли бы загрузить внешний сайт в