Цветные ссылки — Учебник HTML — schoolsw3.com
❮ Назад Далее ❯
HTML ссылка отображается другим цветом в зависимости от того, была ли она посещена, не посещена или активна.
HTML Цвет ссылок
По индексу ссылка будет выглядеть так (во всех браузерах):
- Непосещенная ссылка подчеркнута синим цветом
- Посещенная ссылка подчеркнута фиолетовым цветом
- Активная ссылка подчеркнута красным цветом
Вы можете изменить цвета состояния ссылки, используя CSS:
Пример
Здесь непосещенная ссылка будет зеленой без подчеркивания.
Посещенная ссылка будет розовой без подчеркивания.
Активная ссылка будет желтой и подчеркнутой.
Кроме того, при наведении курсора мыши на ссылку (a:hover) она станет красной и подчеркнутой:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Попробуйте сами »
Кнопка ссылки
Ссылка также может быть стилизована как кнопка с помощью CSS:
Это ссылка
Пример
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Попробуйте сами »
Чтобы узнать больше о CSS, перейдите на CSS Учебник.
HTML Тег ссылка
| Тег | Описание |
|---|---|
| <a> | Определяет гиперссылку |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.
❮ Назад Далее ❯
НОВОЕ
Мы только что запустили
SchoolsW3 видео
Узнать сейчас
ВЫБОР ЦВЕТА
Получите сертификат,
пройдите
курс сегодня!
Приступить
КОДОВАЯ ИГРА
Играть
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
W3.
CSS СправочникBootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять
Условия к использованию,
Cookies и политика конфиденциальности.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
Основы работы со ссылками и границами через CSS
В данном уроке мы с вами продолжим изучать различные CSS свойства.
Блок . Свойство text-decoration
Свойство text-decoration позволяет задавать некоторые эффекты для текста: подчеркивание, перечеркивание, линию сверху, а также отменять такие эффекты, если какой-либо тег имеет их по умолчанию.
Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты).
Давайте посмотрим, какие значения может принимать свойство text-decoration
Значение underline
Значение underline добавляет подчеркивание тексту:
p {
text-decoration: underline;
}<p> Lorem ipsum dolor sit amet. </p>
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Значение overline
Значение overline добавляет линию над текстом:
p {
text-decoration: overline;
}<p> Lorem ipsum dolor sit amet.</p>
</p>Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Значение line-through
Значение line-through добавляет линию, перечеркивающую текст:
p {
text-decoration: line-through;
}<p> Lorem ipsum dolor sit amet. </p>
Так код будет выглядеть в браузере:
Lorem ipsum dolor sit amet.
Значение none
Значение none отменяет все эффекты, обычно используется для отмены подчеркивания ссылок.
В следующем примере ссылка по умолчанию будет подчеркнута, а вторая ссылка с id=»link» будет без подчеркивания, так как мы ей зададим text-decoration в значении none:
#link {
text-decoration: none;
}<a href="#">Ссылка по умолчанию</a> <a href="#">Ссылка без подчеркивания</a>
Так код будет выглядеть в браузере:
Ссылка по умолчанию Ссылка без подчеркивания
Блок .
Состояния ссылокЯ думаю, что вы, посещая различные сайты в интернете, обращали внимание на то, что ссылки обычно реагируют на наведение мышкой на них. Такого эффекта можно добиться, задавая поведение ссылок в различных состояниях.
К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание.
Конструкция
Кроме :hover если еще псевдоклассы :link, которые отлавливают не посещенную ссылку, и :visited, которые отлавливают посещенную ссылку.
На некоторых сайтах с их помощью показывают пользователям, где они были, а где — нет.
Есть еще и псевдокласс :active, который отлавливает следующее состояние: на элемент нажали мышкой, но еще не отпустили.
В следующем примере для ссылки в состоянии :hover убирается подчеркивание, в состоянии :link будет красный цвет, в состоянии :visited — зеленый, в :active — голубой:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}<a href="#">Ссылка</a>
Так код будет выглядеть в браузере:
Ссылка
Псевдоклассы наследуют друг от друга.
Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.
Часто состояния :link и :visited объединяют вместе через запятую:
a:link, a:visited {
color: red;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}В таком случае можно их вообще и не указывать:
a {
color: red;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}Блок . Сложные селекторы с учетом состояний ссылок
Наверняка на сайте у вас будут ссылки разных видов и, чтобы отличить их друг от друга, вы будете давать им разные классы или ложить в блоки с определенным id.
Давайте научимся обращаться к таким ссылкам.
Пусть у нас есть ссылки с классом .test и без него. Выберем только ссылки с этим классом:
<a href="#">Ссылка без класса</a> <a href="#">Ссылка с классом test</a> <a href="#">Ссылка с классом test</a> <a href="#">Ссылка с классом test</a>
a:link.test, a:visited.test {
color: red;
}
a:hover.test {
color: blue;
}Пусть у нас есть ссылки внутри блока с id test. Выберем только ссылки только из этого блока:
<a href="#">Ссылка вне блока</a> <div> <a href="#">Ссылка внутри блока</a> <a href="#">Ссылка внутри блока</a> <a href="#">Ссылка внутри блока</a> </div>
#test a:link, #test a:visited {
color: red;
}
#test a:hover {
color: blue;
} Если вам не очень понятно, как обращаться со ссылками, то специально для вас я снял следующее видео:
Здесь скоро появится видео по работе с состояниями ссылок.
Блок . Работа с границами на CSS
Сейчас мы с вами научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color — цвет, а border-style задает тип границы.
Первые два свойства работают очевидным образом: border-color принимает цвета в том же формате, что и свойство color, а толщина границы может задаваться в любых единицах измерения (кроме процентов), чаще всего в пикселях.
А вот свойство border-style может принимать одно из нескольких значений: solid (сплошная линия), dotted (граница в виде точек), dashed (граница в виде черточек),
Сделаем, к примеру, границу толщиной 3 пикселя, в виде точек, красного цвета:
div {
border-width: 3px; /* толщина 3px */
border-style: dotted; /* в виде точек */
border-color: red; /* красный цвет */
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Давайте теперь посмотрим на примерах, как выглядят различные типы границы.
Значение solid
Значение solid — сплошная линия:
div {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение dotted
Значение dotted — линия в виде точек:
div {
border-width: 1px;
border-style: dotted;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение dashed
Значение dashed — линия в виде тире:
div {
border-width: 1px;
border-style: dashed;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение ridge
Значение ridge — выпуклая линия:
div {
border-width: 3px;
border-style: ridge;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение double
Значение double — двойная линия:
div {
border-width: 3px;
border-style: double;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение groove
Значение groove — вогнутая линия:
div {
border-width: 3px;
border-style: groove;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение inset
Значение inset — рамка:
div {
border-width: 3px;
border-style: inset;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Значение outset
Значение outset — рамка:
div {
border-width: 3px;
border-style: outset;
border-color: black;
width: 300px;
height: 100px;
}Так код будет выглядеть в браузере:
Блок .
Свойство-сокращение для границТак же, как и для шрифтов, для границ тоже существует свойство-сокращение border, которое мы можем использовать вместо того, чтобы писать 3 разных свойства для толщины, цвета и типа границы. В свойстве border мы можем просто перечислить эти значения, их порядок при этом не важен. Смотрите пример:
<div></div>
div {
width: 300px;
height: 100px;
border: 1px solid red;
}Так код будет выглядеть в браузере:
Чаще всего гораздо удобнее пользоваться свойством-сокращением, чем отдельными свойствами.
Блок . Граница для отдельных сторон
Существуют также свойства-сокращения для отдельных сторон: border-left (левая граница), border-right (правая граница), border-top (верхняя граница), border-bottom (нижняя граница).
Давайте сделаем блоку только левую границу с помощью свойства border-left:
<div></div>
div {
width: 300px;
height: 100px;
border-left: 1px solid red;
}Так код будет выглядеть в браузере:
А теперь одновременно сделаем и левую, и правую границы:
<div></div>
div {
width: 300px;
height: 100px;
border-left: 1px solid red;
border-right: 1px solid red;
}Так код будет выглядеть в браузере:
Блок .
Скругленные уголкиСейчас мы с вами научимся скруглять уголки у границ. Это избавит наши сайты от некоторой угловатости и придаст им плавность линий.
Уголки границ (и фона, который мы разберем ниже) скругляются свойством border-radius, которое принимает значение в пикселях или процентах (или других единицах CSS).
Давайте скруглим уголки блоку, задав ему скругление в 10px:
<div></div>
div {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}Так код будет выглядеть в браузере:
Что означает то, что мы указали скругление в 10px?
Это радиус круга, который можно вписать в это скругление.
Если у вас нелады с математикой и вам не понятно последнее предложение —
забудьте о нем и просто подбирайте скругление на глаз.
При некотором опыте это сделать не проблема
(измерительного инструмента для измерения скруглений не существует,
по крайней мере я о таком не слышал).
Имейте ввиду, что border-radius не входит в свойство-сокращение border, это разные свойства, хоть и имеют похожие названия.
Блок . Разные скругления для разных углов
Сейчас мы с вами научимся делать разные скругления для разных углов. Как это сделать: свойство border-radius может не только одно значение, но и два, три или четыре. Каждое значение будет задавать скругление для своего угла. Давайте посмотрим более подробно.
Четыре значения
Свойство border-radius может принимать 4 значения. Как в этом случае будут скругляться уголки — смотрите на следующем примере: border-radius: 10px 20px 30px 40px — 10px — верхний левый угол, 20px — верхний правый угол, 30px — нижний правый угол, 40px — нижний левый угол.
Смотрите, что у нас получится:
<div></div>
div {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px 20px 30px 40px;
}Так код будет выглядеть в браузере:
Два значения
Если же в border-radius написать два значения,
то первое задаст скругление углов одной диагонали,
а второе — другой.
Смотрите на примере:
<div></div>
div {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px 40px;
}Так код будет выглядеть в браузере:
Три значения
Ну, и наконец, если в border-radius написать три значения, то первое задаст скругление верхнего левого угла, третье — нижнего правого, а второе — скругление углов диагонали (двух оставшихся углов).
Смотрите на примере:
<div></div>
div {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px 20px 30px;
}Так код будет выглядеть в браузере:
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
← Предыдущая страница Следующая страница →
Как изменить цвет подчеркивания ссылки с помощью CSS
Прошлой ночью, когда я просматривал веб-сайт Basecamp, я заметил интересных CSS-вещей .
Когда я наведу ссылку Nav в заголовке, появится красивая желтая подсветка под ссылкой . Это круто, чо.
Когда я проверяю теги и , они использовали text-decoration .
Я провел быстрое исследование и нашел потрясающую простую магию CSS для изменения цвета подчеркивания.
Я уже занимаюсь исследованием, вам просто нужно взять попкорн 🍿 и наслаждаться путешествием 🚀.
По умолчанию цвет подчеркивания устанавливается таким же, как цвет текста ссылки . Если ссылка синяя 🟦, подчеркивание тоже синего цвета 🟦. Но, как вы понимаете, из-за человеческого творчества (кашель, кашель…)😆, иногда мы хотим выделить подчеркивание цветом, отличным от текста ссылки.
Есть два способа сделать это. Один использует материал text-decoration , второй использует старый трюк border-bottom .
лично я предпочитаю
text-decorationborder-bottom. Правильный инструмент для правильной работы. Я не знаю.
text-decoration — самый простой способ подчеркнуть текст.
text-decoration-color — это то, что нам нужно а {
текстовое оформление: нет;
цвет синий;
}
/* показать подчеркивание при наведении */
а: наведите {
оформление текста: подчеркивание;
цвет оформления текста: красный;
-webkit-text-decoration-color: красный;
}
Войти в полноэкранный режимВыйти из полноэкранного режимапримечание:
-webkitдля Safari.
Это единственное, что вам нужно. Если вы хотите настроить больше, прочитайте больше: P
text-decoration прекрасно работает сам по себе, но вы можете добавить несколько свойств, чтобы настроить внешний вид:
1)
цвет текста-декорации text-decoration-color позволяет вам изменить цвет подчеркивания отдельно от цвета текста.
2-
текст-украшение-пропустить Это свойство будет пропускать резкий алфавит , например g , p , f . Это не прошло через это. Примеры:
3-
стиль оформления текста text-decoration-style дает вам бесплатный дизайн подчеркивания с использованием различных значений . Нет необходимости добавлять SVG.
Вот доступные значения, которые вы можете использовать:
-
пунктир -
с точками -
двойной -
твердый -
волнистый
примечание : этот пример взят из Mozilla MDN. Вы также можете разделить
text-decorationвtext-decoration-colorиtext-decoration-style.
а {
оформление текста: подчеркивание;
цвет оформления текста: красный;
стиль оформления текста: волнистый;
}
Войти в полноэкранный режимВыйти из полноэкранного режима4-
текст-подчеркивание-смещение Это довольно круто.
Его можно использовать для определения расстояния строки от исходного текста.
5-
толщина подчеркивания текста Это свойство используется для указания размера подчеркивания .
отказ от ответственности : если вас устраивает первый трюк, просто продолжайте. Это просто еще один такой же трюк.
Если мы хотим использовать трюк border-bottom , сначала нам нужно удалить подчеркивание со значением свойства text-decoration none . Затем мы добавляем border-bottom свойство с 3 сокращенными значениями CSS из 3px сплошной красный .
3 пикселя = Переменная ширины подчеркивания в пикселях
сплошная = Стиль границы (сплошная, пунктирная или штриховая)
#999999 Я добавляю этот классный трюк в свой блог
Я также добавляю эти потрясающие трюки в свой собственный блог.
Я реализую это каждые тег или любой тег, связанный со ссылкой.
Довольно круто, ха… 😎
Спасибо, что путешествовали со мной 🚀, надеюсь, вам понравилось путешествие 🔥.
The End
ресурсы:
1 2 3 4 5 6 7 8
Ссылки без подчеркивания | потеря подчеркивания в ссылках
Путь // www.yourhtmlsource.com → Таблицы стилей → НЕ ПОДЧЕРКНУТЫЕ ССЫЛКИ
by Ross Shannon
Кажется, это одна из самых популярных реализаций CSS — избавиться от этих подлых подчеркиваний по вашим ссылкам. Вот код, чтобы избавиться от всех подчеркнутых ссылок на вашем вся страница . Поместите это в часть документа head .
Если вы хотите снять подчеркивание только с нескольких ссылок , поместите этот атрибут в тег a (ссылка).
стиль ="украшение текста: нет; "
Чтобы создать такую ссылку
Тем не менее, вы можете обратить внимание на то, что люди могут не заметить ваши ссылки, если они не подчеркивают. Их можно использовать в панели навигации, потому что люди будут ожидать, что все, что там есть, будет ссылкой, но в вашем основном тексте я бы посоветовал вам сохранить подчеркивание. Если цвета ваших ссылок безошибочны, вам это сойдет с рук.
Вы можете настроить разные типы ссылок — с подчеркиванием и без — с классами. Если вы хотите сделать больше со своими ссылками, в том числе настроить эффекты наведения и тому подобное, ознакомьтесь с полным руководством по использованию таблиц стилей со своими ссылками.
Starting Off
Start Here ·
My First Site ·
Lessons
Text ·
Images ·
Tables ·
Frames ·
Forms ·
Stylesheets ·
Advanced
Accessibility ·
Promotion ·
Оптимизация ·
Управление сайтом ·
Скрипты
JavaScript ·
CGI-сценарии ·
Обзоры
Веб-хостинг
Книги ·
Рекомендации ·
HTML Source Toolbox ¤
Любите нас?
Добавьте HTML-код в закладки!
Добавьте HTML-код в закладки!
Страницы для печати
Просто распечатайте страницы в обычном режиме, наша таблица стилей автоматически переформатирует страницу для вас.