Css ссылки стиль: варианты оформления — учебник CSS

Leave a Comment / Css / By /

html — Как у тега убрать визуальные эффекты?

Задать вопрос

Вопрос задан

Изменён 4 года 7 месяцев назад

Просмотрен 90k раз

Не могу понять, как у тега <a> убрать цвет, чтобы он выглядел не как ссылка, а как текст или рамка, а не был синего цвета или фиолетовым после нажатия на него

css

a {
  text-decoration:none;
}

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div>
      <a><h2>block1</h2></a>
    </div>
  </body>
</html>
  • html
  • css

Надо прописать для каждого состояния ссылки стиль оформления, используя псевдоклассы. А использовать !important надо только в самых крайних случаях.

a.text:active, /* активная/посещенная ссылка */
a.text:hover,  /* при наведении */
a.text {
  text-decoration: none;
  color: #666;
}
<div>
  <a href="#"><h2>block1</h2></a>
</div>

5 

a {
  color: #000 !important;
  text-decoration: none
}
<div>
<a><h2>block1</h2></a>
</div>

5

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — CSS.

Задать стиль для ссылки для телефона

Задать вопрос

Вопрос задан

Изменён 7 лет 2 месяца назад

Просмотрен 2k раз

Можете подсказать, как поменять стиль у ссылки для телефона в CSS?
Меняю стиль, а изменяется только шрифт. Т.е в браузере телефон отображается, как ссылка. Мне же нужно отобразить телефон, как текст, но при этом сделать его «кликабельным».

Сам код:

.telephonereplymidle {
    color: black;
    font-size: 48px;
    font-family: "OpenSans";
    font-weight: bold;
    line-height: 0.208;
    text-align: left;
    position: absolute;
    left: 22.58px;
    top: 129.
  009px;
    width: 414px;
    height: 42px;
    border-bottom-style: dashed;
}
<div><a  href="tel:+78422993366">8 (8422) 99 - 33 - 66</a></div>
  • html
  • css
  • шрифты
  • href

Вообще в <div> нет необходимости… Можно объединить в один a тэг с классом.

Ну если Вам надо убрать синее подчеркивание, то используйте text-decoration: none.

.telephonereplymidle {
    color: black;
    font-size: 48px;
    font-family: "OpenSans";
    font-weight: bold;
    line-height: 0.208;
    text-align: left;
    position: absolute;
    left: 22.58px;
    top: 129.009px;
    width: 414px;
    height: 42px;
    border-bottom-style: dashed;
    text-decoration: none;
}
<a  href="tel:+78422993366">8 (8422) 99 - 33 - 66</a>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

гиперссылок CSS

Вы можете использовать CSS для изменения внешнего вида и поведения гиперссылок.

Для этого можно использовать следующие селекторы/псевдоклассы:

  • и
  • а: ссылка
  • а: посетил
  • а: зависнуть
  • а:активный

Эти селекторы/псевдоклассы представляют элемент «якорь» (указанный с помощью тега HTML ) и его различные состояния.

Примеры

Некоторые приятные эффекты могут быть достигнуты с помощью свойство text-decoration в сочетании со свойством color .

Вот пример кода, который можно вставить в таблицу стилей для достижения желаемого эффекта.

<тип стиля="текст/CSS">

.example1 a {семейство шрифтов:Georgia,serif; размер шрифта: большой} .example1 a:link {color:forestgreen;} .example1 a:посетил {color:seagreen;} .example1 a: hover {украшение текста: нет; цвет: желто-зеленый; вес шрифта: полужирный;} .example1 a:active {цвет:красный;украшение текста: нет}

Обратите внимание, что правило a:hover должно быть размещено после правил a:link и a:visited , поскольку в противном случае каскадные правила скроют действие правила a:hover . Точно так же, поскольку a:active размещается после a:hover , активный цвет (красный) будет применяться, когда пользователь одновременно активирует и наводит курсор на элемент «якорь».

Гиперссылки без подчеркивания

<тип стиля="текст/CSS"> .example2 a:link {украшение текста: нет}

Вот пример гиперссылки.

Ваши пользователи могут запутаться, если ваши гиперссылки не подчеркнуты. Более удобным решением было бы применять это поведение только к гиперссылкам только тогда, когда пользователи наводят на них курсор.

Текстовые ролловеры

<тип стиля="текст/CSS"> .example3 a:hover {украшение текста: нет}

Вот пример гиперссылки.

Эффекты курсора

Используйте объявление курсора

.

<тип стиля="текст/CSS"> .example4 a:hover {курсор: справка}

Вот пример гиперссылки.

Попробуй!

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

Как стилизовать гиперссылки в Squarespace // Squarespace Tutorial — InsideTheSquare.co

ПОЛЬЗОВАТЕЛЬСКАЯ ВЕРСИЯ CSS 7ВЕРСИЯ 7.1

Написано insidethesquare

Это старое руководство претерпевает изменения, но код по-прежнему работает для любой версии Squarespace!

Скачать расшифровку

Теперь мы все приучены к тому, что подчеркнутый текст — это компьютерный язык для «это ссылка — нажмите здесь».

Это было с самого начала Интернета. Но только потому, что так было всегда, не значит, что так должно быть!! Учебник этой недели посвящен тому, как изменить стиль вашей гиперссылки на вашем веб-сайте в любом типе текста. Прежде чем вы посмотрите обучающее видео, вот краткое изложение того, о чем я говорю.

Не все типы текста одинаковы.

Заголовок 1, заголовок 2, заголовок 3 и обычный текст абзаца должны быть вызваны в этом коде. Если вы хотите, чтобы один и тот же эффект происходил со всеми ссылками всех типов, используйте это: h2 a, h3 a, h4 a, p a {…здесь идет код…}

Вам не нужно использовать пользовательский CSS для всего.

Хорошее общее правило — использовать CSS только тогда, когда вы хотите, чтобы ваш сайт делал что-то, для чего он не предназначен. Цвет текста абзаца можно изменить в редакторе стилей (дизайн >

стиль сайта), поэтому меняйте его там, а не в коде.

Эффекты наведения — это то, что нужно.

Нас научили распознавать, что подчеркнутый текст означает ссылку, поэтому, если вы решите удалить его, добавьте эффект наведения, чтобы люди знали, на какую часть текста им нужно нажать! Даже если в вашем тексте буквально написано «нажмите здесь», сделайте это очевидным для пользователя.

Помните, что все приведенные ниже коды могут применяться к любому стилю текста по отдельности, к некоторым из них или ко всем сразу. Используйте эти коды для ссылки на конкретный код, который вы хотите изменить:

Заголовок 1: h2 a{ …здесь идет код…}

Заголовок 2 h3 a{ …здесь идет код…}

Заголовок 3: h4 a{ …здесь идет код…}

Обычный текст/абзац: p a {…здесь идет код…}

Весь текст заголовка: h2 a, h3 a, h4 a{ …здесь идет код…}

Все типы текста: h2 a, h3 a, h4 a, p a{ …здесь идет код… }

УДАЛИТЬ ПОДЧЕРКИВАНИЕ ИЗ ВСЕХ ТИПОВ ТЕКСТА

h2 a, h3 a, h4 a, p a{border-bottom-style: none !important;}

Изменить цвет для ссылок в тексту заголовка

H2 A, H3 A, H4 A {Color: #50BDB8}

Удалите подчерки a, h3 a, h4 a{color: #50bdb8!важно; border-bottom-style: none !important;}

ИЗМЕНИТЬ ЦВЕТ ШРИФТА ВСЕХ ССЫЛОК ПРИ НАВЕДЕНИИ

h2 a:hover, h3 a:hover, h4 a:hover, p a:hover{color: #50bdb8}

SQUARESPACE Шпаргалка по CSS

Загрузите более 100 страниц кодов и профессиональных советов по настройке вашего сайта Squarespace.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *