Как через CSS убрать подчеркивание ссылок? Пособие для новичка. Как сделать подчеркивание у ссылок тонким и красивым

Подчеркивание для блочных элементов вроде тега

можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Sa Fx

Линия под заголовком

Пример текста

Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору H1 . Результат данного примера показан на рис. 1.

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Подчеркивание заголовка

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

Результат данного примера показан на рис. 2.

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

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

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

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

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

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

text-decoration: none;

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

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

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

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

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

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

text-decoration: none;

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

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

text-decoration: none;

text-decoration: underline;

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

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

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

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

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

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

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

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

None_ decoration{

text-decoration: none;

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

#none_ decoration{

text-decoration: none;

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

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

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

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

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

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

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

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

text-decoration-style:

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

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

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

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

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

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

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

Позволяет сделать разное подчеркивание в HTML нижнее (underline), верхнее (overline), перечеркнутый текст (line-through) и т.п. Совместим эту фишку с предыдущей и получится:

Во второй строке показано как все записывается в один ряд с text-decoration.

text-decoration-style — стиль подчеркивания текста

Опция задает внешний вид декоративной линии для / ссылки. В новых рекомендациях CSS были добавлены значения wavy и double, теперь их всего 5:

solid — сплошная линия;
double — двойная (из первого примера выше);
dotted — состоит из последовательности точек;
dashed — позволяет сделать пунктирное подчеркивание CSS;
wavy — эффектная волнистая линия.

text-underline-position — позиционирование CSS подчеркивания

С помощь этого свойства можно управлять позицией линии относительно глифа шрифта.
Всего доступны 4 варианта:

auto — располагается максимально близко базовой линии текста;
under — под самой нижней границей шрифта;
left и right — слева/справа для записей, отображаемых вертикально.

Вот наглядное отличие нижнего подчеркивания текста с помощью under и auto:

Разница, думаю, вполне очевидна.

text-decoration-skip — убираем подчеркивание для элементов

С помощью опции можно отменить (пропустить) декорирование некоторых элементов в HTML строке. Чтобы лучше понять допустимые значения spaces, objects, box-decoration, edges, ink продублирую картинку из прошлой заметки:

То есть, например, с помощью ink вы можете сделать нижнее подчеркивание в CSS, которое бы не пересекалось с символами . Значение objects позволяет пропускать инлайновые элементы (inline-block) — вставляете span, и сплошная линия прервется в соответствующем месте:

Параметры box-decoration, spaces, edges намного хуже поддерживаются браузерами, поэтому их результат иногда отличается от ожидаемого. Вот состояние по совместимости/поддержке text-decoration на момент написания статьи:

Дополнительные фишки для подчеркивания ссылок

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

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

a:hover { text-decoration: underline; }

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

Если будут еще какие-то вопросы по теме, задавайте их в комментариях. Постараемся рассмотреть позже или подсказать в ответах. Главное в этом деле практика — попробуйте добавить разные свойства для опции text-decoration непосредственно в примерах или создайте свой тестовый файл. Надеемся по теме подчеркивания текста и ссылок в CSS / HTML все стало ясно.

Существует куча разных способов оформления подчеркивания. Возможно, вы вспомните статью Марсина Вичари “Crafting link underlines” на Medium. Разработчики Medium не пытаются сделать что-то безумное , они просто хотят создать красивую линию под текстом.

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

Цели

Что не так с привычным text-decoration: underline ? Если речь идет об идеальном сценарии, подчеркивание должно делать следующее:

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

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

Подходы

Так что это за различные способы, которыми мы можем реализовать подчеркивание в вебе?

Вот те, которые я рассматриваю:

text-decoration ;
border-bottom ;
box-shadow ;
background-image ;
фильтры SVG;
Underline.js (canvas);
text-decoration-* .

Разберем эти способы один за другим и поговорим о плюсах и минусах каждого из них.

text-decoration

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

Самая большая проблема с text-decoration это отсутствие настроек. Вы ограничены цветом и размером шрифта текста и у вас нет кроссбраузерного способа изменить это. Мы еще поговорим об этом подробнее.

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

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

border-bottom

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

Вот так border-bottom выглядит у строчных элементов.

Главный недостаток - это расстояние линии подчеркивания от текста, она целиком ниже выносных элементов. Вы можете исправить это, задав элементам свойство inline-block и уменьшив line-height , но тогда вы потеряете возможность оборачивать текст. Хорошо для отдельных строчек, но больше нигде непригодно.

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

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

может пропускать выносные элементы с помощью text-shadow ;
может изменять цвет, жирность и стиль линии;
позволяет использовать переходы и анимации цвета и жирности;
работает с многострочным текстом, если не применено значение inline-block ;
работает на любом фоне, если не использовать text-shadow .

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

box-shadow

box-shadow рисует подстрочную линию за счет двух внутренних теней: одна создает прямоугольник, а вторая скрывает его часть. Это значит, что вам нужен однотонный фон для того, чтобы это работало.

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

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

не позволяет изменять стиль подчеркивания;
работает не на любом фоне.

background-image

Метод с background-image наиболее близок к нашим желанием и обладает минимумом недостатков. Идея состоит в использовании linear-gradient и background-position для создания изображения, повторяющегося под строчками текста.

Для работы этого подхода необходимо, чтобы текст был в стандартном режиме display: inline; .

Следующий вариант обходится без linear-gradient , для эффектов вы можете добавить свое фоновое изображение.

может позиционироваться ниже базовой линии;
может пропускать выносные элементы за счет text-shadow ;
работает с кастомными изображениями;
обертывает несколько строчек текста;
работает на любом фоне, если не применять text-shadow .

размер изображения может изменяться в зависимости от разрешения экрана, браузера и увеличения.

Фильтры SVG

Я достаточно много поиграл с этим способом. Вы можете создать строчный фильтр SVG, который рисует линию и затем расширяет текст для маскировки части линии, которую мы хотим сделать прозрачной. Затем вы можете задать фильтру id и ссылаться на него в CSS примерно так filter: url(‘#svg-underline’) .

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

Вот как это выглядит в Chrome и Firefox:

Поддержка в IE, Edge и Safari проблематична. Сложно тестировать поддержку фильтра SVG в CSS. Вы можете использовать директиву @supports с filter , но это проверит лишь работу ссылки на фильтр, но не работу самого фильтра. Мои попытки завершились муторным определением возможностей браузера, это ощутимый недостаток метода.

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

не работает с многострочным текстом;
не работает в IE, Edge и Safari, но вы можете использовать text-decoration в качестве запасного варианта, в Safari он смотриться достойно.

Underline.js (Canvas)

Underline.js завораживает. Я считаю впечатляющим то, что сделала Вентин Жанг за счет владения JavaScript и внимания к деталям. Если вы не видели техническое демо Underline.js, бросайте читать и уделите ему минуту времени. Есть также ее девятиминутный доклад о том, как это работает , но я опишу кратко: подчеркивание рисуется с помощью элементов

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

Я решил упомянуть об этом в доказательство концепции, что

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration . Время пришло.

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

text-decoration-color
text-decoration-skip
text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах - как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать - оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit- . Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.

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

text-decoration-style

Свойство text-decoration-style предлагает такие же возможности оформления, что и у свойства border-style , добавляя кроме этого стиль wavy .

Вот список доступных значений:

dashed
dotted
double
solid

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Чего не хватает

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

После небольшого исследования, я нашел еще пару свойств:

text-underline-width
text-underline-position

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Выводы

Так какой же способ подчеркивания лучший?

Для небольшого текста я рекомендую использовать text-decoration с оптимистичным добавлением text-decoration-skip . Это выглядит немного безвкусно в большинстве браузеров, но подчеркивание в браузерах было таким всегда и люди просто не обратят внимания. Плюс всегда есть шанс, что при наличии у вас терпения, это подчеркивание когда-нибудь будет выглядеть хорошо без необходимости для вас что-то менять, так как это сделают в браузерах.

Для основного текста имеет смысл использовать background-image . Этот подход работает, выглядит замечательно и для него есть миксины Sass . Вы, в принципе, можете пропустить text-shadow , если подчеркивание тонкое или отличается цветом от текста.

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

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

В будущем, когда поддержка в браузерах станет лучше, единственным ответом будет набор свойств text-decoration-* .

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck , в которой рассматриваются те же вопросы.

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

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

В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.

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

сайт - Подчеркивание у ссылок

Ссылка 1 Ссылка 2 Ссылка 3

Описание примера

По умолчанию все популярные браузеры добавляют к ссылкам подчеркивание, которое регулируется свойством CSS . То есть по умолчанию это свойство, для ссылок, имеет значение underline . Используя эти знания, мы и изменяем подчеркивание у ссылок в их разных состояниях.

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

Пример HTML и CSS: пунктирное подчеркивание ссылок

сайт - Создание пунктирного подчеркивания у ссылок

Ссылка 1 Ссылка 2 Ссылка 3

Описание примера

Сначала убираем стандартное подчеркивание у всех ссылок, так как будем использовать нестандартные методы. Затем первой ссылке добавляем нижнюю границу рамки с помощь свойства CSS , причем делаем ее пунктирной (dashed). Это и будет наше подчеркивание. Чтобы при наведении на ссылку подчеркивание убиралось - используем псевдокласс и делаем фон рамки таким же, как и фон страницы, то есть просто скрываем ее. По идее, здесь было бы лучше вообще сделать фон рамки прозрачным (transparent), но IE6 неправильно понимает это значение.
Со второй ссылкой проделываем то же, что и с первой, но только рисуем сплошную линию. Чтобы увеличить расстояние от текста до подчеркивания - задаем ссылке небольшой нижний отступ с помощью свойства CSS .
У нашей третьей ссылки подчеркивание разноцветное, поэтому его мы будем добавлять с помощью фонового изображения. Используем для этого небольшую картинку , которую подключаем через CSS . Позиционируем фон в нижнюю часть ссылки (0 100%) и разрешаем ему дублироваться только по горизонтали (repeat-x). Подчеркивание готово, но прилегает слишком близко к тексту, чтобы это исправить - добавляем ссылке маленький отступ снизу. Теперь все.
В старичках IE6 и IE7 могут возникнуть проблемы с отображением подчеркивания у первой и второй ссылки. Для исправления добавляем свойство zoom :1, которое включает т.н. layout. Это свойство невалидно и его понимают только эти браузеры, поэтому лучше подключить его условными комментариями .

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

сайт - Создание ссылок-блоков

Ссылка-блок 1 Ссылка-блок 2

Описание примера

Для создания ссылок-блоков используем свойство CSS :block, которое превращает их в блочные элементы, создающие до и после себя перевод строки. Если переводы строк не нужны - можно заменить значение на inline-block .
Так как ссылки теперь у нас являются блоками, то если необходимо, мы можем изменять у них ширину (CSS ) или высоту (CSS ).
В этом примере высоту ссылок мы вообще не указываем, а просто задаем им внутренние отступы (CSS ), которые и расширяют блоки.

сайт - Ссылки с рамками под курсором мыши

Ссылка 1 Ссылка 2 Ссылка 3

Описание примера

Все очень просто - с помощью свойства CSS добавляем ссылкам под курсором нужную рамку. Однако, внимание, точно такую же рамку мы добавляем и обычным ссылкам, вот только цвет ее делаем такой же, как фон страницы. То есть попросту скрываем рамку до поры до времени. Это делается для того, чтобы при наведении курсора мыши, ссылки не начали «прыгать» из-за отрисовки рамки.

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

Пример HTML и CSS: создание трехмерных ссылок

сайт - Трехмерные ссылки

Ссылка 1 Ссылка 2 Ссылка 3

Описание примера

С помощью свойства CSS добавляем ссылкам рамки, а с помощью - задаем им цвет. При этом для левой и верхней границы указываем светлый оттенок цвета, а для нижней и правой - темный. Именно благодаря такому распределению цветов мы и получаем ссылки, которые похожи на трехмерные кнопки.
Чтобы при наведении курсора мыши казалось, что кнопки нажимаются - инвертируем у ссылок с псевдоклассом цвета рамок. Для дополнительного эффекта нажатия, задаем относительное позиционирование (CSS :relative) и делаем однопиксельное смещение вверх (CSS :-1px).
Ну и чтобы все совсем было красиво - задаем ссылкам под курсором цвет текста и фона немного темнее, чем у обычных. Готово.

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

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

Картинки Аудио Видео

Описание примера

Ради сокращения кода, задействуем в ссылках два класса - "links" (с общими свойствами) и "image" , "audio" , "video" (персональные для каждой ссылки). Этот момент подробно описан в классах справочника CSS.
Наши иконки имеют размер 50x50 пикселей и будут присутствовать у ссылок в качестве фона (CSS ), который мы расположим по центру вверху (50% 0) и запретим ему размножаться (no-repeat).
Добавляем ссылкам внутренние отступы (CSS ), чтобы текст в ссылках не прилегал к краям. При этом верхний отступ делаем равным высоте иконок, чтобы текст не накладывался на них, ведь иконки у нас - это фон.
Если текста в ссылках будет очень мало, то изображения иконок обрежутся по бокам. Чтобы этого не произошло, задаем ссылкам такую минимальную ширину (CSS ), чтобы она как минимум была равна ширине иконок. В нашем случае надо получить минимальную ширину в 50px, однако мы задаем 40px, так как еще 10px добавится благодаря боковым отступам.
Чтобы минимальная ширина сработала - преобразуем ссылки во встроенные блоки (CSS :inline-block).

IE6 придется немного «пролечить»:

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

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

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

абсолютное позиционирование */ top: 0; /* нулевое смещение сверху */ } .links:before { content: url("images/left_bok.png"); /* изображение левого бока */ left: 0; /* нулевое смещение слева */ } .links:hover:before { content: url("images/left_bok_hover.png"); /* изображение левого бока под курсором мыши */ } .links:after { content: url("images/right_bok.png"); /* изображение правого бока */ right: 0; /* нулевое смещение справа */ } .links:hover:after { content: url("images/right_bok_hover.png"); /* изображение правого бока под курсором мыши */ }

Ссылка 1 Ссылка 2

Описание примера

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

Используя свойство CSS :inline-block делаем ссылки встроенными блоками. В частности, это необходимо для того, чтобы мы могли указать ссылкам точную высоту, соответствующую высоте изображений.
Убираем подчеркивание и выравниваем текст по центру (CSS :center). Вообще, в нашем случае центровать текст не обязательно, так как ссылки подстраиваются под размер текста в них и ему просто некуда выравниваться. Но вот если потребуется увеличить ширину ссылок (например, до 150px), то такое выравнивание будет как нельзя кстати.
Чтобы изменить внешний вид ссылок, когда они находятся под курсором мыши - добавляем в стили дополнительные селекторы с псевдоклассом CSS , в которых указываем наши части изображений, но без тени.

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

Суть изменения состоит в том, что с помощью expression мы интегрируем внутрь ссылок все те же два тега , но только без атрибутов содержащих стили. Вместо этого мы добавляем тегам классы "left_bok" и "right_bok" , а стили для них выносим и пишем ниже. Эти стили практически полностью такие же, как и в основном коде CSS, но только здесь все картинки идут в качестве фона тегов.

Закругленные углы ссылок (вариант два)

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

сайт - Создание закруглений у ссылок

Ссылка 1 Ссылка 2

Описание примера

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

С помощь свойства CSS :inline-blok преобразуем ссылки во встроенные блоки. Затем убираем у них подчеркивание, добавляем рамку и выравниваем текст по центру.
Так как псевдоэлементы, с помощь которых мы закругляем углы, находятся внутри ссылок, то их содержимое тоже выравнивается по центру, а, следовательно, уголки-картинки, добавленные свойством CSS , не ставятся по углам, как нам надо. Чтобы это исправить, добавляем им :left, возвращая значение, которое браузеры используют по умолчанию.