Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Recenzii
  • Cum să setați lungimea liniei în css. Cum să creați diferite variante ale unei linii orizontale în HTML

Cum să setați lungimea liniei în css. Cum să creați diferite variante ale unei linii orizontale în HTML

S-ar părea, 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 a ieșit 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ă. Iată câteva alte modalități de a ajuta.

Poate cel mai familiar 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 un desen al unei tastaturi cu aspect englezesc, dar fără aspect rusesc, dar acest lucru nu contează, deoarece 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: întreruptă 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ținem o linie punctată de orice lungime.

A face subţire linie lungă pentru 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” (). Mai multe linii imprimate se vor transforma brusc într-o linie subțire orizontală continuă pe toată lățimea paginii.

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

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

Acum tipărim gros linie orizontală pe toată lățimea paginii:

  • Din nou găsim aceeași tastă liniuță, precum și tasta Shift (stânga sau 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ă folosind un tabel dintr-o celulă (1x1), în care doar marginea de sus sau de jos este colorată (va fi vizibilă), iar celelalte trei laturi ale tabelului au chenaruri nevopsite (vor fi invizibile) .

Punem 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 în Word (dintr-o celulă)

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

Rămâne în tabelul 1x1 pe trei laturi pentru a elimina marginile. Pentru aceasta

  • accesați fila „Acasă” (1 în Fig. 4),
  • 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 într-un tabel Word (faceți chenarele invizibile)

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

Apropo, în fig. 3 arată 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 prin desen

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

Pentru a face 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 versiune cu o tastatură obișnuită. Pe tastatura de pe ecran, aveți nevoie de trei butoane: liniuță, Shift și Enter.

1 Dash și Enter

Dintr-o nouă linie în Word, faceți clic pe liniuță de mai multe ori (1 în Fig. 6) ș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 clic mai întâi pe Shift (2 în Fig. 6), apoi pe Dash (1 în Fig. 6). Obțineți o subliniere. Așa că repetați încă de 2 ori, apoi apăsați Enter. Ca rezultat, vom vedea o linie orizontală groasă.

Atunci când creați o pagină HTML, stilul joacă un rol esențial. Mai ales când vorbim despre diferite simboluri și decorațiuni: aceste lucruri mărunte ajută la ca „limbajul” paginii tale să fie mai accesibilă și mai clară și, de asemenea, să-i schimbe semnificativ percepția și aspectul în general. 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 demn 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 realizează 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, utilizați atributul de culoare î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 îi ajută pe vizitatori să perceapă mai ușor informațiile prezentate și să distingă site-ul dvs. de alții.

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 utilizează 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 chenar 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. unu.

Orez. 1. Linie orizontală colorată

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 în mod deosebit 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 ea 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;

- marginea-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.



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



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


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-ului, 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ă.

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 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 este întotdeauna obținută pe o linie separată. În consecință, poate fi specificat doar în interiorul etichetelor care pot conține elemente de bloc, de exemplu sau
. 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

Desenați linii orizontale


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 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 pe baza dimensiunii 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.

Schimbați culoarea, grosimea și lățimea 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


aliniază atributul 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.

Schimbați poziția 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.

Top articole similare