Ak chcete na svoje webové stránky pridať vodorovné čiary v štýle oddeľovača, jednou z možností je pridanie obrazových súborov týchto čiar do vašu stránku, ale to by vyžadovalo, aby váš prehliadač tieto súbory načítal a načítal, čo by mohlo mať negatívny vplyv na výkon stránky. Môžete tiež použiť CSS hraničný majetok pridať hranice ktoré fungujú ako čiary buď v hornej, alebo v dolnej časti prvku, čím efektívne vytvárajú oddeľovaciu čiaru.
Alebo - ešte lepšie - použite HTML prvok pre horizontálne pravidlo.
Prvok horizontálneho pravidla
Predvolený vzhľad vodorovných čiar pravidla nie je ideálny. Ak chcete, aby vyzerali krajšie, pridajte CSS a upravte vizuálny vzhľad týchto prvkov tak, aby zodpovedali tomu, ako chcete, aby váš web vyzeral.
Základná značka HR zobrazuje spôsob, akým ju chce prehliadač zobraziť. Moderné prehliadače zvyčajne zobrazujú neštýlované značky HR so šírkou 100 percent, výškou 2 pixely a čiernym orámovaním 3D, ktoré vytvárajú čiaru.
Šírka a výška sú v prehliadačoch konzistentné
Jediné štýly, ktoré sú konzistentné vo všetkých webových prehľadávačoch, sú šírka a štýly. Tieto definujú, aká veľká bude čiara. Ak nedefinujete šírku a výšku, predvolená šírka je 100 percent a predvolená výška sú 2 pixely.
V tomto príklade je šírka 50 percent nadradeného prvku (všimnite si, že nižšie uvedené príklady zahŕňajú všetky vložené štýly. V produkčnom prostredí by tieto štýly boli pre ľahkú správu na všetkých vašich stránkach skutočne napísané v externej šablóne so štýlmi):
style = "width: 50%;">
A v tomto príklade je výška 2em:
style = "height: 2em;">
Zmena hraníc môže byť náročná
V moderných prehľadávačoch prehľadávač vytvára čiaru úpravou orámovania. Ak teda odstránite orámovanie s vlastnosťou style, riadok na stránke zmizne. Ako vidíte (v tomto príklade nič neuvidíte, pretože riadky budú neviditeľné):
style = "border: none;">
Nastavením veľkosti, farby a štýlu orámovania bude riadok vyzerať inak a bude mať rovnaký efekt vo všetkých moderných prehliadačoch. Napríklad v tejto ukážke je orámovanie červené, prerušované a široké 1px:
style = "border: 1px dashed # 000;">
Vytvorte ozdobnú čiaru s obrázkom na pozadí
Namiesto farby definujte pre svoje vodorovné pravidlo obrázok na pozadí tak, aby vyzeral presne tak, ako chcete, ale stále sa sémanticky zobrazuje v značke. V tomto príklade sme použili obrázok, ktorý má tri vlnovky. Nastavením ako obrázok na pozadí bez opakovania vytvára prerušenie obsahu, ktorý vyzerá takmer ako v knihách:
style = "výška: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; ohraničenie: žiadne; ">
Transformácia HR prvkov
S CSS3 môžete tiež urobiť svoje linky zaujímavejšími. Prvkom HR je tradične a horizontálne riadok, ale pomocou vlastnosti transformácie CSS môžete zmeniť ich vzhľad. Obľúbenou transformáciou na prvku HR je zmena rotácie.
Otočte svoj prvok HR tak, aby bol len mierne diagonálny:
hr {
-moz-transformácia: otočiť (10 stupňov);
-webkit-transformácia: otočenie (10deg);
-o-transformácia: otočiť (10 stupňov);
-ms-transformácia: otočenie (10deg);
transformácia: otočenie (10 stupňov);
}
Alebo ho môžete otočiť tak, aby bol úplne zvislý:
hr {
-moz-transformácia: otočiť (90 stupňov);
-webkit-transformácia: otočenie (90 stupňov);
-o-transformácia: otočiť (90 stupňov);
-ms-transformácia: otočenie (90deg);
transformácia: otočenie (90 stupňov);
}
Táto technika rotuje HR na základe jeho aktuálneho umiestnenia v dokumente, takže bude pravdepodobne potrebné upraviť jeho umiestnenie, aby ste sa dostali tam, kam chcete. Neodporúča sa používať toto na pridanie zvislých čiar k dizajnu, ale je to zaujímavý efekt.
Ďalším spôsobom, ako získať riadky na svojich stránkach
Jedna vec, ktorú niektorí ľudia robia namiesto použitia prvku HR, je spoliehať sa na hranice iných prvkov. Niekedy je však HR oveľa pohodlnejšie a ľahšie použiteľné ako pokúšať sa nastaviť hranice. Problémy s krabicovým modelom niektorých prehľadávačov môžu nastavenie hranice ešte sťažiť.