A css убрать подчеркивание: Как убрать подчеркивание у ссылок?

Как в CSS убрать подчеркивание ссылки

Здравствуйте, дорогие друзья!

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

Навигация по статье:

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

Отключаем подчеркивание

Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.

Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:

.link-blok a{ text-decoration:none; }

Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.

Если вам нужно убрать подчёркивание ссылки для всех ссылок на сайте, то в CSS пишем:

a{ text-decoration:none; }

Убираем подчеркивание ссылки CSS при наведении

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

.link-blok a:hover{ text-decoration:none; }

В этом случае мы дописали к селектору псевдокласс

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

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

Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!

С уважением Юлия Гусарь

Как сделать и убрать подчеркивание ссылок в css

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

«Практическая типография» на Butterick: Если вы чувствуете желание акцентировать что-то, используйте жирный шрифт или курсив. В особых ситуациях, таких как заголовки, вы также можете рассмотреть возможность использования всех заглавных букв, маленьких заглавных букв или изменения толщины. Не уверены? Я предлагаю вам найти книгу, газету или журнал, в которых акцентируется текст.

Но в Интернете все по-другому. Гиперссылки являются важной частью Интернета; и с самого начала интернета они были подчеркнуты. Это общепризнанное соглашение. Значение кристально ясно — подчеркивание означает ссылку.

Тем не менее, большое количество популярных веб-сайтов убрало подчеркивание: The New York Times, New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Когда в 2014 году Google удалили подчеркивания со страницы результатов поиска, их ведущий дизайнер Джон Уайли заявил, что это создало более чистый вид. Тем не менее, на большинстве этих сайтов сохранилось с небольшими различиями выделение традиционным сине-голубым цветом (#0000EE), который был цветом браузера по умолчанию с самого начала Интернета. Хотя это обеспечивает для большинства пользователей визуальную подсказку, этого может быть недостаточно для обеспечения соответствия доступности WCAG.

Цвет не должен использоваться в качестве единственного визуального средства передачи информации, указания действия, запроса ответа или различения визуального элемента. — WCAG 2.1

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

WCAG не обязывает строго использовать подчеркивания для ссылок, но рекомендует их. Пользователи-дальтоники должны иметь возможность различать ссылки. Вы можете выделить их другими способами, например, жирным шрифтом font-weight. Или вы могли бы сохранить эту старую визуальную доступность. Но если мы собираемся использовать подчеркивание, мы хотим, чтобы оно выглядело красиво. Марчин Вичари, дизайнер из Medium, описал идеальное подчеркивание как:

[…] видимое, но ненавязчивое — позволяющее людям понять, на что можно нажимать, но не обращающее на себя слишком много внимания. Оно должно располагаться на правильном расстоянии от текста, удобно помещаясь позади текста, когда это же место должны занять выступающие части букв.

Для достижения этого традиционно требовались хитрости CSS.

Хаки, которые мы использовали

С этим трюком должны быть знакомы все разработчики — с помощью :border-bottom. Имитируя подчеркивание с помощью border-bottom, мы получаем контроль над цветом и толщиной. Эти псевдо-подчеркивания имеют одну проблему: слишком большое расстояние от текста. Вы могли бы потенциально решить эту проблему с помощью line-height, но и это имеет свои недостатки. Аналогичная техника использует box-shadow. Марчин Вичари впервые применил самую сложную технику, которая использовала background-image для имитации подчеркивания. Это были полезные хаки, но, к счастью, они больше не нужны.

Стилизация реальных подчеркиваний

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

text-underline-offset контролирует положение подчеркивания.

text-decoration-thickness контролирует толщину подчеркивания.

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

UX- агентство Clearleft смело использует (псевдо) подчеркивания, четко обозначая ссылки с помощью красочных стилей. Вот один из примеров искусственного подчеркивания:

a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Обратите внимание, что это псевдо-подчеркивание явно ниже выступающей части буквы «у»:

Вот тот же параграф при использовании DevTools для применения того же стиля к реальному подчеркиванию с новыми свойствами CSS:

a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }

Вы заметили, что я использую в этом примере кода единицу em. Спецификация настоятельно рекомендует использовать ее, а не пиксели, чтобы толщина соответствовала шрифту. Эти свойства уже реализованы в Safari и появятся в Firefox 70.

С переходом браузера Microsoft Edge на Chromium мы, наконец, получим кросс-браузерную поддержку для свойства text-decoration-style, которое предлагает варианты: solid (по умолчанию), double, dotted, dashed и wavy. В сочетании эти новые свойства открывают целый ряд возможностей.

Значение по умолчанию auto (слева) и значение none (справа)

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

Автор: Ollie Williams

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Несколько советов, как при помощи CSS убрать подчеркивание ссылок в HTML

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

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

Если все-таки было принято решение убрать подчеркивание ссылок, то тут понадобится некоторые знания структуры формирования интернет страницы, а именно CSS.

Удалить подчеркивание ссылок на всем сайте

a {

text-decoration: none;

}

Эта небольшая строка удалит полностью на всем сайте подчеркивание всех элементов прописанных при помощи тега «а».

Но что делать, если у вас нет доступа к файлу CSS?

В таком случае целесообразным является применения тега Style в начале документа. Работает так же, как и файл CSS. Для того чтобы применить стили, необходимо в самом начале документа (или HTML страницы) дописать конструкцию, в которой действуют обычные правила CSS стилей.

Эти стили применяются только к определенной странице. В других разделах или документах сайта они действовать не будут.

Удалить подчеркивание ссылок при наведении

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

а: hover {

text-decoration: none;

}

Именно псевдокласс « :hover » отвечает за декорацию элементов при наведении курсора.

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

а {

text-decoration: none;

}

а: hover {

text-decoration: underline;

}

Применение идентификаторов и классов

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

Есть несколько вариантов решения этой проблемы.

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

Для этого необходимо непосредственно в теге ссылки указать параметр Style:

Второй вариант является более приемлемым.

Вводим в элемент дополнительный класс или id и уже этим селекторам присваиваем нужные нам стили:

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

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

.none_ decoration{

text-decoration: none;

}

Идентификатор обозначается знаком #:

#none_ decoration{

text-decoration: none;

}

Данное правило применимо как к файлу CSS, так и к тегу Style

Изменение стиля отображения ссылки в тексте

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

Сделать это тоже достаточно просто:

а {

color:*указать нужный цвет в любом формате (*red, #c2c2c2, rgb (132, 33, 65)*)*;

}

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

Замена стандартной стилизации

Еще ремарка напоследок. Вместо того, чтобы отменить подчеркивание ссылки CSS дает возможность замены стандартных значений оформления. Для этого достаточно подставить нижеприведенные значения в конструкцию text-decoration:

text-decoration-style:

• Если нужна сплошная линия, указываем значение solid.
• Для волнистой линии – wavy.
• Двойная линия – соответственно double.
• Линию можно заменить на последовательность точек – dotted.
• Подчеркнуть слово в виде пунктира – dashed

А также можно изменить положение линии относительно текста:

Конструкция line-text-decoration-line может принимать значения:

• Стандартное (подчеркнуть снизу)- underline .
• Перечеркнуть слово (фразу) – through .
• Линия находится сверху – overline.
• Знакомое нам none – без стилизации.

И цвет (не путать с цветом текста!):

text-decoration-line: (любой цвет в любом формате *red, #c2c2c2, rgb (132, 33, 65)*).

Для удобства все три позиции можно писать вместе в конструкции:

text-decoration: red, line-through, wavy.

Как убрать подчеркивание ссылки в HTML

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

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

Как убрать нижнее подчеркивание у ссылок html?

За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h2-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:

• line-through — перечеркивает ссылку
• overline — добавляет верхнее подчеркивание
• underline — добавляет нижнее подчеркивание
• none — убирает подчеркивание
• initial — устанавливает значение по умолчанию
• inherit — наследует это свойство от родительского элемента

Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none. Если мы собираемся применить правило ко всем ссылкам на странице пишем:

a {
  text-decoration: none;
}

Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.

<a href='google.com'>Google</a>

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

.link {
	text-decoration: none;
}

#link {
	text-decoration: none;
}

.some-block a {
	text-decoration: none;
}

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

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

.link:hover,
.link:focus {
	text-decoration: underline;
color: red;
}

.link:focus {
	outline: none; //убираем обводку
color: red;
}

.link:focus {
	outline-color: brown; //меняем цвет обводки
color: red;
}

На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.

Как убрать подчеркивание ссылок? CSS свойство text-decoration — OneKu

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

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

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

Создание ссылки

Для демонстрации работы этого метода, необходимо создать ссылку. В этом поможет стандартный HTML 5.

Вам будет интересно:Redirect: что это и как убрать из браузера?

Чтобы создать ссылку, нужно использовать парный тег «a», который не является блочным. Поэтому, чтобы размещать ссылки на отдельных строчках, необходимо заключать их в теги параграфа (p). Можно воспользоваться и альтернативным способом – задать свойство display: block для каждой ссылки.

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

Кроме этого, тег «a» имеет целый ряд атрибутов. Обязательным является атрибут href, без которого не будет осуществляться переход по ссылке. В нем указывается путь к странице или файлу, к которому будет вести наша ссылка.

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

Ссылка создана, теперь ее нужно стилизовать. Существует несколько способов убрать подчеркивание ссылки в CSS:

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

Совет: при стилизации веб-страницы отдавайте предпочтение внешним ссылкам.

Стилизация ссылки в CSS

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

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

Записываем селектор «a», в котором будет прописано свойство text-decoration: none;

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

Text-decoration содержит ряд других значений. С его помощью можно сделать и верхнее подчеркивание, однако это используется редко.

Чтобы убрать подчеркивание ссылки, в CSS документе введите следующий код:

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

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

Изменение наведенной ссылки в CSS

Допустим, вы захотели сделать так, чтобы в обычном состоянии ссылки подчеркивание осталось, а при наведении исчезло. Чтобы убрать или задать подчеркивание для ссылки при наведении, в CSS используется псевдокласс «:hover». Вот пример:

Стили можно применять не только к наведенной ссылке, но и к активированной или посещенной. Для этого нужно использовать псевдоклассы «:active» и «:visited».

Источник

Как избавиться от подчёркивания изображения-ссылки в CSS

Ура, поздравьте меня! Начал работу сайт http://kostyrka.ru, первый работающий раздел — это блог. Данный пост посвящён удалению некоторых свойств ссылок у изображений с границами.

В CSS, как известно, есть множество способов оформить изображение.

Можно добавить рамку к изображению:

img {
	border: thin solid black;
	}

img { border: thin solid black; }

Можно отрегулировать внешние отступы (margins) и внутренние отступы (padding):

img {
	border: thin solid black;
	padding: 3px;
	margins: 3px;
	}

img { border: thin solid black; padding: 3px; margins: 3px; }

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

img {
	background: url(images/grunge.png) repeat 0 0;
	border: thin solid black;
	padding: 3px;
	margins: 3px;
	}

img { background: url(images/grunge.png) repeat 0 0; border: thin solid black; padding: 3px; margins: 3px; }

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

<a title="Крупное фото" href="http://site.ru/foto/large.png">
<img src="http://site.ru/foto/preview.png" alt="Предварительный просмотр" />
</a>

<a title=»Крупное фото» href=»http://site.ru/foto/large.png»> <img src=»http://site.ru/foto/preview.png» alt=»Предварительный просмотр» /> </a>

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

a:link, a:visited {
	border-bottom: 1px solid;
	border-color: #e0b2e0;
	text-decoration: underline;
	color: red;
	}	
a:hover, a:active {
	border-bottom: 3px solid red;
	text-decoration: none;
	color: maroon;
	}

a:link, a:visited { border-bottom: 1px solid; border-color: #e0b2e0; text-decoration: underline; color: red; } a:hover, a:active { border-bottom: 3px solid red; text-decoration: none; color: maroon; }

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

a img {
	text-decoration: none;
	border: 0 none;
	}

a img { text-decoration: none; border: 0 none; }

На что действует эта корректива — на якорь (a) или изображение (img)? На изображение. Данный код убирает с изображения собственную рамку, а не ссылку. Дословно это надо понимать так: всем изображениям, которые могли бы иметь собственное обрамление (border), являясь ссылками, обрамление снять. Текстовое же форматирование (подчёркивание) здесь вообще нигде не присутствует, поскольку оно не применяется к изображению напрямую (в самом деле, попробуйте себе представить жирные изображения, курсивные изображения, изображения, набранные из малых прописных пикселей с разрядкой между символами, — изображения с применёнными к ним текстовыми декларациями). Поэтому, вместо попыток найти и обезвредить подчёркивание ссылок и создание границ, нам нужно модифицировать элементы-якори (ссылки), содержащие изображения. Это разумно — обращаться к внешнему контейнеру. Если содержимое ссылки <a> будет подчёркиваться, то этой директиве начхать на то, что мы творим внутри неё со стилями вложенных объектов. Она просто возьмёт и подчеркнёт.

Жаль, что CSS не поддерживает создания селекторов по критериям (qualified selectors). Если бы было наоборот, то мы бы могли выцепить целевое изображение следующим методом:

a < img { border: none; }

a < img { border: none; }

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

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

a.image-border {
	text-decoration: none;
	border: 0 none;
	}

a.image-border { text-decoration: none; border: 0 none; }

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

К счастью, CSS3 позволяет нам выделять определённые типы ссылок путём сопоставления с образцом и отбора атрибутов. Отбор атрибутов сужает наш круг подозреваемых на «ссыльность» или иные характеристики изображений. Пример критериев отбора: мы хотим присвоить свойства в фигурных скобках объектам, у которых выполняется равенство атрибута такого-то тэга тому-то. Для примера сделаем жёлтый фон только у тех ссылок, которые не подлежат автоматическому переходу, добавим зелёную рамку (буэ-э) изображениям, у которых замещающий текст — «arrow», и всему коду во фрагменте подсветки синтаксиса, который говорит, что он написан на языке perl, сделаем красные буквы. Записывается это короче, чем формулируется:

a[rel="nofollow"] { 
	background: yellow;
	}
img[alt="arrow"] {
	border: green;
	}
pre[class="perl"] {
	color: red;
	}

a[rel=»nofollow»] { background: yellow; } img[alt=»arrow»] { border: green; } pre[class=»perl»] { color: red; }

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

Элемент содержит указанный атрибут:

У элемента атрибут принимает конкретное значение:

element[attribute="value"]

element[attribute=»value»]

У элемента атрибут содержит в значении указанный фрагмент:

element[attribute~="valuefragment"]

element[attribute~=»valuefragment»]

У элемента значение атрибута начинается с указанного фрагмента:

element[attribute^="valuebeginning"]

element[attribute^=»valuebeginning»]

У элемента значение атрибута кончается указанным фрагментом:

element[attribute$="valueending"]

element[attribute$=»valueending»]

У элемента значение атрибута содержит строковое выражение фрагментом:

element[attribute*="containsstringvalue"]

element[attribute*=»containsstringvalue»]

Подобный функционал проверки соответствия шаблону даён веб-мастеру возможность целиться только в те якори, которые обращаются к определённым типам файлов. Поэтому мы будем использовать синтаксис [атрибут$=»значение»] и выбирать только те якори, которые ведут на изображения любого типа. Например, чтобы охватить вниманием ряд мелких иконок предварительного просмотра изображений, которые потом открываются полноразмерными PNG, радивый веб-мастер напишет:

a[href$=png] {
	text-decoration: none;
	border: 0 none;
	}

a[href$=png] { text-decoration: none; border: 0 none; }

Это приведёт к тому, что у них у всех исчезнут границы и подчёркивания от ссылки. Все ссылки вида

http://dirtymess.gov/nav/…/…[abracadabra]…/some-image.png

утратят текстовые закидоны и лишатся подчёркивающих линий. Мы можем выбирать столько типов изображений, сколько нам угодно. Ограничимся якорями, адресующимся к JPG, PNG и GIF:

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
	text-decoration: none;
	border: 0 none;
	}

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] { text-decoration: none; border: 0 none; }

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

1. Изображения, которые ссылаются не на выбранные нами типы файлов.
2. Текстовые ссылки, ссылающиеся на выбранные нами типы файлов.

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

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

И тут можно применить небольшие латки для образовавшихся прорех. Можно изменить критерии отбора и подвергнуть обесподчёркиванию (или расподчёркиванию?) объекты с другими фрагментами кода в параметрах. Можно отловить только те изображения, которые ведут на определённый сайт или в определённый раздел сайта (содержат определённую папку в пути):

a[href*=domain] {
	text-decoration: none;
	border: 0 none;
	}

a[href*=domain] { text-decoration: none; border: 0 none; }

a[href*=directory] {
	text-decoration: none;
	border: 0 none;
	}

a[href*=directory] { text-decoration: none; border: 0 none; }

Данный приём снимет ненужное форматирование с любого объекта-ссылки, ведущего в определённое место сайта.

Надеюсь, указанные в данной статье приёмы предоставят дизайнерам возможности более аккуратного контроля над применением стилей, особенно над удаленим свойств якоря с объекта-ссылки.

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

Как убрать подчеркивание у ссылок?

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

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

Все, что нам понадобиться для этого, это знакомство со свойством text-decoration. Именно оно отвечает за декорирование текстовых блоков. Если ему прописать значение none, то браузер перестанет подчеркивать текст ссылки

Смотрим пример

CSS

.underline {
    text-decoration: none;  
	color:#444;
 }

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

В каких браузерах работает?

Оценок: 3 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

html — удалить подчеркивание из h-текста внутри элемента с помощью CSS

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Общественные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним возможности технической карьеры
5. Талант Нанять технических талантов
6. реклама Обратитесь к разработчикам по всему миру

wordpress — Как убрать подчеркивание CSS?

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Общественные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним возможности технической карьеры
5. Талант Нанять технических талантов
6. реклама Обратитесь к разработчикам по всему миру

Загрузка…

2. Авторизоваться зарегистрироваться

3. текущее сообщество

Как создать ссылку без подчеркивания в HTML

Обновлено: 30.12.2019 компанией Computer Hope

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

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

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

Сделать все ссылки не подчеркнутыми

Чтобы все ссылки на вашей веб-странице не имели подчеркивания, настройте стиль text-decoration для элемента a (anchor).Например, вы можете добавить следующий код CSS между тегами HTML-кода вашей веб-страницы. Здесь элемент