Css a style: Стилизация ссылок — Изучение веб-разработки

Содержание

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

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

Для изучения вам потребуется:	Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:	Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

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

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

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

Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link.
Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited.
Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus.
Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

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

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

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

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

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

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

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

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

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

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

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

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

Также мы дадим некий пример HTML к которому применяется CSS:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www. google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Объединение этих двух даёт нам такой результат:

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

Первые два правила не так интересны в этом обсуждении.
Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
- Нижнее подчёркивание создано используя border-bottom, а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
- Значение border-bottom установлено на 1px solid, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
Наконец, a:active используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!

Активное изучение: Стилизуйте ссылки самостоятельно

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

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

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

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

<p>For more information on the weather, visit our <a href="weather. html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

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

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

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

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

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

А теперь наш CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
- как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
- Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
- Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
- Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

Свойства ссылок | htmlbook.ru

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

Табл. 1. Псевдоклассы при работе со ссылками
Свойство	Описание
A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот
же эффект, что и применение стиля к селектору A. Поэтому
этот псевдокласс можно опустить.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания
у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь
может сразу не догадаться, что текст, который он видит, является ссылкой. Все
ведь уже привыкли — раз подчеркивание используется, значит это ссылка.
Но при правильном применении отсутствие подчеркивания у ссылок может придать
определенный эффект сайту. Часто делается, что при наведении курсора, ссылка
становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект
одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { 
    text-decoration: none; /* Убирает подчеркивание для ссылок */
   } 
   A:visited { text-decoration: none; } 
   A:active { text-decoration: none; }
   A:hover {
    text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
    color: red; /* Цвет ссылки */
   } 
  </style>
 </head> 
 <body>
    <p><a href="1.html">Пример ссылки</a></p>
 </body> 
</html>

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания
и надчеркивания одновременно. При этом эффекте тонкие линии будут
появляться над и под ссылкой при наведении на нее курсора. Это достигается
применением свойства text-decoration: underline
overline в селекторе A:hover.

Пример 2. Использование подчеркивания в ссылках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
   <style type="text/css">
    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:active { text-decoration: none; }
    A:hover { 
     text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
     color: red; /* Цвет ссылки */
   } 
  </style>
 </head>
 <body>
   <p><a href="1. html">Пример ссылки</a></p>
 </body>
</html>

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { text-decoration: none; }
   A:visited { text-decoration: none; }
   A:active { text-decoration: none; }
   A:hover { 
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: red; /* Цвет ссылки */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Пример ссылки</a></p>
 </body>
</html>

Изменение цвета подчеркивания

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

Пример 4. Создание подчеркивание другого цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A:link { color: blue; text-decoration: none; }
   A:hover { color: red; text-decoration: underline; }
   .link { color: blue; }
  </style>
 </head>
 <body>
  <p><a href="1.html"><span>Ссылка</span></a></p>
 </body>
</html>

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

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

Пример 5. Ссылки разных цветов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылки</title>
  <style type="text/css">
   A { font-size: 14px; color: red; }
   A.link1 { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }
  </style>
 </head>
 <body>
  <p>| <a href="1.html">Ссылка 1</a> | 
   <a href="2.html">Ссылка 2</a> | 
   <a href="3.html">Ссылка 3</a> |</p>
  </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Разные ссылки на одной странице

Атрибут media | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	6.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Устанавливает устройство вывода, для которого предназначена таблица стилей.
Для каждого устройства — от карманного компьютера до принтера
можно определить свой собственный стиль, который бы учитывал специфику устройства
и подгонял под него вид веб-страницы.

Синтаксис

<style media="all|braille|handheld|print|screen|speech|projection|tty|tv">
 ...
</style>

Значения

all: Все устройства.
braille: Устройства, основанные на системе Брайля, предназначены для слепых людей.
handheld: Наладонники, смартфоны, устройства с малой шириной экрана.
print: Печатающее устройство вроде принтера.
screen: Экран монитора.
speech: Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
projection: Проектор.
tty: Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пикселы в качестве единиц измерения.
tv: Телевизор.

Можно устанавливать сразу несколько значений,
перечисляя их через запятую.

Значение по умолчанию

screen

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег STYLE, атрибут media</title>
  <style media="screen">
    .window {
     background: #333;
     border: 1px solid red;
     font-size: 90%;
     color: #fc0;
     padding: 10px;
    }
  </style>
  <style media="print">
    .window {
     border: 1px solid black;
     font-family: Arial;
     font-size: 90%;
     font-weight: bold;
     color: black;
     padding: 10px
    }
  </style>
 </head>
 <body>

   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>

 </body>
</html>

Результат данного примера продемонстрирован на рис. 1, где применяется стиль с атрибутом media=»screen». На рис. 2 показана та же страница, но при этом уже действует стиль для печати, заданный атрибутом media=»print». Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать.

Рис. 1. Страница со стилем для просмотра на мониторе

Рис. 2. Страница со стилем для вывода на печать

Псевдоклассы в CSS — обзор для начинающих

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

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

selector:pseudo-class {property: value}

Классы CSS также могут использоваться с псевдоклассами:

selector.class:pseudo-class {property: value}

Наиболее часто используемые CSS псевдоклассы:

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

При определении псевдоклассов CSS3 в блоке <style>…</style> следует помнить:

a:hover должен располагаться после a:link и a:visited, иначе он не будет работать;
a:active должен располагаться после a:hover, иначе он не будет работать;
Имена псевдоклассов не чувствительны к регистру;
Псевдоклассы отличаются от классов CSS, но они могут быть объединены.

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

<html>
   <head>
      <style type="text/css">
         a:link {color:#000000}
      </style>
   </head>
   <body>
      <a href="">Черная ссылка</a>
   </body>
</html>

Этот код создает следующую черную ссылку:

Ниже приведен пример того, как использовать псевдокласс HTML :visited, чтобы задать цвет открытой ранее ссылки. Возможные значения — цвет в любом допустимом формате:

<html>
   <head>
      <style type="text/css">
         a:visited {color: #006600}
      </style>
   </head>
   <body>
      <a href="">Нажмите эту ссылку</a>
   </body>
</html>

Этот код создает следующую ссылку. После того, как вы нажмете на нее, она изменит свой цвет на зеленый:

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

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href="">Наведите мышь на эту ссылку</a>
   </body>
</html>

Этот код создает следующую ссылку. Теперь наведите курсор мыши на эту ссылку, и вы увидите, что она поменяет свой цвет на желтый:

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

<html>
   <head>
      <style type="text/css">
         a:active {color: #FF00CC}
      </style>
   </head>
   <body>
      <a href="">Нажмите на эту ссылку</a>
   </body>
</html>

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

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

<html>
   <head>
      <style type="text/css">
         a:focus {color: #0000FF}
      </style>
   </head>
   <body>
      <a href="">Нажмите на эту ссылку </a>
   </body>
</html>

Этот код создает следующую ссылку. Когда эта ссылка находится в фокусе ввода, ее цвет меняется на оранжевый. Цвет возвращается обратно, когда ссылка находится вне фокуса:

Псевдокласс child задается указанному элементу, который является дочерним элементом другого.

Чтобы :first-child работал в IE <!DOCTYPE> должен объявляться в верхней части документа.

Например, для создания отступа для первого абзаца всех элементов <div>, нужно использовать следующее определение:

<html>
   <head>

      <style type="text/css">
         div > p:first-child
         {
            text-indent: 25px;
         }
      </style>

   </head>
   <body>

      <div>
         <p>Первый параграф блока div. Этот параграф будет иметь отступ</p>
         <p>Второй параграф блока div. Этот параграф не будет иметь отступа</p>
      </div>
      <p>Однако этот стиль задается только для параграфов</p>

      <div>
         <h4>Заголовок</h4>
         <p>Первый параграф в блоке div. Этот параграф не будет иметь отступа.</p>
      </div>

   </body>
</html>

Этот код дает следующий результат:

Псевдокласс :lang позволяет составлять селекторы для отдельных тегов на основе настроек языка.

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

В таком документе вы можете использовать псевдокласс :lang, чтобы изменить кавычки надлежащим образом. Приведенный ниже код изменяет тег <blockquote> надлежащим образом для каждого языка:

<html>
   <head>
      <style type="text/css">
         /* Два уровня кавычек для двух языков*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   <body>
      <p>...<q lang="fr">Кавычки в абзаце</q>...</p>
   </body>
</html>

Селекторы :lang будут применяться ко всем элементам в документе. Но не все элементы используют свойство quotes, так что для большинства элементов эффект будет незаметен.

Этот код дает следующий результат:

Данная публикация является переводом статьи «CSS — Pseudo Classes» , подготовленная редакцией проекта.

Основы HTML, CSS и веб-дизайна

Добавление стилей в HTML-документ

Помните невидимую «голову» документа? Именно в ней можно указать адрес CSS-файла со стилями:

<head>
  <link rel="stylesheet" href="main.css">
</head>

Если HTML-файл лежит в одной директории с файлом main.css, то стили из этого CSS-файла будут применены к странице. Если же файл лежит в другом месте, то нужно указать путь к нему. Например, если структура директорий такая:

my_site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

То в файле index.html путь нужно указать так:

<head>
  <link rel="stylesheet" href="../css/main.css">
</head>

Такой путь называется относительным. Он указывается относительно текущего расположения файла index.html. Чтобы добраться до файла main.css нам было нужно выйти из директории html. Это делается с помощью конструкции ../. Далее мы указали директорию css и название нашего CSS файла.

Существуют также абсолютные пути. Они всегда строятся от корня файловой системы. В таком случае путь всегда начинается со слэша. Если представить, что сайт лежит в корне нашей файловой системы, то путь выглядел бы следующим образом: /css/main.css.

Стили также можно поместить прямо в HTML-файл, не создавая отдельный CSS-файл:

<!DOCTYPE html>
<html>
  <head>
    <title>Моё резюме</title>
    <style>
      .important {
        color: green;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h2>Алексей Примадонин</h2>
    <h4>Веб-разработчик</h4>
    <p>
      <a href="mailto:[email protected]">[email protected]</a>,
      <a href="https://github.com/alprim">github.com/alprim</a>
    </p>
  </body>
</html>

Такой вариант может быть уместен для минимальных страниц, которые гарантированно не будут разрастаться. В целом, лучше всегда разделять HTML и CSS на отдельные файлы. Один CSS-файл можно использовать в нескольких HTML-документах, к тому же разделение представления (presentation — это стили) и содержания (content — это сам HTML) — правильная стратегия при построении информационных систем.

Каскад

Почему же C в CSS — это cascade? Дело в том, что стили складываются каскадом в единый набор.

p {
  color: green;
  font-size: 20px;
}

p {
  color: red;
}

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

Можно представить, что стили собрались каскадом в такой набор:

{
  color: red;
  font-size: 20px;
}

Каскад происходит сверху вниз, и работает даже внутри одного селектора. Ниже — странный пример, но результат будет тем же: цвет текста будет красным:

p {
  color: green;
  color: red;
  font-size: 20px;
}

Каскадность также заключается в том, что один элемент может попадать под действие нескольких селекторов разного типа. Например:

p {
  color: red;
}

p.important {
  font-size: 20px;
}

#intro {
  font-style: italic;
}

<p>
  Индейские племена Манахаттоу и Канарси.
</p>

Такой элемент будет одновременно красным, размером 20 пикселей и курсивом. Но у разных видов селекторов разный приоритет.

Порядок таков:

Селектор типа элемента (p)
Селектор класса (.important)
Селектор id (#intro)

1 — низкий приоритет, 3 — высокий приоритет.

Пример:

#intro {
  color: green;
}

p {
  color: blue;
  font-weight: bold;
}

p.important {
  color: purple;
  font-style: italic;
}

<p>
  Индейские племена Манахаттоу и Канарси.
</p>

Текст в этом элементе будет наклонным, полужирным и зелёным, потому что:

Селектор типа элемента p:
- синий цвет
- полужирность
Селектор класса p.important:
- синий цвет заменил на пурпурный цвет
- курсив
Селектор идентификатора #intro:
- пурпурный цвет заменил на зелёный цвет

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

{
  color:green;
  font-weight: bold;
  font-style: italic;
}

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

сделай это красивым · HonKit

Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉

Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.

Давай использовать Bootstrap!

Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/

Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.

Установка Bootstrap

Для установки Bootstrap тебе нужно добавить следующие строки в <head> твоего .html файла (blog/templates/blog/post_list.html):

blog/templates/blog/post_list.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!

Выглядит уже лучше!

Статические файлы в Django

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

Куда поместить статические файлы в Django

Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog.

Мы сделаем это, создав папку static внутри каталога с нашим приложением:

djangogirls
├── blog
│   ├── migrations
│   ├── static
│   └── templates
└── mysite

Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.

Твой первый CSS файл!

Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static. Затем создай новый файл под названием blog.css внутри папки css. Готово?

djangogirls
└─── blog
     └─── static
          └─── css
               └─── blog.css

Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.

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

Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка?
Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red и green.

В файле blog/static/css/blog.css тебе нужно добавить следующий код:

blog/static/css/blog.css

h2 a {
    color: #FCA205;
}

h2 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h2 (например, когда у нас в коде что-то вроде: <h2><a href="">link</a></h2>). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205, то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!

В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a, h2, body), атрибутом class или атрибутом id. Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a, класса external_link или идентификатора link_to_wiki_page:

<a href="https://en.wikipedia.org/wiki/Django">

Почитай про CSS селекторы в CSS Selectors на w3schools.

Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:

blog/templates/blog/post_list.html

{% load static %}

Мы просто загружаем здесь статические файлы 🙂
Далее между <head> и </head>, после ссылок на файлы Bootstrap CSS, добавь такую строку:

blog/templates/blog/post_list.html

<link rel="stylesheet" href="{% static 'css/blog.css' %}">

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

Твой файл должен теперь выглядеть следующим образом:

blog/templates/blog/post_list.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div>
            <h2><a href="/">Django Girls Blog</a></h2>
        </div>

        {% for post in posts %}
            <div>
                <p>published: {{ post.published_date }}</p>
                <h2><a href="">{{ post.title }}</a></h2>
                <p>{{ post.text|linebreaksbr }}</p>
            </div>
        {% endfor %}
    </body>
</html>

Ок, сохрани файл и обнови страницу!

Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!

blog/static/css/blog.css

body {
    padding-left: 15px;
}

Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!

Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега <head> в файле blog/templates/blog/post_list.html:

blog/templates/blog/post_list.html

<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css">

Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css. Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).

Теперь добавь строку font-family: 'Lobster'; в CSS файле blog/static/css/blog.css внутри блока определения стиля h2 a (код помещается между скобками { и }) и обнови страницу:

blog/static/css/blog.css

h2 a {
    color: #FCA205;
    font-family: 'Lobster';
}

Отлично!

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

Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div, содержащий наш заголовок, как это сделано здесь:

blog/templates/blog/post_list.html

<div>
    <h2><a href="/">Django Girls Blog</a></h2>
</div>

А теперь добавь класс post в твой div, содержащий сообщение в блоге:

blog/templates/blog/post_list.html

<div>
    <p>published: {{ post.published_date }}</p>
    <h2><a href="">{{ post.title }}</a></h2>
    <p>{{ post.text|linebreaksbr }}</p>
</div>

Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа ., относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css:

blog/static/css/blog.css

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h2, .page-header h2 a, .page-header h2 a:visited, .page-header h2 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h2, h3, h4, h5 {
    font-family: 'Lobster', cursive;
}

.date {
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a, .post h2 a:visited {
    color: #000000;
}

Далее переделаем код HTML, отображающий посты, используя классы. Замени:

blog/templates/blog/post_list.html

{% for post in posts %}
    <div>
        <p>published: {{ post.published_date }}</p>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

в blog/templates/blog/post_list.html этим кодом:

blog/templates/blog/post_list.html

<div>
    <div>
        <div>
            {% for post in posts %}
                <div>
                    <div>
                        <p>Опубликовано: {{ post.published_date }}</p>
                    </div>
                    <h2><a href="">{{ post.title }}</a></h2>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

Сохрани эти файлы и обнови свой веб-сайт.

Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.

Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!

В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.

Готова к следующей главе?! 🙂

Локальный CSS · vue-loader

Когда у тега <style> есть атрибут scoped, то его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Ими можно пользоваться с некоторыми оговорками, но не требуется никаких полифиллов. Это достигается за счёт использования PostCSS для преобразования следующего:

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div>hi</div>
</template>

В что-то подобное:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div data-v-f3f3eg9>hi</div>
</template>

Советы

Использование локальных и глобальных стилей

Вы можете сочетать использование в компоненте локальных и глобальных стилей одновременно:

<style>

</style>

<style scoped>

</style>

Корневой узел дочернего компонента

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

Глубокие селекторы

Если вы хотите, чтобы селектор в scoped стилях был «глубоким», т.е. влиял на дочерние компоненты, вы можете использовать комбинатор >>>:

<style scoped>
.a >>> .b {  }
</style>

Указанное выше будет скомпилировано в:

.a[data-v-f3f3eg9] .b {  }

Некоторые пре-процессоры, такие как Sass, не могут правильно обработать >>>. В таких случаях вы можете использовать комбинатор /deep/ — это псевдоним для >>> работающий точно также.

Динамически генерируемый контент

DOM-содержимое, создаваемое с помощью v-html не попадает под область действия scoped-стилей, но вы всё равно можете его стилизовать воспользовавшись deep-селекторами.

О чём следует помнить

Локальные стили не устраняют необходимость классов. Из-за того как браузеры рендерят различные CSS-селекторы, p { color: red } может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как .example { color: red }, тогда вы практически полностью исключаете ухудшение производительности. Вот пример где вы можете проверить разницу самостоятельно.
Будьте внимательны с селекторами потомков в рекурсивных компонентах! Для CSS-правила с селектором .a .b, если элемент, который соответствует .a содержит рекурсивный компонент потомок, тогда все .b в этом компоненте потомке будут также соответствовать правилу.

ссылок для стилизации CSS

С помощью CSS ссылки можно стилизовать по-разному.

Текстовая ссылка
Текстовая ссылка
Кнопка ссылки
Кнопка ссылки

Ссылки для укладки

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

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

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

a: link — нормальная, непосещаемая ссылка
a: посещено — ссылка, которую посетил пользователь
a: hover — ссылка, когда пользователь наводит на нее курсор
a: active — ссылка в момент нажатия

Пример

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

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

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

/ * выбранная ссылка * /
a: активная {

цвет синий;
}

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

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

a: hover ДОЛЖЕН идти после ссылки: и после: visit
a: active ДОЛЖЕН быть после a: hover

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

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

Пример

a: ссылка {
оформление текста: нет;
}

a: посещено {
текстовое оформление: нет;
}

a: hover {
text-decoration: underline;
}

a: активно {
оформление текста: подчеркивание;
}

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

Цвет фона

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

Пример

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

a: посещено {
background-color: cyan;
}

a: hover {
background-color: lightgreen;
}

a: active {
background-color: hotpink;
}

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

Кнопки связи

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

Пример

a: ссылка, a: посетил {
background-color: # f44336;
цвет белый;
отступ: 14px 25px;
выравнивание текста: по центру;
текстовое оформление: нет;
дисплей: строчно-блочный;
}

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

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

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

Пример

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

а.one: link {color: # ff0000;}
a.one:visited {color: # 0000ff;}
a.one:hover
{color: # ffcc00;}

a.two: link {color: # ff0000;}
a.two: посещено {color:
# 0000ff;}
a.two: hover {font-size: 150%;}

a.three: link {color:
# ff0000;}
a.three: visit {color: # 0000ff;}
a.three: hover {background:
# 66ff66;}

четыре: ссылка {color: # ff0000;}
четыре: посетили {color:
# 0000ff;}
a.four: hover {font-family: monospace;}

a.пять: ссылка {цвет:
# ff0000; text-decoration: none;}
a.five: посещено {color: # 0000ff;
text-decoration: none;}
a.five: hover {text-decoration: underline;}

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

Пример

Другой пример создания полей / кнопок ссылок:

a: ссылка, a: посетил {
background-color: white;
цвет: черный;
граница: 2 пикселя сплошного зеленого цвета;
отступ: 10 пикселей 20 пикселей;
выравнивание текста:
центр;
текстовое оформление: нет;
дисплей: строчно-блочный;
}

a: hover, a: active
{
цвет фона: зеленый;
цвет: белый;
}

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

Пример

Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылок):

auto

crosshair

default

e-resize

help

перемещение

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

текст

w-resize

wait

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

Проверьте себя упражнениями!

Основы CSS: стилизация ссылок как у босса

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

Ссылки в HTML даже выглядят иначе, чем обычный текст без каких-либо стилей CSS.

Они синие (пурпурные при посещении). Они подчеркнуты. Это ссылка в чистом виде.

Но что, если мы хотим немного изменить ситуацию? Возможно, синий не подходит к дизайну вашего сайта. Может быть, у вас есть отвращение к подчеркиванию.Какой бы ни была причина, CSS позволяет нам стилизовать ссылки так же, как и любой другой элемент. Все, что нам нужно сделать, это указать элемент в нашей таблице стилей.

Хотите использовать другой шрифт, изменить цвет, убрать подчеркивание и сделать все прописными? Конечно, а почему бы и нет?

  a {
  красный цвет;
  текстовое оформление: нет;
  преобразование текста: прописные буквы;
}

Теперь готовим на газе! Но зачем останавливаться на достигнутом? Давайте рассмотрим еще несколько способов стилизации ссылок, чтобы сделать их удобнее.

Стиль каждого состояния ссылки

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

Ссылка (: ссылка ): вероятно, она используется меньше всего, но она предназначена для стилизации элементов , имеющих href , а не ссылок-заполнителей.
Посещено (: посещено ): внешний вид ссылки, по которой пользователь щелкнул на странице раньше, когда курсор мыши не находится поверх нее.Стили, которые можно применить к : посещенный , ограничены по соображениям безопасности.
Наведение (: наведение ): когда курсор мыши находится поверх ссылки без щелчка
Активный (: активный ): когда ссылка находится в процессе нажатия. Это может быть очень быстро, но это когда кнопка мыши была нажата и до того, как щелчок закончился.
Focus (: focus ): как : hover , но где ссылка выбирается с помощью клавиши Tab на клавиатуре.Состояния наведения и фокуса часто стилизованы вместе.

Обратите внимание на порядок там важен:

Ссылка
Посещено
Наведите курсор
Активно
Фокус

Если вы не сделаете это в этом порядке (представьте, что ваш стиль : посещенный идет после вашего стиля : наведите курсор на ), ссылки не будет вести себя так, как вы хотите. В моем воображаемом примере стиль : visit будет переопределять стиль : hover , что маловероятно, что это то, что вам нужно.Фокус — это функция доступности, поэтому последняя, потому что она наиболее важна.

Один из способов запомнить порядок — это ЛЮБОВЬ и НЕНАВИСТЬ . то есть L (ink) OV (isted) E / H (over) A (Active) TE.

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

Ссылки кажутся простой концепцией, но, черт возьми, в них много чего происходит, а CSS дает нам невероятные возможности для настройки опыта!

Ссылки как кнопки

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

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

  a {
  цвет фона: красный;
  цвет белый;
  заполнение: 1em 1.5em;
  текстовое оформление: нет;
  преобразование текста: прописные буквы;
}

Отлично! Теперь давайте воспользуемся способностями изменения состояния, которые мы узнали в предыдущем разделе, чтобы сделать нашу искусственную кнопку более интерактивной. Мы сделаем кнопку темно-серой при наведении, черной при активной и светло-серой при посещении:

  a {
  цвет фона: красный;
  цвет белый;
  заполнение: 1em 1.5em;
  текстовое оформление: нет;
  преобразование текста: прописные буквы;
}

a: hover {
  цвет фона: # 555;
}

a: active {
  цвет фона: черный;
}

а: посетил {
  цвет фона: #ccc;
}

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

Ой, и курсоры!

Мы довольно подробно рассмотрели ссылки на стили, но есть еще один их компонент, который мы не можем игнорировать: курсор.

Курсор указывает положение мыши на экране. Мы уже привыкли к стандартной черной стрелке:

.
Стандартная стрелка курсора мыши

Мы можем изменить стрелку на указатель в виде руки при наведении (: hover ), чтобы было легче увидеть, что ссылка указывает на то, что это интерактивный элемент:

Использование курсора : указатель ; предоставляет интерактивную подсказку.

  a: hover {
  курсор: указатель;
}

Уф, это намного лучше! Теперь у нас есть довольно модная ссылка, которая выглядит как кнопка с правильными интерактивными подсказками.

Повышение уровня

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

Ссылки Mailto — Хороший справочник по связыванию адресов электронной почты вместо веб-страниц.
Текущее состояние телефонных связей — Знаете ли вы, что можно привязать телефонный номер? Ну вот как.
Курсор — Справочное руководство CSS-Tricks для настройки курсора.
Когда использовать элемент «Кнопка». Если вас интересует разница между кнопкой ссылки и кнопкой традиционной формы, то это хороший обзор с предложениями, которые лучше подходят для конкретных контекстов.
Button Maker — бесплатный ресурс для создания CSS для кнопок ссылок.

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

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

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

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

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

Ссылка : ссылка, у которой есть пункт назначения (то есть не только именованный якорь), оформленный с использованием псевдокласса : link .
Посещено : Ссылка, когда она уже была посещена (существует в истории браузера), оформленная с использованием псевдокласса : посещено .
Hover : ссылка при наведении на нее указателя мыши, стилизованная с использованием псевдокласса : hover .
Focus : ссылка, когда она была сфокусирована (например, перемещена пользователем клавиатуры с помощью клавиши 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: loaded , чтобы установить несколько цветовых вариаций для непосещенных и посещенных ссылок, чтобы они были различимы.
Следующие два правила используют 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» где-то внутри.

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