Cum se face o linie orizontală. Cum să faci o linie folosind HTML și CSS

Pentru a sublinia unele elemente deosebit de importante ale site-ului, nu ar strica să folosiți tot felul de stiluri și proprietăți CSS prevăzute pentru aceasta. Desigur, nu trebuie să vă faceți prea multe griji cu privire la text ș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 una dintre metodele prezentate nu este întotdeauna potrivită. Să presupunem că aveți un text care trebuie împărțit din cauza specificului încărcăturii sale semantice. Aici vin în ajutor proprietățile HTML și CSS.

Cum să faci o linie în text folosind CSS

Pentru a ne implementa planurile, va trebui să ne contactăm fișier style.css, având înscris în el proprietatea 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:

- border-top– 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– linie verticală situată în stânga.

Cum se face o linie în html

Folosind proprietățile CSS puteți specifica toate valorile necesare prin editarea codului HTML. Pentru a face acest lucru, trebuie să 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 introduceți proprietățile CSS. O mostră poate fi văzută mai jos.

Cum să faci o linie punctată sau dreaptă?

Specificând aceste proprietăți, veți putea sublinia importanța materialului prezentat, a paragrafului sau a titlului?

Scurtă descriere a comenzilor

- lăţime– lungimea liniei;

- solid- linie solida;

- punctat- linie punctata.

Pentru o înțelegere mai profundă a stilurilor, vă recomand să îl citiți pe acesta.

Este necesar 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 separate printr-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 în codul HTML. Acest lucru simplifică foarte mult sarcina pentru constructorii de site-uri fără experiență.

Cum să faci o linie orizontală dreaptă folosind 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 fie ca procent, fie în pixeli.

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

- culoare– definește culoarea liniei.

- alinia– un atribut responsabil pentru alinierea liniei. La rândul său, echipa se leagă de el.

Practic, liniile orizontale sunt folosite pentru a decora paginile HTML ale unui site web, oferindu-le un aspect mai atractiv. Dar, de asemenea, pot diferenția vizual informațiile din secțiunile adiacente, adăugând confort cititorilor atunci când le studiază. Practic, trage linii orizontale acolo unde ai nevoie de ele, asta-i tot.

Cum să desenezi o linie orizontală?

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

. Si el este eticheta bloc, adică creează întreruperi de linie înainte și după sine, astfel încât linia ajunge întotdeauna pe o linie separată. În consecință, poate fi specificat doar în interiorul etichetelor care pot conține elemente bloc, de exemplu sau

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

Exemplu de trasare a liniilor orizontale în HTML
Desenarea liniilor orizontale

Paragraf.

Paragraf.

Paragraf.

Rezultat în browser

Paragraf.

Paragraf.

Paragraf.

După cum puteți vedea, liniile se dovedesc a fi foarte subțiri, neatractive ș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 noi au fost abandonate în favoarea Foilor de stil în cascadă (CSS), așa că, după cum probabil 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”> - sau puteți specifica toți parametrii deodată, doar nu uitați de punctul și virgulă (;).

O culoare poate fi specificată prin numele în engleză sau prin codul HEX al culorii precedat de un hash (#). Ei bine, știți deja despre asta de la lecție încolo schimba textul și culoarea de fundal.

Dar vom vorbi mai mult despre redimensionare. După cum vă amintiți din lecție despre schimbarea fonturilor, există aproximativ zece unități de măsură î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ă, nu va fi o eroare, dar browserele le vor ignora pur și simplu.

Dacă specificați dimensiuni î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 deja, numai lățimea liniei poate fi specificată ca procent. Dimensiunile procentuale depind întotdeauna și sunt calculate pe baza dimensiunii elementului container părinte în care se află eticheta
. În acest caz, dimensiunile părintelui sunt luate ca 100%. De exemplu, dacă plasăm eticheta
style="width:50%" > element interior
, atunci indiferent cum modificăm dimensiunea ferestrei 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.
Schimbați culoarea, grosimea și lățimea liniilor orizontale.

Rezultat în browser

Schimbarea poziției liniilor orizontale

Când modificați lățimea liniei orizontale, puteți vedea clar că browserele o plasează întotdeauna în centru. Dacă vrei să-i schimbi poziția, atunci folosește-l în interior
alinierea atributului cu următoarele valori:

centru- linia este aliniată la centru (valoare implicită).

stânga- apasă pe marginea stângă.

dreapta- apasă spre marginea dreaptă.

Exemplu de aliniere a liniilor orizontale.
Schimbați poziția liniilor orizontale.

Rezultat în browser

Cum se scoate cadrul din jurul unei linii?

Priviți chiar primul exemplu al acestei lecții. Ce culoare crezi că sunt aceste linii? Dar asta nu este adevărat. Sunt transparente, la fel ca orice element de pagină care nu are o culoare de fundal specificată! Nu mă crezi? Apoi uită-te la exemplul în care am schimbat culoarea liniilor. Pentru primul, 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ă cadre în jurul liniilor, care creează un efect tridimensional. 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 deseori strică aspectul, vom aplica din nou atributul de stil. Și este scris așa:

Teme pentru acasă.

Creați titluri de articole, secțiuni și subsecțiuni. Pune-le pe toate în centru.

Setați fontul la Arial pentru întreaga pagină și Courier pentru titluri.

Lăsați dimensiunea fontului pe întreaga pagină să fie de 85% din dimensiunea implicită a browserului. Iar titlurile au 145%, 125% și, respectiv, 110% din dimensiunea fontului de pe pagină.

Scrieți un paragraf sub primul titlu, un citat lung sub al doilea și o poezie sub al treilea. Și poezia să fie amplasată în centrul paginii.

Trei cuvinte aldine din citat.

Sub titlul articolului, trageți o linie roșie orizontală cu o grosime de trei pixeli pe toată lățimea paginii.

În partea de sus și de jos a poeziei, desenați linii negre de un pixel. Lățimea liniei de sus să fie aproximativ egală cu lățimea versetului, iar cea de jos - jumătate.

Îndepărtați cadrele inutile din linii.

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 în partea de sus și de jos atrage mai multă atenția cititorului decât textul obișnuit.

Folosind 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. Datorită numeroaselor atribute ale etichetei
linia creată prin această etichetă este ușor de gestionat. Dacă conectați și puterea stilurilor, atunci adăugarea unei linii la un document devine o sarcină simplă.

Linie implicită
afișat în culoare gri și cu efect de volum. Acest tip de linie nu se potrivește întotdeauna designului 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 mixte ale acestei probleme, ceea ce înseamnă că 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, trebuie să specificați grosimea liniei (proprietatea înălțimii) să fie diferită de zero și să 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
Culoarea liniei orizontale

Șir de text

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Linie orizontală colorată

Se pare că de ce ar fi necesare patru metode? La urma urmei, aproape fiecare persoană folosește o metodă cu care este obișnuit. De exemplu, am apăsat Shift și tasta liniuță de mai multe ori și așa am obținut o linie orizontală.

Dar dacă rezultă o linie punctată, dar aveți nevoie de una solidă?
- Cel mai probabil, tasta Shift de pe tastatură este defectă. Alte metode vor veni în ajutor aici.

Poate cel mai comun mod de a crea o linie în Word este să folosiți câteva taste de pe tastatură.

I Linie subțire, groasă, dublă, punctată folosind tastatura

Mai jos este o imagine a unei tastaturi cu aspect englezesc, dar fără aspect rusesc, dar acest lucru nu contează, pentru că ne interesează doar trei taste: Shift, liniuță și Enter.

Orez. 1. Trei taste de pe tastatură: Shift, liniuță și Enter pentru o linie orizontală continuă în Word

Cu aceste trei taste puteți desena o linie orizontală continuă în Word: punctată sau solidă, subțire sau groasă, lungă sau scurtă.

1) Când apăsați tasta „-” (liniuță) de mai multe ori în editorul Word, obțineți o linie punctată de orice lungime.

A face subţire o linie lungă pe toată lățimea paginii:

Găsim tasta „liniuță” pe tastatură (în dreapta tastei „zero”, în cadrul verde din Fig. 1).

Dintr-o nouă linie (!) în Word, apăsați această tastă de mai multe ori: -

Apoi apăsați tasta „Enter” (). Câteva linii imprimate se vor transforma brusc într-o linie subțire orizontală continuă pe toată lățimea paginii.

2) Când apăsați simultan Shift și „-” (liniuță), NU este imprimată o liniuță, ci o liniuță de subliniere _________. În acest fel, puteți crea o linie continuă de lungime arbitrară oriunde în document.

Orez. 2. Linie orizontală subțire și groasă în Word

Acum hai să tipărim gras linie orizontală pe toată lățimea paginii:

Din nou găsim aceeași tastă „liniuță”, precum și tasta Shift (în stânga sau în dreapta, după cum doriți). Apăsați Shift, țineți apăsat și nu lăsați.

Și acum, dintr-o linie nouă (!), faceți clic pe liniuță de mai multe ori (de exemplu, de 3-4 ori) (în timp ce nu eliberați Shift): ___. Eliberați Shift.

Acum apăsați tasta Enter. Veți vedea o linie solidă orizontală groasă.

Linie orizontală subțire, groasă, punctată și dublă în Word folosind tastatura

II Linie în Word folosind un tabel

O linie orizontală poate fi obținută utilizând un tabel dintr-o celulă (1x1), în care doar marginea de sus sau de jos este colorată (va fi vizibilă), iar celelalte trei părți ale tabelului au margini necolorate (vor fi invizibile) .

Plasați cursorul în locul unde ar trebui să fie linia. În meniul de sus al Word, faceți clic pe:

Inserare (1 în Fig. 3),

Tabelul (2 în Fig. 3),

O celulă (3 în Fig. 3).

Orez. 3. Cum să inserați un tabel 1x1 (dintr-o celulă) în Word

Rezultatul va fi un tabel cu o celulă mare (1x1):

Tot ce rămâne este să eliminați marginile din trei părți în tabelul 1x1. Pentru aceasta

accesați fila „Acasă” (1 în Fig. 4),

apoi lângă „Font” găsim „Paragraf” și chenarele (2 în Fig. 4),

eliminați toate marginile făcând clic pe „Fără chenar” (3 în Fig. 4),

selectați „Bord superior” sau „Chenar inferior” (4 în Fig. 4).

Orez. 4. Cum să eliminați selecția de chenar dintr-un tabel Word (faceți chenarele invizibile)

Vă arăt clar acest lucru în videoclip (la sfârșitul articolului).

Apropo, în fig. 3 este clar că există o cale mai ușoară. Puteți plasa cursorul la începutul liniei în Word și faceți clic pe „Linie orizontală” (5 în Fig. 4):

III Linie în Word folosind desen

Inserați (1 în Fig. 5) - Forme (2 în Fig. 5) - aceasta este o altă modalitate de a obține o linie orizontală în Word.

Pentru a menține linia strict orizontală, țineți apăsată tasta Shift și trageți linia în același timp.

Orez. 5. Cum să desenezi o linie în Word

IV Line în Word folosind tastatura de pe ecran

Pentru Windows 10, puteți găsi și tastatura de pe ecran tastând „tastatură de pe ecran” în bara de căutare.

Orez. 6. Tastatură pe ecran

Vom crea o linie orizontală în același mod ca în prima opțiune cu o tastatură obișnuită. Veți avea nevoie de trei butoane de pe tastatura de pe ecran: liniuță, Shift și Enter.

1 Dash și Enter

Dintr-o nouă linie din Word, faceți clic pe liniuță (1 în Fig. 6) de mai multe ori și apăsați Enter. Veți obține o linie orizontală subțire.

2 Shift, liniuță și Enter

Dintr-o nouă linie din Word, faceți mai întâi clic pe Shift (2 în Fig. 6), apoi Dash (1 în Fig. 6). Veți primi o subliniere. Vom repeta acest lucru de încă 2 ori, apoi apăsăm Enter. Ca rezultat, vom vedea o linie orizontală groasă.

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

Ce este o linie orizontală și pentru ce este?

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

Decorativ. Ajută la adăugarea atractivității paginii.

Împărțirea. Promovează separarea eficientă a informațiilor cu semnificații diferite.

Evidențierea sau accentuarea. Atrage atenția oaspeților 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, iar din exterior pare foarte avantajos. Prin simple modificări ale codului html puteți ajusta:

lungime;

lăţime;

caracteristicile culorii;

alinierea de-a lungul unei margini sau alteia.

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 setează 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ă:

Lungime. Dacă nu doriți ca lungimea liniei să se extindă pe întreaga pagină, atunci puteți seta dimensiunea dorită în pixeli sau procente. Acest lucru se face folosind cuvântul suplimentar „lățime” din etichetă și lungimea numerică indicată 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″

Aliniere. Alinierea este posibilă la marginile din stânga sau din dreapta și, de asemenea, spre centru. Această caracteristică se aplică numai dacă ați specificat deja parametrul lățime, deoarece este imposibil să aliniați o linie care se întinde pe întreaga pagină. Pentru aliniere, setăm un atribut suplimentar în eticheta „align” și îi adăugăm o direcție: centru – pentru central, stânga – pentru stânga și dreapta – pentru alinierea la dreapta.

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 finală va arăta astfel: hr align="center" width="150″.

Rețineți că „align”, valoarea de aliniere, este plasată pe primul loc, chiar dacă atributul depinde de măsurarea lățimii.

Lăţime. De asemenea, puteți alege să specificați lățimea, creând o subliniere îndrăzneață sau subțire. Acest criteriu nu depinde de nimic și poate fi folosit ca un criteriu 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 cu o lățime de 15 pixeli, trebuie să creăm următoarea etichetă: hr size="15″.

Culoare. De asemenea, este specificat ca indicator independent. Pentru a-l schimba, utilizați atributul color î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.

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

Crearea unei linii orizontale folosind video

Și dacă doriți să primiț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 proiecta paginile site-ului astfel încât informațiile să fie structurate și competente vizual. Acest lucru îi ajută pe vizitatori să perceapă mai ușor informațiile prezentate și face site-ul dvs. să iasă în evidență față de ceilalți.