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