Оформление ссылок css: варианты оформления

Содержание

Свойства ссылок | 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. Разные ссылки на одной странице

ссылкицвет

HTML по теме

Тег <a>

CSS по теме

text-decoration
Псевдокласс :active
Псевдокласс :hover
Псевдокласс :visited

Оформление ссылок

Перед тем как изменять внешний вид ссылок нужно понимать, что у пользователей сложились определённые стереотипы о том, как должна выглядеть ссылка: 1. цвет ссылки должен быть синим 2. при наведении на ссылку курсор должен превращаться в pointer (указательный палец) 3. текст ссылки должен быть подчеркнутым 4. текст ссылки может быть жирнее обычного текста Именно от этих стереотипов следует отталкиваться при проектировании стиля гиперссылок. Для удобства пользователей следует оставить хотя бы 2 пункта (лучше 3). Например так:

<style>

a. my_link{

color:black;

text-decoration:underline;

cursor:pointer;

}

a.my_link:hover{

color:#00f;

}

</style>

<a class="my_link">Ссылка</a> в начале предложения, которое её описывает.

Ссылка в начале предложения, которое её описывает.

<style>

a.my_link2{

color:#00f;

cursor:pointer;

font-weight:bold;

}

</style>

Интересный текст, описывающий <a class="my_link2">ссылку</a>.

Интересный текст, описывающий ссылку.

Также не стоит забывать о блочных ссылках — тренде flat design. Цвет фона такой ссылки должен быть ярким, а текст должен выглядеть контрастно c большими отступами. Например:

<style>

a.my_link3{

color:#fff;

cursor:pointer;

font-weight:bold;

padding: 10px20px;

display:inline-block;

background:#f33;

}

a. my_link3:hover{

background:#f00;

}

</style>

<a class="my_link3">Ссылка</a>.

Ссылка

Наравне с блочными текстовыми ссылками существуют ссылки-изображения:

<style>

a.my_link4{

cursor:pointer;

display:inline-block;

width:100px;

height:100px;

}

</style>

<a class="my_link4"><img src="/images/news/88--14-11-29--17-19-00. jpg"/></a>

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

Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне [email protected]

Применение свойств CSS к вложенным элементам Изменение шрифта с помощью CSS. font Адаптивная верстка CSS Используем SCSS/SASS Добавление границы вокруг элемента. Border

Полное руководство по оформлению ссылок с помощью CSS — Smashing Magazine

Чтение за 6 мин. Дизайн, Веб-дизайн
Поделиться в Twitter, LinkedIn

Об авторе

Ли Манро — руководитель отдела дизайна OneSignal и создатель HTMLemail. io из Сан-Франциско. Больше о Lee ↬

Гиперссылки (или ссылки) соединяют веб-страницы. Именно они заставляют работать Интернет, позволяя нам переходить с одной страницы на другую одним нажатием кнопки. Как выразились сторонники веб-стандартов, «без гипертекстовых ссылок Интернет не был бы Интернетом, а был бы просто набором отдельных, не связанных между собой страниц».

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

Дополнительная литература на SmashingMag:

Создание ссылок «Подробнее» и «Продолжить чтение»
Почему ваши ссылки никогда не должны содержать надпись «Нажмите здесь»
Должны ли ссылки открываться в новых окнах?
Краткий рассказ о ссылках «наверх»

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

Больше после прыжка! Продолжить чтение ниже ↓

Начнем с селекторов и псевдоклассов CSS:

a:link { } Непосещенная ссылка.
a:visited { } Посещенные ссылки.
a:hover { } Пользователь наводит указатель мыши на ссылку.
a:focus { } Пользователь щелкает ссылку.
a:active { } Пользователь щелкнул ссылку.

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

Обеспечение контрастности

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

оформление текста: подчеркивание; Подчеркивание.
вес шрифта: полужирный; Жирный.
размер шрифта: 1,4 em; Увеличить.
цвет: #ed490a; Цвет.
цвет фона: #c0c0c0; Фон.
нижняя граница: 2px сплошная #a959c3; Бордюр.

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

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

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

Не забывайте о посещенных ссылках

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

Придайте посещенным ссылкам более темный оттенок цвета , чтобы они выделялись, но не были так очевидны, как не посещенные ссылки.

Используйте атрибут заголовка

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

 Пример

Используйте стили кнопок

Чтобы выделить действительно важные ссылки — скажем, призыв к действию или ссылка «Подробнее» внизу — используйте стиль кнопки. И вы можете повторно использовать стиль снова и снова, не редактируя графику.

Для получения дополнительной информации ознакомьтесь с разделами «Суперклассные кнопки с CSS3 и RGBA» и «Кнопки призыва к действию».

Состояние наведения

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

 a:hover { text-decoration:none;
тень текста: 0 0 2px #999;
}

Указатель мыши обычно превращается из стрелки в руку, когда пользователь наводит курсор на ссылку. Но эта функциональность иногда теряется; например, в IE, когда ссылка содержит элемент span , или на кнопках «Отправить». Исправьте это с помощью , добавив тип курсора через CSS.

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

Активное состояние

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

 a:active { padding-top: 2px; }

Применить заполнение

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

 а { padding: 5px; }

Используйте значки для типов файлов

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

Чтобы найти полезные ресурсы, посетите Fam Fam Fam Silk Icons.

Используйте значки для распознавания

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

Сделайте текст привязки описательным

Используйте осмысленный текст, а не «Нажмите здесь». Проблема с последним заключается в том, что он заставляет пользователя читать ссылку, чтобы понять, почему он должен «Нажмите здесь». Якорный текст, такой как «Увидеть Бритни на пляже», говорит сам за себя. Это также более удобно для SEO.

Свяжите свой логотип

Всегда связывайте свой логотип с главной страницей. Большинство пользователей ожидают этого соглашения в Интернете. Тем не менее, не думайте, что пользователи знают об этом. Обычные серферы ожидают этого, но ряд пользователей все еще ищут ссылку «Домой».

 
Название сайта

 h2 a {
фон: url(images/logo.gif) без повторов вверху слева;
дисплей: блок;
отступ текста: -9999px;
ширина: 200 пикселей;
высота: 60 пикселей;
}

Не открывайте новую Windows

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

Микроформаты

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

 Мой друг

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

Дополнительная литература

Целевые ссылки с прокладками для лучшего управления мышью, 37 сигналов
Десять главных ошибок в веб-дизайне, Useit
Рекомендации по визуализации ссылок, Useit
Стилизация текстовых ссылок, Andy Rutledge
Отображение признаков гиперссылок с помощью CSS
Не теряйте фокуса

9 0000 Стилизация гиперссылок с помощью CSS | Учебники по веб-дизайну и разработке
Цели обучения
В конце этого урока вы сможете:
Применение правил стиля CSS к пяти состояниям гиперссылок: ссылка, посещение, фокус, наведение и активный.
Вы можете просмотреть готовые версии двух примеров веб-страниц, на которые вы добавите гиперссылки в этом руководстве, щелкнув ссылку ниже. Готовые образцы будут открываться в новой вкладке вашего веб-браузера.
страница-5.html
страница-6.html
Около пяти состояний гиперссылки
На современных веб-сайтах гиперссылки обычно отображаются по-разному в зависимости от раздела веб-страницы, в котором они расположены.
Навигационные гиперссылки : В навигационных меню и нижних колонтитулах гиперссылки обычно отображаются без подчеркивания. Из расположения ссылок пользователю ясно, что эти элементы можно щелкнуть или коснуться.
Гиперссылки с текстовыми блоками : Когда они расположены внутри абзацев, рекомендуется размещать под гиперссылками подчеркивания, чтобы выделить их из окружающего текста.
Гиперссылки в виде кнопок : Гиперссылки на веб-странице также могут отображаться в виде кнопок с цветным фоном и/или рамками и, возможно, значками. Как правило, гиперссылки, оформленные в виде кнопок, не имеют подчеркивания.
В отличие от других элементов веб-страницы, таких как заголовки, абзацы или изображения, гиперссылки являются интерактивными . И их внешний вид может меняться в зависимости от того, как пользователь взаимодействует с ними.
Гиперссылки — это пять так называемых состояний , которые можно сгруппировать в две категории:
Пассивные состояния : Так выглядит гиперссылка, когда пользователь не взаимодействует с ней. Есть два пассивных состояния.
Интерактивные состояния : Так выглядит гиперссылка, когда пользователь взаимодействует с ней. Есть три интерактивных состояния.
Гиперссылки: два пассивных состояния
Существует два возможных пассивных состояния гиперссылки.
a:link — ссылка , а не была нажата или нажата пользователем. По умолчанию веб-браузеры отображают непросмотренные гиперссылки синим цветом.
a:visited — по ссылке уже раз переходил пользователь. По умолчанию веб-браузеры отображают посещенные гиперссылки фиолетовым цветом.
В CSS вы выбираете непосещенные и посещенные гиперссылки на веб-странице с помощью псевдоклассов :link и :visited следующим образом:
/* Пассивная ссылка - ранее не посещаемая */ ссылка { /* здесь находятся правила стиля */ } /* Пассивная ссылка - ранее посещенная */ а: посетил { /* здесь находятся правила стиля */ }
Как правило, эти два пассивных состояния оформляются одинаково.
/* Состояния пассивной ссылки */ ссылка, а: посетил { /* здесь находятся правила стиля */ }
Или, в одну строку:
/* Состояния пассивной ссылки */ а: ссылка, а: посетили { /* здесь находятся правила стиля */ }
Обратите внимание на двоеточие (:) между селектором a и именем псевдокласса (ссылка или посещенный).
Например, если вы хотите, чтобы ваши гиперссылки отображались красным цветом, когда пользователь не взаимодействует с ними, вы должны ввести следующее.
/* Состояния пассивной ссылки */ а: ссылка, а: посетили { красный цвет }
Гиперссылки: три интерактивных состояния
Существует три возможных пассивных состояния гиперссылки.
a:hover — Пользователь наводит указатель мыши на ссылку. По умолчанию веб-браузеры отображают наведенные ссылки синим цветом (если они ранее не посещались) и фиолетовым цветом (если ранее посещались пользователем).
a:focus — пользователь перешел по гиперссылке с помощью клавиши Tab . По умолчанию веб-браузеры отображают ссылки в фокусе с синей пунктирной рамкой.
a:active — ссылка в настоящее время щелкается или нажимается пользователем. По умолчанию веб-браузеры отображают активные гиперссылки красным цветом.
В CSS вы ориентируетесь на эти три состояния гиперссылок, используя псевдоклассы :focus, :hover и :active.
Как правило, все три интерактивных состояния гиперссылки оформляются одинаково.
/* Состояния интерактивной ссылки */ а: фокус, а: наведение, а: активный { /* здесь находятся правила стиля */ }
Опять же, обратите внимание на двоеточие (:) между селектором a и именем псевдокласса (фокус, наведение или активный).
Например, если вы хотите, чтобы ваши гиперссылки отображались зеленым цветом всякий раз, когда пользователь взаимодействует с ними, вы должны ввести следующее.
/* Состояния пассивной ссылки */ а: наведение, а: фокус, а: активный { цвет: зеленый }
Таким образом, раздел файла CSS, который стилизует гиперссылки, обычно выглядит следующим образом:
/* ====== СТИЛИ ГИПЕРССЫЛКИ ====== */ /* Состояния пассивной ссылки */ а: ссылка, а: посетили { красный цвет } /* Состояния интерактивной ссылки */ а: наведение, а: фокус, а: активный { цвет: зеленый }
Гиперссылки: правильный порядок псевдоклассов
В таблице стилей CSS важно размещать псевдоклассы в правильном порядке. В противном случае ваши стили гиперссылок могут отображаться не так, как вы хотите.
Правильный порядок следующий:
: ссылка
: посетил
:навести
: фокус
:активный
Гиперссылки и подчеркивание по умолчанию
По умолчанию веб-браузеры добавляют подчеркивание ко всем пяти состояниям гиперссылок. Это результат значения по умолчанию underline , примененного к свойству text-decoration .
Чтобы «отключить» это подчеркивание по умолчанию, вам нужно добавить следующее правило стиля в свой файл CSS.
/* ====== СТИЛИ ГИПЕРССЫЛКИ ====== */ /* Состояния пассивной ссылки */ а: ссылка, а: посетили { текстовое оформление: нет; красный цвет; } /* Состояния интерактивной ссылки */ а: наведение, а: фокус, а: активный { текстовое оформление: нет; цвет: зеленый; }
За исключением особых случаев гиперссылок в меню и нижних колонтитулах, а также в качестве кнопок, рекомендуется подчеркивать посещенные и непосещенные состояния гиперссылок внутри блоков текста.
Однако для подчеркивания гиперссылок веб-дизайнеры обычно используют свойство border-bottom , а не text-decoration , потому что оно позволяет больше вариантов для интервалов и цвета.
Стилизация ссылок на веб-странице
van Gogh
В этом задании вы будете применять стили CSS к гиперссылкам, которые вы добавили на пример веб-страницы page-5.html в предыдущем руководстве Введение в гиперссылки.
В VS Code откройте таблицу стилей style-5.css .
В нижней части файла таблицы стилей скопируйте и вставьте следующее:
/* Стили пассивных ссылок */ а: ссылка, а: посетили { текстовое оформление: нет; отступ снизу: 2px; } /* Стили интерактивных ссылок */ а: наведение, а: фокус, а: активный { текстовое оформление: нет; отступ снизу: 2px; }
Теперь вы сгруппировали пять возможных состояний гиперссылок в две категории для стилей и удалили подчеркивание по умолчанию. Вы также добавили интервал 2px , который будет отделять текст гиперссылки от любой нижней границы, которую вы поместите под ней.
Для первого набора правил стиля, которые применяются к состояниям гиперссылки :link и :visited, введите следующие свойства и значения CSS:
цвет: #000; нижняя граница: сплошная 2px #000;
Для второго набора правил стиля, которые применяются к трем активным состояниям гиперссылки, введите следующие свойства и значения CSS:
цвет: #f26f21; нижняя граница: сплошной синий 2px;
Сохраните таблицу стилей. Отобразите веб-страницу в браузере и проверьте изменения стиля четырех гиперссылок.
Вы завершили работу над своей первой пробной веб-страницей.
Нажмите page-5. html, чтобы просмотреть готовый образец этой веб-страницы в новой вкладке веб-браузера.
Оформление ссылок на веб-странице
Туризм
В этом разделе вы будете применять стили CSS к гиперссылкам, добавленным на страницу page-6.html .образец веб-страницы в предыдущем учебнике по работе с внутренними гиперссылками.
В VS Code откройте таблицу стилей style-6.css .
В нижней части файла таблицы стилей скопируйте и вставьте следующее:
/* Стили пассивных ссылок */ а: ссылка, а: посетили { текстовое оформление: нет; отступ снизу: 2px; цвет: #006600; нижняя граница: сплошная 2px #006600; } /* Стили интерактивных ссылок */ а: наведение, а: фокус, а: активный { текстовое оформление: нет; отступ снизу: 2px; цвет: #f26f21; нижняя граница: сплошной синий 2px; }
Сохраните таблицу стилей и в веб-браузере убедитесь, что гиперссылки на веб-странице отображаются в новом стиле.
Вы закончили работу над вторым образцом веб-страницы.
Нажмите page-6.html, чтобы просмотреть готовый образец этой веб-страницы в новой вкладке веб-браузера.
Загрузка файлов на GitHub
После завершения веб-страницы и таблицы стилей вы готовы загрузить их в свою учетную запись на GitHub.
Откройте новую вкладку в веб-браузере и перейдите на GitHub.com. Если вы еще не вошли в свою учетную запись GitHub, войдите сейчас.
На домашней странице GitHub щелкните «репозиторий», содержащий ваши веб-страницы. Его имя будет выглядеть следующим образом, где имя пользователя — выбранное вами имя пользователя на GitHub. имя пользователя.github.io
На следующем отображаемом экране GitHub в правой части экрана вы можете увидеть кнопку с именем Добавить файл . Нажмите здесь.
В раскрывающемся списке выберите параметр Загрузить файлы .