Css стиль стиля ссылок

Ответ 1

Это определенно будет достаточно в подавляющем большинстве случаев.

Просто имейте в виду, что правильный порядок стилей для ссылок:

a:link    { color: #c00 }  /* unvisited links */
a:visited { color: #0c0 }  /* visited links   */
a:hover   { color: #00c }  /* user hovers     */
a:active  { color: #ccc }  /* active links    */

outline может выглядеть "уродливым" для вас, но это очень важная функция доступности. Если вы удалите это - пожалуйста, позаботьтесь об альтернативном способе правильного выделения текущего элемента (больший/более смелый шрифт, фон с высоким контрастом и т.д.).

Ответ 2

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

Мне также нравится пометить ссылки на внешние сайты по-разному, добавив изображение (похожее на изображение в википедии).

a,
a:link,
a:active,
a:visited,
a:hover {
    color:           #d30;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Links to external websites */
a.external:before {
    content:         url(./pics/external.png);
}

Ответ 3

Если вы хотите быть уверенным, что вы являетесь стилистическими ссылками (а не якорями, которые не являются ссылками), вы должны использовать a:link вместо a.

И вы можете добавить a:active в конец. Здесь у вас есть учебник.

Ответ 4

Никогда не удаляйте этот контур или, по крайней мере, удаляйте его только для::. Если вы сделаете это для всех якорей, то он также будет удален для: фокуса, который используется для навигации по клавиатуре. Также полагаться на зависание слишком много очень плохо, поскольку наведите курсор на сенсорные экраны.

Мне нравится иметь все ссылки, легко различимые с остальной частью контента. Это мое личное предпочтение:

Версия 2016

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: bolder;
    text-decoration: none;
}
a:visited { color: rgb(160,0,160); }
a:active { color: rgb(192,0,0); }
a:active, a:focus, a:hover { border-bottom-width: medium; }

версия 2015

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(128,0,128); }
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom-width: medium; }

Версия 2014

a { border-bottom: 1px solid;
    color: rgb(0,0,166);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom: 3px solid; }

версия 2013

a { color: rgb(0,0,166);
    font-weight: 700;
    border-bottom: 1px dotted;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:hover, a:focus, a:active { border-bottom: 2px solid; }
a:focus, a:active { color: rgb(166,0,0); }

Ответ 5

Я всегда могу добавить

a {контур: нет; }

так как некоторые браузеры добавляют раздражающие контуры к ссылкам при нажатии на них