Mai întâi, să scriem codul paginii fără blocul div. De exemplu, acesta:

Meniu principal

• Paragraful 1
• Punctul 2
• Punctul 3

Să vedem cum arată pagina în browser:

Acum să împărțim această pagină în două div. Unul cu meniul principal și celălalt cu text.

Ne uităm în browser:

După cum puteți vedea, aspectul paginii nu s-a schimbat în niciun fel, acesta este întreaga putere a acestui bloc, este un bloc logic. Acest bloc este un element foarte important, deoarece este adesea folosit atunci când așezați o pagină și trebuie să îl cunoașteți. Deja direct prin CSS, putem seta lățimea pentru acest bloc, se poate stabili un cadru pentru acesta, se specifică ca toate paragrafele din interiorul blocului să fie de o anumită culoare etc.,

Și acum între aceste două blocuri vom scrie o linie orizontală, care este creată folosind o singură etichetă < hr />

Iată cum arată linia în browser:

Putem influența această linie folosind următoarele atribute:
Lăţime- Setați lățimea liniei
mărimea- Setați grosimea
Alinia– Linia de aliniere
culoare- Setați culoarea

De exemplu, să-i reducem lățimea, să o aliniem în partea dreaptă a paginii, să-i dăm o lățime de 5 px și să o colorăm în roșu.
Codul de linie ar trebui să arate acum astfel:

Să ne uităm la rezultat:

Asta, poate, este tot ce am vrut să vă spun în acest articol. Acum știi ce este blocdivși cum este creat. De asemenea, ați învățat cum să creați o linie orizontală și cum să îi schimbați aspectul folosind atribute.

Pentru a sublinia unele dintre cele mai importante elemente ale site-ului, nu ar strica să folosiți tot felul de stiluri și proprietăți CSS prevăzute pentru aceasta. Desigur, nu vă puteți deranja prea mult cu textul și să-l evidențiați, de exemplu, cu caractere aldine sau cursive, să schimbați fundalul sau să faceți un cadru în jurul textului. Dar nu întotdeauna una dintre metodele prezentate este potrivită. Să presupunem că aveți un text care trebuie separat din cauza specificului încărcăturii sale semantice. Aici intervin proprietățile HTML și CSS.

Cum să faci o linie în text folosind CSS

Pentru a ne atinge scopul, trebuie să apelăm la fișier style.css, prin scrierea în el a proprietății corespunzătoare frontieră. Acest lucru va face ca o linie să apară deasupra, dedesubt sau pe o anumită parte a textului. La rândul lor, există mai multe proprietăți responsabile pentru afișarea liniei și anume:

- vârf de frontieră– o linie orizontală situată deasupra textului;

- granita-dreapta- o linie verticală situată în dreapta textului;

- chenar-de jos– o linie orizontală situată sub text;

- granița-stânga este linia verticală din stânga.

Cum se face o linie în html

Folosind proprietățile CSS, puteți seta toate valorile necesare prin editarea codului HTML. Pentru a face acest lucru, accesați partea administrativă a site-ului. Selectați unul dintre materialele publicate, comutați editorul de text în modul de editare a codului HTML și adăugați proprietăți CSS. O mostră poate fi văzută mai jos.

Scurtă explicație a comenzilor

- lăţime– lungimea liniei;

- solid- linie solida;

- punctat- linie punctata.

Pentru o înțelegere mai profundă a stilurilor, vă recomand să citiți acest articol.

Trebuie să înțelegeți că în procesul de modificare a codului site-ului, proprietățile care determină tipul de linie, grosimea și culoarea acesteia sunt enumerate cu un spațiu.

Această metodă are mai multe avantaje:

O gamă largă de posibilități cu care poți realiza aproape orice linie.

Ușurința de a face toate modificările necesare direct la codul HTML. Acest lucru simplifică foarte mult sarcina pentru constructorii de site-uri fără experiență.

Cum să faci o linie orizontală dreaptă cu o etichetă HTML

---

Primul lucru asupra căruia aș dori să vă atrag atenția este că această etichetă, în ciuda tuturor subtilităților și principiilor html, nu are o etichetă de închidere. Poate fi folosit oriunde în codul html, între etichete și.

Atributele etichetei

---

- lăţime- este responsabil pentru lungimea liniei. Poate fi specificat atât ca procent, cât și ca pixeli.

- mărimea– grosimea liniei. Specificat în pixeli.

- culoare– definește culoarea liniei.

- alinia– atribut responsabil pentru alinierea liniei. La rândul său, echipa îi aplică.

Atunci când creați o pagină HTML, stilul joacă un rol esențial. Mai ales când vorbim despre diverse simboluri și design decorativ: aceste lucruri mărunte ajută la ca „limbajul” paginii tale să fie mai accesibil și mai clar, în plus, îi schimbă semnificativ percepția și aspectul în ansamblu. Unul dintre cele mai importante elemente de design este linia orizontală, iar în continuare vom afla mai detaliat cum să lucrăm cu ea și cum să facem o linie orizontală în html.

Ce este o linie orizontală și de ce este necesară

Linia orizontală în html este un element de design al paginii care îndeplinește o serie de funcții:

1. Decorativ. Ajută la adăugarea de atractivitate a paginii.
2. Împărțirea. Contribuie la separarea eficientă a informațiilor cu semnificații diferite.
3. Sublinierea sau accentuarea. Va atrage atenția vizitatorilor paginii asupra informațiilor necesare și cele mai importante.

Este linia orizontală care este considerată cea mai accesibilă modalitate de a implementa o serie de funcții. Este foarte simplu de creat și, în exterior, pare foarte profitabil. Prin modificări simple ale codului html, puteți controla:

• lungime;
• lăţime;
• caracteristicile culorii;
• alinierea pe una sau pe cealaltă margine.

Este de remarcat faptul că linia orizontală se referă la elemente de bloc. Aceasta înseamnă că ocupă o nouă linie pe pagină, iar textul care o urmează va merge mai jos.

Crearea unei linii orizontale în HTML

Puteți seta o linie folosind o etichetă simplă - hr între paranteze triunghiulare. Este prescurtarea pentru „Regula orizontală” și stabilește parametrii externi clasici. Diferă de multe altele prin faptul că nu are nevoie de o etichetă de închidere și poate exista independent. Puteți modifica caracteristicile externe ale unui element folosind valori suplimentare în etichetă:

1. Lungime. Dacă nu doriți ca lungimea liniei să acopere întreaga pagină, atunci puteți seta dimensiunea dorită în pixeli sau procente. Acest lucru se face cu ajutorul unui cuvânt suplimentar „lățime” în etichetă și a unui indicator numeric al lungimii specificat după semnul „=" între ghilimele.

Arata cam asa. De exemplu, dacă avem nevoie de o lungime de 100 de pixeli, setăm următoarea etichetă: hr width="100"

1. aliniere. Alinierea este posibilă pe marginile din stânga sau din dreapta și, de asemenea, în centru. Această proprietate are efect numai dacă ați setat deja parametrul de lățime, deoarece o linie la nivel de pagină nu poate fi aliniată. Pentru aliniere, setăm un atribut suplimentar în eticheta „align” și îi adăugăm o direcție: centru - pentru centru, stânga - pentru stânga și dreapta - pentru alinierea dreaptă.

Eticheta terminată în acest caz va arăta astfel. De exemplu, dacă trebuie să setăm alinierea la centru pentru o linie orizontală de 150 de pixeli lungime, atunci eticheta terminată va arăta astfel: hr align="center" width="150".

Rețineți că „align”, valoarea pentru aliniere, este setată la 1, chiar dacă atributul depinde de valoarea lățimii.

1. Lăţime. Opțional, puteți specifica și o lățime, creând o subliniere îndrăzneață sau subțire. Acest criteriu nu depinde de nimic și poate fi folosit ca unul independent fără a specifica lungimea sau alinierea. Pentru aceasta, folosim atributul size de pe etichetă și o valoare numerică egală cu lățimea dorită în pixeli. Numărul este specificat între ghilimele după atributul dimensiune și simbolul „=".

Astfel, dacă dorim să creăm o linie cu o lățime de 15 pixeli, trebuie să creăm următoarea etichetă: hr size="15".

1. Culoare. De asemenea, este setat ca indicator independent. Pentru a-l schimba, atributul de culoare este folosit în combinație cu numele culorii sub formă de cod sau în limba engleză. Culoarea este specificată între ghilimele după simbolul „=".

Astfel, eticheta pentru linia albă standard poate fi scrisă în două moduri: hr color="#FFFFFF" sau hr color="white"

Culoarea neagră poate fi creată folosind codul #000000.

1. Pune deoparte umbră. Dacă aveți nevoie de un element care nu conține o umbră, atunci atributul noshade trebuie utilizat în etichetă. Poate fi folosit singur sau în combinație cu alte elemente. Eticheta pentru linia standard care o folosește va arăta astfel: hr noshade

Creați o linie orizontală cu videoclip

Și dacă doriți să obțineți informații într-un format mai vizual, atunci consultați următorul videoclip, care descrie în detaliu posibilitățile de lucru cu o linie orizontală.

După ce ați determinat dimensiunile necesare ale liniei orizontale, puteți aranja paginile site-ului în așa fel încât informațiile să fie structurate și bine formate vizual. Acest lucru face mai ușor pentru vizitatori să perceapă informațiile prezentate și să distingă site-ul dvs. de alții.

Practic, liniile orizontale sunt folosite pentru a decora paginile HTML ale unui site, oferindu-le un aspect mai atractiv. Dar pot delimita vizual și informațiile secțiunilor învecinate, adăugând confort cititorilor atunci când le studiază. În general, trage linii orizontale acolo unde trebuie, asta e tot.

Cum se desenează o linie orizontală?

Există o etichetă specială pentru desenarea liniilor orizontale în HTML.

. Dar el însuși

---

nu poate avea conținut deoarece pur și simplu nu are o etichetă de închidere, adică este goală.

Un exemplu de desen de linii orizontale în HTML

---

Paragraf.

Paragraf.

---

Paragraf.

Rezultat în browser

Paragraf.

Paragraf.

Paragraf.

După cum puteți vedea, liniile sunt foarte subțiri, nedescriptive și desenate pe toată lățimea disponibilă, așa că acum vom învăța cum să le schimbăm pentru a le face să pară mai atractive.

Cum se schimbă culoarea, grosimea și lățimea liniilor orizontale?

În versiunile mai vechi de HTML, eticheta

---

existau atribute speciale cu care puteai schimba culoarea, grosimea și lățimea liniilor orizontale. Acestea sunt culoarea, dimensiunea și, respectiv, lățimea. Dar în versiunile mai noi, acestea au fost depreciate în favoarea Foilor de stil în cascadă (CSS), așa că, ați ghicit, vom folosi din nou atributul nostru de stil preferat. Sintaxa generală este:

---

style="background:color" >- culoarea liniei (sau mai bine zis fundalul acesteia).

---

style="height:size" >- grosimea liniei.

---

style="width:size" >- lățimea liniei.

---

stil= „fond:culoare; înălțime:dimensiune; lățime:dimensiune”> - și puteți specifica toți parametrii simultan, doar nu uitați de punctul și virgulă (;).

O culoare poate fi specificată după numele ei în limba engleză sau prin codul HEX al culorii precedat de semnul lire sterline (#). Ei bine, știi deja despre asta de la lecție încolo schimba textul și culoarea de fundal.

Dar să vorbim mai detaliat despre redimensionare. După cum vă amintiți din tutorial despre schimbarea fonturilor, există aproximativ zece unități în CSS, dar lățimea liniei poate fi specificat doar în pixeli (px) și procente (%) și grosimeîn general numai în pixeli. Dacă puneți alte unități de măsură, atunci aceasta nu va fi o eroare, dar browserele le vor ignora pur și simplu.

Dacă specificați dimensiunile în pixeli, atunci grosimea și lățimea liniei vor depinde de rezoluția monitorului pe care este vizualizat site-ul dvs. (cu cât rezoluția ecranului este mai mare, cu atât linia este mai subțire și mai îngustă).

După cum am spus, doar lățimea liniei poate fi specificată ca procent. Dimensiunile procentuale depind întotdeauna și sunt calculate în funcție de dimensiunea containerului-element părinte, în interiorul căruia se află eticheta

---

. În acest caz, dimensiunile părintelui sunt luate ca 100%. De exemplu, dacă plasăm eticheta

---

style="width:50%">în interiorul elementului

, atunci indiferent de modul în care redimensionăm fereastra browserului sau rezoluția monitorului, lățimea liniei va fi întotdeauna jumătate din lățimea blocului

.

Un exemplu de schimbare a culorii, grosimii și lățimii liniilor orizontale.

---

---

---

---

Rezultat în browser

Schimbarea poziției liniilor orizontale

Când modificați lățimea unei linii orizontale, puteți vedea clar că browserele o centrează întotdeauna. Dacă vrei să-i schimbi poziția, folosește-l în interior

---

alinierea atributului cu următoarele valori:

• centru- linia este centrată (valoare implicită).
• stânga- apăsat pe marginea stângă.
• dreapta- apăsat spre marginea dreaptă.

Un exemplu de aliniere a liniilor orizontale.

---

---

---

Rezultat în browser

Cum să eliminați chenarul din jurul liniei?

Uită-te la primul exemplu al acestui tutorial. Ce culoare crezi că sunt aceste linii? Și iată-l pe cel greșit. Sunt transparente, la fel ca orice elemente ale paginii care nu au o culoare de fundal specificată! Nu crezi? Apoi uită-te la exemplul în care am schimbat culoarea liniilor. Chiar la prima, nu am stabilit culoarea, ci doar am mărit dimensiunea acesteia și nu este această linie transparentă? Astfel încât!

Acum voi explica. În mod implicit, browserele desenează în jurul liniilor de chenar, care creează un efect 3D. Deci, atunci când nu creștem grosimea liniilor orizontale, browserele ne arată doar aceste cadre, deoarece grosimea liniei în sine este 0px.

Pentru a elimina chenarul din jurul liniei, care de multe ori doar strică aspectul, vom aplica din nou atributul de stil. Și este scris așa:

---

Teme pentru acasă.

1. Creați titluri de articole, secțiuni și subsecțiuni. Poziționați-le pe toate în centru.
2. Setați întreaga pagină la Arial și titlurile la Courier.
3. Lăsați dimensiunea fontului pentru întreaga pagină să fie de 85% din dimensiunea implicită a browserului. Și titlurile au 145%, 125% și, respectiv, 110% din dimensiunea fontului de pe pagină.
4. Scrieți un paragraf sub primul titlu, un citat lung sub al doilea și o poezie sub al treilea. Și lasă poezia să fie centrată pe pagină.
5. Evidențiați trei cuvinte din citat cu caractere aldine.
6. Sub titlul articolului, trageți o linie orizontală roșie cu o grosime de trei pixeli pe toată lățimea paginii.
7. În partea de sus și de jos a poeziei, desenați linii groase de un pixel în negru. Lățimea liniei de sus să fie aproximativ egală cu lățimea versetului, iar linia de jos - jumătate.
8. Îndepărtați cadrele inutile din linii.

O sarcină

Faceți o linie orizontală pe pagină.

Soluţie

Liniile orizontale sunt bune pentru a separa un bloc de text de altul. Textul mic cu linii orizontale deasupra și dedesubt atrage mai mult atenția cititorului decât textul normal.

Cu o etichetă

---

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ă aceasta, toate elementele sunt afișate pe linia următoare. Cu multe atribute de etichetă

---

linia creată prin această etichetă este ușor de gestionat. Dacă conectați și puterea stilurilor, atunci adăugarea unei linii la un document se transformă într-o sarcină simplă.

Linie implicită

---

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 au abordări ambigue ale acestei probleme, din cauza cărora va trebui să utilizați mai multe proprietăți de stil simultan. În special, versiunile mai vechi de Internet Explorer folosesc proprietatea color pentru culoarea liniei, în timp ce alte browsere folosesc background-color . Dar asta nu este tot, asigurați-vă că specificați grosimea liniei (proprietatea înălțimii) alta decât zero și eliminați cadrul din jurul liniei setând proprietatea de margine la niciunul. Punând împreună toate proprietățile pentru selectorul hr, obținem o soluție universală pentru browserele populare (exemplul 1).

Exemplul 1. Linie orizontală

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Șir de text

---

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Linie orizontală colorată