Свойства ссылок | htmlbook.ru
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
| Свойство | Описание |
|---|---|
| A:link | Определяет стиль для обычной непосещенной ссылки. |
| A:visited | Определяет стиль для посещенной ссылки. |
| A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
| A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Пример 1. Подчеркивание у ссылки и изменение ее цвета
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылки</title>
<style type="text/css">
A:link {
text-decoration: none; /* Убирает подчеркивание для ссылок */
}
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html> Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover.
Пример 2. Использование подчеркивания в ссылках
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылки</title> <style type="text/css"> A:link { text-decoration: none; } A:visited { text-decoration: none; } A:active { text-decoration: none; } A:hover { text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */ color: red; /* Цвет ссылки */ } </style> </head> <body> <p><a href="1.html">Пример ссылки</a></p> </body> </html>
Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылки</title>
<style type="text/css">
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html> Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ссылки</title> <style type="text/css"> A:link { color: blue; text-decoration: none; } A:hover { color: red; text-decoration: underline; } .link { color: blue; } </style> </head> <body> <p><a href="1.html"><span>Ссылка</span></a></p> </body> </html>
Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылки</title>
<style type="text/css">
A { font-size: 14px; color: red; }
A.link1 { font-size: 12px; color: green; }
A.link2 { font-size: 14px; color: blue; }
</style>
</head>
<body>
<p>| <a href="1.html">Ссылка 1</a> |
<a href="2.html">Ссылка 2</a> |
<a href="3.html">Ссылка 3</a> |</p>
</body>
</html> Результат данного примера показан на рис. 1.
Рис. 1. Разные ссылки на одной странице
Ссылка на файл CSS в заголовке HTML
Я пишу файл CSS в первый раз. Это будет просто. Я хотел бы знать:
А) должен ли файл быть просто чем-то вроде «cssStyle.css»? Б) как бы я записал его в HTML, чтобы он извлекался из файла .css в той же папке, что и все мои файлы html?
html css fileПоделиться Источник danteMingione 07 февраля 2014 в 09:02
4 ответа
- Как добавить внешний css в html
- R shiny переопределение файла CSS в заголовке
Я включаю файл CSS в приложение shiny. Я включаю его в функцию ui() перед включением заголовка, который пытается переопределить файл CSS. Все, что я прочитал, указывает на то, что объявление заголовка CSS должно переопределять файл CSS. Однако он не переопределяет его, если только я не использую…
2
Если index.html и style.css находятся в одной папке
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body> content </body>
</html>
Если style.css на 1 уровень выше
<link rel="stylesheet" type="text/css" href="../style.css" />
Если style.css находится в папке на 1 уровень выше
<link rel="stylesheet" type="text/css" href="../folder/style.css" />
Если style.css находится в папке
<link rel="stylesheet" type="text/css" href="/folder/style.css" />
Для легкого включения небольшого содержимого css.
<html>
<head>
<style>
body, html {margin:0}
</style>
</head>
<body> content </body>
</html>
Поделиться Debajyoti Das 07 февраля 2014 в 09:04
0
Чтобы нарисовать его из вашего html, вы хотите написать это:
<link rel="stylesheet" type="text/css" href="style.css">
Между вашими тегами head . напр.:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Вы можете назвать его как угодно, если href совпадает с файлом, который вы назвали, включая .css .
Поделиться Albzi 07 февраля 2014 в 09:04
0
В голове
<html>
<head>
// link to css and jquery here
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Поделиться Vinay Pratap Singh 07 февраля 2014 в 09:05
0
Сначала сохраните файл cssstyle.css и yourhtml.html в одной папке и просто установите тег ссылки в файле html
пример yourhtml.html
<head>
<link rel="stylesheet" href="cssstyle.css"></link>
</head>
Поделиться kamesh 07 февраля 2014 в 09:06
Похожие вопросы:
CSS ссылка на HTML
Я связал файл CSS с различными файлами HTML вокруг моего сайта. Файл CSS хранится в корне моего сайта. Файл работает только с домашней страницей, в корневой папке (cPanelX file manager). На других…
Ссылка на файл CSS в файле HTML Email
У меня есть проект на Thymeleaf + Spring MVC,и я пытаюсь использовать Thymeleaf для отправки HTML писем. У меня сложилось впечатление, что единственное, что мне нужно было сделать, — это создать…
Единственная ссылка на файл CSS из элемента управления ASCX
Как добавить внешний css в html
Я использовал встроенные и импортированные нагрузки css, но у меня были проблемы с внешними, и я никогда не пробовал их раньше. Я копирую и вставляю все из этой ссылки css ссылка в файл css я на…
R shiny переопределение файла CSS в заголовке
Я включаю файл CSS в приложение shiny. Я включаю его в функцию ui() перед включением заголовка, который пытается переопределить файл CSS. Все, что я прочитал, указывает на то, что объявление…
Будут ли файлы @import css по-прежнему кэшироваться, если родительский файл css использует строку запроса
Я собираюсь сделать обновление веб-страниц и css-файлов в нашей производственной среде. Я хотел бы предотвратить кэширование css в веб-браузере, так как в противном случае это нарушило бы дизайн,…
ссылка CSS
Я хотел бы построить элемент ссылки HTML, ссылающийся на файл CSS, и я хотел бы использовать одну и ту же ссылку из нескольких документов. Например, мой файл CSS находится в: {root}/style/style.css…
ссылка на файл CSS с шаблоном макета Haml
Я пытаюсь связать файл css с шаблоном макета haml У меня есть метод в ApplicationHelper для генерации правильного html module ApplicationHelper def styletag(sheet_name) <link rel=’stylesheet’…
В чем разница между использованием extract-text-webpack-plugin и связыванием объединенного файла CSS в заголовке HTML?
Из того, что я понимаю, extract-text-webpack-plugin связывает все файлы css, импортированные в ваши компоненты React, в один отдельный файл CSS. Затем на отдельный файл CSS можно ссылаться в…
CSS руины ссылка ( <a> )
У меня есть ссылка, которая не работала на моей странице. Ссылка в заголовке работает, но вторая ссылка-Нет. Я вырезал CSS, и обе ссылки работают. Что в следующем CSS приведет к тому, что ссылка не…
Свойства и оформление ссылок в CSS
CSS дает возможность по особенному оформлять ссылки на страницах веб-сайта. Эта особенность заключается в том, что ссылки оформляются разными способами в зависимости от состояния, в котором они находятся.
Ссылки могут находиться в 4 состояниях:
Свойства | В каком состоянии будет ссылка |
| a:link | обычная ссылка, которую пользователь еще не посетил |
| a:visited | ссылка, которую уже посетил пользователь |
| a:hover | состояние ссылки, на которую пользователь навел курсор мышки |
| a:active | активная ссылка, на которую нажал пользователь |
Теперь перейдем непосредственно к самому оформлению ссылок.
Цвет ссылки в css.
С помощью CSS вы можете добавить к каждому свойству цвет ссылки. Смотрите оформление на примере:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {color:#006400;} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover {color:#FF0000;} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>
Разъяснение:
a:link – это свойство ссылки;
color:#006400; — это оформление ссылки, которое ставится между скобками {}.
Результат:
○ не посещенная ссылка a:link будет зеленого цвета;
○ посещенная ссылка a:visited будет желтого цвета;
○ ссылка, при наведении на нее мышкой, a:hover будет красного цвета;
○ нажатая ссылка a:active будет серого цвета.
Цвет фона ссылки в css.
Этот метод часто используется для создания меню или кнопок на веб-сайтах. Для этого воспользуемся правилом background-color.
Для примера пропишем правило background-color для свойства a:link и a:hover.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {
color:#ffffff;
background-color:#000000;
} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover
{color:#000000;
background-color:#FF704D;
} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>
Результат:
Если навести курсор мышки на ссылку, то цвет фона ссылки изменится.
Как изменить размер ссылки?
Здесь тоже ничего сложного нет. Для того, чтобы изменялся размер ссылки при наведении на нее мышкой, воспользуемся правилом font-size для свойства a:hover.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {color:#006400;} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover
{color:#FF0000;
font-size: 25px;
} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>
Результат:
Если навести курсор мышки на ссылку, тогда ее размер увеличится на 25 пикселей (размер можете выставлять на ваше усмотрение).
Ссылка без подчеркивания.
Также CSS дает возможность сделать ссылку без подчеркивания. Для этого воспользуемся правилом text-decoration для свойства a:link.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {
color:#006400;
text-decoration:none; /* убираем подчеркивание */
} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover {color:#FF0000;} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>
Результат:
Ссылка отображается в виде простого слова, без какого-либо подчеркивания.
Если вы хотите сделать, чтобы при наведении курсора появлялось подчеркивание, тогда добавьте правило text-decoration для свойства a:hover.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
a:link {
color:#006400;
text-decoration:none; /* уберем подчеркивание */
} /* не посещенная ссылка */
a:visited {color:#FFFF00;} /* посещенная ссылка */
a:hover {
color:#FF0000;
text-decoration: underline; /* ссылка будет подчеркнутой */
} /* ссылка при наведении на нее мышкой */
a:active {color:#сссссс;} /* нажатая ссылка */
</style>
</head>
<body>
<p><a href="#">ссылка</a></p>
</body>
</html>
Изменение цвета подчеркивания.
Не знаю, пригодится ли вам этот метод для сайта, но для общего развития вам нужно это знать.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style>
A:link { color: #0000FF; text-decoration: none; }
A:hover { color: #cc0000; text-decoration: underline; }
.link { color: #0000FF; }
</style>
</head>
<body>
<p><a href="#"><span>Ссылка</span></a></p>
</body>
</html>
Результат:
Цвет ссылки при наведении на нее мышкой, не изменится, но зато появится подчеркивание другим цветом.
Ссылки разных цветов и размеров.
Бывают такие ситуации, когда на одной странице веб-сайта необходимо использовать ссылки разного цвета и размера.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style ENGINE="text/css">
A { font-size: 18px; color: #cc0000; }
A.link1 { font-size: 15px; color:#228B22; }
A.link2 { font-size: 12px; color: #0000FF; }
</style>
</head>
<body>
<p>| <a href="#">Ссылка 1</a> |
<a href="#">Ссылка 2</a> |
<a href="#">Ссылка 3</a> |</p>
</body>
</html>
Результат:
Как сделать изображение ссылкой?
Заменить текстовую ссылку можно изображением (рисунком). Изображение должно быть прописано в коде между тегами <a> и </a>, смотрите в примере.
Пример:
<html>
<head>
<title>Свойства и оформление ссылок в CSS</title>
<style type="text/css">
A IMG { border: 0; } /* убрать рамку для всех изображений */
</style>
</head>
<body>
<p><a href="#"><img src="images/kartinka.gif"
height="40" alt="изображение в качестве ссылки"></a></p>
</body>
</html>
Результат:
Результат, я думаю, и так всем ясен. Картинка становится активной ссылкой.
Этот метод можно использовать для графического меню или кнопок на веб-сайте.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, для начинающих, основы
CSS Стилизация ссылок. Уроки для начинающих. W3Schools на русском
С помощью CSS ссылки можно стилизовать разными способами.
Текстовая ссылка Текстовая ссылка Кнопочная ссылка Кнопочная ссылкаСтилизация ссылок
Ссылки могут быть оформлены с помощью любого свойства CSS (например, color, font-family, background и т.д.).
Кроме того, ссылки могут быть оформлены по-разному в зависимости от того, в каком состоянии они находятся.
Четыре состояния ссылок:
a:link— обычная, не посещенная ссылкаa:visited— ссылка, которую посетил пользовательa:hover— ссылка, когда пользователь наводит на неё курсор мышиa:active— ссылка в тот момент, когда она нажата (активная)
Пример
/* непосещенная ссылка */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
Text Decoration — Оформление текста
Свойство text-decoration в основном используется для удаления подчеркиваний из ссылок:
Пример
a:link {text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Background Color — Цвет фона
Свойство background-color может быть использовано для указания цвета фона для ссылок:
Пример
a:link {background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Кнопки-ссылки
Этот пример демонстрирует более сложный пример, где объединяются несколько свойств CSS для отображения ссылок в виде блоков / кнопок:
Пример
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;
}
Больше примеров
Пример
Этот пример демонстрирует, как добавить другие стили к гиперссылкам:
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>auto</span><br>
<span>crosshair</span><br>
<span>default</span><br>
<span>e-resize</span><br>
<span>help</span><br>
<span>move</span><br>
<span>n-resize</span><br>
<span>ne-resize</span><br>
<span>nw-resize</span><br>
<span>pointer</span><br>
<span>progress</span><br>
<span>s-resize</span><br>
<span>se-resize</span><br>
<span>sw-resize</span><br>
<span>text</span><br>
<span>w-resize</span><br>
<span>wait</span>
Проверьте себя с помощью упражнений!
Как с помощью css сделать ссылку красивой
В css, ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предоставляют широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:
Появление каскадных таблиц стилей (CSS) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.
В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.
Сравните объем кода с использованием каскадных таблиц стилей и без них:
А вот, насколько уменьшается код после включения в него CSS:
Даже визуально заметно, что объем уменьшился в несколько раз. При этом одно стилевое описание CSS ссылки применено ко всем остальным.
CSS включает в себя большой набор средств для установки стилевых характеристик ссылок. Доступ к тегу <a href> может быть реализован несколькими способами:
- С помощью селектора элемента – при этом стиль ссылки задается селектором элемента а. Пример:
<style type="text/css">
a{font-size:24px;
font-background-color:#33CC99;
}
</style>Описанный стиль будет применен ко всем ссылкам внутри страницы:
- Через селектор идентификатора – он задается внутри тега <a href>. А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:
<style type="text/css">
#a1{font-size:24px;
font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>
</body>Результат аналогичен предыдущему.
- Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:
<style type="text/css">
.a1{font-size:24px;
font-background-color:#33CC99;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще раз!</a>
</br>
<a href="mail.ru" target="_blank">Да еще много, много раз!</a>
</body>С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:
<style type="text/css">
a{font-size:24px;
font-background-color:#33CC99;
background-color:#FFCCCC;
}
#a2
{background-color:#FF0033;
}
.a3
{background-color:#339999;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
</body>Как видно, цвет шрифта, установленный через селектор элемента, сохраняется для всех ссылок. При этом цвета фона, заданные через класс a3 и идентификатор a2, доминируют над цветом, установленным через селектор элемента a.
Таким же образом можно убрать подчеркивание ссылок. Для этого внутри селектора свойству text-decoration присваивается значение none. Пример:
<style type="text/css">
a{
font-size:24px;
text-decoration: none;
}
</style>
</head>
<body>
<a href="mail.ru" target="_blank">Нажми меня</a>
</br>
</br>
<a href="mail.ru" target="_blank">Нажми меня еще раз</a>
</br>
</br>
<a href="mail.ru" target="_blank">Еще хоть раз!</a>
</br>
</body>Ссылка является не совсем обычным элементом html. Да и в css отношение к тегу <a href> тоже особенное. Для установки характеристик внешнего вида ссылки в каскадных таблицах стилей применяются встроенные псевдо классы.
Псевдо классом называется класс CSS, применяемый к стилю элемента в зависимости от его состояния (активный, неактивный, при нажатии).
В CSS различают несколько псевдо классов ссылок:
- A:link – задает стиль ссылки до посещения;
- A:visited – стиль после посещения;
- A:active – устанавливает, как будет выглядеть активная ссылка;
- A:hover – вид ссылки при наведении на нее курсора мыши.
A:link по своему действию аналогичен селектору элемента a (оба задают внешний вид не посещенной ссылки).
Пример, в котором подчеркивание ссылки и размер шрифта будут меняться в зависимости от ее состояния:
<style type="text/css">
A:link { text-decoration: none; font-size:24px; }
A:visited { text-decoration: overline; }
A:hover {
text-decoration: underline overline; font-size:30px;
color: #FF00FF;
}
A:active { text-decoration: underline; color: #00FF00; font-size:40px; }
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>С помощью псевдо классов можно легко установить фоновое изображение ссылки, которое меняется в зависимости от действий пользователя. Пример:
<style type="text/css">
A:link {
display: block;
width: 200px;
height: 70px;
background: url(im/1.gif)no-repeat;
}
A:visited {
display: block;
width: 200px;
height: 70px;
background: url(im/2.gif)no-repeat;
}
A:hover {
display: block;
width: 200px;
height: 70px;
background: url(im/3.gif)no-repeat;
}
A:active {
display: block;
width: 200px;
height: 70px;
background: url(im/4.gif)no-repeat;
}
</style>
</head>
<body>
<p><a href="4.html"></a></p>
</body>Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html. Да и писанины c CSS намного меньше.
Ссылки против кнопок в современных веб-приложениях — CSS-LIVE
Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон
Github: ссылки или кнопки?
Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.
Кнопки
Почему-то люди становятся веб-разработчиками,так и не узнав про HTML-элемент <button>. (Мне и самой потребовалось несколько лет, пока я узнала, для чего нужны заголовки h2-h6, так что бывает). Могучая кнопка и правда крутая. Вот что она может делать:
- Получать фокус с клавиатуры по умолчанию
- Делать «клик» по нажатию на пробел
- Отправлять данные формы на сервер
- Очищать форму
- Блокироваться с помощью атрибута
disabled - Давать подсказку скринридеру с помощью неявного атрибута
role="button" - Показывать состояния
∶focus,∶hover,∶active,∶disabled
Если добавить немного скрипта,кнопка идеальный элемент для:
- Открывания модального окна
- Вызова всплывающего меню
- Переключения интерфейса
- Проигрывания медиа-контента
- Вставки с помощью JS в случае, если они работают только с помощью JS
Ссылки
Вот несколько базовых возможностей ссылок, или якорей, или фундамента веба:
- Создавать гипертекст, сеть онлайн-ресурсов
- Перевести пользователя на новую страницу или окно
- Изменять URL
- Вызвать браузерные перерисовку/перезагрузку
- Переходить по якорям внутри страницы
- Связывать между собой разные части приложения с отрисовкой на клиенте
- Способны принимать фокус по умолчанию с помощью атрибута
href - Регистрируют клик с помощью клавиши
Enter - Имеют неявную роль link
- Не блокируются как кнопки, но их можно сделать неактивными с помощью
tabindex="-1"иaria-hidden="true" - Могут открываться в новых окнах (а раньше — и во фреймах)
- Показывать состояния
∶link,∶visited,∶focus,∶hover,∶active
Лично для меня самое главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственная загвоздка здесь). Кнопка переключает что-то в интерфейсе, например, видео-плеер, или вызывает новый контент в том же самом контексте, например, всплывающее меню, использующее aria-haspopup.
Что такое навигация? А что маршрутизация?
Изменение URL означает, что пользователь переходит на новую страницу. Это перезагружает браузер с новым ресурсом и перерисовывает пиксели. Навигация может вызываться с помощью действий формы, якорных ссылок и JavaScript-свойства location.
Подобно сортировке писем на почте, маршрутизация — механизм для подключения сетевых запросов с соответствующим контентом в приложении. Маршрутизаторы — общая технология для множества разных веб-фреймворков (помню, как на заре своей карьеры я балдела от PHPшных), ставящая в соответствие представления и их части определенным фрагментам URL. Благодаря написанию динамических маршрутов, новый контент можно создавать динамически (без хардкода)
Откуда возникает путаница?
В мире клиентских веб-приложений построенных с помощью Angular, Ember или React, браузерная перерисовка может вызваться в любой момент. Немного неясно, какой элемент лучше подходит для дела, когда вы можете выполнять тот же код, что для маршрута, но с обработчиком клика кнопки и без изменения URL. К примеру, если я открываю панель над существующим контентом страницы, я перехожу сюда или переключаю интерфейс? Зависит ли это от того, есть ли у этой панели свой собственный URL? Вот код, который я видела недавно:
<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>
По первому впечатлению я посчитала, что это надо заменить на элемент button, поскольку нет значения в href, но есть tabindex="0" и привязка обработчика ng-click. Выглядит очевидно, да? Мне сказали, что он должен оставаться якорем, поскольку «он перенаправляет на внешние ссылки и страницу профиля». Это стало ясно только после изучения JavaScript-кода, который вызывается во многих подобных местах по привязке обработчика ng-click на элементе button. Неужели обязательно надо так глубоко копать, чтобы помочь выбрать правильный элемент?
Если в чисто клиентском приложении фокус обрабатывается правильно, это может не сказаться на пользователе — у ссылки ng-click и tabindex останется по-прежнему неявная роль ссылки. Однако,при декларативном подходе намного лучше было бы использовать заполненный href и маршрутизацию, если якорь перенаправляет пользователя на новый ресурс. Tabindex и события click, привязанные к тегу ссылки — антипатерн разметки, который еще аукнется тем, кто позднее будет писать код и проверять его.
Если делать маршрутизацию основной частью веб-приложения, то веб-разработчикам будет намного проще использовать ссылки и понять предназначение кнопок. А еще с ним проще создавать серверные JavaScript-приложения с прогрессивным улучшением, пользуясь шаблонами URL, а не полагаясь на события по клику.
Роль UX в разработке доступных приложений
Я скажу это вслух: эта путаница часто начинается с дизайна и UX. Компонент дизайна приходит к нам с прямоугольными кнопками интерфейса, и — потому что так надо — в коде они должны быть ссылками. Где это становится проблемой?
Если пользователь скринридера обратится в техподдержку и получит инструкцию «кликнуть на кнопку» в вашем UI, которая на самом деле написана в коде как ссылка, для него может оказаться проблемой найти ее. Не забывайте и о голосовых интерфейсах: если вы произнесёте команду кликнуть на кнопку, которая в коде похожа на ссылку, вы столкнетесь с проблемами, нет?
Фреймворки, по общему признанию, стирают эту грань и только способствуют выбору неправильного элемента, как в примере с ng-click выше. Можно использовать JavaScript для запуска асинхронной отправки формы на нужном нам элементе (даже без тега <form>, но это еще не повод от него отказываться). Аналогично, можно инициировать изменения представления без маршрутизации, даже если их лучше всего обрабатывать с помощью ссылки. Одни элементы подходят в одном случае, другие — в другом: всё дело в том, чтобы использовать нативные возможности этого элемента по максимуму.
Заметили разницу?
Что можно для этого сделать?
Вернитесь к дизайну и сделайте ссылки похожими на ссылки, а кнопки — на кнопки. Без двусмысленности разработчикам станет легче писать более доступный код, лучше отвечающий ожиданиям пользователей. (Можно ли кликнуть правой кнопкой мыши на эту квадратную кнопку, чтобы открыть в новом окне?)
В разработке:
- Если пользователь скринридера перейдет табом на интерактивный элемент, подскажет ли роль этого элемента, чего от него ждать? (Уводит ли он куда-то с текущей страницы? Об этом хорошо бы узнать заранее.)
- Отключаете ссылочные фичи типа смены URL или правого клика? Подумайте о кнопке.
- Поддерживайте маршрутизацию в вашем приложении с помощью
href,ng-href, и так далее. - Навигация по страницам заслуживает изменения заголовка и истории.
Это ещё не конец.
Уверена, что к этой теме придется вечно возвращаться снова и снова, как и все эти годы. Воплощая интерфейс в коде, вам каждый раз придется с трудом выбирать, какой элемент правильный в данном случае… и есть уйма способов сделать одно и то же. И если при этом вы принимаете компетентные решения, то это лучшее, что в ваших силах.
Разработчики, которым предстоит работать с кодом после вас, благодаря декларативности смогут легче освоить эту науку. И самое главное, подумайте об ожиданиях ваших пользователей от взаимодействия, а не бросайтесь с дизайном интерфейса в крайности. Когда интерфейс интуитивно понятен, он меньше напрягает, и пользователи остаются довольны.
P.S. Это тоже может быть интересно:
Цвет ссылки css
Цвет ссылки со стилями внутри тега. Цвет ссылки через стили style на странице. Цвет ссылки через css файл. Цвет ссылки по умолчанию, и конечно посмотрим, как меняется цвет ссылки при наведении на эту ссылку. Отдельная тема у нас есть по поводу свойства hover, которое и отвечает за цвет ссылки при наведенииИ конечно же у нас есть раздел, который посвящен ссылкам!
+ Сделали отдельное видео посвященное цветам ссылок!
Всё о цвете ссылок на сайте[h4]
- Видео о цветах ссылок
- Цвет ссылки по умолчанию
- Как удалить Цвет ссылки по умолчанию
- Как подобрать цвет ссылки, изменить цвет ссылки пример
- Задать цвет ссылки css
- Цвет ссылки при наведении
- Цвет ссылки посещенной
- Убрать синий цвет ссылки css
Не забываем сказать спасибо! Я старался для вас!
Цвет ссылки css
И видео на тему!Цвет ссылки по умолчанию
Какой он Цвет ссылки по умолчанию, на данной странице, вы этот Цвет ссылки по умолчанию увидеть не сможете, если только я не пропишу в стилях этот цвет специально -> из браузера Яндекс #0000ee!Cделал специально для вас отдельную страницу пример -> example.html, на которой нет никаких стилей кроме ссылки посещенной — она может иметь вот такой цвет…
В разных браузерах цвет ссылка и по умолчанию может быть разным!:
Цвет ссылки по умолчанию в Microsoft Edge
пример ->Для примера приведу цвет ссылки посещенной — это пункт 1(цвет был взят из браузера Яндекс #551a8b)
И цвет посещенной в Microsoft Edge #800080 Если мы откроем исследовать элемент, к примеру Яндекс браузер, и посмотрим стили по умолчанию, то увидим, что у ссылки цвет, какой-то непонятный… -webkit-link этот цвет -> из браузера Яндекс #0000ee!
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!
Как удалить/изменить цвет ссылки по умолчанию !?
Для того, чтобы удалить/изменить цвет ссылки по умолчанию нужно просто прописать стили для ссылки!Давайте самый простой пример разберем как это сделать!?
Если требуется удалить/изменить цвет ссылки по умолчанию, то пишем просто:
В нашем случае так не получится, потому, что на сайте уже сделаны стили для ссылок, поэтому создаем ссылку с каким-то классом:
<a href=»»>пример ссылки</a>
Напишем стиль для данной ссылки с классом . И добавим hover: <style>
a.example5{ color: #1eff00; text-decoration: none; border-bottom: 1px solid red;}
a.example5:hover{color:green; border-bottom: 1px solid blue;}
</style>
Смотрим, что получилось:
пример ссылкиКак подобрать цвет ссылки
Как и где можно взять цвет для ссылки!?Модно подобрать цвет используя -> генератор цвета
Либо Нажимаем по ссылке ПКМ и выйдет новое окно — где нужно исследовать элемент
Ищем в коде нашу ссылку — она справа показана — видим, что напротив нашей ссылки цвет — нажимаем по нему и выбираем в новом окне тот цвет, который нужен.
Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Задать цвет ссылки css
Рассмотрим несколько вариантов — как задать цвет ссылки:
Задать цвет только для этой ссылки
1).Цвет ссылки можно задать точечно, только для данной ссылки. Используя прямо в теге ссылки стилитекст_ссылки см.пункт 1 по умолчанию
Как вы наверное увидели, то довольно странное поведение ссылки — это от того, что установленные свойства ссылки для всего сайта влияют и на данную ссылку.
Код :
<a href=»https://dwweb.ru/page/css/005_tsvet_ssyilki_css.html»>текст_ссылки</a>
Задать цвет ссылки через стили на странице
2). Установка цвета ссылки для данной страницы в свойствах стилей<style type=»text/css»>
a{color: blue;}
</style>
Для того, чтобы показать данный пример, придется сделать стили и присвоить ссылке класс :, иначе опять где-то с чем-то будет конфликтовать… см. пункт 2 на отдельной страницеКод:
<style type=»text/css»>
a.example_1{color: blue;}
</style>
<a href=»https://dwweb.ru/page/css/005_tsvet_ssyilki_css.html»>текст_ссылки</a>
Результат : цвет ссылки через style на странице
текст_ссылкиЗадать цвет ссылки через стили через файл css
3). Для того, чтобы задать цвет через файл ссы, анм понадобятся знания как создать файл css и потом прикрепить его к странице.В основном везде пользуются именно этим способом!
Если мы выведем здесь вот такой код? то увидим стили прописанные через файл css:
пример ссылкиa{
color: #969696;
text-decoration: none;
border-bottom: 1px solid #b3b3b3;
}
a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px solid #b3b3b300;
}
Цвет ссылки при наведении
Не будем очень подробно касаться темы изменения ссылки при наведении, мы уже это делали на странице hover.Лишь давайте сделаем быстрый пример, для того стиля. Что мы описали сверху и присвоим ему эффект при наведении на ссылку.
Берем тот же код, что шел выше добавляем ему «:hover» и в строке «color» — поставим, ну например красный…
Код css :
a.simple:hover {color: #f8005a;
}
Код ссылки не изменен
Вот ссылка с измененным цветом при наведении.Цвет ссылки посещенной
Ну и собственно тоже самое, что и с верхнем кодом, изменяем вместо hover поставим «visited»
a:visited {color: #155bb5;
}
убрать синий цвет ссылки css
Как убрать синий цвет ссылки css!? Для того, чтобы убрать синий цвет ссылки нужно задать ему любой другой цвет, либо через стили в теге, либо через css стили на странице, либо в файле css!
Сообщение системы комментирования :
01.09.2021Форма пока доступна только админу… скоро все заработает…надеюсь…
HTML-ссылка Атрибут rel
❮ HTML тег
Пример
Импортировать внешнюю таблицу стилей:
Попробуй сам »Больше примеров ниже.
Определение и использование
Требуемый атрибут rel определяет отношения между текущим документом и связанным документом / ресурсом.
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| отн. | Есть | Есть | Есть | Есть | Есть |
Синтаксис
Значения атрибутов
| Значение | Описание |
|---|---|
| альтернативный | Предоставляет ссылку на альтернативную версию документа (т.е. распечатать страницу, переведенную или отразить). Пример: |
| автор | Дает ссылку на автора документа |
| предварительная выборка dns | Указывает, что браузер должен выполнять приоритетное разрешение DNS для источника целевого ресурса. |
| справка | Предоставляет ссылку на справочный документ.Пример: |
| значок | Импортирует значок для представления документа. Пример: |
| лицензия | Предоставляет ссылку на информацию об авторских правах для документа |
| следующая | Дает ссылку на следующий документ в серии. |
| пингбэк | Предоставляет адрес сервера pingback, который обрабатывает pingback-запросы к текущему документу. |
| предварительное соединение | Указывает, что браузер должен предварительно подключиться к источнику целевого ресурса. |
| предварительная выборка | Указывает, что браузер должен предварительно получить и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации. |
| предварительный натяг | Указывает, что агент браузера должен предварительно получить и кэшировать целевой ресурс для текущей навигации в соответствии с пунктом назначения, заданным атрибутом «as» (и приоритетом, связанным с этим пунктом назначения). |
| предварительная обработка | Указывает, что браузер должен предварительно отрисовать (загрузить) указанный веб-страница в фоновом режиме.Итак, если пользователь переходит на эту страницу, он ускоряет увеличить загрузку страницы (потому что страница уже загружена). Предупреждение! Это тратит впустую полосу пропускания пользователя! Используйте пререндер только в том случае, если вы абсолютно уверены что веб-страница требуется на каком-то этапе пути пользователя |
| предыдущая | Указывает, что документ является частью серии, и что предыдущий документ в серии является документом, на который имеется ссылка |
| поиск | Предоставляет ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах. |
| таблица стилей | Импортирует таблицу стилей |
Другие примеры
Пример
Вот как добавить значок на сайт:
Моя страница Название
Это заголовок
Это абзац.