Html оформление ссылок – Разное оформление для внутренних и внешних ссылок через CSS

Leave a Comment / Html / By /

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

 

 

css

По умолчанию все ссылки в сайте выделяются синим цветом и имеют стандартный вид.

При помощи  CSS можно создавать следующие виды ссылок:

  • — a:link — ссылки не посещенные;
  • — a:visited — ссылки после посещения  пользователем;
  • — a:hover —  пользователь провел над;
  • — a:active — ссылки активные. 

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

{font-size; text-decoration; color; font-weight;  font –family; } 

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

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

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

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5. 

Пример: Изменение цвета подчеркивания у ссылок

<html>
<head> 

<style>
a:link { color: blue; text-decoration: none }
 a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style> 

<body>
<a href=link1.html><span class=link>Ссылка</span></a>
</body>

</head>

</html> 

Создание подчеркивания

Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль, в котором будем использовать параметр border-bottom, он создает линию под текстом; 

Пример:  Создание пунктирного подчеркивания для ссылок

<html>
<head>

<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }</style>

</head> 

<body>
<a href=1.html>Подчеркнутая ссылка</a>
</body>

</html>  

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

 

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

Оформление ссылок с плавным эффектом для CSS

Всем привет!!! Чем же вас удивить? Может, оформлением ссылок с плавным эффектом для CSS? Я вам расскажу и покажу на примере, как оформить ссылку в тесте, как оформить ссылку в картинке с эффектом затухания на стандартном  CSS без использования JavaScript. В общем, вы сейчас все увидите, если прочитаете статью до конца.

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

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

У ссылок плавно меняется цвет фона.

Создаем в HTML-документе ссылку с классом .linktext

<a href="#"  title="Класс linktext">Read more &raquo;</a>

Теперь пропишем к ссылке стиль:



/*Плавный переход*/

a {
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
}

/*Текстовые ссылки*/
.linktext {
 padding: 1px 3px; /*Отступы внутри ссылки*/
 background-color: #f53799; /*Цвет фона ссылки*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 font-size: 13px; /*Размер текста*/
 color: white; /*Цвет ссылки*/
 border-radius: 2px; /*Скругленные углы*/
 -webkit-border-radius: 2px; /*Скругленные углы*/
 -moz-border-radius: 2px;  /*Скругленные углы*/
}

.linktext:hover {
 background-color: #db0071; /*Цвет фона ссылки*/
}

А вот так будет выглядеть код полной готовности.


<html>
<head>
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>
/*Плавный переход*/

a {
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
}

/*Текстовые ссылки*/
.linktext {
 padding: 1px 3px; /*Отступы внутри ссылки*/
 background-color: #f53799; /*Цвет фона ссылки*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 font-size: 13px; /*Размер текста*/
 color: white; /*Цвет ссылки*/
 border-radius: 2px; /*Скругленные углы*/
 -webkit-border-radius: 2px; /*Скругленные углы*/
 -moz-border-radius: 2px; /*Скругленные углы*/
}

.linktext:hover {
 background-color: #db0071; /*Цвет фона ссылки*/
}

</style>
</head>
<body>
<p>Save a lot of work with CSS! In our CSS tutorial <a href="#" title="Класс link-text">you will</a> learn how to use CSS to control the style and layout of multiple Web pages all at once. <a href="https://bloggood.ru/" title="Класс link-text">bloggood.ru</a></p>
<p><a href="#" title="Класс link-text">Read more &raquo;</a></p>
</body>
</html>

Посмотреть на результат работы в примере:

Просмотреть пример.

Ссылка изображения с плавным переходом.

Изображение будет немного находиться в тумане и, когда пользователь наведет курсор мышки на изображение ссылки, тогда туман плавно исчезнет.
1 картинка — изображение находится в обычном состоянии.
2 картинка — картинка становится четче при наведении мышки.

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

В HTML-документе пропишем ссылку к картинке.

<a href="https://bloggood.ru/" title="Ссылка изображение"><img src="kartinka-dla-bloga-4.jpg"></a>

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


*Ссылка изображение*/
a img{
 border: 10px solid #dddddd; /*Граница вокруг изображения*/
 margin: 0 15px 15px 0; /*Отступы от изображения*/
 -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши */
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
 opacity: 0.5; /*Прозрачность изображения*/
}

a:hover img {
 opacity: 1; /*Делаем изображения непрозрачным*/
 border: 10px solid #afd3dc; /*Изменяем цвет границы*/
}

А вот так будет выглядеть код в полной готовности.


<html>
<head>
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>

/*Ссылка изображение*/
a img{
 border: 10px solid #dddddd; /*Граница вокруг изображения*/
 margin: 0 15px 15px 0; /*Отступы от изображения*/
 -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши */
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
 opacity: 0.5; /*Прозрачность изображения*/
}

a:hover img {
 opacity: 1; /*Делаем изображения непрозрачным*/
 border: 10px solid #afd3dc; /*Изменяем цвет границы*/
}

</style>
</head>
<body>
<p><a href="https://bloggood.ru/" title="Ссылка изображение"><img src="kartinka-dla-bloga-4.jpg" alt="Image links"></a></p>
</body>
</html>

Посмотреть на результат работы в примере:

Просмотреть пример.

Кнопки меню с плавным переходом.

Все анологично. При наведении мышки на кнопку в меню, вы увидите плавный переход фона.

Перейдем сразу к готовому коду.


<html>
<head>
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>

/*Ссылка кнопки меню*/
.label {
 padding: 5px 7px; /*Отступы внутри ссылки*/
 font-size: 25px; /*Размер шрифта*/
 border-radius: 2px; /*Скругленные углы*/
 -webkit-border-radius: 2px;  /*Скругленные углы*/
 -moz-border-radius: 2px;  /*Скругленные углы*/
 background-color: black;  /*Цвет фона ссылки*/
 opacity: 0.6;
 color: white;  /*Цвет ссылки*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 text-shadow: none;
 margin: 0 3px 3px 0;
 display: inline-block;
 -webkit-transition: all linear 0.3s;  /*Устанавливаем плавный переход при наведении курсора мыши */
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
 opacity: 0.5; /*Прозрачность изображения*/
}

.label:hover {
 opacity: 1; /*Делаем изображения непрозрачным*/
}

</style>
</head>
<body>
<p><a href="#">Menu-1</a><a href="#">Menu-2</a><a href="#">Menu-3</a></p>
</body>
</html>

Посмотреть на результат работы в примере:

Просмотреть пример.

 

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

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


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Оформление ссылок</title>
<style>

/*Плавный переход*/

a {
-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.3s;
 -ms-transition: all linear 0.3s;
 -o-transition: all linear 0.3s;
 transition: all linear 0.3s;
}

.blockDashed {
 display: inline-block; /*Встроенный-блочный элемент*/
 font-family:verdana; /*Шрифт текста*/
 font-size: 16px; /*Размер текста*/
 width: 200px; /*Ширина блока*/
 padding: 10px; /*Отступы внутри блока*/
 text-decoration: none; /*Ссылка без подчеркивания*/
 color: #666666; /*Цвет текста ссылки*/
 background-color: white; /*Фон ссылки*/
 border: 1px dashed #cccccc; /*Пунктирная граница*/
 opacity: 0.5; /*Прозрачная ссылка*/
 border-radius: 4px; /*Скругленные углы у ссылки*/
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 margin: 0 15px 15px 0; /*Отступы от ссылки справа и снизу*/
}

.blockDashed:hover {
 border: 1px dashed #000000; /*Изменяем цвет границы ссылки при наведении на нее курсора мыши*/
 opacity: 1; /*Делаем ссылку непрозрачной*/
}
</style>
</head>
<body>
<a href="#">Save a lot of work with CSS!
In our CSS tutorial
you will learn how to use CSS to control the style and
layout of multiple Web pages all at once. bloggood.ru
Read more »</a>
</body>
</html>

Просмотреть пример.

Дорогие читатели, подписывайтесь на мою RSS-ленту новостей, я всегда стараюсь добавлять новые интересные полезные статьи!

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


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: css, для сайта, эффекты для сайта

Виды ссылок | WebReference

Обычно в качестве ссылки выступает текст или изображение. Текст ссылки, как правило, помечается подчёркиванием и цветом, чтобы его было легко визуально отличить от обычного текста. С рисунками сложнее: явно определить, ссылка перед нами или нет, можно только после того, как мы наведём курсор мыши на рисунок. Для ссылок указатель превращается в «руку», а в статусной строке браузера отображается путь к документу, на который ссылка указывает. Поэтому рисунки в качестве ссылок лучше применять там, где они ожидаемы, — баннеры, кнопки, закладки, изображения с надписью «Нажми» и т. д.

В примере 1 показано создание ссылок с помощью рисунков и текста.

Пример 1. Текстовые и графические ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="linkl.html">Текстовая ссылка</a></p>
  <p><a href="link2.html"><img src="image/3.png" alt=""></a></p>
  <p><a href="link3.html"><img src="image/7.png" alt="">Текстовая ссылка с рисунком</a></p>
 </body>
</html>

Первая ссылка в данном примере представляет собой обычный текст, заключенный внутрь <a>. Следующая строка демонстрирует создание графической ссылки. Изображение, добавляемое на веб-страницу через элемент <img>, в этом случае надо поместить между тегами <а> и </а>. Кроме того, внутри <a> можно одновременно сочетать текст и рисунки, как показано в данном примере.

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

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

Указанные цвета ссылок задаются с помощью следующих псевдоклассов:

  • :active — активная ссылка;
  • :hover — состояние ссылки при наведенном на неё курсоре мыши;
  • :visited — посещённая ссылка.

В примере 2 показано использование псевдоклассов для управления цветом ссылок.

Пример 2. Псевдоклассы для ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   a { color: #8db835; }
   a:visited { color: #821e6f; }
   a:hover { background: #4577ad; color: #fff; text-decoration: none; }
   a:active { color: #f1616e; }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Посещённая ссылка</a></p>
  <p><a href="link2.html">Обычная ссылка</a></p>
  <p><a href="http://webref.ru">Ссылка при наведении курсора</а></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Цвет рядовых ссылок указывается через селектор a, для остальных видов ссылок применяются псевдоклассы. Имеет значение их порядок, :hover должен идти после :visited, тогда он будет работать и для посещённых ссылок. Естественно, если ссылку не открывали, то она никак не перейдёт в статус посещённых.

Вид ссылок в различном состоянии

Рис. 1. Вид ссылок в различном состоянии

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11


Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

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

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

Цвет ссылки в CSS

Свойство «COLOR»
Чтобы заменить цвет ссылки воспользуйтесь свойством «color» для селектора «a».

a {color:#006400;/* цвет ссылки */}

Псевдоклассы для ссылок

Хочу познакомить вас с псевдоклассами для ссылок.
Псевдоклассы – это классы, которые определяют динамическое состояние элементов и изменяются с помощью действий пользователя.

Синтаксис:

a:имя_псевдокласса { /* стиль */}

Свойства (имена псевдоклассов):

  • link — непосещенная ссылка
  • visited — ссылка, которую уже посетил пользователь
  • hover — состояние ссылки, на которую навели курсор мышки
  • active — активная ссылка, на которую нажали

Теперь пример.
Предлагаю для примера показать стандартные ссылки, которые были добавлены через HTML без оформления CSS.

[посмотреть пример]

Теперь изменим оформление ссылок через CSS.

Добавьте вот эту ссылку в HTML код:

<a href="http://stepkinblog.ru/">STEPKINBLOG.RU</a>

Теперь вот этот код в CSS:


a {color:#006400;/* цвет ссылки */}
a:hover {color:#FF0000;/* ссылка при наведении на нее мышкой */}
a:active {color:#cccccc; /* нажатая ссылка */}

Результат:

[посмотреть пример]

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

Свойство «TEXT—DECORATION»
Чтобы убрать подчеркивание у ссылки, воспользуйтесь свойством «text-decoration» со значением «none».

Свойства:

  • line-through — перечеркнутый текст;
  • overline — подчеркивание над текстом;
  • underline  — подчеркнутый текст;
  • none – без подчеркивания.

Сейчас я сделаю так, что при наведении на ссылку, подчеркивание исчезнет.


a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки при наведении */
}

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


a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: overline; /* Подчеркивание над ссылкой при наведении */
}

 

Размер ссылки

Свойство «FONT—SIZE»
Чтобы увеличить ссылку, достаточно воспользоваться уже известным вам  свойством «font-size»:


a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
}

Можно еще добавить к ссылке плавное увеличение (анимация):

transition:all 1s ease; /* плавное увеличение размера в 1 сек. */

Пример:


a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
transition:all 1s ease; /* плавное увеличение размера в 1 сек. */
}

Результат:

[ посмотреть пример ]

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

Свойство «BORDER—BOTTOM»
Чтобы сделать у ссылки пунктирное подчеркивание при наведении, то вначале нужно убрать подчеркивание, а вместо подчеркивания прописать правило «border-bottom»:


a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
border-bottom:dashed;/* пунктирное подчеркивание у ссылки */
}

Результат:

[ посмотреть пример ]

Вот и все!
Жду вас на следующих уроках!

Предыдущая запись
Списки в CSS. Основы CSS для начинающих. Урок №10 Следующая запись
Рамка в CSS. Основы CSS для начинающих. Урок №12

Ссылки внутри страницы | WebReference

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

Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.

Пример 1. Ссылка на заголовок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   .toc {
    padding: 0 20px;
    background: #f0f0f0;
    display: inline-block;
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Оглавление</h3>
   <ul>
    <li><a href="#t1">Сепульки</a></li>
    <li><a href="#t2">Сепулькарии</a></li>
    <li><a href="#t3">Сепуление</a></li>
   </ul>
  </div>
  <h3>Сепульки</h3>
   <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p>
  <h3>Сепулькарии</h3>
   <p>Устройства для сепуления.</p>
  <h3>Сепуление</h3>
   <p>Занятие ардритов с планеты Энтеропия.</p>
 </body>
</html>

Результат данного примера показан на рис. 1. К каждому заголовку <h3> добавлен уникальный идентификатор через атрибут id, а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

Ссылки на заголовки

Рис. 1. Ссылки на заголовки

Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

Псевдокласс :target

CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target, как показано в примере 2.

Пример 2. Использование :target

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
  <style>
   .toc {
    padding: 0 20px;
    background: #f0f0f0;
    display: inline-block;
   }
   h3:target {
    background: #cd529e;
    color: #fff;
    padding: 5px;
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Оглавление</h3>
   <ul>
    <li><a href="#t1">Сепульки</a></li>
    <li><a href="#t2">Сепулькарии</a></li>
    <li><a href="#t3">Сепуление</a></li>
   </ul>
  </div>
  <h3>Сепульки</h3>
   <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p>
  <h3>Сепулькарии</h3>
   <p>Устройства для сепуления.</p>
  <h3>Сепуление</h3>
   <p>Занятие ардритов с планеты Энтеропия.</p>
 </body>
</html>

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

Стиль заголовка при переходе

Рис. 2. Стиль заголовка при переходе

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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