Liniile orizontale
Publicat: 2021-09-01Există multe modalități de a face paginile dvs. HTML să arate mai uimitoare și mai bine structurate. Mai precis, o linie orizontală poate juca un rol special în a face conținutul site-ului dvs. bine echilibrat, mai clar și mai ușor de navigat. Ori de câte ori decidem să facem niște schimbări majore pe site-urile noastre web, lucruri atât de mici precum liniile pot face diferența. Astfel de lucruri mici fac mesajul site-ului dvs. mai cuprinzător. În plus, ele pot schimba atractivitatea vizuală a resursei dvs. web și modul în care publicul vă percepe datele.
Dar puteți crea și linii personalizate pentru a se potrivi cu pagina dvs. web și pentru a vă oferi o mai bună stăpânire a spațiului pe care îl manipulați pe pagina dvs. Acestea fiind spuse, haideți să aruncăm o privire mai atentă asupra modului de personalizare a liniilor orizontale în paginile dvs. HTML.O linie orizontală este un element HTML care este folosit ca decor al paginii dvs. web. Cu toate acestea, poate fi util și pentru o grămadă de alte scopuri, cum ar fi:
- Un separator care împarte vizual diferite părți din conținutul tău și pune accent acolo unde o idee se termină și alta începe.
- Un evidențiator care pune accent pe unele secțiuni semnificative ale unei pagini web.
- O linie orizontală este considerată a fi una dintre cele mai populare și mai ușoare modalități de a atinge o gamă largă de scopuri pe un site web. Deși poate părea simplu la prima vedere, este un element multifuncțional pe care îl puteți ajusta în funcție de cerințele dumneavoastră specifice. Folosind modificări simple ale codului HTML al paginii dvs. web, puteți ajusta următoarele specificații ale liniei orizontale:
Lungime;
Lăţime;
Culoare;
Aliniere.
De asemenea, merită subliniat că linia orizontală se referă la elemente de bloc. Înseamnă că este plasat pe o linie separată pe o pagină web, iar textul pe care îl adăugați lângă linie va fi pus sub ea.
Liniile orizontale sunt foarte utile în separarea paginii în diferite secțiuni, pentru a adăuga o linie orizontală simplă, trebuie doar să tastați < hr > și veți obține asta:
Cum se creează o linie orizontală
Puteți seta o linie folosind o etichetă simplă < hr >. Este prescurtarea pentru „Regula orizontală” și setează parametrii externi clasici. Lucrul care îl deosebește de multe altele este că nu are nevoie de o etichetă de capăt și poate exista de la sine. Puteți modifica caracteristicile externe ale unui element folosind valori suplimentare din etichetă:
Arata cam asa. De exemplu, dacă dorim o lungime de 100 de pixeli, am seta o etichetă ca aceasta: hr width = "100.
Aliniere.
Puteți alinia linia pe marginile din stânga sau din dreapta și, de asemenea, în centru. Această caracteristică este validă numai dacă ați specificat deja parametrul de lățime, deoarece o linie de pagină completă nu poate fi aliniată. Pentru aliniere, setați un atribut suplimentar în eticheta „align” și adăugați-i o direcție: centru - pentru centru, stânga - pentru stânga și dreapta - pentru alinierea la dreapta. Eticheta terminată, în acest caz, va arăta astfel: dacă trebuie să setăm alinierea la centru pentru o linie orizontală cu o lungime de 150 de pixeli, atunci eticheta terminată va arăta astfel: hr align = "center" width = " 150". Rețineți că „align”, măsura pentru aliniere, este pusă în poziția 1, chiar dacă atributul depinde de lățimea măsurării lungimii.Lăţime.
Opțional, puteți specifica și lățimea, creând o subliniere îndrăzneață sau subțire. Acest criteriu nu depinde de nimic și poate fi folosit independent fără a specifica lungimea sau alinierea. Pentru aceasta, folosim atributul size din etichetă și o valoare numerică egală cu lățimea dorită în pixeli. Numărul este indicat între ghilimele după atributul dimensiune și simbolul „=".
Astfel, dacă trebuie să creăm o linie de 15 pixeli lățime, trebuie să creăm următoarea etichetă: hr size = "15".
Culoare.
De asemenea, este setat ca indicator independent. Pentru a-l schimba, utilizați atributul de culoare în combinație cu numele culorii sub formă de cod sau în limba engleză. Culoarea este indicată între ghilimele după simbolul „=".
Astfel, eticheta pentru o linie albă standard poate fi scrisă în două moduri: hr color = "#FFFFFF" sau hr color = "white"
Negrul poate fi creat folosind codul # 000000.
Cum să faci o linie orizontală colorată?
Liniile orizontale sunt bune pentru a separa un bloc de text de altul. Textul mic cu linii orizontale în partea de sus și de jos atrage mai multă atenție asupra cititorului decât textul obișnuit.
Folosind eticheta < hr >, puteți desena o linie orizontală, al cărei aspect depinde de atributele utilizate, precum și de browser. Eticheta se referă la elemente de bloc, astfel încât linia începe întotdeauna pe o linie nouă, iar după aceea, toate elementele sunt afișate pe linia următoare. Datorită numeroaselor atribute ale etichetei < hr >, linia creată prin această etichetă este ușor de manipulat. Combinată cu puterea stilurilor, adăugarea unei linii în documentul dvs. este o briză.
În mod implicit, linia este afișată în gri și cu efect de volum. Acest tip de linie nu se potrivește întotdeauna cu designul site-ului, așa că dorința dezvoltatorilor de a schimba culoarea și alți parametri ai liniei prin stiluri este de înțeles. Cu toate acestea, browserele sunt ambigue cu privire la această problemă, motiv pentru care va trebui să utilizați mai multe proprietăți de stil simultan. În special, versiunile mai vechi de Internet Explorer utilizează proprietatea de culoare pentru culoarea liniei, în timp ce alte browsere folosesc o culoare de fundal. Dar asta nu este tot, în acest caz, asigurați-vă că specificați o grosime a liniei (proprietatea înălțimii) alta decât zero și eliminați chenarul din jurul liniei setând proprietatea marginii la niciunul. Punând împreună toate proprietățile pentru selectorul hr, obținem o soluție universală pentru browserele populare.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Culoarea liniei orizontale < /title > < style > hr { border: none; / * Scoateți chenarul * / culoare de fundal: roșu; / * Culoare linie * / culoare: roșu; / * Culoare linie pentru IE6-7 * / înălțime: 2px; / * Lățimea liniei * / } < /style > < /head > < body > < hr > < p > Text string < /p > < hr > < /body > < /html >Exemple:
Acest:
< hr color="#c7c34c" size="2" width="50%" >dă asta:
Culoare: culoarea liniei:
< hr color="#c7c34c" size="2" width="50%" >Dimensiune: Înălțimea liniei exprimată în pixeli:
< hr size="x" >Lățimea: lățimea liniei exprimată fie în procente (%), fie în pixeli (în exemplul meu este 50% din dimensiunea originală):
< hr width="x%"> sau < hr width="x" >Mai avansat:
Acest:
< hr width="400" color="#000000" size="4" >ofera:
În acest caz am folosit stilul:
Lățimea chenarului este de 3 pixeli (3 px)
Este punctat
Culoarea de bază este neagră: #000000
Puncte colorate în albastru: #0099CC
Un ultim exemplu pentru a explica mai multe, dacă mai e nevoie ;):
Acest
< hr width="400" color="#FFFFFF" size="6" >ofera:
În acest caz chiar mai sus:
Lățimea chenarului este de 2 pixeli (2 px)
Este punctat
Culoarea de bază este albă: #FFFFFF
Linie colorate argintiu: #C0C0C0
Stilurile posibile sunt:
-punctat
- punctată
-solid
-dubla
-canelură
-început
-medalion
-creastă
Atât am de spus despre liniile orizontale!