Изменение стиля горизонтальной линии
Как правило, при разметке документа следует избегать использования элементов, выполняющих чисто визуальные функции, такие как гори- зонтальная линия (hr). Документ, структура которого описывает назна- чение его элементов, легче поддерживать; он быстрее загружается и бо- лее понятен для поисковых систем. Эффекта, аналогичного использо- ванию горизонтальной линии, можно добиться с помощью рамок суще- ствующих элементов.
Однако в определенных случаях использование hr может оказаться оптимальным способом достижения желаемого результата или необхо- димым средством оформления неразмеченного стилями контента для просмотра в старых броузерах, плохо поддерживающих CSS.
Решение
С помощью CSS можно изменить цвет, высоту и ширину горизонталь- ной линии. Однако это следует делать с осторожностью, поскольку один и тот же эффект может по-разному выглядеть в различных броузе- рах. К примеру, в следующем примере используются два свойства, col- or и background-color, с одним и тем же значением, поскольку броузеры, основанные на движке Gecko, например Firefox, изменяют цвет линии с помощью свойства background-color, а Internet Explorer – с помощью color:
chapter02/hrstyle.css (фрагмент)
hr {
border: none;
background-color: #256579;
color: #256579;
height: 2px;
width: 80%;
}
Результат можно увидеть на рис. 2.19.
Рис. 2.19. Изменение цвета, высоты и ширины горизонтальной линии
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Позиционирование блока с контентом (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
