Html оформление ссылок: Как сделать ссылку | htmlbook.ru

Разное 

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

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

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2. 0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как изменить цвет ссылки в CSS?

0 ∞

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

  • Не посещенная ссылка: состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
  • Посещенная ссылка: стилизуется с помощью псевдокласса :visited.
  • Активная: ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
  • Ссылка, на которую пользователь навел курсор: стилизуется псевдоклассом :hover.
  • Выделенная фокусом ввода: стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS links</title> 
<style> 
p { 
   font-size: 30px; 
   text-align: center; 
   }          
</style> 
</head> 
<body> 
<p><a href="https://www.herbalife.com">Example for a simple link</a></p> 
</body>     
</html>

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

Эти стили можно изменить, используя следующие свойства CSS. Пример использования свойства text-decoration:

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
 
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.

  
 asp" target="_blank">Here is a link</a></b></p>
</body>
</html>

Пример, в котором для оформления ссылки используется свойство background-color

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
a:link {
  background-color: coral;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: DarkMagenta;
}
a:active {
  background-color: DarkSalmon ;
} 
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

Вот пример:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: DarkSalmon ;
    border: none;
    color: #FFFFFF;
    padding: 25px 52px;
    text-align: center;
    -webkit-transition-duration: 0.
 
 4s;
    transition-duration: 0.4s;
    text-decoration: none;
    font-size: 20px;
    text-align: center; 
    cursor: pointer;
    display: inline-block;
}
a:hover, a:active {
    background-color: DarkRed ;
}
</style>
</head>
<body>
<body>
    <a href="http://www.tennis.com" target="_blank">BUTTON</a>
</body>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
<style>
body,html {
  margin: 0;
  font-family: sans-serif, arial, helvetica;
}
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: white;
}
li:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: DarkSalmon ;
}
a:hover {     
  background: DarkRed ;
}
a:active {
  background: red;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a href="#">Tournaments</a></li><li><a href="#">Scores</a></li><li><a href="#">
News</a>
</li>
<li><a href="#">Videos</a></li><li><a href="#">PLAYERS & RANKINGS</a></li>
</ul>
</body>
</html>

Давайте рассмотрим, что именно происходит в примере, приведенном выше. Для элемента <ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае <body>).

Элементы <li>

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

Самым сложным является правило номер четыре, которое стилизует элемент <a>. Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.

Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.

Для определения размеров заполним всю ширину элемента

<ul>, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту. В конце мы устанавливаем белый цвет для текста.

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

Вадим Дворниковавтор-переводчик статьи «Styling CSS Links»

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

Стилизация HTML-ссылок (a hrefs) | CSS Tutorial

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

Пример: 

 а {
    размер шрифта: 12px;
    цвет: #222222;
}

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

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

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

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

  • a:hover всегда идет после a:link и a:visited
  • a:active всегда идет после a:hover

Рассмотрим следующий пример:

 /* непросмотренная ссылка */
а: ссылка {цвет: #00ffff; }
/* посещенная ссылка */
а: посетили {цвет: #808080; }
/* наведите курсор на ссылку */
а: наведите { цвет: # 000088; }
/* выбранная ссылка */
а: активный { цвет: # 0000ff; }

Живой пример →

Вызов 9Свойство 0005 text-decoration мы изучали ранее. Свойство украшения текста используется для изменения внешнего вида ваших ссылок, например, для удаления подчеркивания или добавления к нему поперечных линий. Также вернемся к свойствам фона. Ссылки могут быть оформлены по-разному с помощью селекторов class и id . Все эти свойства работают с тегом , так что не стесняйтесь экспериментировать по своему усмотрению.

Небольшое изменение с большим эффектом

курсор:указатель;

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

 а: наведите {
    цвет: #000088;
      курсор  :  указатель  ;
}

Живой пример →

Ниже приведены некоторые часто используемые значения для курсора 9.0006 свойство:

  • курсор:перекрестие
  • курсор:помощь
  • курсор:переместить
  • курсор:указатель
  • курсор:прогресс
  • не разрешено
  • курсор:подождите и т. д.

Кроме того, это не обязательно должно использоваться только для ссылок, это можно использовать с любым элементом/тегом HTML.

Живой пример →

Стилизация ссылок в виде кнопок

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

Маленькая зеленая кнопка Средняя синяя кнопка Большая белая кнопка

Эти ссылки стилизованы, чтобы удивлять . Мы узнаем, как это делается, когда закончим с margin и padding . Если вы не можете удержаться от проверки кода CSS для оформления ссылок, таких как эти кнопки, ознакомьтесь с руководством.

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

  • ← Назад
  • Далее →

Ссылки на стили CSS | Как стилизовать ссылки в CSS

Поиск

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

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

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

Вот пример простой ссылки:

 

<голова>
CSS-ссылки
<стиль>
п {
   размер шрифта: 30px;
   выравнивание текста: по центру;
   }


<тело>

Пример простой ссылки

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

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

Вот пример использования свойства text-decoration:

 

<голова>
<стиль>
п {
   размер шрифта: 30px;
   выравнивание текста: по центру;
   }
ссылка {
  текстовое оформление: нет;
}
а: посетил {
  текстовое оформление: нет;
}
а: наведите {
  оформление текста: подчеркивание;
}
а: активный {
  оформление текста: подчеркивание;
}


<тело>

Вот ссылка

Вот еще один пример, на этот раз с использованием свойства background-color:

 

<голова>
<стиль>
п {
   размер шрифта: 30px;
   выравнивание текста: по центру;
   }
ссылка {
  цвет фона: коралловый;
}
а: посетил {
  цвет фона: голубой;
}
а: наведите {
  цвет фона: DarkMagenta;
}
а: активный {
  цвет фона: DarkSalmon ;
}


<тело>

 asp" target="_blank">Это ссылка

Расширенные кнопки ссылок CSS: чтобы создать кнопку ссылки, используйте некоторые свойства стиля CSS, чтобы вы могли создать поле и сделать его интерактивным. Вам понадобится свойство color, чтобы установить цвет текста, представляющего ссылку, цвет фона, чтобы добавить цвет самой кнопке, text-decoration, чтобы удалить подчеркивание из ссылки, свойство text-align, чтобы установить выравнивание ваша ссылка, свойство отображения, описывающее, как должна отображаться ваша ссылка и свойство заполнения, и определяющее, насколько большой будет ваша кнопка.

Вот пример:

 

<голова>
<стиль>
а: ссылка, а: посетили {
    цвет фона: DarkSalmon ;
    граница: нет;
    цвет: #FFFFFF;
    отступ: 25px 52px;
    выравнивание текста: по центру;
    -webkit-transition-duration: 0,4 с;
    продолжительность перехода: 0,4 с;
    текстовое оформление: нет;
    размер шрифта: 20px;
    выравнивание текста: по центру;
    курсор: указатель;
    отображение: встроенный блок;
}
а: наведение, а: активный {
    цвет фона: DarkRed ;
}


<тело>
<тело>
 tennis.com" target="_blank">КНОПКА

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

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

 

<голова>
<стиль>
тело, html {
  маржа: 0;
  семейство шрифтов: без засечек, ариал, хелветика;
}
ул {
  заполнение: 0;
  ширина: 100%;
}
ли {
  дисплей: встроенный;
}
а {
  контур: нет;
  текстовое оформление: нет;
  отображение: встроенный блок;
  ширина: 19,5%;
  поле справа: 0,625%;
  выравнивание текста: по центру;
  высота строки: 3;
  белый цвет;
}
li:последний ребенок {
  поле справа: 0;
}
а: ссылка, а: посещено, а: фокус {
  фон: DarkSalmon;
}
а: наведите {
  фон: темно-красный;
}
а: активный {
  фон: красный;
  белый цвет;
}


<тело>
<ул>
  
  • Турниры
  • Очки
  • Новости
  • Видео
  • ИГРОКИ И РЕЙТИНГ

    • Давайте посмотрим, что происходит в примере ниже, сосредоточив внимание на наиболее интересных частях. Следовательно, второе правило устраняет заполнение элемента

    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *