Linia de despărțire a etichetei. Linii orizontale. Linii verticale în HTML

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 se desenează o linie orizontală?

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

. Și 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 de 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?

Pe vechi versiuni HTML la etichetă

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" >- latimea liniei.

stil= „fond:culoare; înălțime:dimensiune; lățime:dimensiune”> - sau 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 un hash (#). Ei bine, știi 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ă.
  • corect- apasă pe 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, ca orice elemente ale paginii care nu au un specificat culoarea de fundal! Nu mă crezi? Apoi uită-te la exemplul în care am schimbat culoarea liniilor. Pentru primul, nu am setat culoarea, ci doar am mărit dimensiunea acesteia și nu este această linie transparentă? Asta este!

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 de 0px.

Pentru a elimina cadrul din jurul liniei, care de multe ori doar se strică aspect, vom aplica din nou atributul style. Și este scris așa:

Teme pentru acasă.

  1. Creați titluri de articole, secțiuni și subsecțiuni. Pune-le pe toate în centru.
  2. Setați fontul la Arial pentru întreaga pagină și Courier pentru titluri.
  3. Lăsați dimensiunea fontului pe î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 poezia să fie situată în centrul paginii.
  5. Evidențiați cu aldine trei cuvinte dintr-un citat.
  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 linii groase de un pixel în negru. Lățimea liniei de sus să fie aproximativ egală cu lățimea versetului, iar cea de jos - jumătate.
  8. Îndepărtați cadrele inutile din linii.

Linii orizontale format dintr-o etichetă neîmperecheată (nu este necesară eticheta de închidere).

și pot fi elemente de design destul de unice. Formatarea textului cu adăugare HTML orizontal liniile vor conferi paginii o anumită logică de prezentare a textului și, de asemenea, vor facilita cititorului să evidențieze blocuri de informații care trebuie studiate secvenţial. Etichetă
poate forma linii orizontale de diferite culori, grosimi și lungimi. Și acest lucru este destul de simplu de făcut, așa cum se arată în exemplele de mai jos.

Apropo, puteți utiliza și proprietățile stilului bloc

Şi
pentru formarea liniilor
într-o anumită locație. Adevărat, această opțiune poate să nu fie întotdeauna convenabilă, de exemplu, pictura uneori nu dă întotdeauna roade, dar în multe cazuri este posibil să se rezolve problemele în acest fel. De exemplu, în interiorul unei linii formate etichetă
nu poți introduce text. Dar în interiorul blocurilor, acest lucru este posibil și se practică în mod constant. Deci, trebuie să alegeți opțiunea în funcție de cerințele de proiectare.

Linii verticale în HTML.

O linii verticale sunt formate de fapt în aceleaşi blocuri

Şi
.
Singurul inconvenient este că eticheta nu este disponibilă în toate browserele.
funcționează la fel, dar aici trebuie să încercați
și ajustați pagina sau utilizați browsere actualizate.

Formarea liniilor orizontale:

Etichetă
inserează o linie orizontală pe pagină și are următoarele atribute:

Sintaxa etichetelor
:

Exemple de linii orizontale în HTML:

Exemple de linii verticale în HTML:

Iată un exemplu de linie verticală roșie în stânga.

Iată un exemplu de linie verticală roșie în dreapta.

Iată un exemplu de linie roșie orizontală în partea de sus.

Iată un exemplu de linie orizontală în roșu de mai jos.

Iată un exemplu de linii orizontale și verticale.

Sintaxă pentru exemple de linii verticale și orizontale în HTML:

acordați atenție atributului stilului
frontieră- stânga(-dreapta): 4px solid #FF0000;:

Cercul format folosind o etichetă

Iată un exemplu de linie verticală roșie în stânga.

Iată un exemplu de linie verticală roșie în dreapta.

Iată un exemplu de linie orizontală în roșu de mai jos.

Iată un exemplu de linii orizontale și verticale.

Și dacă analizăm aceste exemple, putem trage o concluzie destul de simplă că liniile verticale sunt cel mai bine formate folosind, iar opțiunile de linii intermediare pot fi făcute cu etichetă

Dar totul depinde de imaginație și cereri. Deci alegeți și modelați.

De la autor: te salut. Necesitatea de a prezenta mai multe blocuri pe o pagină web într-o singură linie este o sarcină foarte comună cu care se confruntă designerii de layout. Are loc în timpul aspectului aproape fiecărui șablon, așa că, în orice caz, cu toții trebuie să cunoaștem și să aplicăm modalitățile de bază de a schimba comportamentul blocurilor.

Înainte de a ne uita la cele mai comune tehnici, aș dori să-mi amintesc o mică teorie. Elementele paginii web sunt împărțite în elemente bloc și elemente inline. Și diferența dintre ele este foarte simplă - cele cu litere mici pot fi plasate pe o singură linie, dar cele blocate nu. Desigur, diferențele nu se termină aici, dar aceasta este diferența principală. Blocurile pot avea deja umplutură în partea de sus și de jos (cele cu litere mici nu au) și li se pot aplica mai multe proprietăți.

Modalități de bază de aliniere a blocurilor în CSS

Nu vom complica nimic, există 3 moduri principale:

Convertiți blocurile în elemente inline. În acest caz, proprietățile blocurilor se pierd, așa că această opțiune nu este aproape niciodată utilizată

Faceți elementele necesare bloc-line. Acesta este un tip special în care elementul își păstrează proprietățile, dar în același timp permite amplasarea altor blocuri în apropiere.

Faceți elementele să plutească folosind proprietatea float.

Să ne concentrăm asupra acestor opțiuni. Nu vom lua în considerare Flexbox, afișaj de masă și alte aspecte. Deci, să presupunem că avem 3 subtitluri.

Titlul 1

Titlul 2

Titlul 3

Desigur, toate proprietățile css trebuie să fie scrise dosar separat(style.css), care trebuie conectat la documentul html. În acest fișier voi scrie un stil minimal, astfel încât subtitlurile noastre să fie pur și simplu vizibile.

h3( fundal: #EEDDCD; )

h3 (

fundal: #EEDDCD;

Iată-le pe pagină:

Se comportă ca niște blocuri. Fiecare este situat pe propria linie, există indentări între ele. Dacă doriți, puteți, de asemenea, să setați orice umplutură internă și să faceți ce doriți.

Să-l convertim în linii și să adăugăm imediat indentări. Pentru a face acest lucru, selectorul h3 trebuie să adauge următoarele proprietăți:

display: inline; umplutură: 30px;

Există 2 probleme principale care apar atunci când utilizați această tehnică. Prima este indentarea minimă. Se formează datorită faptului că în cod există un spațiu între blocuri, care formează această indentare. Dacă această problemă trebuie rezolvată, există 2 opțiuni principale:

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

Adăugați o marjă negativă la dreapta de -4 pixeli. Atât ia un spațiu.

A doua problemă este că dacă elementele au înălțimi diferite, pot apărea probleme de afișare. În întregime, cea mai buna varianta- blocuri plutitoare. În loc de display: inline-block scriem asta:

Blocuri într-o linie folosind cadrul

Voi spune imediat că, dacă veți folosi orice cadru CSS normal (de exemplu, Bootstrap), atunci totul este încă mult mai simplu. Tot codul CSS responsabil de aranjarea elementelor a fost deja scris și tot ce trebuie să faceți este să setați clasele corecte. Pentru a face acest lucru, trebuie doar să învățați sistemul de grilă și veți putea 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 a scrierii codului de la zero vine atunci când aveți nevoie de design responsive. 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, când ai ecrane mari ar trebui să existe 4 coloane, pe cele din mijloc - 3 și mai departe telefoane mobile— 2. Cu ajutorul cadrelor precum Bootstrap, sau mai degrabă cu ajutorul grilei sale, implementarea așa ceva este o chestiune de doar câteva minute.

Traducând fără probleme subiectul în cadrul Bootstrap, voi remarca încă o dată că, dacă vă confruntați cu sarcina de a stabili un șablon adaptiv complex, atunci este pur și simplu un păcat să nu folosiți grila. Nici măcar nu trebuie să vă conectați pentru a face asta. versiunea completă framework - îl puteți personaliza și vă opriți aici doar ceea ce aveți nevoie cu adevărat.

Puteți învăța cum să lucrați cu cadrul folosind . Teoria este explicată acolo, dar cel mai important, există practică. Tu inventezi 3 șablon adaptivși obțineți o experiență excelentă care vă va permite să proiectați site-uri web la comandă sau pentru dvs. Și dacă doriți să vă familiarizați cu avantajele și capacitățile cadrului în mod gratuit, vă sugerez să vă uitați prin seria noastră de articole despre Bootstrap, precum și despre designul de layout simplu. Vă doresc succes în aspect și în construirea site-ului web în general.

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 este un element de bloc, deci linia începe întotdeauna cu linie nouă, iar după aceasta toate elementele sunt afișate pe rândul următor. 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 browser de internet

Explorer folosește proprietatea color pentru culoarea liniei, iar alte browsere folosesc background-color . Dar asta nu este tot, ar trebui să specificați și o grosime a liniei (proprietatea înălțimii) alta decât zero și să eliminați cadrul din jurul liniei setând proprietatea de 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 Rezultat

acest exemplu

prezentat în Fig. 1. Orez. 1. Linie orizontală colorată Salutări tuturor cititorilor. Din când în când, maeștrii se confruntă cu problema modului de a realiza o linie orizontală sau verticală folosind HTML sau

folosind CSS

. Despre asta vă voi spune astăzi.

Linii în CSS

Există mai multe moduri de a face linii. Un astfel de mod este utilizarea CSS. Sau, mai degrabă, folosind Border. Să ne uităm la un exemplu.

Și asta se va întâmpla ca urmare.

Linie orizontală și verticală folosind css.

  • Liniile pot fi trase în CSS folosind operatorul Border. Dacă aveți nevoie doar de un dreptunghi cu o lățime fixă ​​a cadrului, atunci puteți pur și simplu să utilizați acest operator și să îi dați o valoare. De exemplu chenar:5px solid #000000; va însemna că marginile blocurilor au o lățime egală cu 5 pixeli de culoare neagră.
  • Cu toate acestea, dacă trebuie să setați nu toate limitele, ci doar unele, atunci trebuie să specificați ce granițe sunt necesare și ce valoare va avea fiecare dintre ele. Aceștia sunt operatorii:
  • border-top – setează valoarea chenarului superior
  • border-bottom – setează valoarea marginii de jos

border-left – setează valoarea chenarului din stânga

border-right – setează valoarea chenarului drept.

Linie verticală și orizontală în HTML

Dar acestei etichete i se pot da și niște valori.

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

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

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

Concluzie.

Ei bine, acum știi cum poți seta o linie verticală și orizontală. Liniile pot fi setate ca pe site-urile obișnuite, cu folosind HTML, și setați-l 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, adresați-le în comentarii.