Dacă aveți nevoie să adăugați linii orizontale, în stil de separare pe site-urile dvs. web, opțiunile dvs. tipice includ adăugarea de fișiere imagine la acele linii pe pagina dvs., dar acest lucru ar necesita ca browserul dvs. să recupereze și să încarce aceste fișiere, ceea ce ar putea avea un impact negativ asupra site-ului performanţă. De asemenea, puteți utiliza proprietatea frontală CSS pentru a adăuga margini care acționează ca linii fie în partea de sus, fie în partea de jos a unui element, creând efectiv linia de separare.
Sau - mai bine încă - utilizați elementul HTML pentru regula orizontală.
Elementul de regulă orizontală
Aspectul implicit al liniilor orizontale de reguli nu este ideal. Pentru a le face să arate mai bine, adăugați CSS pentru a ajusta aspectul vizual al acestor elemente pentru a fi în concordanță cu modul în care doriți ca site-ul dvs. să arate.
O etichetă HR de bază este afișată în modul în care browserul dorește să o afișeze. Browserele moderne prezintă în mod obișnuit etichete HR neprotejate cu o lățime de 100%, o înălțime de 2 pixeli și o margine 3D în negru pentru a crea linia.
Lățimea și înălțimea sunt consistente între browsere
Singurele stiluri care sunt compatibile între browserele web sunt lățimea și stilurile. Acestea definesc cât de mare va fi linia. Dacă nu definiți lățimea și înălțimea, lățimea implicită este de 100%, iar înălțimea implicită este de 2 pixeli.
În acest exemplu, lățimea este de 50% din elementul părinte (notați aceste exemple de mai jos includ toate stilurile inline. Într-o setare de producție, aceste stiluri ar fi de fapt scrise într-o foaie de stil externă pentru a fi ușor de gestionat pe toate paginile dvs.):
style = "width: 50%;">
Și în acest exemplu, înălțimea este 2EM: style = "înălțime: 2em;"> În browserele moderne, browserul construiește linia prin ajustarea marginii. Deci, dacă eliminați marginea cu proprietatea stilului, linia va dispărea pe pagină. După cum puteți vedea (bine, nu veți vedea nimic, deoarece liniile vor fi invizibile) în acest exemplu: style = "border: none;">
Ajustarea dimensiunii marginii, a culorii și a stilului va face ca linia să arate diferit și are același efect în toate browserele moderne. De exemplu, în această demonstrație, granița este roșie, întreruptă și lățime 1px: style = "border: 1px dashed # 000;">
Dar dacă schimbați marginea și înălțimea, stilurile arată puțin diferit în browserele învechite decât în browserele moderne. După cum puteți vedea în acest exemplu, dacă îl vedeți în IE7 și mai jos (un browser care este în mod nemaipomenit de depășit și nu mai este suportat de Microsoft), există o linie internă înclinată care nu se afișează în celelalte browsere (inclusiv IE8 și în sus) : stil = "înălțime: 1.5cm; lățime: 25cm; margine: 1px solid # 000;">
Aceste browsere antichitate nu sunt cu adevărat o preocupare în designul web astăzi, deoarece au fost în mare parte înlocuite cu opțiuni mai moderne. În locul unei culori, puteți defini o imagine de fundal pentru regula orizontală astfel încât să fie exact așa cum doriți, dar să fie afișată în mod semantic în marcarea dvs. În acest exemplu am folosit o imagine care are trei linii ondulate. Setând-o ca imagine de fundal fără a se repeta, creează o pauză în conținutul care arată aproape asemănător cu cel prezentat în cărți: style = "height: 20px; background: #fff url (aa010307.gif) centru de defilare fără repetiție; border: none;"> Cu CSS3, puteți face, de asemenea, liniile dvs. mai interesante. Elementul HR este în mod tradițional a orizontală line, dar cu proprietatea transforma CSS, poti schimba modul in care arata. O transformare preferată a elementului HR este de a schimba rotația. Puteți roti elementul HR astfel încât acesta să fie doar puțin diagonal: HR {-moz-transform: rotiți (10deg);-webkit-transform: rotire (10deg);-o-transform: roti (10deg);-ms-transform: rotire (10deg);transforma: roti (10deg);}
Sau puteți roti astfel încât să fie complet vertical: HR {-moz-transform: rotire (90deg);-webkit-transform: rotire (90deg);-o-transform: rotiți (90deg);-ms-transform: rotire (90deg);transformă: rotiți (90deg);}
Amintiți-vă că această tehnică rotește HR bazată pe locația sa actuală în document, deci este posibil să fie necesar să ajustați poziționarea pentru ao obține acolo unde doriți. Nu este recomandat să utilizați acest lucru pentru a adăuga linii verticale la un design, dar este o modalitate de a obține un efect interesant. Un lucru pe care o fac unii în loc să folosească elementul HR este să se bazeze pe granițele altor elemente. Dar uneori un HR este mult mai convenabil și mai ușor de utilizat decât încercarea de a înființa granițe. Probele modelului de cutie al anumitor browsere pot face chiar și mai dificilă înființarea unei frontiere. Schimbarea frontierelor poate fi provocatoare
Faceți o linie decorativă cu o imagine de fundal
Transformarea elementelor HR
Un alt mod de a obține linii pe paginile dvs.
