|
|
Интересные статьи
|
|
|
|
|
Подчеркивание текста тег HR 
Здесь мы подробно разберем тег HR и коснемся свойства CSS border-bottom. С помощью тега HR в html создается линия на всю ширину веб-страницы, которую можно использовать для подчеркивания заголовков или для выделения абзацев в тексте.
Эту тему я начал развивать в статье основы HTML работа с текстом. Сейчас хочу остановиться на ней поподробнее.
У нас есть два стандарта верстки сайта – html и xhtml. В каждом случае синтаксис тега HR несколько отличается. В html допустимо использовать в написании тегов заглавные буквы. В частности записи <hr> и <HR> равнозначны. В XHTML написание этого тега имеет только один вариант – <hr />. Обратите внимание, что по стандарту xhtml все одиночные теги должны быть закрыты.
Если мы вставим между абзацами веб-страницы запись <hr />, то получим:
Начертание линии, созданной с помощью этого тега, отдано на откуп браузерам. В каждом браузере она рисуется по-своему. Например, в Internet Explorer 9 и Google Chrome 14 чертится тонкая линия. А в Mozilla Firefox 6.0 и Opera 11.5 к этой тонкой линии добавляется эффект объемности.
Обратите внимание. Если в CSS настройках веб-страницы стоит
* {border:0; margin:0;}
то в ряде браузеров перестанет работать тег HR. Линия, которую вычерчивает этот тег, пропадет. Кстати границы у таблиц тоже пропадут.
Можно отказаться от эффекта объемности. В стандарте HTML пишем: <hr noshade>. Для XHTML требуется более детальная расшифровка: <hr noshade="noshade" />. В итоге получаем линию:
Эффекта объемности нет, но линия получилась более толстая. Методами html можно регулировать толщину линии, создаваемой тегом HR, с помощью атрибута size. Пример:
Код <hr noshade="noshade" size="1" />
<hr noshade="noshade" size="3" />
Однако по непонятной причине в IE 9 линия получается толще, чем в других браузерах.
По умолчанию линия, создаваемая тегом HR, чертится на всю ширину страницы. Это можно изменить с помощью стилей и дополнительных атрибутов этого тега. Чтобы линия плотнее прижималась к заголовку, тег HR имеет смысл поместить внутрь, например, тега заголовков H1 – H6
Заметьте, что помещение тега HR внутрь спаренного тега абзаца P не является корректным.
Первый пример ограничения длины HR: Заголовок и HR
Код <h5 style="margin-left:30px; margin-right:30px;">Заголовок и HR<hr /></h5>
Тут мы использовали отступы, созданные с помощью свойства margin.
А если применить стили к тегу HR? Можно попытаться использовать свойство CSS color, для задания цвета вычерчиваемой линии: <hr noshade="noshade" size="2" style="color:lime" />. Однако браузеры Opera и IE 9 игнорируют CSS и не меняют цвет линии. Эта запись корректно работает только в Mozilla Firefox 6.0.
Но на наше счастье для тега HR предусмотрен атрибут color. В итоге нужный цвет линии мы все-таки получаем:
<hr noshade="noshade" size="2" color="lime" />
Это единственно правильный способ задать цвет линии тега HR, который корректно отображается во всех браузерах.
Второй пример ограничения длины линии тега HR заключается в применении атрибута width (ширина). Получаем:
<hr noshade="noshade" size="2" color="#cc33cc" width="200px" align="left" />
Кстати ширину линии для HR можно задать и через стили записью style="width:200px". Все браузеры этот способ также признают за корректный. В примере мы так же использовали атрибут align. С помощью него можно выровнять линию по левому краю (left), по правому краю (right) и по центру (center).
Однако если в CSS настройках веб-страницы стоит запись:
*{margin: 0}
то атрибут Align тега HR работать будет только в IE 9. В остальных браузерах линия всегда будет прижата к левому краю.
Однако если мы хотим создать подчеркивание прямо под нужным текстом и на его ширину, то разумнее ограничить этот текст тегом SPAN и применить к этому тегу свойство CSS border-bottom.
Подчеркнул нужный текст строки
<p>Подчеркнул <span style="border-bottom:2px solid green;">нужный</span> текст</p>
Мы задали толщину линии в 2 пикселя; вид линии – сплошная (solid); и цвет линии.
Подробнее о параметрах border-bottom смотрим на сайте Htmlbook.ru.
Для владельцев CMS. Мой сайт создан в CMS MODx. В нее, как и во многие другие cms, встроен редактор контента TinyMCE. Вот уж кто может попортить крови, нагло изменяя ваш html код. В частности TinyMCE по умолчанию не допускает применять к тегу HR атрибуты Color и Width, считая их не валидными.
Как это исправить? Если у вас одна из последних версий TinyMCE, то делаем так. Идем MODx Manager – Элементы – Управление элементами – Плагины - TinyMCE. В окне редактировать плагин TinyMCE открываем вкладку Конфигурация плагина. В форму Custom Parameters вставляем следующий код:
extended_valid_elements:"noindex, hr[color|width|size|noshade|style|align]"
Этой строкой я разрешил запрещенный тег <noindex> (пригодится он) и массу атрибутов для тега HR. Теперь TinyMCE мешать нам не будет.
Вывод. Тег HR по-разному трактуется разными браузерами. Поэтому он не подходит для использования там, где требуется жесткое соблюдение разметки веб-страницы. Плюс Google Chrome игнорирует атрибут этого тега Color.
Все, что знал о теге HR, написал. Надеюсь, эта статья вам поможет. Источник: http://www.greenlight5.com
|
|
|
|