Cum se adaugă linia orizontală în html. Liniile orizontale și verticale în HTML

Pentru a sublinia unele elemente deosebit de importante ale site-ului, nu ar strica să folosiți tot felul de stiluri CSS și proprietăți oferite pentru aceasta. Desigur, nu trebuie să vă deranjați 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 datorită specificului încărcării sale semantice. Aici intervin proprietățile HTML și CSS.

Cum se face o linie în text folosind CSS

Pentru a ne implementa planul, trebuie să ne referim la fișierul style.css scriind în ea proprietatea corespunzătoare frontieră... Aceasta va crea o linie deasupra, dedesubt sau pe o parte specifică a textului. La rândul lor, există mai multe proprietăți care sunt responsabile pentru afișarea liniei, și anume:

- vârful de sus- o linie orizontală deasupra textului;

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

- marginea de jos- o linie orizontală sub text;

- frontieră-stânga- linia verticală spre stânga.

Cum se face o linie în html

Folosind proprietățile CSS, puteți scrie toate valorile necesare editând codul 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 adăugați proprietăți CSS. Un eșantion poate fi văzut mai jos.



Cum fac o linie punctată sau dreaptă?



Prin prescrierea acestor proprietăți, veți putea sublinia importanța materialului, paragrafului sau titlului prezentat?


Scurtă explicație a comenzilor

- lăţime- lungimea liniei;

- solid- linie solida;

- punctat- linie punctata.

Pentru o cunoaștere mai profundă a stilurilor, vă recomand să o citiți.

Este necesar să înțelegem că în procesul de modificare a codului site-ului, proprietățile care determină tipul liniei, grosimea și culoarea acesteia sunt listate separate printr-un spațiu.

Această metodă are mai multe avantaje:

O gamă largă de posibilități cu care puteți face aproape orice linie.

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

Cum se face o linie dreaptă orizontală folosind eticheta HTML

Primul lucru la care 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 în ​​procente, cât și în 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 se referă la aceasta.

Practic, liniile orizontale sunt folosite pentru a decora paginile HTML ale site-ului, oferindu-le un aspect mai atractiv. Dar, de asemenea, pot delimita vizual informațiile secțiunilor învecinate, adăugând confort cititorilor atunci când le studiază. În general, trasați linii orizontale acolo unde aveți nevoie, atât.

Cum desenez o linie orizontală?

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

... Mai mult, el este etichetă bloc, adică creează pauze de linie înainte și după sine, deci linia se obține întotdeauna pe o linie separată. În consecință, poate fi specificat numai în etichete care pot conține elemente de bloc, de exemplu sau
... Dar eu însumi
nu poate avea conținut, deoarece pur și simplu nu are o etichetă finală, adică este goală.

Un exemplu de desenare a liniilor 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, nedescrise și trase la întreaga lățime disponibilă, așa că acum vom învăța cum să le schimbați pentru a le face să pară mai atractive.

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

În versiunile mai vechi de HTML, eticheta

existau atribute speciale cu care era posibil să se schimbe culoarea, grosimea și lățimea liniilor orizontale. Acestea sunt culoarea, dimensiunea și, respectiv, lățimea. Dar în versiunile mai noi au fost abandonate în favoarea Cascading Style Sheets (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 = "fundal: culoare; înălțime: dimensiune; lățime: dimensiune"> - dar puteți specifica toți parametrii simultan, nu uitați de punct și virgulă (;).

O culoare poate fi specificată prin numele său în limba engleză sau prin codul HEX al culorii, precedat de un hash (#). Ei bine, știți deja despre asta din lecția de pe schimbarea culorii textului și a fundalului.

Dar despre redimensionare vom vorbi mai detaliat. Îți amintești de la tutorial despre schimbarea fonturilor, există aproximativ zece unități în CSS, dar lățimea liniei poate fi specificat numai în pixeli (px) și procente (%) și grosimeîn general numai în pixeli. Dacă furnizați alte unități, 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 este mai mare rezoluția ecranului, cu atât linia este mai subțire și mai îngustă).

După cum am spus, numai lățimea liniei poate fi specificată ca procent. Dimensiunile procentuale depind întotdeauna și sunt calculate pe baza mărimii elementului container părinte, în interiorul căruia se află eticheta

... În acest caz, dimensiunea părintelui este luată ca 100%. De exemplu, dacă plasăm eticheta
style = "width: 50%"> element interior
, indiferent de modul în care redimensionăm fereastra browserului sau rezoluția monitorului - lățimea liniei va fi întotdeauna la 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 schimbați lățimea unei linii orizontale, devine clar vizibil că browserele o plasează întotdeauna în centru. Dacă doriți să-i schimbați poziția, utilizați-l doar în interior

aliniază atributul cu următoarele valori:

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

Un exemplu de aliniere a liniilor orizontale.

Schimbați poziția liniilor orizontale.

Rezultat în browser

Cum pot elimina marginea din jurul liniei?

Aruncați o privire la primul exemplu al acestui tutorial. Ce culoare crezi că au aceste linii? Și aici este greșit. Sunt transparente, ca orice element de pagină care nu are o culoare de fundal! Nu mă crede? Apoi aruncați o privire la un exemplu în care am schimbat culoarea liniilor. Pentru prima, nu am setat culoarea, ci am mărit doar dimensiunea acesteia și nu este această linie transparentă? Astfel încât!

Voi explica acum. În mod implicit, browserele desenează cadre în jurul liniilor, ceea ce 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 marginea din jurul liniei, care deseori doar strică aspectul, vom aplica din nou atributul de stil. Și este scris astfel:

Teme pentru acasă.

  1. Creați titluri de articol, secțiune și subsecțiune. Centrează-le pe toate.
  2. Setați întreaga pagină la Arial și Courier pentru anteturi.
  3. Permiteți ca 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 un poem sub al treilea. Și lăsați poemul să fie centrat pe pagină.
  5. Evidențiați trei cuvinte cu caractere aldine în citatul dvs.
  6. Sub titlul articolului, trageți o linie orizontală roșie de trei pixeli pe toată lățimea paginii.
  7. În partea de sus și de jos a poeziei, desenați un pixel linii negre. Lățimea liniei de sus să fie aproximativ egală cu lățimea versului, iar linia de jos la jumătate.
  8. Eliminați cadrele inutile de pe linii.

De la autor: Te salut. Necesitatea de a prezenta mai multe blocuri pe o pagină web într-o singură linie este o sarcină foarte obișnuită care apare pentru proiectanții de layout. Apare în timpul aspectului a aproape fiecare șablon, așa că noi toți, în orice caz, trebuie să cunoaștem și să aplicăm metodele de bază pentru schimbarea comportamentului blocurilor.

Înainte de a ne uita la cele mai frecvente trucuri, aș dori să amintesc o mică teorie. Elementele paginii web sunt împărțite în bloc și în linie. Iar diferența dintre ele este foarte simplă - cele cu litere mici pot fi localizate pe o singură linie, dar cele cu blocuri nu. Desigur, diferențele nu se termină aici, dar aceasta este principala diferență. Deja, blocurile pot avea margini de sus și de jos (cele cu litere mici nu) și li se pot aplica mai multe proprietăți.

Principalele modalități de a alinia blocuri la rând în CSS

Nu vom complica nimic, există 3 moduri principale:

Convertiți blocurile în elemente în linie. În același timp, proprietățile blocului se pierd, deci această opțiune nu este aproape niciodată folosită.

Faceți elementele dorite blocate în linie. Acesta este un tip special în care elementul își păstrează proprietățile, dar permite în același timp poziționarea altor blocuri una lângă alta.

Elementele plutitoare utilizând proprietatea float.

Să ne oprim asupra acestor opțiuni. Flexbox, afișajul tabelar și alte puncte nu vor fi luate în considerare. Deci, să presupunem că avem 3 subpoziții.

Titlul 1

Rubrica 2

Rubrica 3

Bineînțeles, toate proprietățile CSS trebuie scrise într-un fișier separat (style.css), care trebuie conectat la documentul html. În acest fișier, voi scrie un stil minim, astfel încât subtitlurile noastre să poată fi vizualizate cu ușurință.

h3 (fundal: #EEDDCD;)

h3 (

fundal: #EEDDCD;

Iată-le pe pagină:

Acolo se comportă ca niște blocuri. Fiecare este situat pe propria linie, există liniuțe între ele. Dacă doriți, puteți seta, de asemenea, orice liniuță internă și, în general, puteți face orice.

Convertiți în linii și adăugați imediat umplutura. Pentru aceasta, adăugați următoarele proprietăți la selectorul h3:

display: inline; umplutură: 30 px;

Există 2 probleme principale cu această tehnică. Primul este umplutura minimă. Se formează datorită faptului că există un spațiu între blocurile din cod, care formează această indentare. Dacă această problemă are nevoie de o soluție, există 2 opțiuni principale:

În html, aranjați codul blocurilor necesare într-o singură linie fără spații

Setați o marjă negativă la dreapta de -4 pixeli. Cam atât ocupă un spațiu.

A doua problemă este că problemele de afișare pot apărea cu diferite înălțimi ale elementelor. În general, blocurile plutitoare sunt cea mai bună opțiune. În loc de display: inline-block, scriem acest lucru:

Blocuri în linie folosind un cadru

Trebuie să spun imediat că, dacă veți folosi orice cadru CSS normal (de exemplu, Bootstrap), atunci este încă mult mai ușor acolo. Tot codul css responsabil pentru aranjarea elementelor a fost deja scris și va trebui să setați doar clasele corecte. Tot ce trebuie să faceți este să învățați sistemul de rețea și puteți crea șabloane receptive cu mai multe coloane fără prea multe dificultăți. Cel puțin va fi mult mai ușor decât să scrii css de la zero.

O altă provocare de a scrie cod de la zero apare chiar atunci când aveți nevoie de un design receptiv. Desigur, îl puteți implementa singur deținând interogări media, dar va fi mult mai dificil dacă aveți un șablon complex.

De exemplu, atunci când ar trebui să aveți 4 coloane pe ecrane mari, 3 pe medii și 2 pe telefoane mobile. Cu ajutorul unor cadre precum Bootstrap, sau mai bine zis cu grila sa, este nevoie de doar câteva minute pentru a implementa așa ceva. .

Transferând fără probleme subiectul în cadrul Bootstrap, voi observa încă o dată că, dacă vă confruntați cu sarcina de a crea un șablon de receptivitate complex, atunci este pur și simplu un păcat să nu utilizați grila. Pentru a face acest lucru, nici măcar nu trebuie să conectați versiunea completă a cadrului - o puteți personaliza și opri acolo doar ceea ce aveți cu adevărat nevoie.

Puteți învăța cum să lucrați cu cadrul cu ajutorul. De asemenea, explică teoria, dar cel mai important lucru este că există practică. Veți construi 3 șabloane receptive și veți obține o experiență extraordinară care vă va permite să creați site-uri web la comandă sau pentru dvs. Și dacă doriți să aruncați o privire gratuit la beneficiile și caracteristicile cadrului, vă sugerez să consultați seria noastră de articole despre Bootstrap și aspect simplu. Vă doresc succes în amenajarea și construirea site-ului în general.

Când creați o pagină HTML, aspectul joacă un rol esențial. Mai ales atunci când vorbim despre diferite simboluri și design decorativ: aceste lucruri mici ajută la a face „limbajul” paginii dvs. mai accesibil și mai clar, în plus, își schimbă semnificativ percepția și aspectul în general. Unul dintre cele mai importante elemente pentru proiectare este o linie orizontală și, în continuare, vom învăța mai detaliat cum să lucrăm cu ea și cum să realizăm o linie orizontală în html.

Ce este o linie orizontală și la ce servește

O linie orizontală în html este un element de proiectare a paginilor care îndeplinește o serie de funcții:

  1. Decorativ... Ajută la adăugarea de atractivitate a paginii.
  2. Împărțirea... Promovează separarea efectivă a informațiilor care au o semnificație diferită.
  3. Subliniind sau subliniind... Atrage atenția oaspeților paginii asupra informațiilor necesare și cele mai importante.

Linia orizontală este considerată cea mai accesibilă modalitate de a implementa o serie de funcții. Este foarte simplu să-l creați, dar în exterior pare foarte profitabil. Prin modificări simple la codul html, puteți ajusta:

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

Rețineți că linia orizontală se referă la elemente de bloc. Aceasta înseamnă că ocupă o nouă linie pe pagină, iar textul următor va intra mai jos.

Cum se creează o linie orizontală în HTML

Puteți seta o linie utilizând o etichetă simplă - hr între paranteze triunghiulare. Este prescurtată pentru „Regula orizontală” și stabilește parametrii externi clasici. Acesta diferă de multe altele prin faptul că nu are nevoie de o etichetă finală și este capabil să existe de la sine. Puteți modifica caracteristicile externe ale unui element folosind valori suplimentare în etichetă:

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

Arată așa. De exemplu, dacă dorim o lungime de 100 de pixeli, am seta o etichetă ca aceasta: hr width = "100"

  1. Aliniere... Alinierea este posibilă pe marginile stânga sau dreapta, precum și în centru. Această caracteristică este valabilă numai dacă ați specificat deja parametrul de lățime, deoarece o linie de pagină completă nu poate fi aliniată. Pentru a alinia, setați un atribut suplimentar în eticheta „aliniați” și adăugați 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 centrală pentru o linie orizontală cu o lungime de 150 pixeli, atunci eticheta terminată va arăta astfel: hr align = "center" width = "150".

Rețineți că „alinierea”, măsura pentru aliniere, este pusă în poziția 1, chiar dacă atributul depinde de lățimea măsurii lungimii.

  1. Lăţime... Opțional, puteți specifica și lățimea, creând un subliniat îndrăzneț sau subțire. Acest criteriu nu depinde de nimic și poate fi utilizat independent fără a specifica lungimea sau alinierea. Pentru aceasta, folosim atributul size în 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".

  1. Culoare... De asemenea, este setat ca indicator independent. Pentru a-l modifica, utilizați atributul color în combinație cu numele culorii sub forma unui 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 = "#FFFFF" sau hr color = "white"

Negrul 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. O etichetă pentru o linie standard care o folosește va arăta astfel: hr noshade

Creați o linie orizontală folosind video

Și dacă doriți să obțineți informații într-un format mai vizual, 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 în așa fel încât informațiile să fie structurate și încadrate vizual. Acest lucru îi ajută pe vizitatori să perceapă mai ușor informațiile prezentate și să facă site-ul dvs. să se distingă de ceilalți.

Salutări tuturor cititorilor. Din când în când, vrăjitorii se confruntă cu problema cum se realizează o linie orizontală sau verticală folosind HTML sau folosind CSS. Iată ce vă voi spune astăzi.

Linii în CSS

Există mai multe moduri de a trasa linii. Un astfel de mod este utilizarea CSS. Mai precis, cu ajutorul Border. Să luăm un exemplu.

Iată care va fi rezultatul.

Linie orizontală și verticală folosind css.

Liniile din CSS pot fi trasate folosind instrucțiunea Border. Dacă doriți doar un dreptunghi cu o lățime de margine fixă, puteți utiliza pur și simplu acest operator și setați o valoare la acesta. De exemplu border: 5px solid # 000000; va însemna că marginile blocului au o lățime de 5 pixeli în negru.

Cu toate acestea, dacă trebuie să stabiliți nu toate limitele, ci doar unele, atunci trebuie să scrieți exact care sunt limitele necesare și ce valoare va avea fiecare dintre ele. Aceștia sunt operatorii:

  • border-top - setează valoarea chenarului superior
  • border-bottom - setează valoarea chenarului inferior
  • border-left - Setează valoarea chenarului stâng
  • border-right - Setează valoarea chenarului drept.

Linie verticală și orizontală în HTML

De asemenea, puteți crea linii în HTML. Pentru a face acest lucru, puteți utiliza eticheta hr.

În acest caz, va fi trasată o linie orizontală, cu un pixel înălțime și lățime completă.

Dar această etichetă, puteți seta unele valori.

  • Lăţime- setează valoarea lățimii liniei.
  • Culoare- setează culoarea liniei.
  • Alinia- setează alinierea la stânga, centru, dreapta
  • mărimea- setează valoarea lățimii liniei în pixeli.

Cu eticheta hr, puteți defini și o linie verticală. Dar, în acest caz, va trebui să recurgeți la stiluri din nou.

În acest caz, o linie verticală va fi trasată cu o sută de pixeli înălțime, un pixel gros și indentată cu cinci pixeli.

Concluzie.

Ei bine, acum știți cum puteți seta o linie verticală și orizontală. Liniile pot fi setate atât pe site-uri obișnuite folosind HTML, cât și pe un site care utilizează un CMS, de exemplu, WordPress, dar în acest caz, va trebui să treceți la modul HTML.

Ei bine, dacă mai aveți întrebări, puneți-le în comentarii.

ARTICOLE SIMILARE