Цвет ссылок

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style=»background:имя цвета»>…</тег> — указание цвета фона по имени.

<тег style=»background:#HEX-код»>…</тег> — указание цвета фона по коду.

Пример изменения цвета фона

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Как изменить шрифт?

←  →

Выравнивание содержимого

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Пример 3. Изменение цвета ссылки с помощью стилей

В данном примере приведены три разных способа задания цвета с помощью стилей.

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

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

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

• текстовое поле
• фигура
• картинка
• объекты SmartArt и т.д.

Часто при использовании гиперссылок в презентациях возникает вопрос: как отформатировать текстовую гиперссылку, изменив ее цвет?

Ответ:

Текстовые гиперссылки в PowerPoint являются особым объектом, цвет которых невозможно изменить стандартным способом через кнопку “Цвет Текста”. Она попросту не реагирует.

У текста гиперссылки есть два режима:

• не посещенная ссылка
• посещенная ссылка

И в настройках цвета темы есть возможность задать для каждого из них свой цвет. Для этого:

Шестнадцатеричные цвета

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 1. Десятичные и шестнадцатеричные числа меньше 16

Десятичные	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Шестнадцатеричные	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 2. Десятичные и шестнадцатеричные числа больше 16

Десятичные	16	17	18	19	20	21	22	23	24	25	26	27	28
Шестнадцатеричные	10	11	12	13	14	15	16	17	18	19	1A	1B	1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc.

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

Здесь цвет фона веб-страницы задан как #fa8e47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

fa

+

8e

+

47

=

fa8e47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила

• Если значения компонент цвета одинаковы (например: #d6d6d6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый).
• Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00ff00) и синим (#0000ff).
• Желтый цвет (#ffff00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и комплиментарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00ffff) получается за счет объединения синего и зеленого цвета.

Рис. 1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 2. Окно для выбора цвета в программе Photoshop

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div p:first-child { color: green; }
      div p:last-child { color: blue; }  
    </style>
  </head>

  <body>
  
    <div>
      <p>Первый дочерний абзац элемента div, он будет отображаться зеленого цвета.</p>
	  
	  <p>Второй дочерний абзац элемента div, он будет отображаться черного цвета,
	  поскольку никаких правил для него не задано.</p>
	  
	  <p>Третий дочерний абзац элемента div, он же является последним дочерним абзацем.
	  Цвет текста будет синим.</p>
    </div>
	
  </body>
</html>

Попробовать »

Поскольку первый абзац является первым дочерним элементом для <div>, его текст будет отображаться зеленым цветом. Цвет текста второго абзаца будет соответствовать цвету заданному по умолчанию, то есть черному. Цвет текста третьего абзаца будет окрашен в синий цвет, поскольку третий абзац является последним дочерним элементом для <div>.

Задание цвета всех ссылок на странице

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

link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.

vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

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

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

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color , оно задает цвет определенного текста, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве параметров тега <BODY>.
Параметры являются необязательными и если они не указаны используются
значения по умолчанию.

LINK — определяет цвет ссылок на web-странице
(цвет по умолчанию синий, #0000FF).ALINK — цвет активной ссылки. Цвет ссылки
меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный,
#FF0000.VLINK — цвет уже посещенных ссылок. Цвет
по умолчанию фиолетовый, #800080.

В ШТМЛ цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #RRGGBB,
где R, G и B обозначают соответственно красную, зеленую и синюю составляющую.
Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует
диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются
в одно число, перед которым ставится символ # (пример 1).

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

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

Замечание

Значения параметров нечувствительны к регистру, поэтому корректно писать как
#FFFFFF, так и #ffffff.

Для изменения цвета ссылок удобнее использовать CSS (ЦСС). Чтобы установить цвет
для всех ссылок на web-странице применяются следующие псевдоклассы, которые
добавляются к селектору A.

visited — Стиль для посещенной ссылки.active — Стиль для активной ссылки. Активной ссылка
становится при нажатии на нее.hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на web-странице с помощью стилей.
Для этого воспользуемся стилевым параметром color,
он задает цвет определенного контента, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

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

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора a через двоеточие. Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.

Псевдоклассы при работе со ссылками

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

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

Пример. Непосещённые ссылки – синие, посещённые ссылки — фиолетовые.

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

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

CSS:

a {font-size: 20px; color: red; }
a.link1 {color: green; }
a.link2 {color: blue;}

HTML:

<p>| <a href=»link1.html»>Ссылка 1</a>
| <a href=»link2.html» class=»link1″>Ссылка 2</a>
| <a href=»link3.html» class=»link2″>Ссылка 3</a> |</p>

| Ссылка 1
| Ссылка 2
| Ссылка 3 |

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

CSS:

a:link {
  color: blue;
  text-decoration: none;
  }
a:hover {
  color: blue; 
  border-bottom: 2px solid #FF0000;
  }

HTML:

<a href=»link1.html»>Ссылка 4</a>

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

a:link, A:visited, A:active {text-decoration: none;}
a:hover {
  text-decoration: underline;
  color: red; /* Цвет ссылки */ 
  }  

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

a:link, A:visited, A:active {text-decoration: none;}
a:hover {
  text-decoration: underline overline;
  color: red; /* Цвет ссылки */
  }

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

CSS:

a {color: #f00; /* Цвет ссылок */}
a:hover {
  text-decoration: none; /* Убираем обычное подчеркивание */
  border-bottom: 1px dotted blue; /* Пунктирная линия под текстом */
  }

Пример. При наведении указателя на ссылку размер букв и расстояние между буквами увеличивается.

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

Цвета по названию

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

Табл. 3. Названия некоторых цветов

Имя цвета	Цвет	Описание	Шестнадцатеричное значение
aqua		Голубой	#00ffff
black		Черный	#000000
blue		Синий	#0000ff
fuchsia		Фуксия	#ff00ff
gray		Серый	#808080
green		Зеленый	#008000
lime		Светло-зеленый	#00ff00
maroon		Темно-красный	#800000
navy		Темно-синий	#000080
olive		Оливковый	#808000
purple		Фиолетовый	#800080
red		Красный	#ff0000
silver		Светло-серый	#c0c0c0
teal		Сине-зеленый	#008080
white		Белый	#ffffff
yellow		Желтый	#ffff00

Добавьте подчеркивание

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

Чтобы осуществить подчеркивание ссылки CSS, используйте этот код:

a {
     text-decoration: underline;
}

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

В блоге KORY автор использует нижнюю границу для ссылок

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

a {
     border-bottom: 1px solid #000;
     padding-bottom: 2px;
}

Небольшой совет: Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:

• CSS подчеркивание пунктиром (dotted);
• Точечный (dashed);
• Двойной (double).

Метод №1: использование background-clip: text

Во время написания этого материала свойство background-clip: text носит статус экспериментального. Оно не поддерживается в Internet Explorer 11 и ниже.Этот метод предусматривает создание так называемого «knockout text» (текста, который выглядит так, будто он вырезан в некоей поверхности и из него просвечивает фон) с резким градиентом. HTML-разметка состоит из единственного элемента , описывающего гиперссылку.

Начнём с создания стилей для ссылки. Использование overflow: hidden приведёт к тому, что при изменении внешнего вида ссылки отсекается всё то, что выходит за пределы этого элемента.

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

Воспользуемся свойством background-clip для обрезки градиента. Дадим ему значение text для вывода текста. Мы ещё будем использовать свойства background-size и background-position . Делается это для вывода начального цвета.

И наконец — добавим к стилю CSS-свойство transition и стилизуем псевдокласс гиперссылки :hover . Для того чтобы при наведении на ссылку мыши новый цвет заполнял бы ссылку слева направо, воспользуемся свойством background-position .

Вот — пример на CodePen.Хотя эта методика и позволяет достичь желаемого эффекта, Safari и Chrome подвергнут обрезке элементы оформления текста и тени. Это значит, что они показаны не будут. Применение текстовых стилей, таких, как подчёркивание текста с помощью CSS-свойства text-decoration , работать не будет. Поэтому, если нужно, чтобы ссылки были бы подчёркнутыми, стоит рассмотреть другие способы настройки подчёркивания.

Декоративное подчёркивание ссылок

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
color: blue; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание */
}
a:hover {
border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

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

Пример 4. Двойное подчёркивание ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
color: blue; text-decoration: none;
}
a:hover {
border-bottom: 4px double red;
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

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

Добавьте цвет

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

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

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

Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:

Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:

a {
     color: #000000;
}

Измените значение рядом с color. Это оно!

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

Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:

• 0to255;
• Adobe Kuler.

Как сделать якорь на странице html?

Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.

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

В начале страницы, после открытия тега <body> делаем ссылку с атрибутом name, которая будет являться якорем, а в конце документа поставим ссылку с переходом на этот якорь.

HTML-код ссылки:

PHP

<body>
<div><a name=»to-top»></a></div>
<p>…</p>
<div><a href=»# to-top»>К началу страницы</a></div>
</body>

1 2 3 4 5

<body> <div><aname=»to-top»><a><div> <p>…<p> <div><ahref=»# to-top»>Кначалустраницы<a><div> <body>

Больше примеров

Пример

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

a.one:link {color: #ff0000;}a.one:visited {color: #0000ff;}a.one:hover
{color: #ffcc00;}a.two:link {color: #ff0000;}a.two:visited {color:
#0000ff;}a.two:hover {font-size: 150%;}a.three:link {color:
#ff0000;}a.three:visited {color: #0000ff;}a.three:hover {background:
#66ff66;}a.four:link {color: #ff0000;}a.four:visited {color:
#0000ff;}a.four:hover {font-family: monospace;}a.five:link {color:
#ff0000; text-decoration: none;}a.five:visited {color: #0000ff;
text-decoration: none;}a.five:hover {text-decoration: underline;}

Пример

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

a:link, a:visited {  background-color: white;  color: black; 
border: 2px solid green;  padding: 10px 20px;  text-align:
center;  text-decoration: none;  display: inline-block;}a:hover, a:active
{  background-color: green;  color: white;}

Пример

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

<span style=»cursor: auto»>auto</span><br><span style=»cursor:
crosshair»>crosshair</span><br><span style=»cursor:
default»>default</span><br><span style=»cursor: e-resize»>e-resize</span><br>
<span style=»cursor: help»>help</span><br><span style=»cursor:
move»>move</span><br><span style=»cursor: n-resize»>n-resize</span><br>
<span style=»cursor: ne-resize»>ne-resize</span><br><span style=»cursor:
nw-resize»>nw-resize</span><br><span style=»cursor:
pointer»>pointer</span><br><span style=»cursor: progress»>progress</span><br>
<span style=»cursor: s-resize»>s-resize</span><br><span style=»cursor:
se-resize»>se-resize</span><br><span style=»cursor: sw-resize»>sw-resize</span><br>
<span style=»cursor: text»>text</span><br><span style=»cursor:
w-resize»>w-resize</span><br><span style=»cursor: wait»>wait</span>

Всё дело в CSS

Что­бы сде­лать кра­си­во, нам пона­до­бит­ся CSS — спе­ци­аль­ная раз­мет­ка, кото­рая отве­ча­ет за внеш­ний вид и пове­де­ние эле­мен­тов на странице.

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

Но для теку­щей зада­чи это неважно

За ссыл­ки на стра­ни­це отве­ча­ет тег <a>, поэто­му доба­вим в CSS-раздел настрой­ки того, как будут выгля­деть наши ссылки:

a { 
  }

Меж­ду фигур­ны­ми скоб­ка­ми мы напи­шем код, кото­рый пре­вра­тит наши ссыл­ки в ссыл­ки со стиль­ным тон­ким под­чёр­ки­ва­ни­ем. Для это­го нам понадобится:

• убрать стан­дарт­ное подчёркивание;
• про­пи­сать цвет ссыл­ки, что­бы в каж­дом бра­у­зе­ре они выгля­де­ли одинаково;
• сде­лать тон­кую линию под ссылкой.

Сде­ла­ем всё по очереди.

Уби­ра­ем стан­дарт­ное подчёркивание

text-decoration: none;

Эта коман­да гово­рит бра­у­зе­ру не исполь­зо­вать стан­дарт­ные и встро­ен­ные укра­ша­тель­ства для это­го тек­ста. Раз мы про­пи­сы­ва­ем это в раз­де­ле про ссыл­ки, то и отно­сить­ся эта коман­да будет тоже толь­ко к ссылкам.

Зада­ём цвет ссылки

color: #0f7afc;

Это стан­дарт­ный цвет ссы­лок в бра­у­зе­ре Chrome, возь­мём его за основу.

Дела­ем тон­кую линию внизу

border-bottom: 1px solid;
border-bottom-color: rgba(15, 122, 252, 0.2);

Пер­вая строч­ка гово­рит бра­у­зе­ру, что­бы он нари­со­вал под ссыл­кой (border-bottom) сплош­ную линию (solid) тол­щи­ной в один пик­сель (1px).

А вто­рая — что­бы эта линия была опре­де­лён­но­го цве­та. RGBA озна­ча­ет, что нам нуж­но сме­шать крас­ный, зелё­ный и синий цве­та (RGB) и задать им какую-то про­зрач­ность (A). Сде­ла­ем всё тем же цве­том, что и ссыл­ки, а про­зрач­ность поста­вим 0.2 — так линия будет выгля­деть тонь­ше, чем один пиксель.

Соби­ра­ем всё вместе

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве атрибутов тега <body>.
Атрибуты являются необязательными и если они не указаны используются
значения по умолчанию.

link — определяет цвет ссылок на веб-странице
(цвет по умолчанию синий, #0000FF).

alink — цвет активной ссылки. Цвет ссылки
меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный,
#FF0000.

vlink — цвет уже посещенных ссылок. Цвет
по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb,
где r, g и b обозначают соответственно красную, зеленую и синюю составляющую.
Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует
диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются
в одно число, перед которым ставится символ # (пример 1).

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

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

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет
для всех ссылок на веб-странице применяются следующие псевдоклассы, которые
добавляются к селектору A.

visited — Стиль для посещенной ссылки.

active — Стиль для активной ссылки. Активной ссылка
становится при нажатии на нее.

hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей.
Для этого воспользуемся стилевым свойством color,
оно задает цвет определенного текста, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; }  
    </style>
  </head>

  <body>
    <p><b><a href="#">обычная ссылка</a></b></p>
  </body>
</html>

Попробовать »

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

Атрибут mailto

Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:

<a href = "mailto:smbd@some.com">Написать автору</a>

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

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

<a href = "mailto:mail_1@some.com?subject=Тема%20моего%20письма&cc=mail2@some.com&body=
Здравствуй%20уважаемый%20автор">Написать автору</a>

Где:

• subject—тема письма.
• cc—копия письма.
• bcc—скрытая копия письма.
• body—тело письма.

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

<a href=" mailto:mail_1@some.com, mailto:mail_2@some.com ">Написать автору </a>

Как поменять цвет ссылки в HTML

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

<a href="/URL-адрес страницы" title="Ссылка HTML">Изменяем цвет ссылки</a>

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

<a href="/URL-адрес страницы" title="Ссылка HTML" style="color: #FF0000; text-decoration: none">Изменяем цвет ссылки</a>

Так как все ссылки по умолчанию имеют подчеркивание в нашем примере мы его запретили, использовав свойство text-decoration: none

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

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

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

Значение, каким цветом выводить ссылки на сайте прописывается в CSS коде, чаще всего в файле style.css. Находится этот файл всегда в корневой папке сайта.

Чтобы изменить цвет всех ссылок на сайте в CSS вам нужно открыть файл style.css и найти в нем код отвечающий за вывод ссылок. Просто найдите упоминание link или Link Styles.

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

Цвет CSS ссылок в обычном состоянии.

CSS цвет ссылок при нажатии на нее.

Цвет посещенной ссылки.

Соответственно, чтобы цвет ссылок в спокойном состоянии, мы меняем значение color: #0169D3 на свой цвет в псевдоклассе a:link.

Чтобы изменить цвет посещенных ссылок, нужно изменить значение color: #0169D3 в псевдоклассе a:visited.

Если вы хотите, чтобы ваши ссылки стали подчеркнутыми, нужно вписать в CSS код ссылки значение text-decoration:underline; как на примере:

А если наоборот хотите убрать подчеркивание ссылки, нужно вписать значение text-decoration:none;

Как менять цвет ссылок в CSS думаю понятно. Теперь давайте рассмотрим как изменить цвет ссылки в HTML коде.

HTML цвет ссылки

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

Сама ссылка в HTML коде выглядит следующим образом:

Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:

Таким образом я выделил ссылку красным цветом в HTML коде.

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

Подписывайтесь на обновления блога, чтобы не пропустить!

Источник

Стилизация ссылок

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

Пример

a {  color: hotpink;}

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

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

• — обычная, не посещенная ссылка
• — ссылка, которую посетил пользователь
• — ссылка, когда пользователь наводит на неё курсор мыши
• — ссылка в тот момент, когда она нажата (активная)

Пример

/* непосещенная ссылка */a:link {  color: red;}/* посещенная ссылка */a:visited {  color: green;}/* ссылка при наведении мыши */
a:hover {  color: hotpink;}/* активная ссылка */a:active {
 
color: blue;}

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

• a:hover ДОЛЖЕН следовать после a:link и a:visited
• a:active ДОЛЖЕН следовать после a:hover