Practic, liniile orizontale sunt folosite pentru a decora HTML-pagini de pe site-ul, dându-i un aspect mai atractiv. Dar, de asemenea, ele pot distinge vizual între secțiunile adiacente ale informațiilor, adăugând comoditatea de cititori în studiul său. În general, trage o linie orizontală, în cazul în care trebuie, asta e tot.
Cum de a desena o linie orizontală?
Pentru a desena o linie orizontală în HTML există o etichetă specială
. Și este o etichetă de bloc. că este, se creează linie rupe înainte și după ei înșiși, astfel încât linia este obținută întotdeauna pe o linie separată. Prin urmare, poate fi specificat în tag-ul care poate conține elemente de bloc, de ex sau
. dar el
Nu poate fi conținut, pentru că el pur și simplu nu are o etichetă de închidere, ceea ce înseamnă că este gol.Exemplu desen linii orizontale în HTML
Rezultatul în browser
După cum puteți vedea, liniile sunt foarte subtiri, greu de remarcat și trase pe întreaga lățime disponibile, așa că acum vom învăța cum să le modificați pentru a le face mai atractive.
Cum se schimba culoarea, grosimea și lățimea liniilor orizontale?
În versiunile mai vechi ale tag-ul HTML la
Am avut atribute speciale cu care se poate schimba culoarea, grosimea și lățimea liniilor orizontale. Această culoare. dimensiune și lățime. respectiv. Dar, în noile versiuni ale acestora abandonate în favoarea Cascading Style Sheets (CSS), asa cum s-ar putea fi ghicit, vom folosi din nou atributul nostru favorit al stilului. Sintaxa generală este:
- culoarea liniei (sau mai degrabă fundalul).
- grosimea liniei.
- lățimea liniei.
- și la o dată toți parametrii de care se pot specifica, dar nu uitați de punct și virgulă (;).Culoarea poate fi specificată prin numele său în limba engleză sau HEX-cod de culoare, semn de lire (#) în fața căreia este plasat. Ei bine, știi deja despre acest lucru din lecția de a schimba text și culorile de fundal.
Vorbim aici despre dimensiunea modificării, în detaliu. După cum vă amintiți din lecția despre schimbarea fontului. un CSS există aproximativ zece unități, dar lățimea liniei este posibilă specificarea doar pixel (px) și procentul (%), și o grosime în general, numai în pixeli. Dacă puneți alte unități, acesta nu va fi o greșeală, dar browser-ul va ignora pur și simplu.
Dacă specificați dimensiunile pixelilor, grosimea și lățimea liniei va depinde de rezoluția monitorului pe care navighează pe site-ul dvs. (mai mare rezoluția ecranului, linia mai subțire și mai îngustă).
Așa cum am spus, doar lățimea liniei poate fi specificată ca procentaj. Interes sunt întotdeauna dependente și sunt calculate în funcție de mărimea containerului elementului mamă, în interiorul căruia se află eticheta
. În acest caz, dimensiunea părintelui sunt luate ca 100%. De exemplu, dacă plasați eticheta
în interiorul elementului. că, indiferent de modul în care vom schimba dimensiunea ferestrei browserului sau rezoluția monitorului - lățimea liniei va fi întotdeauna jumătate din lățimea blocului.EXEMPLU schimbarea culorii, grosime, și lățimea de linii orizontale.
Rezultatul în browser
Schimbarea poziției liniilor orizontale
Când modificați lățimea unei linii orizontale, devine vizibil în mod clar că browserele să aibă întotdeauna în mijloc. Dacă doriți să schimbați poziția, apoi utilizați doar în interior
Atributul se aliniază cu următoarele valori:
- centru - linie este centrată (setarea implicită).
- stânga - presat la stânga.
- dreapta - este apăsat spre dreapta.
Alinierea EXEMPLU de linii orizontale.
Rezultatul în browser
Cum se scoate cadrul din jurul liniei?
Uită-te la primul exemplu al acestei lecții. Ce crezi, ce culoare au aceste linii? Și asta nu e adevărat. Ele sunt transparente, precum și orice alte elemente ale paginii care nu au specificat culoarea de fundal! Nu mă crezi? Atunci o privire la un exemplu în cazul în care ne-am schimbat culoarea liniilor. Chiar la prima nu am stabilit culoarea, dar a crescut doar dimensiunea sa și nu este această linie nu este transparent? Deci, acolo!
Acum am explica. În mod implicit, browsere trage o linie în jurul cutiei, care creează un efect tridimensional. Așa că, atunci când nu cresc grosimea liniilor orizontale, browsere, vom arăta doar cadrul, deoarece grosimea liniei în sine este 0px.
Pentru a scoate cadrul din jurul liniei, care este de multe ori doar strică aspectul, aplicăm din nou atributul stil. Și așa este scris:
- Crearea de titluri de articol, secțiune și subsecțiune. le așează în mijloc.
- Înlocuiți întreaga pagină cu caractere Arial și pentru titluri - Courier.
- Lăsați dimensiunea fontului a întregii pagini va fi de 85% din suma în browser-ul implicit. Și antet 145%, 125% și 110%, respectiv, din dimensiunea fontului de pe pagină.
- Scrie mai jos prima secțiune antet, un al doilea - lung pasaj de sub al treilea - poemul. Și să poezia este centrată pe pagină.
- În aldine trei cuvinte în referința bibliografică.
- Sub titlul articolului pe întreaga lățime a paginii, trage o linie orizontală roșu, trei pixeli grosime.
- Deasupra și dedesubtul liniei remiză poem grosime într-un singur pixel este negru. Lăsați lățimea liniei de sus va fi aproximativ egală cu lățimea liniei, și de jos - de două ori mai puțin.
- Eliminați liniile inutile din cadru.
articole similare