Как убрать подчеркивание у ссылок 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 | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink

Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.

line-through

Создает перечеркнутый текст (пример).

overline

Линия проходит над текстом (пример).

underline

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

none

Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

inherit

Значение наследуется у родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
   a { 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:hover { 
    text-decoration: underline; /* Добавляем подчеркивание 
                                   при наведении курсора мыши на ссылку */
   }
  </style> 
 </head> 
 <body>
  <p><a href="1.html">Стратегическое нападение</a></p>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.textDecoration

[window.]document.getElementById(«elementID»).style.textDecorationBlink

[window.]document.getElementById(«elementID»).style.textDecorationLineThrough

[window.]document.getElementById(«elementID»).style.textDecorationNone

[window.]document.getElementById(«elementID»).style.textDecorationOverLine

[window.]document.getElementById(«elementID»).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

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

на моей странице Я поместил некоторые ссылки, под которыми я не хочу никакой строки, так как я могу удалить это с помощью HTML?

8 ответов

Inline версия:

<a href="http://yoursite.com/">yoursite</a>

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

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

a {text-decoration: none; }

a.nounderline {text-decoration: none; }

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

<a href="#">Link</a>

a:hover {
   text-decoration:none;
}

border: none;

box-shadow: none;

<a>My Link</a>

<style="text-decoration: none">

<a href="http://yoursite.com/">yoursite</a>