Če želite na svoja spletna mesta dodati vodoravne linije v ločilnem slogu, vaše značilne možnosti vključujejo dodajanje slikovnih datotek iz teh vrstic na svojo stran, toda to zahteva, da vaš brskalnik pridobi in naloži te datoteke, kar bi lahko negativno vplivalo na spletno mesto izvedba. Prav tako lahko uporabite lastnost robov CSS, da dodate robove, ki delujejo kot vrstice bodisi na vrhu ali na dnu elementa, kar ustvarja ločnico.
Ali - še bolje - uporabite element HTML za horizontalno pravilo.
Horizontalni pravilnik
Privzeti videz vodoravnih vrstic pravil ni idealen. Če želite, da bodo videti lepše, dodajte CSS, da prilagodite vizualni videz teh elementov, da bodo v skladu s tem, kako želite videti vaše spletno mesto.
Osnovna HR-oznaka je prikazana na način, na katerega želi brskalnik prikazati. Sodobni brskalniki običajno prikazujejo neustrezne HR-oznake s širino 100 odstotkov, višino 2 slikovnih pik in 3-mestno mejo v črni barvi za ustvarjanje linije.
Širina in višina sta v skladu z brskalniki
Edini slogi, ki so v vseh spletnih brskalnikih dosledni, so širina in slogi. Ti določajo, kako velika bo linija. Če ne določite širine in višine, je privzeta širina 100%, privzeta višina pa 2 slikovna pika.
V tem primeru je širina 50 odstotkov starševskega elementa (upoštevajte, da spodnji primeri spodaj vključujejo inline sloge. V teh proizvodnih nastavitvah bi bili ti slogi dejansko napisani v zunanjem slognem listu, ki bodo lažje upravljali na vseh vaših straneh):
style = "širina: 50%;">
V tem primeru je višina 2em: style = "višina: 2em;"> V sodobnih brskalnikih brskalnik gradi linijo z nastavitvijo meje. Torej, če odstranite rob s slogovno lastnostjo, bo na tej strani izginila črta. Kot vidite (v tem primeru ne boste videli ničesar, saj bodo vrstice nevidne): style = "border: none;">
Če prilagodite velikost, barvo in slog, bo vrstica videti drugačna in ima enak učinek v vseh sodobnih brskalnikih. Na primer, pri tej predstavitvi je meja rdeča, črta in široka 1px: style = "border: 1px je padel # 000;">
Ampak, če spremenite mejo in višino, so slogi v zelo zastarelih brskalnikih nekoliko drugačni kot v modernih brskalnikih. Kot lahko vidite v tem primeru, če ga vidite v IE7 in spodaj (brskalnik, ki je zastarel in zastarelo, Microsoft ne podpira več), je v notranjih vrsticah, ki se ne prikazujejo v drugih brskalnikih (vključno z IE8 in več) : style = "višina: 1.5em; širina: 25em; meja: 1px solid # 000;">
Ti starinski brskalniki danes v spletnem dizajnu niso zares zaskrbljeni, saj so jih večinoma nadomeščali z bolj sodobnimi možnostmi. Namesto barve lahko določite sliko za ozadje za vaše horizontalno pravilo, tako da bo izgledal natanko tako, kot želite, vendar se pri vašem označevanju še vedno prikaže semantično. V tem primeru smo uporabili sliko, ki ima tri valovite črte. Če ga nastavite kot ozadje brez ponavljanja, ustvari prelom v vsebini, ki izgleda skoraj tako, kot vidite v knjigah: style = "height: 20px; background: #fff url (aa010307.gif) center za pomikanje brez ponavljanja; border: none;"> S CSS3 lahko svoje vrstice naredite zanimivejše. HR element je tradicionalno a horizontalno line, vendar s preoblikovanjem CSS lastnosti, lahko spremenite, kako izgledajo. Najljubša preobrazba HR elementa je sprememba vrtenja. Svoj HR element lahko zavrtite tako, da je le nekoliko diagonalna: hr {-moz-transform: vrtite (10deg);-webkit-transform: vrtite (10deg);-o-transform: vrtite (10deg);-ms-transformacija: vrtite (10deg);spremenite: vrtite (10deg);}
Ali ga lahko vrtite tako, da je povsem navpična: hr {-moz-transform: vrtite (90deg);-webkit-transform: vrtite (90deg);-o-transform: vrtite (90deg);-ms-transformacija: vrtite (90deg);spremenite: vrtite (90deg);}
Ne pozabite, da ta tehnika zavrti HR glede na trenutno lokacijo v dokumentu, zato boste morda morali prilagoditi pozicioniranje, da ga dobite tam, kjer želite. Priporočljivo je, da to uporabite za dodajanje navpičnih črt na oblikovanje, vendar je to način, kako ustvariti zanimiv učinek. Ena stvar, ki jo nekateri ljudje namesto uporabe HR elementa, je, da se zanašajo na meje drugih elementov. Včasih pa je HR veliko bolj priročen in lažji za uporabo, kot pa poskuša postaviti meje. Težave z nekaterimi različicami brskalnikov lahko postavijo mejo celo bolj zahtevno. Spreminjanje meja je lahko izziv
Naredite dekorativno linijo s sliko iz ozadja
Preoblikovanje HR elementov
Drug način za pridobivanje črt na svojih straneh
