Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега "а" (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.

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

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

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

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство 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 линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

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

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

Теги, делающие текст заголовками

Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).

Эти теги могут использоваться с параметром горизонтального выравнивания align . Возможные значения этого параметра:

• left - слева,
• right - справа,
• center - по центру,
• jastify - по ширине.

Пример кода:

Теги разделения на абзацы и переноса строки

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

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

У тега

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

• left - слева,
• right - справа,
• center - по центру,
• jastify - по ширине.

Пример кода:

Форматирование html

Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по левому краю.

Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по правому краю.

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

Это просто текст.
Это текст с новой строки.

В окне браузера это будет выглядеть так:

Теги, выделяющие текст курсивом

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

Пример кода:

Форматирование html Этот текст в тегах cite
Этот текст в тегах dfn
Этот текст в тегах em
Этот текст в тегах i

В окне браузера это будет выглядеть так:

Теги, выделяющие текст полужирным шрифтом

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

Пример кода:

Этот текст в тегах strong
Этот текст в тегах b

В окне браузера это будет выглядеть так:

Теги, выделяющие текст подчеркиванием

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

Пример кода:

Форматирование html Просто текст

Этот текст в тегах u

В окне браузера это будет выглядеть так:

Теги, выводящие текст моноширинным шрифтом

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

Пример кода:

Форматирование html Просто текст
Этот текст в тегах kbd
Этот текст в тегах samp
Этот текст в тегах tt

В окне браузера это будет выглядеть так:

Теги, выводящие текст в верхнем и нижнем индексах

Теги выводят текст ниже уровня строки шрифтом меньшего размера.
Теги выводят текст выше уровня строки шрифтом меньшего размера.
Удобны для вывода математических и химических формул.

Пример кода:

Форматирование html y=x 2 - уравнение параболы.

H 2 O - формула воды.

В окне браузера это будет выглядеть так:

Тег font и его параметры

Теги указывают параметры шрифта текста:

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

size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.

color - цвет текста (по умолчанию - черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу , выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице
Понятнее будет на примере:

Выделим слово "текст" красным цветом:

Текст

Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):

Текст

А теперь - теги полужирного начертания:

Текст

Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариации подчеркивания

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

демонстрация подчеркивания

HTML

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

CSS

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

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

A{ display: inline-block; position: relative; text-decoration: none; }

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

A::before{ display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in-out; left: 50%; bottom: 0; }

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство transition . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом::after:

A::after{ display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; }

A:hover::before{ width: 50%; left: 0; } a:hover::after{ width: 50%; }

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