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


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

  • Подчеркнутый текст читается хуже, чем обычный. С учетом того, что чтение с экрана монитора комфортней менее, нежели чтение с листа бумаги, данный фактор становится важным для повышения удобства информации.
  • На веб-страницах подчеркивание ссылок стало определенным стандартом. Когда мы видим подчеркнутый текст, то воспринимаем его, в силу привычки, как ссылку. Но если это не так, получаем раздражение, что же это, текст выглядит как ссылка, а при этом ссылкой не является.

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

    Использование тега HR

    Тег HR создает горизонтальную линию определенной толщины и ширины. Перед линией автоматически добавляется перенос строки. Чтобы от данной особенности избавиться, тег HR можно поместить внутри тега, определяющего заголовок (пример 1).

    Пример 1. Создание заголовка с линией
    <H2>Заголовок с линией (первый способ)</H2><br>
    <HR noshade size=2>

    <H2>Заголовок с линией (второй способ)<HR noshade size=2></H2>

    Заголовок с линией (первый способ)

    Заголовок с линией (второй способ)

    Цвет линии можно задавать параметром color тега HR. Такие линии, как показано в примере 1, имеют ширину фиксированной длины. Если она явно не указана, ширина линии становится равной ширине окна браузера или, как в данном случае, ширине таблицы. Когда захочется создать подчеркивание именно под текстом, тег HR уже не поможет и придется переходить к таблицам или стилям.

    Использование таблиц

    С помощью таблиц легко создавать разные линии, заливая нужным цветом определенную ячейку фиксированной высоты. Теги H1 и подобные ему, лучше не применять. При их использовании получается перенос строки и ненужный отступ. В примере 2 размер шрифта варьируется стилем, который применяется к тегу SPAN.

    Пример 2. Создание подчеркивания с помощью таблицы
    <table cellpadding=0 cellspacing=0>
    <tr>
      <td>
      <span style="font-size: 220%">Как поймать льва</span>
     </td>
    </tr>
    <tr>
      <td height=4 bgcolor=red></td>
    </tr>
    </table>

    Как поймать льва

    Расстоянием от линии до текста можно управлять параметрами таблицы cellpadding и cellspacing или задавая настройки стиля. Цвет линии определяется параметром bgcolor.

    Использование стилей

    Использование стилей, пожалуй, один из самых удобных способов создания линий под текстом. Для этого применим свойство CSS — border-bottom. Данный атрибут сразу задает стиль линии, ее толщину и цвет (пример 3).

    Пример 3. Создание линии с помощью стилей
    <span style="border-bottom: 2px solid red; font-size: 220%">Заголовок</span>

    Лучше и удобней прописать стиль сразу для тега заголовка (пример 4).

    Пример 4. Создание стиля заголовка с подчеркиванием
    <style>
    H1 { border-bottom: 2px solid red; font-size: 220% }
    </style>

    <H1>Заголовок</h1>

    Заголовок

    Тут всплывает одна особенность в использовании данного способа. Заменяя SPAN на другой блочный тег, например, на DIV, параграф P или теги H1 (пример 4), получим линию шириной во все окно, как и в примере 1. Тег SPAN, следовательно, подходит как нельзя лучше для создания именно подчеркнутого текста. Однако браузер Internet Explorer 4/5 содержит ошибку и не показывает результат использования стилей для встроенных элементов. Поэтому, мы увидим желаемый результат в других браузерах, но не в IE. Начиная с версии 5.5, эта ошибка была устранена.

    Выводы

  • Использование таблиц для создания подчеркнутого текста является наиболее универсальным способом, который работает во всех браузерах. Однако, управлять им очень неудобно, ведь для того, чтобы установить другой цвет линии, придется вносить изменения во все страницы, где встречается данный код.
  • Стили лучше всего подходят для гибкой модификации кода, но нелепая ошибка в браузере Internet Explorer 4/5 сводит усилия на нет. В частности, пример 3 в этом браузере работать не будет.
  • Просто горизонтальную линию, которая не обязательно должна быть такой же ширины, как и сам текст, можно создать с помощью тега HR (пример 1) или стилями, как показано в примере 4.

    Следующая статья     Список статей    

    Предыдущий раздел