За да добавите хоризонтални линии в стил на разделител към вашите уебсайтове, една от опциите включва добавяне на файлове с изображения на тези редове вашата страница, но това ще изисква браузърът ви да изтегли и зареди тези файлове, което може да има отрицателен ефект На изпълнение на сайта. Можете също да използвате CSS граничен имот за добавяне граници които действат като линии или в горната или в долната част на елемент, създавайки ефективно вашата разделителна линия.
Или - още по-добре - използвайте HTML елемент за хоризонталното правило.
Хоризонталният елемент на правилото
По подразбиране външният вид на хоризонталните линии на правила не е идеален. За да изглеждат по-добре, добавете CSS, за да коригирате визуалния облик на тези елементи, така че да съответства на начина, по който искате да изглежда вашият сайт.
Основен HR таг показва начина, по който браузърът иска да го покаже. Съвременните браузъри обикновено показват нестилизирани HR тагове с ширина 100 процента, височина 2 пиксела и 3D граница в черно, за да създадат линията.
Ширината и височината са последователни в различните браузъри
Единствените стилове, които са съвместими в уеб браузърите, са ширина и стилове. Те определят колко голяма ще бъде линията. Ако не дефинирате ширината и височината, ширината по подразбиране е 100 процента, а височината по подразбиране е 2 пиксела.
В този пример ширината е 50 процента от родителския елемент (обърнете внимание, че тези примери по-долу включват вградени стилове. В производствена обстановка тези стилове всъщност ще бъдат написани във външен лист със стилове за улесняване на управлението на всичките ви страници):
style = "width: 50%;">
И в този пример височината е 2em:
style = "височина: 2em;">
Промяната на границите може да бъде предизвикателна
В съвременните браузъри браузърът изгражда линията чрез коригиране на границата. Така че, ако премахнете границата със свойството style, редът ще изчезне на страницата. Както можете да видите (е, няма да видите нищо, тъй като линиите ще бъдат невидими) в този пример:
style = "border: none;">
Регулирането на размера, цвета и стила на рамката прави линията да изглежда различно и има същия ефект във всички съвременни браузъри. Например, в тази демонстрация границата е червена, пунктирана и 1px широка:
style = "border: 1px тире # 000;">
Направете декоративна линия с фоново изображение
Вместо цвят, дефинирайте фоново изображение за вашето хоризонтално правило, така че да изглежда точно така, както искате, но все пак да се показва семантично във вашата маркировка. В този пример използвахме изображение, което е от три вълнообразни линии. Като го зададете като фоново изображение без повторение, създава пробив в съдържанието, който изглежда почти като в книгите:
style = "височина: 20px; фон: #fff url (aa010307.gif) център за превъртане без повторение; граница: няма; ">
Трансформиране на HR елементи
С CSS3 можете също да направите линиите си по-интересни. HR елементът традиционно е a хоризонтална линия, но със свойството за преобразуване на CSS можете да промените начина, по който изглеждат. Любима трансформация на елемента HR е промяната на въртенето.
Завъртете вашия HR елемент, така че да е само малко по диагонал:
hr {
-moz-трансформация: завъртане (10deg);
-webkit-трансформация: завъртане (10deg);
-o-преобразуване: завъртане (10deg);
-ms-преобразуване: завъртане (10deg);
трансформиране: завъртане (10deg);
}
Или можете да го завъртите, така че да е напълно вертикално:
hr {
-moz-трансформация: завъртане (90deg);
-webkit-трансформация: завъртане (90deg);
-o-преобразуване: завъртане (90deg);
-ms-преобразуване: завъртане (90deg);
трансформиране: завъртане (90 градуса);
}
Тази техника завърта HR в зависимост от текущото му местоположение в документа, така че може да се наложи да коригирате позиционирането, за да го получите там, където искате. Не се препоръчва да използвате това, за да добавите вертикални линии към дизайна, но това е интересен ефект.
Друг начин да получите линии на страниците си
Едно нещо, което някои хора правят, вместо да използват HR елемента, е да разчитат на граници на други елементи. Но понякога HR е много по-удобен и лесен за използване, отколкото да се опитвате да зададете граници. Проблемите с модела на кутията на някои браузъри могат да направят настройването на границата още по-сложно.