Стили для гиперссылок css

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

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

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

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

Пример 1. Использование text-decoration

Здесь ссылки отображаются без своего традиционного подчёркивания.

Добавляем подчёркивание

Подчёркивание, наоборот, можно добавить при наведении на ссылку курсора мыши. Для этого сперва убираем подчёркивание через свойство text-decoration со значением none , затем в псевдоклассе :hover используем это же свойство, но уже со значением underline . В примере 2 также показано применение свойства text-decoration-color, оно меняет цвет линии подчёркивания.

Пример 2. Использование text-decoration-color

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

Сама линия под текстом ссылки является не сплошной, а прерывается на нижних «хвостиках» некоторых букв, таких как «у», «д», «щ» и др. Также через text-decoration нельзя задать стиль линии подчёркивания. Всё это легко обходится с помощью свойства border-bottom, которое добавляет линию снизу. У такой линии допустимо менять цвет, толщину и её стиль (пример 3).

Пример 3. Использование border-bottom

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

Рамка вокруг ссылок

Для добавления рамки применяется свойство border со следующими параметрами линиями: толщина, стиль и цвет. Рамка отображается непосредственно вокруг текста, поэтому для создания пространства между текстом и рамкой воспользуемся свойством padding (пример 4).

Пример 4. Использование border

Рамку можно отображать не вокруг ссылки непосредственно, а только при наведении на неё курсора мыши. Для этого свойство border перенесём из селектора a в селектор a:hover . Здесь надо учитывать что border несколько меняет положение текста, поэтому добавление рамки приведёт к «дёрганью» текста. Чтобы этого избежать, для ссылок установим прозрачную рамку, используя transparent в качестве значения цвета (пример 5).

Пример 5. Использование border

Вместо border можно использовать свойство outline (пример 6), оно не смещает содержимое, поэтому использовать прозрачную рамку уже не нужно. При этом для outline не работает скругление углов, они всегда будут прямыми.

Пример 6. Использование outline

Перенос текста ссылки

Рамки вокруг ссылок хорошо смотрятся, когда текст отображается в одну строку. Но если текст ссылки содержит несколько слов, при переносе слов с одной строки на другую возможен «разрыв» рамки (рис. 1).

Рис. 1. Перенос текста ссылки

Есть два основных способа, как устранить этот недостаток:

Запрет переноса текста осуществляется с помощью свойства white-space со значением nowrap . Это свойство добавляется к селектору a , запрещая тем самым переносить текст внутри ссылки на другую строку (пример 7).

Пример 7. Использование white-space

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

Рис. 2. Текст ссылки без переносов

Использование white-space не всегда смотрится уместно, особенно в случае длинного текста. Из-за переноса такой строки в текстовом блоке образуются некрасивые «дыры».

Другой способ связан с использованием свойства box-decoration-break со значением clone . Оно работает следующим образом — каждый фрагмент текста на своей строке воспринимается независимо и к нему отдельно применяются стили. В результате часть текста на каждой строке содержит свою завершённую рамку, как показано на рис. 3.

Рис. 3. Результат применения box-decoration-break

В примере 8 к ссылкам добавляется красная рамка со скруглёнными уголками.

Пример 8. Использование box-decoration-break

Ссылки в виде кнопок

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

Для ссылок-кнопок введём отдельный класс .button , чтобы менять стиль не всех ссылок, а только выбранных. Для этого класса установим цвет фона, текста, шрифт, рамку, поля. У текста также лучше убрать подчёркивание и проделать с ним другие желаемые манипуляции (пример 9).

К такой ссылке применим псевдокласс :hover, который устанавливает стиль при наведении на него курсора мыши. В частности, в примере меняется цвет фона, текста и рамки. Чтобы смена цветов протекала плавно, к .button добавлено свойство transition, задающее продолжительность перехода.

Итоги

• Подчёркивание у ссылок убирается с помощью свойства text-decoration со значением none .
• Цветом подчёркивания можно управлять через свойство text-decoration-color.
• Подчёркивание можно имитировать линией снизу используя свойство border-bottom.
• Рамка добавляется к ссылкам через свойство border или outline, причём у последнего нельзя делать скруглённые уголки.
• Можно запретить перенос текста ссылки на другую строку с помощью свойства white-space со значением nowrap .

Источник

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

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;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Основы CSS: стилизация ссылок

От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

Ссылки имеют синий цвет (просмотренные – фиолетовый). У них есть подчеркивание. В демо представлена самая простейшая ссылка.

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

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

Онлайн курс по JavaScript

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

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Уже намного лучше! Но зачем останавливаться? Давайте рассмотрим пару других способов стилизации ссылок для завершения UX.

Стилизация всех состояний ссылки

Ссылки обладают разными состояниями, они адаптируются при взаимодействии с ними на странице. При изменении стандартных стилей ссылки необходимо обратить внимание на 3 дополнительных состояния:

Hover (:hover): когда курсор расположен над ссылкой без клика

Visited (:visited): ссылка, по которой пользователь переходил ранее, но на которую сейчас не наведен курсор

Active (:active): ссылка в процессе нажатия. Состояние очень быстрое – когда кнопка нажата, но до завершения щелчка.

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

Концепция ссылки кажется простой, но там много чего происходит – и CSS дает нам невероятную мощь по настройке UX!

Ссылки как кнопки

На эту тему ведутся споры, но мы можем с помощью CSS превратить текстовую ссылку в кнопку.

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

Источник