Css не подчеркивать ссылки: Ссылки без подчеркивания | htmlbook.ru

«Нужно ли дизайнеру подчеркивать ссылки?» — Яндекс Кью

Популярное

Сообщества

ДизайнМода и красотаСтиль

Дмитрий Рыбалка

30 мая 2015  ·

4,9 K

ОтветитьУточнить

Первый

Андрей Болонев

8

Дизйнер-фрилансер  · 9 июн 2015

Всё индивидуально. Подчеркивание или выделение цветом — нет разницы. Не цвет нам говорит, что это ссылка, а контекст, значение. Вот здесь выше моё имя является ссылкой, это понятно без каких либо выделений. Так в идеале должно быть везде (кроме ссылки в тексте). Ещё пример, когда на сайте почти всё является ссылкой, нужно ли выделение? (например, lenta.ru)

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

Ещё добавлю, что с дальтонизмом выдают водительские права. Большинство видят просто другие цвета (например, синий цвет видят красным или зеленым). Редко человек не может различить ни одного цвета. Но тогда по светлоте всё равно заметны различия.

Комментировать ответ…Комментировать…

Алексей Приловский

521

Веб-разработчик в компании, меняющей футбол  · 4 июн 2015

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

Комментировать ответ…Комментировать…

Дмитрий Рыбалка

351

Designer  · 30 нояб 2015

Чтобы ответить на этот вопрос, нужно все-таки погрузится в небольшой историко-биологический экскурс. Ссылка (гиперссылка) появилась задолго до появления и массового распространения цветных мониторов. Единственным способом выделить ссылку на монохромном мониторе было её подчеркивание. С появлением цветных мониторов атавизм в виде подчеркивания перешел в веб в виде… Читать далее

Комментировать ответ…Комментировать…

Азамат Шамузафаров

298

арт-директор «Гротеска»  · 8 июл 2015

Ссылки необязательно подчеркивать всегда — главное, чтобы было ясно, что это ссылка. Например, чтобы в меню было очевидно, что это меню, а не просто набор слов. Тогда рука сама потянется проверить и не будет обманута.

В обычном тексте (контенте, а не в дизайне) я рекомендую подчеркивать ссылки — можно не выпендриваться, а дать людям легко серфить. Мы же в интернете, а… Читать далее

Комментировать ответ…Комментировать…

Первый

Andrei Bourdine

7

UX/UI Designer  · 4 июн 2015

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

Комментировать ответ…Комментировать…

Acia Delilah

398

UI/UX дизайнер  · 23 авг 2015

Ссылки нужно выделять. Подчеркнутый текст — лишь один из способов. Первое правило уже названо выше: ссылки внутри одного стиля (скажем, вашего сайта и связанной с ним почтовой рассылки) выделяют одним и тем же способом. Второе — выберите максимально простой способ выделения, который не отравит вашу дизайнерскую задумку. Легкость восприятия различий, актуальных для… Читать далее

Комментировать ответ…Комментировать…

Первый

Антон Мезенцев

4

Manager  · 10 июн 2015

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

Комментировать ответ…Комментировать…

Первый

Sergey Konshin

-6

Дизайнер  · 14 июн 2015

Это как спросить «а нужно ли писателю соблюдать орфографию?»)

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

Комментировать ответ…Комментировать…

Михаил Лялин

374

специалист  · 10 июн 2015

Подчёркивание ссылок = дурной тон на текущий момент. С помощью использования CSS любую ссылку на сайте можно выделять любыми способами при наведении, посещении и т.п.

http://www.w3schools.com/css/css_link.asp

Комментировать ответ…Комментировать…

Первый

Kulakov Aleksey

35

Ux  · 14 июн 2015

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

Способ должен быть понятен пользователю сразу, и без объяснений. Много зависит от того, насколько контекст восприятия будет подталкивать человека к предпол… Читать далее

Комментировать ответ…Комментировать…

Вы знаете ответ на этот вопрос?

Поделитесь своим опытом и знаниями

Войти и ответить на вопрос

1 ответ скрыт(Почему?)

Учебник CSS для начинающих. Что такое CSS?

Введение

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

CSS (Cascading Style Sheets) — Каскадные таблицы стилей — это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу — элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

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

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему. . Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки <h2> делать красным цветом, параграфы <p> писать курсивам, ссылки <a> не подчёркивать 🙂 фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги <h2> и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента <h2> на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

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

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

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

Все ссылки в HTML имеют одно сплошное подчеркивание. Так было с 1993 года, когда вышла версия 0.13 браузера Mosaic, в которой было введено подчеркивание якорного текста для гиперссылок.

Например, приведенная ниже простая HTML-разметка:

 

<голова>
  <мета-кодировка="utf-8">
  

<тело>
  
Это образец документа с гиперссылкой.
 

Выглядит так при открытии в браузере:

Гиперссылка с подчеркиванием

Возникает вопрос: если вы не хотите, чтобы ссылки на вашем сайте были подчеркнуты, как вы можете убрать это подчеркивание?

Чтобы удалить подчеркивание одной или нескольких ссылок в HTML-документе, присвойте им свойство CSS

text-decoration: none .

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

Ссылки в документах HTML (и почему это важно)

Браузеры применяют таблицу стилей CSS по умолчанию к элементам DOM в ваших документах HTML. Например, это таблицы стилей CSS по умолчанию для браузеров Gecko (Firefox) и WebKit (Chrome, Safari и др. ).

Чтобы переопределить этот стиль по умолчанию, просто вставьте одну или несколько таблиц стилей CSS с вашими собственными стилями в документ HTML. (Если вы новичок в HTML/CSS и не знаете, как это сделать, читайте дальше; я объяснил это позже в этом посте).

В HTML вы создаете гиперссылки, заключая текст привязки в тег с цифрой 9.0013 атрибут href .

Ссылки могут быть «просто ссылками», как показано в приведенной ниже разметке:

 

<голова>
  <мета-кодировка="utf-8">
  

<тело>
  
Это ссылка на Google.
  

Однако на практике ссылки обычно встраиваются в меню навигации или в разделы, статьи и боковые панели:

 

<голова>
  <мета-кодировка="utf-8">
  

<тело> 

<навигация>
  <ул>
    
 html">Главная
    
О нас
    
Контакты
  


<статья>
  
Это ссылка на Google.


 

Иногда у них будут классы и идентификаторы, такие как ссылки в нашем