Оформление ссылок
Содержание:
- Плавное подчеркивание ссылки при наведении css
- Стилизация ссылок
- Декоративное подчёркивание ссылок
- Задание цвета отдельных ссылок на странице
- Метод 1: как изменить цвет текста HTML с помощью CSS
- Открытие ссылок в новом окне
- Задание цвета всех ссылок на странице
- Добавьте подчеркивание
- Используйте другой шрифт
- Больше примеров
- Цвета по названию
- Цвет ссылки в CSS
- Всё дело в CSS
- Как сделать картинку с ссылкой в Вконтакте?
- Вариации подчеркивания
- Как изменить цвет ссылки в CSS
- § 3. Внутренние ссылки
- Задание цвета отдельных ссылок на странице
- RGBA
- Выводы
Плавное подчеркивание ссылки при наведении css
Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!
Сделаем чтобы подчеркивание начиналось слева. При наведении, ссылка будет плавно подчеркиваться и подчеркивание будет начинаться слева. Пока курсор будет над ссылкой.
a.example_5 {
display: inline-block;
color:#ffeb3b;
line-height: 1;
text-decoration:none;
cursor: pointer;
border: none;
}
a.example_5:after {
background-color: #ffeb3b;
display: block;
content: «»;
height: 2px;
width: 0%;
-webkit-transition: width .3s ease-in-out;
-moz—transition: width .3s ease-in-out;
transition: width .3s ease-in-out;
}
a.example_5:hover:after,
a.example_5:focus:after {
width: 100%;
}
Стилизация ссылок
Ссылки могут быть оформлены с помощью любого свойства 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
Декоративное подчёркивание ссылок
Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством 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>
Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.
Задание цвета отдельных ссылок на странице
Вышеописанный способ задания цветов работает для всех ссылок веб-страницы.
Однако, иногда возникает необходимость одновременно использовать разные цвета.
Светлые, например, для темных областей веб-страницы, а темные цвета —
соответственно для светлых. Для этого также можно воспользоваться стилями.
Для изменения цвета ссылки следует использовать атрибут style=»color:
#rrggbb» в теге <a>, где #rrggbb
— цвет в шестнадцатеричном представлении. Можно, также, использовать названия
цветов или указывать цвет в формате: rgb (132, 33, 65).
В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).
Пример 3. Изменение цвета ссылки с помощью стилей
В данном примере приведены три разных способа задания цвета с помощью стилей.
Метод 1: как изменить цвет текста HTML с помощью CSS
- Откройте HTML-файл. Лучший способ изменить цвет текста – это воспользоваться CSS. Тег <font> не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
- Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
Поместите курсор внутри тега
. Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
Введите
<!DOCTYPE html> <html> <head> <style> </style> </head>
Введите элемент, цвет текста которого нужно изменить. Используйте раздел
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
В селекторе элемента введите атрибут color:. Это свойство определяет цвет текста выбранного элемента. За HTML цвет фона текста отвечает свойство background-color. В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:
}
</style>
</head>
Введите цвет текста. Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
Добавьте другие селекторы, чтобы изменить цвет различных элементов. Чтобы поменять цвет текста у разных элементов страницы или HTML цвет фона текста, можно использовать различные селекторы:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: #00FF00;
}
p {
color: rgb(0,0,255)
}
</style>
</head>
<body>
<h1>Этот заголовок будет зеленым.</h1>
<p>Этот параграф будет синим.</p>
Этот основной текст будет красным.
</body>
</html>
Укажите стилевой класс CSS вместо того, чтобы менять элемент. Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
color: red;
}
</style>
</head>
<body>
<h1 class="redtext">Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p>
</body>
</html>
Открытие ссылок в новом окне
Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <a>. Значение этого атрибута должно быть установлено _blank. Чаще всего ссылки данного вида ставятся, если они перебрасывают посетителя на сторонний сайт. В этом случае создатели сайтов надеются, что посетитель вернется на их сайт по завершении просмотра открывшейся страницы, так как в этом случае ваш сайт остается открытым в исходном окне посетителя и не дает ему забыть о вас. Одни пользователи любят средство отображения в отдельном окне, а у других новые окна могут вызывать скорее чувство раздражения, чем комфорта. Поэтому пользуйтесь этим приемом экономно, лишь к некоторым ссылкам и, при этом, будет не лишним заранее предупредить посетителя, что страница откроется в новом окне.
В следующем примере показано как создать ссылку, открывающую страницу в новом окне браузера:
Если установить значение _blank для всех ссылок на веб-странице, то каждая из этих ссылок будет открываться у посетителя в новом окне, в результате перед пользователем может оказаться великое множество открытых окон. Для избегания подобной ситуации можно присвоить целевому окну индивидуальное имя, которое можно будет указывать в ссылках вместо значения _blank. Следующая ссылка откроется в новом окне с именем _window:
Укажите в каждой ссылке, на своей веб-странице, значение _window вместо _blank и все документы, к которым будет осуществляться переход по ссылкам, будут открываться в том же самом втором окне, а ваш сайт остается открытым в исходном окне.
Атрибут target может принимать следующие значения:
| Значение | Описание |
|---|---|
| _blank | Открыть страницу в новом окне или вкладке. |
| _self | Открыть страницу в том же окне (это значение задается по умолчанию). |
| _parent | Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self. |
| _top | Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self. |
| framename | Открыть страницу в новом окне с именем framename. |
Задание цвета всех ссылок на странице
Цвета ссылок задаются в качестве атрибутов тега <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. Цвет ссылок, заданных через стили
Добавьте подчеркивание
По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст является ссылкой. Так какой способ лучше использовать для выделения ссылок?
Чтобы осуществить подчеркивание ссылки CSS, используйте этот код:
a {
text-decoration: underline;
}
Более нетрадиционный способ добавить подчеркивание ссылке — установить нижнюю границу. Этот метод дает больше гибкости, когда речь заходит о том, как отображается подчеркивание.
В блоге KORY автор использует нижнюю границу для ссылок
Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:
a {
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
Небольшой совет: Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:
- CSS подчеркивание пунктиром (dotted);
- Точечный (dashed);
- Двойной (double).
Используйте другой шрифт
Еще один способ выделить ссылки — использовать другой шрифт. Этот метод может внести беспорядок, если он неправильно использован. Так что следуйте следующим советам.
Выберите шрифт, который легко читается. Шрифт, используемый в теге body, скорее всего, меньше. Необычные шрифты при таком небольшом размере не будут легко читаться. Поэтому используйте шрифты семейства serif или sans-serif для достижения лучшей читабельности.
Для обеспечения максимальной слаженности выберите шрифт из того же семейства. В сжатом или черном варианте шрифт будет выделяться, но не слишком отличаться.
Для своих ссылок я выбрала шрифт, который достаточно похож, чтобы не бросаться в глаза, но отличается от остального текста. Так я получила контраст, который хотела.
Больше примеров
Пример
Этот пример демонстрирует, как добавить другие стили к гиперссылкам:
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>
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 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 коде, чаще всего в файле 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
Чтобы сделать красиво, нам понадобится 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 — так линия будет выглядеть тоньше, чем один пиксель.
Собираем всё вместе
Как сделать картинку с ссылкой в Вконтакте?
Во Вконтакте существует огромное количество функций, некоторые из которых используется редко, но от этого не менее полезны. Например, можно прикрепить к изображению прямую ссылку на сторонний сайт.
Зачем это делать?
Существует два способа, как сделать изображение прямой ссылкой на сайт.
Способ первый. Как сделать картинку ссылкой в вк
- 1. В одной вкладке страницу Вконтакте, на которой нам нужно сделать запись.
- 2. В другой вкладке открываем сайт, у которого нам нужно скопировать ссылку
- 3. Возвращаемся на вкладку Вконтакте и в запись вставляем ссылку
- Откройте новую вкладку
- Введите в адресной строке
- Вставьте ссылку
- Нажмите «Сократить»
Такие ссылки гораздо удобнее использовать и их даже можно запомнить, если вы часто ей пользуйтесь
Далее появляется окошко с автоматически подобранным изображением.
Наводим курсор на окошко и нажимаем на «Выбрать фотографию» в левом верхнем углу окошка.
Загружаем фотографию с компьютера.
- Рекомендованный размер — 537х240 пикселей
- Допустимы форматы JPG, GIF и PNG.
Удаляем текстовую ссылку из записи. При этом изображение с прикрепленной ссылкой останется.
По умолчанию после публикации в качестве текста публикации выступает заголовок ссылки которую вы прикрепили. Для того, что бы изменить текст:
- Наводим курсор на стрелку в правом верхнем углу публикации
- Нажимаем «Редактировать»
Далее пишем нужный текст.
Способ второй.Как сделать картинку ссылкой в вк
Он сложнее, чем первый. Для него нам понадобится специальный url:
- Копируем url
- Вместо слова «Ссылка» вставляем ссылку на нужный нам сайт
- Вместо слова «Заголовок» вставляем текст заголовка, который будет отображаться рядом с изображением. Если он вам не нужен, просто удалите «Заголовок»
- Вместо словосочетания «Ссылка на картинку» вставляем ссылку на изображение, которое нам нужно вставить. Проще всего это сделать если вы скачиваете изображение с просторов интернета. Не забудьте, что вы можете сократить ссылку по инструкции выше.
- Вместо слова «Описание» можете добавить любой текст.
- Вставьте получившуюся ссылку в адресную строку.
В качестве примера возьмем Яндекс:
После открывается окно, где мы должны выбрать, где опубликовать запись и как ее подписать:
Результат выглядит так:
Быстрее, конечно, использовать первый способ, но в целом они оба работают и отлично подходят для оформления записей, на которые будет приятно смотреть.
Вариации подчеркивания
Подчеркивание ссылок или любых других элементов, можно придумать какое угодно. Подчеркивание может всплывать снизу, выезжать слева или справа и т.д. Мы рассмотрим более интересный пример, в котором подчеркивание будет разъезжаться от центра к краям, как на демонстрации ниже.
демонстрация подчеркивания
HTML
Для начала создадим какой либо элемент, к примеру, возьмем тег . Атрибут его нам не важен, потому как большая часть работы будет отведена стилям.
<a href="#">demo ссылка</a>
CSS
Реализация будет заключаться в двух линиях, которые будут разъезжаться от середины нижней части элемента к его краям.
За подчеркивание у нас отвечает свойство , но применять его здесь не имеет смысла, потому как воплотить наши планы по анимации в таком случае не совсем актуально. Не будем забывать, что каждому элементу можно присвоить псевдоэлемент или . Поэтому все свойства будем задавать именно им, а нашей ссылке сразу же задаем следующие параметры:
a{
display: inline-block;
position: relative;
text-decoration: none;
}
Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.
a::before{
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: red;
transition: width .5s ease-in-out, left .5s ease-in-out;
left: 50%;
bottom: 0;
}
Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом :
a::after{
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: red;
transition: width .5s ease-in-out;
left: 50%;
bottom: 0;
}
Дальше нам остается только добавить эффект при наведении мышки на ссылку.
a:hover::before{
width: 50%;
left: 0;
}
a:hover::after{
width: 50%;
}
Стоит отметить, что это лишь один из способов реализации данной идеи. Можно то же самое сделать и при помощи только одного псевдоэлемента . Подписывайтесь на материалы и предлагайте темы для статей.
css11
- 5
- 4
- 3
- 2
- 1
(18 голосов, в среднем: 4.7 из 5)
не скупись ставь лайк
Подписка на обновления:
Как изменить цвет ссылки в CSS
— a:active – активная ссылка;
— a:visited – ссылка, по которой осуществлялся визит;
— a:hover – ссылка при наведении мыши.
Для реализации задуманного создадим два файла.
Первым делом index.php:
<head>
<link rel=»stylesheet» type=»text/css» href=»/style.css»>
</head>
<body>
<a href=»/URL-адрес страницы» title=»Ссылка»>Изменяем цвет ссылки</a>
</body>
Второй файл назовем style.css. Заполним его следующим содержимым:
a {
color:#FF0000;
text-decoration:none
}
a:active {
color:#FF0000;
text-decoration:none
}
a:visited {
color:#666666;
text-decoration:none
}
a:hover {
color:#339900;
text-decoration: underline
}
Подобным способом мы присвоили всем ссылкам единый стиль, естественно кроме тех у которых задан свой.
Для того чтобы изменить цвет ссылки в CSS на готовом движке, в большинстве своем необходимо отредактировать файл style.css, который находится в корневой папке сайта. Воспользовавшись текстовым редактором Notepad++ откройте файл style.css выберите вкладку Поиск/Найти, впишите в поле поиска link либо Link Styles и нажмите кнопку «Искать далее». Таким способом вы существенно облегчите поиск вожделенной части кода.
Внесите правки к соответственному псевдоклассу, изменяя один из вышеприведенных стилей, добавленных к селектору a.
Спасибо за внимание и до скорого на страницах Stimylrosta. Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
§ 3. Внутренние ссылки
Для комфортного перемещения по страницам с большим количеством контента используются внутренние ссылки. Именно с их помощью я сделал «Содержание урока» (см. в начале этой страницы). Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается «якорь» ссылки. «Якорь» создаётся атрибутом name:
name=»имя якоря»>текст
Имя «якоря» задаётся произвольно. Тут стоит сказать, что не все браузеры понимают русские имена «якорей», поэтому рекомендую использовать латиницу. Текст между тегами для создания «якоря» не обязателен и, чаще всего, не указывается.
Как я уже сказал выше, в атрибуте href внутренней ссылки вместо адреса указывается имя нужного «якоря» с обязательным символом решётки (#) перед ним. Разберём на примере.
Я создал «якорь» с именем zagolovok и разместил его в коде страницы рядом с заголовком этого урока («Гиперссылки в HTML»). Код «якоря» следующий:
name=»zagolovok»>
HTML-код внутренней ссылки будет выглядеть так:
href=»#zagolovok»>К заголовку
, а в браузере так:
После щелчка по этой ссылке, ты попадёшь к заголовку этого урока.
Если ты заметил, то после перехода по внутренней ссылке к заголовку изменился URL-адрес в адресной строке браузера:
К изначальному адресу:
http://www.seoded.ru/beginner/html/giperssilki.html
Добавилась внутренняя ссылка:
http://www.seoded.ru/beginner/html/giperssilki.html#zagolovok
Используя эту особенность, можно ссылаться на определённое место страницы с любого ресурса в Интернете! Т. е., допустим, ты создал страницу с объёмной статьёй о чём-то (или выложил на странице большое число фотографий) и разметил её внутренними ссылками. Находясь в социальной сети ВКонтакте, тебе потребовалось сослаться не просто на страницу со статьёй (или фотографиями), а на определённое место на ней (или определённую фотографию). Используя вариант с внутренней ссылкой в адресе, ты с лёгкостью добьёшься нужного.
Задание цвета отдельных ссылок на странице
Вышеописанный способ задания цветов работает для всех ссылок web-страницы.
Однако, иногда возникает необходимость одновременно использовать разные цвета.
Светлые, например, для темных областей web-страницы, а темные цвета —
соответственно для светлых. Для этого также можно применить стилями.
Для изменения цвета ссылки следует использовать параметр style=»color:
#rrggbb» в теге <А>, где #rrggbb
— цвет в шестнадцатеричном представлении. Можно, также, использовать названия
цветов или указывать цвет в формате: rgb (132, 33, 65).
В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).
Пример 3. Изменение цвета ссылки с помощью стилей
В данном примере приведены три разных способа задания цвета с помощью стилей.
| Статья опубликована: 06.09.2009 | Последнее обновление: 24.02.2009 |
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
Выводы
Так какой же способ подчеркивания лучший?
Для небольшого текста я рекомендую использовать с оптимистичным добавлением . Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания. Плюс всегда есть шанс, что при наличии у вас терпения, это подчеркивание когда-нибудь будет выглядеть хорошо без необходимости для вас что-то менять, так как это сделают в браузерах.
Для основного текста имеет смысл использовать . Этот подход работает, выглядит замечательно и для него есть миксины Sass. Вы, в принципе, можете пропустить , если подчеркивание тонкое или отличается цветом от текста.
Для отдельных строк текста используйте вместе с любыми дополнительными свойствами.
А если вам нужен пропуск выносных элементов на фоне градиента или изображения, попробуйте использовать фильтры SVG. Или просто избегайте использовать подчеркивание.
В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств .
Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы
