Разное

Как поменять цвет ссылки css: Как изменить цвет ссылки и фона под ней?

11.12.2018

Содержание

Как изменить цвет ссылки HTML

Ссылка в HTML выглядит следующим образом:

 

<a href=»/» title=»Ссылка HTML»>Изменяем цвет ссылки</a>

 

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

 

<a href=»/» title=»Ссылка HTML» style=»color:#FF0000; text-decoration:none»>Изменяем цвет ссылки</a>

 

Есть и другой способ изменить внешний вид ссылки. Для этих целей используются таблицы стилей CSS. Причем вы сможете задать значения для ссылок при различных условиях, будь-то активная ссылка (a:active), посещенная ссылка(a:visited) либо ссылка при наведении мыши (a:hover). Вот как это делается:

 

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

 

 

Создайте два файла
Первый index. html с таким содержимым:

 

<html>

<head>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
</head>

<body>

 

<a href=»/» title=»Ссылка HTML»>Изменяем цвет ссылки</a>

</body>

</html>

А второй назовите style.css. В нем запишите следующее:

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

Изменяя значения свойств можно менять внешний вид ссылок.

Поменять цвет ссылки? Легко! | Front-End

Здравствуйте, сегодня мы поговорим о том как поменять цвет ссылки на сайтах под управлением движков с открытым для редактирования кодом. К таким CMS относится и WordPress.

Так-же, заодно, мы поменяем цвет ссылки при наведении на нее курсора мыши.

Хотя Вордпресс, да и не только он, предоставляет нам уже практически готовые бесплатные темы, не нуждающиеся в каких-то крупных доработках но, эти темы рассчитаны на массового пользователя. Всегда хочется что-нибудь настроить под свой дизайн, изменить что-то. Что-то добавить, или наоборот убрать. Хотите поменять цвет ссылки? Легко!

Для того, чтобы редактировать стиль ссылки нам нужно из админ-панели сайта зайти в редактор кода. Путь к редактору, если кто не знает такой: Консоль>Внешний вид>Редактор>Таблица стилей (style.css).

Для редактирования цвета ссылки нам нужно в таблице стиля (style.css) найти такой участок кода, как показано на скриншоте.

Заходим в таблицу стиля и на клавиатуре набираем команду Сtrl+F и в появившееся в левом углу монитора набираем слово a:hover.
Вот участок кода:

Этот участок кода отвечает за цвет ссылки, цвет ссылки при наведении курсора мыши, подчеркивание ссылки. Где underline отвечает за подчеркивание ссылки, если убрать это слово, то подчеркивание ссылки при наведении курсора мыши исчезнет. А если мы удалим в коде none; и взамен напишем underline, то ссылка станет подчеркнутой всегда.

В a:hover поменять цвет ссылки при наведении курсора можно просто изменив цветовой номер color: #ff0012,на нужный нам.

a:hover {
text-decoration: underline; /* подчеркивание ссылки при наведении курсора */
color: #ff0012; /* Цвет ссылки */

Поменять цвет ссылки вообще, можно изменив цвет в

a {
text-decoration: none; /* подчеркивание ссылки */
color: #004b91; /* Цвет ссылки */

Ну а если мы хотим установить цвет посещенной ссылки, то можно в этот отрывок кода добавить к селектору А добавить псевдокласс :visited, как показано ниже:

a:visited {
color: #808000; /* Цвет посещенной ссылки */

В итоге должно получится как-то так:

a {
text-decoration: none;
color: #004b91; /* цвет ссылки */
}
a:hover {
text-decoration: underline; /* подчеркивание ссылки при наведении курсора */
color: #ff0012; /* Цвет ссылки при наведении курсора */
}
a:visited {
color: #808000; /* Цвет посещенной ссылки */
}

Но устанавливать цвет посещенной ссылки я у себя на сайте не стал.

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

Так-же вы можете установить соц. кнопки при помощи кода и узнать как просто ставить блок с прокруткой в любой записи окно с любым текстом, без переноса строки перейдя по ссылкам.

Если вам понравилась эта статья, делитесь ей в соц.сетях. На этом все,до скорых встреч!


Лучший способ отблагодарить автора

Похожие по Тегам статьи


Изменение цвета текста и добавление тени

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body { color:blue; }
      h2 { color:#00ff00; }
    </style>
  </head>

  <body>
    <h2>Заголовок имеет свой собственный цвет текста</h2>
    <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве
    которого для него выступает элемент body. </p>
  </body>
</html>
Попробовать »

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

Добавление тени

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

  1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста
  2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста
  3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень)
  4. цвет для тени
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>			
      h2 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

С помощью свойства text-shadow можно задавать несколько эффектов тени к тексту, каждая тень в таком случае должна отделяться от предыдущей запятой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      . test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h2>Текст с тенью</h2>
    <h2>Текст с тенью</h2>
  </body>
</html>
Попробовать »

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят:

Как изменить цвет ссылок в WordPress. Как добавить подчеркивание html, css

Как изменить цвет ссылок в WordPress. В некоторых темах WordPress менять цвет ссылок можно, не напрягаясь, в

настройках темы из консоли. Когда делаешь первые шаги в изучении и строении сайта(пусть и на базе конструктора, как сейчас, или на голом html, как раньше, до эры простых в использовании конструкторов), очень увлекает процесс внешнего вида сайта и кажется значимым. Создатель сайта тщательно переберет с десяток тем, меняя до одури цвет, шрифт, виджеты, навешивая десятки плагинов для представления аватарки зарегистрированных пользователей и проч., проч, проч… Когда сайт создан и не один, то все это перестает быть важным. Ставишь тему, подгоняешь небольшие моменты, которые не устраивают, и, как говорится, наплевать. Сайт — для контента, а не для его безвкусного оформления. Не все мы прирожденные дизайнеры и эстеты, поэтому старайтесь придерживаться разумного минимализма. Птица красива полетом, а не оперением. Поверьте, что это не нужно. Ни вам, ни пользователям(если они вообще придут на ваш сайт), гораздо лучше, если гости заявятся неожиданно, а стол не накрыт, чем за обставленным столом остаться одному.

Итак, если в адаптивных настройках темы нет возможности поменять цвет ссылок, то на помощь придет всемогущий редактор. Во-первых, посмотрим, где находится файл класса ссылок — css. Для этого нужна борода Старик-Хоттабыча и заклинание(если браузер не дает такой функции в меню), а именно одновременное нажатие кнопок (горячих клавиш) ctrl+shirt+C или ctrl+shift+I или ctrl+U или F12 — я жму последовательно, удерживая по порядку. И первые два варианта мне нравятся больше, поскольку подсвечивают блоки, что визуально удобнее.

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

Но, будем менять через редактор файлов в панели управления сайтом. В КонсолиВнешний видРедактор — файл Таблица стилей

Обратите внимание на верхнюю подсказку WordPress. Но во встроенном редакторе не было функции замены цвета ссылок.

Далее я нахожу код нужного мне цвета в яндексе — #191970 — название понравилось —  MidnightBlue. Теперь — ручная работа, тут будьте внимательны:

меняю найденный код в строчках 144 и 145

text-decoration: none;
color: #8a6d3b;

на

text-decoration: underline;
color: #191970;

то есть, меняю цвет и добавляю подчеркивание (underline) к ссылке, потому что оно задано не было. Сохраняю изменения и обновляюсь. Ничего не происходит, странно. Я открываю другой браузер, захожу на сайт. Ссылки поменяли цвет, как мне требовалось. Значит тот браузер притормозил, что нередко происходит с людьми. Скорее всего ему нужно прочистить мозги, то есть очистить кэш.

Важно: если вы опасаетесь менять код, то можете делать так.

1. Скопируйте весь код в файл и сохраните на компьютере. Затем в редакторе меняйте код, обновляйте, проверяйте, и если что-то не устроит, вносите старый код обратно, и снова сохраняйте. чтобы вернуться.

2. Я делаю проще. Оставляю редактор открытым. На второй вкладке браузера меняю код в редакторе, сохраняю, обновляюсь, и если меня что-то напрягает, перехожу на прежнюю вкладку, где код висит в неизменном виде и снова сохраняю и обновляюсь, но этот способ чреват риском: может сорваться интернет-соединение, либо возникнет ошибка в браузере или вовсе отключат электричество, а у вас нет бесперебойника. Поэтому первый способ — безопаснее.

Как изменить цвет ссылок | Жизнь с WordPress

Здравствуйте, дамы и господа!

Сегодня мы займемся вопросом красоты.

(Постоянные читатели блога могут обновить кэш браузера Ctrl+F5 для актуализации внешнего вида блога.)

Ранее, в нескольких статьях я уже описывал некоторые изменения, касающиеся внешнего вида сайта.

 

Вот эти статьи:

1. Изменяем стиль заголовка h3

2. Как изменить стиль отдельного пункта меню или отдельной рубрики

3. Как изменить заголовок на странице рубрики

4. Изменяем шрифт заголовка статей

5. Оформление формы подписки по email

Сейчас хочу изменить цвет ссылок на блоге и рассказать вам как это сделать.

Вот так выглядели ссылки на этом сайте до внесения изменений:

 

 

Как видите, достаточно бледно и незаметно. Наверное, если б не указал на эти ссылки стрелками, то из трех ссылок можно было заметить только “Читать далее”, и то потому что она выделена жирным шрифтом.

Здесь сразу приведу скрин того, что у меня получилось после изменения цвета и стиля ссылок, чтобы можно было сравнить вариант “до” и “после”.

 

 

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

А какой вам вариант нравится больше?

Конечно, я люблю минималистические темы, но в выбранном шаблоне оказались слишком незаметные ссылки. Иногда, в статьях приходилось выделять их жирным, но вид таких ссылок все-равно меня не устроил. И вот, наконец-то, я сообразил, что нужно просто изменить цвет ссылок.

Задумано – сделано. То как преобразился вид моего блога мне очень понравилось! Казалось бы такая мелочь – цвет ссылок – небольшие изменения в css-файле, а какой эффект!

Это вызвало у меня ассоциацию с макияжем у девушек. =) А если проводить более точную аналогию, то именно с подкрашивание ресниц и подчеркиванием контура глаз с помощью карандаша. (Я вот тоже подчеркнул ссылки.)

Ладно, давайте ближе к делу, что и где я изменил.

Наверняка, вы уже знаете, да и я ни один раз уже писал, что все изменения стилей производятся в файле(ах) *.css вашего шаблона WordPress. Это может быть файл style.css, а может быть другой(ие). Чтобы узнать это точно, нужно в браузере посмотреть код элемента ссылки.

 

 

1. Название css-файла, в котором описаны стили для ссылки (style.css).

2. При наведение указателя мыши на style.css всплывает подсказка с указанием абсолютного пути к файлу и номером строки в которой описан стиль для анализируемого элемента веб-страницы.

3. Собственно, цвет ссылки.

Какая мощная вещь – анализ кода! Все ясно – заходи в указанный файл и изменяй цвет. Но, давайте не будем спешить! Дело в том, что изменение значения цвета в указанной строке изменит цвет всех ссылок сайта.

Если вам это и надо – изменить цвет для всех ссылок сайта, то отлично. Подбирайте нужный цвет и вносите соответствующее изменение в ваш css файл.

Я же хочу оставить черным цветом ссылки в сайдбаре и ссылки-заголовки статей. Единственное – при наведении курсора сделать их зелеными. В содержимом же статьи изменить цвет на более светлый синий и так же при наведении указателя мыши – изменять на зеленый цвет.

Опять с помощью анализа элемента выясняю, что все ссылки, которые я хочу сделать светло-синими расположены в блоке <div id=”content”></div>

Чтобы изменения коснулись только ссылок внутри блока с id=”content” нужно при описании стиля написать #content a. Собственно, вот стили, которые я добавил: 

#content a { color: #399dda; border-bottom: 1px solid #c0e4fc; padding-bottom: 1px; } #content a:hover { color: #77c069; border-bottom: 1px solid #77c069; padding-bottom: 1px; }

 

#content a {

    color: #399dda;

    border-bottom: 1px solid #c0e4fc;

    padding-bottom: 1px;

 

}

#content a:hover {

    color: #77c069;

    border-bottom: 1px solid #77c069;

    padding-bottom: 1px;

}

 

color –  понятно – цвет

border-bottom – граница снизу (подчеркивание), сплошное шириной в 1px, заданного цвета

padding-bottom – отступ от текста ссылки до нижней границы.

a:hover – означает, что стиль будет применен при наведении курсора мыши на ссылку.

Далее, у меня получилось, что ссылки-заголовки статей тоже расположены в блоке <div id=”content”></div> и после, вышеуказанных изменений, их вид также изменился. А все потому, что стиль для них был описан с помощью селектора .title a. Это означает – для всех ссылок внутри блоков с классом class=”title”. Но, приоритет селектора #content a выше, поэтому стили #content a перекрывали стили .title a.

Чтобы этого не происходило, я добавил #content перед .title a. Теперь все .title a внутри #content получат свой собственный стиль, отличный от #content a:

#content .title a { text-decoration: none; color: #323539; border-bottom: hidden; } #content .title a:hover { text-decoration: none; color: #77c069; border-bottom: hidden; }

 

#content . title a {

    text-decoration: none;

    color: #323539;

    border-bottom: hidden;

}

 

#content .title a:hover {

    text-decoration: none;

    color: #77c069;

    border-bottom: hidden;

}

 

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

.sidebar a:hover { border-bottom: 1px solid #77c069; padding-bottom: 1px; color:#77c069; }

 

.sidebar a:hover {

    border-bottom: 1px solid #77c069;

    padding-bottom: 1px;

    color:#77c069;

}

 

Теперь, при наведенном указателе мыши, ссылки в сайдбаре будут зелеными (с подчеркиванием).

Итак, подведем итог.

Для изменения цвета ссылок нужно изменить значение свойства color для соответствующего селектора:

все ссылки;

#idname a – все ссылки внутри блока с id=”idname”;

. classname a – все ссылки внутри блока с классом classname.

При этом, приоритет #idname выше, чем у .classname

a:hover – определяет стиль элемента при наведении указателя мыши.

Спасибо за внимание! Надеюсь, понятно изложил. Жду ваших комментариев.

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Способ изменения цвета ссылок на WordPress

Веб мастера, которые используют в качестве движка сайтов WordPress, не отличаются от других владельцев площадок, которые хотят получить идеальный проект, затратив определенный объем усилий.

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

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

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

Цвет ссылок


Цвет, который установлен для ссылок, обозначен в файле стилей CSS, к которому вы сможете перейти, нажав «Внешний вид» в панели администратора и после этого выбрав пункт «Редактировать». В списке файлов находим Style.css и приступаем к его редактированию.

Теперь нам необходимо найти «кусок» кода, который обозначается комментарием Links:

На изображении вы видите пример «куска» кода, в котором мы сможем изменить цвет ссылок. Под значением «a», находится тег «color» именно он и отвечает за цвет ссылок. Как видим, на данный момент у нас установлено значение #D2691E.

Это значение является закодированным значением определенного цвета, которое нам необходимо заменить на другой код. Чтобы выбрать необходимый вариант, используйте таблицу цветов с HTML значениями, например такую:

Из данной таблицы выбирайте один из цветов и устанавливайте его значение так же, как было установлено предыдущее значение, с символом #.

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

В примере, который мы вам представили, есть дополнительный тег hover, он обозначает цвет ссылки при наведении курсора, и как вы можете заметить, его тоже можно изменить на любое другое значение.

Советую посетить следующие страницы:


— Бан за резкое увеличение ссылочной массы
— Как правильно выбирать ключевые слова
— Независимость местонахождения бизнесмена

Свойства и оформление ссылок в 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, для начинающих, основы

Как изменить цвета ссылок в HTML

  1. Фрагменты
  2. CSS
  3. Как изменить цвета ссылок с помощью CSS

Вы можете стилизовать ссылки по-разному с помощью свойств CSS. Как правило, для стилизации ссылок используются свойства color, font-family и background-color.

Есть три способа изменить цвет ссылки: встроенный , внутренний и внешний .

Встроенный метод¶

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

Пример изменения цвета ссылки встроенным методом: ¶

  

  
     Название документа 
  
  
    

Посетите наш веб-сайт .

Попробуйте сами »

Результат

Внутренний метод¶

Внутренний метод требует, чтобы вы использовали тег

Посетите наш веб-сайт .

Попробуйте сами »

Есть 4 состояния ссылок, которые могут быть стилизованы в зависимости от того, в каком состоянии они находятся:

  • a: link - обычная непосещенная ссылка,
  • a: посещено - ссылка, которую посетил пользователь,
  • a: hover - ссылка, когда пользователь наводит курсор мыши на нее,
  • a: active - момент нажатия на ссылку.

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

  • a: hover ДОЛЖЕН идти после: link и a: loaded,
  • a: active ДОЛЖЕН идти после: hover.

Пример использования различных состояний ссылки: ¶

  

  
     Название документа 
    <стиль>
      
      ссылка {
        цвет: #ccc;
      }
      
      а: посетил {
        цвет: # 095484;
      }
      
      a: hover {
        цвет: # 8ebf42;
      }
      
      a: active {
        цвет: # 800000;
      }
    
  
  
    

Посетите наш веб-сайт .

Попробуйте сами »

Как изменить цвета подчеркивания гиперссылки и текста привязки¶

Чтобы изменить цвет подчеркивания, в первую очередь необходимо удалить его со значением« нет »текста -decoration и установите значение «none», затем добавьте свойство border-bottom с шириной (в данном случае, используется как ширина подчеркивания гиперссылки) и свойствами стиля границы (сплошная, пунктирная или пунктирная).Для цвета текста привязки используйте свойство color.

Пример изменения цвета подчеркивания гиперссылки и цвета текста привязки: ¶

  

  
     Название документа 
    <стиль>
      a {
        текстовое оформление: нет;
      }
      ссылка {
        цвет: # 000;
        нижняя граница: сплошной 1px # ff0000;
      }
      а: посетил {
        цвет: # e600e6;
        нижняя граница: сплошной 1px # b3b3b3;
      }
      a: hover {
        цвет: # 2d8653;
        нижняя граница: 1px solid # 000099;
      }
    
  
  
    

Посетите наш веб-сайт .

Попробуйте сами »

Пример стилизации ссылок указанными методами: ¶

  

  
     Название документа 
    <стиль>
      a.one:link {
        цвет: #ccc;
      }
      a.one:visited {
        цвет: # 095484;
      }
      a.one:hover {
        цвет: # 8ebf42;
      }
      а.two: link {
        цвет: #ccc;
      }
      a.two: visit {
        цвет: # 095484;
      }
      a.two: hover {
        размер шрифта: 150%;
      }
      a.three: link {
        цвет: #ccc;
      }
      a.three: visit {
        цвет: # 095484;
      }
      a.three: hover {
        фон: # 8ebf42;
      }
      a.four: link {
        цвет: #ccc;
      }
      a.four: visit {
        цвет: # 095484;
      }
      а.four: hover {
        семейство шрифтов: моноширинный;
      }
      a.five: link {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a. five: visit {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: hover {
        оформление текста: подчеркивание подчеркивания;
      }
    
  
  
    

Наведите указатель мыши на ссылки и посмотрите, как они будут изменены:

Эта ссылка меняет цвет

Эта ссылка изменяет размер шрифта

Эта ссылка меняет цвет фона

Эта ссылка изменяет семейство шрифтов

Эта ссылка изменяет оформление текста

Попробуйте сами »

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

Пример изменения цвета ссылки с помощью значения "наследовать" свойства цвета: ¶

  

  
     Название документа 
    <стиль>
      п {
        цвет: зеленый;
      }
      p a {
        цвет: наследовать;
      }
    
  
  
    

Пример

W3docs.com

Посетите наш Веб-сайт W3docs.com .

Попробуйте сами »

Пример стилизации ссылок с помощью свойства CSS text-decoration-color: ¶

  

  
     Название документа 
    <стиль>
      a {
        цвет оформления текста: серый;
      }
      ссылка {
        цвет: # 777777;
      }
      a: hover {
        цвет: # 2d8653;
      }
    
  
  
    

Посетите наш веб-сайт .

Попробуйте сами »

Внешний метод¶

Используя внешние таблицы стилей, вы можете контролировать все гиперссылки вашего сайта. С помощью внешних таблиц стилей можно создать множество привлекательных эффектов гиперссылок для улучшения внешнего вида вашего веб-сайта.

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

Подробнее о ссылках CSS.


Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

Переопределить цвета ссылок по умолчанию в веб-браузере с помощью CSS

Все веб-браузеры используют цвета по умолчанию для ссылок, если веб-дизайнер их не устанавливает.Чтобы изменить эти цвета, используйте CSS (каскадные таблицы стилей).

Цвета ссылок

Цвета ссылок включают несколько разных состояний:

  • Цвет ссылки по умолчанию - то, что вы видите в тексте до взаимодействия со ссылкой.
  • Цвет ссылки при наведении - то, на что ссылка меняется, когда вы наводите на нее курсор.
  • Цвет активной ссылки - при нажатии на ссылку мышью.
  • Цвет следующей ссылки - для ссылок, по которым вы нажимали ранее.

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

Использование CSS для изменения цвета ссылки включает стилизацию тега:

а {цвет: черный; } 

С помощью этого CSS некоторые браузеры изменят все аспекты ссылки (по умолчанию, активную, отслеживаемую и наведенную) на черный, в то время как другие изменят только цвет по умолчанию.

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

Чтобы изменить цвет ссылки по умолчанию:

а: ссылка {цвет: красный; } 

Чтобы изменить активный цвет:

а: активный {цвет: синий; } 

Чтобы изменить цвет следующей ссылки:

а: посетил {цвет: фиолетовый; } 

Чтобы изменить цвет наведения курсора:

a: hover {цвет: зеленый; } 

Соображения

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

  • Выберите контраст. Ссылку очень светлого цвета на белом фоне трудно увидеть, особенно для посетителей с ослабленным зрением.
  • Также старайтесь использовать разные цвета для цветов активных и переходящих ссылок, чтобы посетители сайта не запутались, какие страницы они посетили.
  • Сохраняйте цвета в гармонии с дизайном вашей страницы.

Спасибо, что сообщили нам!

Расскажите почему!

Другой Недостаточно деталей Сложно понять

Основы CSS: стилизация ссылок как у босса

Интернет основан на ссылках.Идея о том, что мы можем щелкать / касаться ссылки и переходить с одной веб-страницы на другую, заключается в том, что серфинг в Интернете стал нарицательным.

Ссылки в HTML даже выглядят иначе, чем обычный текст без каких-либо стилей CSS.

Они синие (пурпурные при посещении). Они подчеркнуты. Это ссылка в чистом виде.

Но что, если мы хотим немного изменить ситуацию? Возможно, синий не подходит для дизайна вашего сайта. Может быть, у вас есть отвращение к подчеркиванию.Какой бы ни была причина, CSS позволяет нам стилизовать ссылки так же, как и любой другой элемент. Все, что нам нужно сделать, это указать элемент в нашей таблице стилей.

Хотите использовать другой шрифт, изменить цвет, убрать подчеркивание и сделать все прописными? Конечно, а почему бы и нет?

  a {
  красный цвет;
  текстовое оформление: нет;
  преобразование текста: прописные буквы;
}  

Теперь готовим на газе! Но зачем останавливаться на достигнутом? Давайте рассмотрим еще несколько способов стилизации ссылок, чтобы сделать их удобнее.

Стиль каждого состояния ссылки

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

Обратите внимание на порядок там важен:

  1. Link
  2. Visited
  3. Hover
  4. Active
  5. Focus

Если вы не сделаете это в этом порядке (представьте, что ваш стиль : visit идет после вашего стиля : hover ) ссылки не будет вести себя так, как вы хотите. В моем воображаемом примере стиль : посещенный переопределил бы стиль : hover , что маловероятно, что это то, что вам нужно.Фокус - это функция доступности, поэтому последняя, ​​потому что она наиболее важна.

Один из способов запомнить порядок - это ЛЮБОВЬ и НЕНАВИСТЬ . то есть L (ink) OV (isted) E / H (over) A (Active) TE.

Вот та же ссылка, на которую мы смотрели. Сначала попробуйте навести указатель мыши на него, не нажимая, и обратите внимание, что он становится подчеркнутым. Затем щелкните ссылку, но оставьте кнопку мыши нажатой немного, чтобы увидеть, как активный стиль меняет цвет ссылки на черный.Наконец, отпустите кнопку мыши, и ссылка должна стать фиолетовой, прежде чем она будет посещена технически.

Ссылки кажутся простой концепцией, но, черт возьми, в них много чего происходит, а CSS дает нам невероятные возможности для настройки интерфейса!

Ссылки как кнопки

Хотя по этому поводу ведутся споры, мы можем использовать CSS, чтобы текстовая ссылка выглядела как кнопка.

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

  a {
  цвет фона: красный;
  цвет белый;
  отступ: 1em 1.5em;
  текстовое оформление: нет;
  преобразование текста: прописные буквы;
}  

Отлично! Теперь давайте воспользуемся способностями изменения состояния, которые мы узнали в предыдущем разделе, чтобы сделать нашу искусственную кнопку более интерактивной. Мы сделаем кнопку темно-серой при наведении, черной при активной и светло-серой при посещении:

  a {
  цвет фона: красный;
  цвет белый;
  отступ: 1em 1.5em;
  текстовое оформление: нет;
  преобразование текста: прописные буквы;
}

a: hover {
  цвет фона: # 555;
}

a: active {
  цвет фона: черный;
}

а: посетил {
  цвет фона: #ccc;
}  

Оформление ссылки в виде кнопки и использование преимуществ состояний позволяет нам создавать довольно интересные эффекты. Например, давайте создадим кнопку с некоторой глубиной, которая, кажется, нажимается, когда она активна, и всплывает, когда щелчок закончен.

Ой, и курсоры!

Мы довольно подробно рассмотрели ссылки на стили, но есть еще один их компонент, который мы не можем игнорировать: курсор.

Курсор указывает положение мыши на экране. Мы уже привыкли к стандартной черной стрелке:

Стандартная стрелка курсора мыши

Мы можем изменить стрелку на указатель в виде руки при наведении (: hover ), чтобы было легче увидеть, что ссылка указывает на то, что это интерактивный элемент:

Использование курсора : указатель
;
предоставляет интерактивную подсказку.
  a: hover {
  курсор: указатель;
}  

Уф, это намного лучше! Теперь у нас есть довольно модная ссылка, которая выглядит как кнопка с правильными интерактивными подсказками.

Повышение уровня

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

  • Ссылки Mailto - Хороший справочник для связывания адресов электронной почты вместо веб-страниц.
  • Текущее состояние телефонных связей - Знаете ли вы, что можно привязать телефонный номер? Ну вот как.
  • Курсор - Справочное руководство CSS-Tricks для настройки курсора.
  • Когда использовать элемент "Кнопка". Если вас интересует разница между кнопкой ссылки и кнопкой традиционной формы, то это хороший обзор с предложениями, которые лучше подходят для конкретных контекстов.
  • Button Maker - бесплатный ресурс для создания CSS для кнопок ссылок.

Dreamweaver tutorial 19 - изменение цвета шрифта ссылки в css

Привет и добро пожаловать в это руководство по Dreamweaver. Меня зовут Дэниел Вальтер Скотт, я инструктор в компании «Принеси свой собственный ноутбук».

В этом руководстве мы рассмотрим стили наших ссылок или гиперссылок в Dreamweaver. Вот эти ребята здесь, и при нажатии они переходят на другую страницу. У них есть особые свойства, которые нам придется удалить.Итак, мы стилизовали наши h2, которые являются нашими заголовками и нашими h3 или нашими заголовками 2 и тегами абзацев, нашими тегами p, ранее в наших руководствах. А теперь посмотрим на этих ребят. Теперь у них есть несколько значений по умолчанию.

Они становятся синими, они времен нового римского стиля, они среднего размера, и у них есть небольшое подчеркивание под ними. Итак, что нам нужно сделать, это выяснить, что это за тег? В предыдущих уроках это было легко, потому что мы фактически сделали этот тег в h 1, поэтому мы знали, что это тег h 1, и мы создали его и назвали его h3, так что в этом случае эти ребята создаются, когда мы добавляем гиперссылка.К ним добавляется тег. Как выяснить, что это за теги, чтобы мы могли стилизовать их с помощью нашего CSS, довольно просто.

Итак, я выделил слово «дом» и внизу, это мой селектор тегов. Я люблю этого парня. Он говорит мне, какие теги к этому применены. Итак, тело - это общая часть веб-сайта, это все, что видит пользователь. Не стоит особо беспокоиться о теге body. Он находится в неупорядоченном списке, который является точкой маркера, и внутри этого элемента списка, который является самой точкой, и это бит, с которым я хочу поиграть.Это буква А, она называется активной ссылкой. К сожалению, догадаться непросто.

Тег A - это и есть гиперссылка. Если я сейчас стилизую свой тег a, он будет стилизовать мои 1. 2. 3. мои гиперссылки. Так что давайте попробуем. Здесь мигает мой курсор, но на самом деле не имеет значения, где находится ваш курсор, вы можете ввести его позже. Я собираюсь убедиться, что он входит в мой основной точечный CSS. Я собираюсь создать новый селектор, и вы можете видеть, что его покупка отбросила весь список, но я просто хочу стилизовать A, поэтому я собираюсь удалить все, кроме A.Тогда я бы хотел поиграть с цветом, который является важным, вы можете увидеть, как он стал синим. Я уменьшу масштаб, чтобы вы могли все видеть. Здесь вы видите мои гиперссылки, там они синие, так что мы перейдем к тексту и вашему конструктору CSS. Цвет шрифта, я поменяю его на зеленый.

Затем я нажимаю Enter, и вы видите, что все мои гиперссылки здесь стали зелеными, и это идеально. Следующее, с чем мы собираемся поиграться, - это шрифт, поэтому я выберу свой Gil Sans.Теперь последняя строка - это текстовое оформление, эта строка под ним. Вы можете увидеть здесь, под оформлением текста, есть мои варианты. У меня есть один под названием «Нет», есть подчеркивание, которое уже применено, есть лишняя линия, которую я никогда не знаю, для чего использовать, и там линия сквозная. Так что нам нужно сказать «нет».

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

Увидимся в следующем уроке

Как изменить цвет подчеркивания ссылки с помощью CSS

Цвет подчеркивания ссылки может быть установлен с помощью недавно введенного свойства text-decoration-color CSS. Это позволяет изменить цвет подчеркивания, который может отличаться от цвета текста.

По умолчанию цвет подчеркивания устанавливается таким же, как цвет текста ссылки.Но иногда хочется придать подчеркиванию другой цвет, отличный от цвета текста ссылки. Для этого мы в основном использовали свойство CSS border-bottom, чтобы оно выглядело как подчеркивание.

Однако есть новый и прямой способ сделать это без использования хака границы . Свойство CSS text-decoration-color может изменять цвет оформления текста (в данном случае подчеркивание).

  #link {
текстовая документация: нет;
цвет синий;
}

/ * показывать подчеркивание при наведении * /
#link: hover {
текст-оформление: подчеркивание;
цвет оформления текста: красный;
-webkit-текст-украшение-цвет: красный;
}
  
Пример

Обратите внимание на цвет подчеркивания при наведении курсора на ссылку ниже:

Посетите домашнюю страницу

Совместимость с браузером

Все последние версии браузеров поддерживают цвет оформления текста. Однако в Safari он в настоящее время имеет префикс -webkit-text-decoration-color.

Подчеркивания можно дополнительно стилизовать

Помимо изменения цвета подчеркивания текста, было введено несколько новых свойств CSS для стилизации подчеркивания.

  • text-decoration-Thickness может изменять толщину подчеркивания.
  • text-decoration-style может давать пунктирную, пунктирную, волнистую или двойную линию подчеркивания.
  • text-decoration-offset может установить позицию смещения для подчеркивания.
  • text-decoration-skip-ink может даже установить подчеркивание, чтобы оно проходило через все символы (по умолчанию некоторые длинные символы пропускаются при подчеркивании).

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

Стиль гиперссылок CSS - Как изменить цвет гиперссылки

Стиль гиперссылок CSS работает при наведении курсора или нажатии на определенную гиперссылку. вы можете установить стили гиперссылок, используя различные свойства CSS, такие как background-color, font-family, font-weight, color, font-size и многое другое.

Вы также можете установить специальные стили в зависимости от выполнения особого события по гиперссылке.

Ниже приведены специальные события гиперссылки для применения стиля CSS, когда это происходит.

  • a: ссылка Обычная непосещаемая ссылка
  • a: посещено Ссылка уже посещена пользователем
  • a: при наведении указателя мыши на ссылку
  • a: active Нажали ссылку в тот момент

Здесь применяются некоторые правила, когда вы устанавливаете стиль для гиперссылки.

  • a: hover всегда следует после ссылки: или после посещения
  • a: активные всегда идут после a: hover

После свойства CSS гиперссылки "Стиль" перечислены различные стили типа.

Пример

  


   Гиперссылка CSS 
  


  

  

Запустите ... »

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

Здесь гиперссылка устанавливает цвет фона на: ссылка,: посещение,: наведение,: активный.

Пример

  


   Цвет фона для гиперссылки CSS 
  


  
Щелкните здесь, чтобы открыть пример CSS страницы.

Запустите ... »

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

Здесь гиперссылка устанавливает цвет фона на: ссылка,: посещение,: наведение,: активный.

Пример

  


   Гиперссылка CSS 
  


  
Щелкните здесь, чтобы открыть пример CSS страницы.

Запустите ... »

Изменение цвета посещенных ссылок

Старейшее руководство по удобству использования для любого типа навигационного дизайна - помочь пользователям понять, где они были , , где они , , и куда они могут перейти (прошлое, настоящее, и будущее). Эти три аспекта в некоторой степени взаимосвязаны: хорошее понимание прошлой навигации помогает вам понять ваше текущее местоположение, поскольку это кульминация вашего путешествия. Зная свое прошлое и настоящее местоположение, в свою очередь, легче решить, куда идти дальше.

В Интернете ссылки являются ключевым фактором в процессе навигации. Пользователи могут исключать ссылки, которые оказались бесплодными при их предыдущих посещениях. И наоборот, они могут пересмотреть ссылки, которые они считали полезными в прошлом.

Самое главное, знание того, какие страницы они уже посетили, освобождает пользователей от непреднамеренного повторного посещения одних и тех же страниц снова и снова.

Цена на унифицированный цвет ссылок

Как правило, веб-браузеры сильно не поддерживают навигацию пользователя. Однако они предоставляют одну функцию, которая помогает пользователям сориентироваться: браузеры позволяют дизайнерам отображать ссылки разными цветами в зависимости от того, ведут ли ссылки на новые страницы или страницы, которые пользователи видели раньше. Изменение цвета посещенных ссылок стало частью просмотра веб-страниц с момента появления Mosaic в 1993 году, так что это полностью стандартно; это понимают почти все пользователи.

В настоящее время 74% веб-сайтов используют разные цвета для посещенных и непосещенных ссылок, что делает такой подход к дизайну строгим условием, которого люди ожидают.

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

  • непреднамеренно повторно посещать одни и те же страницы;
  • легче теряются, потому что их понимание смысла каждой ссылки ухудшается;
  • часто неверно истолковывают или упускают из виду разницу между двумя похожими ссылками, если не уверены, какую из них уже посещали; и
  • сдаются быстрее, потому что у них снижается чувство мастерства, когда сайт не может отражать их действия и, таким образом, помогает им ориентироваться.

Такие проблемы с удобством использования особенно вредны для пользователей со слабой кратковременной памятью, которые часто не могут запомнить, что они щелкнули без визуального представления. Конечно, «слабая кратковременная память» - это врожденный недостаток всех людей, поэтому неизменные цвета ссылок страдают все пользователи. Но это определенно влияет на некоторых людей больше, чем на других, поэтому особенно важно изменить цвета ссылок, если у вас много старых пользователей.

Учитывая обширную теоретическую и эмпирическую поддержку использования разных цветов ссылок, удивительно, что четверть всех веб-сайтов продолжает создавать дополнительные проблемы с удобством использования для людей, выбирая одинаковый цвет ссылок.

Почему проблема не устранена

Даже люди, которые верят в удобство использования, иногда сомневаются в необходимости изменения цвета ссылок. Я думаю, это потому, что они не улавливают проблемы, вызванные неизменными ссылками, когда проводят собственное пользовательское тестирование. К сожалению, симптомы этих проблем труднее всего обнаружить при наблюдении за пользователями.

Пользовательское тестирование в принципе простое: мы обучаем его за 3 дня. Наиболее важные проблемы юзабилити настолько очевидны, что любой может определить их с помощью простого теста.Когда вы узнаете основы того, как писать хорошие задачи и как облегчить сеанс, не влияя на поведение пользователей, вы сможете ясно увидеть, как пользователи попадают в неприятности, когда сталкиваются с плохо спроектированными компонентами вашего сайта.

Скажем, например, что пользователь нажимает не ту кнопку. Для любого наблюдателя очевидно, что такое поведение представляет собой ошибку дизайна. Выслушивая комментарии пользователей перед тем, как щелкнуть, обычно говорит вам, почему они неправильно поняли дизайн, тем самым помогая вам улучшить его при редизайне.

Случаи, в которых пользователей ничего не делают, обнаружить сложнее. Даже в этом случае большинство специалистов по удобству использования могут выявить множество таких проблем. Вы можете, например, заметить, что никто из участников вашего теста не щелкнул по одной из ваших основных функций. Комментарии пользователей вслух дадут понять, видели ли они эту функцию, но не сочли ее актуальной; или (б) никогда не рассматривал эту функцию, потому что она была слишком похожа на рекламу.

Обнаружение проблем с распределенной юзабилити

Некоторые проблемы юзабилити требуют дополнительной детективной работы и часто упускаются из виду людьми, относительно плохо знакомыми с пользовательским тестированием.Это особенно верно для проблем, которые представляют собой комбинацию нескольких отдельных проблем , разбросанных по сайту. Выявить эти проблемы еще труднее, если ни одна из отдельных проблем сама по себе не вызывает затруднений.

Относительно простой пример проблемы с несколькими местоположениями - это когда ссылка на домашнюю страницу устанавливает определенные ожидания, которые заставляют пользователей неправильно интерпретировать информацию на целевой странице. Сам текст ссылки может быть четким, и пользователи вряд ли будут жаловаться на него.Целевая страница также может быть ясной, и пользователи могут не жаловаться на нее, потому что думают, что они ее понимают. Проблема в том, что они понимают это неправильно, потому что интерпретируют это в контексте своих ошибочных ожиданий. Этот тип проблемы удобства использования требует, чтобы наблюдатели за тестированием делали выводы высокого уровня на основе запоминания того, что произошло на предыдущей странице, даже если ничто из произошедшего, казалось, не вызывало у пользователей затруднений.

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

Тем не менее, обратите внимание, и вы заметите, что пользователи часто перемещаются по кругу . Они будут посещать одну и ту же страницу несколько раз - не потому, что хотят, а потому, что не осознают, что уже были там. Пользователи откажутся от , когда они попробуют большинство ссылок в списке, даже если есть одна ссылка, которую они не пробовали; если ссылки не меняют цвет, пользователи не понимают, что осталась только одна непосещенная ссылка.

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

Несмотря на то, что недостатки неизменных цветов ссылок легко упускаются из виду при пользовательском тестировании, они очень реальны и проблематичны для пользователей. Многие другие стратегии дизайна, помогающие пользователям ориентироваться, такие как карты сайта, требуют большой работы. Но браузер позволяет вам менять цвета ссылок бесплатно, поэтому нет причин не воспользоваться этим простым способом помочь вашим пользователям.

Использование разных цветов для посещенных и непосещенных ссылок упрощает навигацию по вашему сайту и, таким образом, повышает удовлетворенность пользователей.

Дополнительные инструкции

Alertbox на следующей неделе содержит подробные инструкции для текстовых ссылок, включая советы о фактических цветах, которые следует использовать для посещенных и непосещенных ссылок.

Отчеты о правилах навигации в интрасети и информационной архитектуре интрасети (IA) содержат больше информации об этих проблемах, поскольку они относятся к интрасетям.

Полнодневный учебный курс по дизайну навигации на ежегодной конференции Usability Week.

На конференции также есть дневной учебный курс по дизайну веб-страниц.

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

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