Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS Ссылки



С помощью CSS, стили cсылок могут быть разные.


Текст Текст Кнопка Кнопка

CSS Стиль ссылки

Ссылки могут быть оформлены в любом CSS свойстве, например:( color, font-family, background и т.п.).

a {
   color: hotpink;
}
Попробуйте сами »

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

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

  • 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


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

CSS свойство text-decoration в основном используется, чтобы удалить подчеркивание ссылок:

a:link {
   text-decoration: none;
}

a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

a:active {
   text-decoration: underline;
}
Попробуйте сами »

Цвет фона ссылки

CSS свойство 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 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>
Попробуйте сами »

Практика: стиль ссылок

Упражнение: стиль ссылок

Установите цвет ссылок на "красный".

<style>
 {
color: red;
}
</style>

<body>
<h1>Это заголовок</h1>
<p>Это параграф</p>
<a href="http://schoolsw3.com">Это ссылка</a>
</body>



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.