Če želite na svoja spletna mesta dodati vodoravne črte v obliki ločila, ena od možnosti vključuje dodajanje slikovnih datotek teh vrstic strani, vendar bi to zahtevalo, da brskalnik pridobi in naloži te datoteke, kar bi lahko imelo negativen učinek na uspešnost spletnega mesta. Lahko uporabite tudi CSS mejno lastnost za dodajanje meje ki delujejo kot črte na vrhu ali na dnu elementa in tako ustvarijo ločilno črto.
Ali - še bolje - uporabite HTML element za vodoravno pravilo.
Element vodoravnega pravila
Privzeti videz vodoravnih črt pravil ni idealen. Če želite, da bodo videti lepše, dodajte CSS, da prilagodite vizualni videz teh elementov tako, da bo izgledal tako, da bo videti vaše spletno mesto.
Osnovna oznaka HR prikazuje način, kako ga želi prikazati brskalnik. Sodobni brskalniki običajno prikazujejo neustrezne oznake HR s širino 100 odstotkov, višino 2 slikovnih pik in 3D obrobo v črni barvi, da ustvarijo črto.
Širina in višina sta skladna med brskalniki
Edini slogi, ki so skladni v spletnih brskalnikih, so
premer in slogi. Ti določajo, kako velika bo črta. Če ne določite širine in višine, je privzeta širina 100 odstotkov, privzeta višina pa 2 slikovni piki.V tem primeru je širina 50 odstotkov nadrejenega elementa (upoštevajte, da ti primeri spodaj vključujejo vdelane sloge. V produkcijski nastavitvi bi bili ti slogi dejansko napisani v zunanjem slogovnem listu zaradi lažjega upravljanja na vseh vaših straneh):
style = "width: 50%;">
In v tem primeru je višina 2em:
style = "height: 2em;">
Spreminjanje meja je lahko izzivalno
V sodobnih brskalnikih brskalnik gradi črto s prilagajanjem obrobe. Torej, če odstranite obrobo z lastnostjo sloga, bo vrstica na strani izginila. Kot lahko vidite (no, v tem primeru ne boste videli ničesar, saj bodo črte nevidne):
style = "border: none;">
Prilagajanje velikosti obrobe, barve in sloga naredi črto drugačno in ima enak učinek v vseh sodobnih brskalnikih. Na primer, v tej predstavitvi je obroba rdeča, črtkana in široka 1 slikovnih pik:
style = "border: 1px črtkana # 000;">
Naredite okrasno črto s sliko v ozadju
Namesto barve za vodoravno pravilo določite sliko v ozadju, tako da bo videti natanko tako, kot želite, vendar se v označevanju še vedno prikaže pomensko. V tem primeru smo uporabili sliko treh valovitih črt. Z nastavitvijo kot slika ozadja brez ponovitve ustvari prelom v vsebini, ki je videti skoraj tako kot v knjigah:
style = "višina: 20px; ozadje: #fff url (aa010307.gif) center za drsenje brez ponavljanja; border: none; ">
Preoblikovanje HR elementov
S CSS3 lahko svoje vrstice naredite tudi bolj zanimive. Element HR je tradicionalno a vodoravno line, vendar z lastnostjo preoblikovanja CSS lahko spremenite njihov videz. Najljubša preobrazba elementa HR je sprememba rotacije.
Zavrtite svoj element HR tako, da bo le nekoliko diagonalno:
h {
-moz-preobrazba: zasukaj (10deg);
-webkit-transform: zasukaj (10deg);
-o-preoblikovanje: vrtenje (10 stopinj);
-ms-transform: zasukaj (10deg);
preoblikovanje: vrtenje (10 stopinj);
}
Lahko pa ga zasukate tako, da je popolnoma navpičen:
h {
-moz-preobrazba: zasukaj (90deg);
-webkit-transformacija: zasukaj (90deg);
-o-preoblikovanje: vrtenje (90 stopinj);
-ms-transform: zasukaj (90deg);
preoblikovanje: vrtenje (90 stopinj);
}
Ta tehnika vrti HR glede na njegovo trenutno lokacijo v dokumentu, zato boste morda morali prilagoditi položaj, da bo prišel tja, kamor ga želite. Ni priporočljivo, da to uporabite za dodajanje navpičnih črt dizajnu, vendar je zanimiv učinek.
Še en način, da dobite vrstice na svojih straneh
Ena stvar, ki jo nekateri počnejo, namesto da bi uporabili element HR, je, da se zanesejo na meje drugih elementov. Toda včasih je kadrovska služba veliko bolj priročna in enostavnejša za uporabo kot pri postavljanju meja. Zaradi težav z modelom okvirjev nekaterih brskalnikov je nastavitev obrobe lahko še bolj zapletena.