Chcete-li na své webové stránky přidat vodorovné čáry ve stylu oddělovače, jedna z možností zahrnuje přidání obrázkových souborů těchto řádků vaše stránka, ale to by vyžadovalo, aby váš prohlížeč tyto soubory načetl a načetl, což by mohlo mít negativní dopad na výkon webu. Můžete také použít CSS hraniční vlastnost přidat hranice které fungují jako čáry buď nahoře nebo dole na prvku, čímž se efektivně vytvoří oddělovací čára.
Nebo - ještě lépe - použijte HTML prvek pro vodorovné pravidlo.
Prvek vodorovného pravidla
Výchozí vzhled vodorovných čar pravidel není ideální. Chcete-li, aby vypadaly hezčí, přidejte CSS a upravte vizuální vzhled těchto prvků tak, aby odpovídaly vzhledu vašeho webu.
Základní značka HR zobrazuje způsob, jakým ji chce prohlížeč zobrazit. Moderní prohlížeče obvykle zobrazují nestylované značky HR o šířce 100 procent, výšce 2 pixely a 3D ohraničení černě, aby vytvořily čáru.
Šířka a výška jsou konzistentní napříč prohlížeči
Jediné styly, které jsou konzistentní napříč webovými prohlížeči, jsou
šířka a styly. Ty definují, jak velká bude čára. Pokud nedefinujete šířku a výšku, výchozí šířka je 100 procent a výchozí výška jsou 2 pixely.V tomto příkladu je šířka 50 procent nadřazeného prvku (tyto příklady níže zahrnují všechny vložené styly. V produkčním nastavení by tyto styly byly skutečně napsány v externí šabloně stylů pro snadnou správu na všech vašich stránkách):
style = "width: 50%;">
A v tomto příkladu je výška 2em:
style = "height: 2em;">
Změna hranic může být náročná
V moderních prohlížečích sestavuje prohlížeč čáru úpravou ohraničení. Pokud tedy odstraníte ohraničení pomocí vlastnosti style, čára na stránce zmizí. Jak vidíte (v tomto příkladu nic neuvidíte, protože řádky budou neviditelné):
style = "border: none;">
Nastavením velikosti, barvy a stylu ohraničení bude linka vypadat jinak a má stejný účinek ve všech moderních prohlížečích. Například v této ukázce je ohraničení červené, přerušované a široké 1px:
style = "border: 1px dashed # 000;">
Vytvořte dekorativní čáru s obrázkem na pozadí
Místo barvy definujte obrázek pozadí pro své vodorovné pravidlo tak, aby vypadal přesně tak, jak chcete, ale přesto se ve vašem značení zobrazuje sémanticky. V tomto příkladu jsme použili obrázek, který má tři vlnovky. Nastavením jako obrázek na pozadí bez opakování vytvoří přerušení obsahu, který vypadá téměř jako v knihách:
style = "výška: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; ohraničení: žádné; ">
Transformace HR prvků
S CSS3 můžete také své řádky udělat zajímavějšími. Element HR je tradičně a horizontální řádek, ale pomocí vlastnosti transformace CSS můžete změnit jejich vzhled. Oblíbenou transformací prvku HR je změna rotace.
Otočte svůj HR prvek tak, aby byl jen mírně úhlopříčný:
hr {
-moz-transformace: otočit (10deg);
-webkit-transformace: rotace (10 stupňů);
-o-transformace: otočit (10deg);
-ms-transformace: otočit (10deg);
transformace: otočit (10 stupňů);
}
Nebo jej můžete otočit tak, aby byl zcela svislý:
hr {
-moz-transformace: otočit (90deg);
-webkit-transformace: otočit (90deg);
-o-transformace: otočit (90deg);
-ms-transformace: otočit (90deg);
transformace: otočit (90 stupňů);
}
Tato technika otáčí HR na základě jeho aktuálního umístění v dokumentu, takže možná budete muset upravit jeho umístění, abyste jej dostali tam, kam chcete. Nedoporučuje se používat toto k přidání svislých čar do designu, ale je to zajímavý efekt.
Další způsob, jak získat řádky na svých stránkách
Jedna věc, kterou někteří lidé dělají místo toho, aby použili prvek HR, je spoléhat se na hranice jiných prvků. Někdy je ale HR mnohem pohodlnější a snadněji použitelný než pokus o nastavení hranic. Problémy s krabicovým modelem některých prohlížečů mohou nastavení ohraničení ještě ztížit.