Proprietatea de afișare CSS este un instrument puternic pentru designerii web. Vă permite să controlați aspectul elementelor site-ului web cu un stil minim, cu valori simple care sunt ușor de reținut.
Dar ce face fiecare dintre aceste valori și cum funcționează? Să aflăm.
Ce este proprietatea de afișare CSS?
Proprietatea de afișare specifică tipul de redare a casetei utilizat pentru elementele HTML pe o pagină web. Acest lucru are ca rezultat o varietate de comportamente, inclusiv neprezentarea deloc. Puteți edita aceste valori pe site-ul dvs. prin foaia de stil sau secțiunile de personalizare CSS corespunzătoare din Instrumente CMS precum WordPress.
Păstrați elementele în linie cu afișarea CSS: inline
Valorile lățimii și înălțimii nu se aplică unui element cu afișare inline; conținutul din interior își stabilește dimensiunile. Elementele HTML inline pot sta alături de alte elemente, comportându-se ca a. Display inline este cel mai frecvent utilizat pentru text.
<!DOCTYPE html>
<html lang="ro
">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.in linie {
display: inline;
dimensiunea fontului: 3rem;
}
#inline-1 {
culoare de fundal: galben;
umplutură: 10px 0px 10px 10px;
}
#inline-2 {
culoare de fundal: verde deschis;
umplutură: 10px 10px 10px 0px;
}
</style>
</head>
<corp>
<h1>Afișare CSS în linie</h1>
<div class="in linie" id="inline-1">Acesta este text</div>
<div class="in linie" id="inline-2">cu valoarea proprietății inline.</div>
</body>
</html>
Acest marcaj HTML și CSS de mai sus servesc ca un bun exemplu al valorii afișate în linie. Când sunt utilizate împreună, aceasta va afișa o singură linie de text realizată cu două elemente HTML diferite.
Controlați aspectul site-ului cu afișare CSS: blocați
În unele moduri, valoarea blocului de afișare este opusă valorii în linie. Dimensiunile de înălțime și lățime pot fi setate, iar elementele cu această valoare nu pot sta una lângă alta. Exemplul de mai sus arată două elemente cu valoarea blocului. Elementele cu valoarea blocului afișează implicit la lățimea maximă a elementului părinte.
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.bloc {
afisare: bloc;
dimensiunea fontului: 3rem;
lățime: potrivire-conținut;
}
#block-1 {
culoare de fundal: galben;
umplutură: 10px 10px 10px 10px;
}
#block-2 {
culoare de fundal: verde deschis;
umplutură: 10px 10px 10px 10px;
}
</style>
</head>
<corp>
<h1>Bloc de afișare CSS</h1>
<div class="bloc" id="bloc-1">Acesta este text</div>
<div class="bloc" id="bloc-2">cu valoarea proprietății blocului.</div>
</body>
</html>Spre deosebire de exemplul de stil inline, acest exemplu de valoare a blocului de afișare împarte liniile de text în două linii diferite. Valoarea lățimii de potrivire a conținutului setează lățimea elementelor pentru a se potrivi cu lungimea textului.
Elemente HTML alăturate cu afișare CSS: bloc inline
Valoarea blocului inline de afișare CSS funcționează la fel ca o valoare inline obișnuită, doar cu posibilitatea de a adăuga dimensiuni specifice. Acest lucru face posibilă crearea unor aspecte asemănătoare grilei fără a avea elemente părinte la locul lor. Revenind la exemplul anterior, adăugarea valorii blocului în linie permite elementelor să se așeze unul lângă celălalt.
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.inline-bloc {
display: inline-block;
dimensiunea fontului: 3rem;
lățime: potrivire-conținut;
}
#inline-block-1 {
culoare de fundal: galben;
umplutură: 10px 10px 10px 10px;
}
#inline-block-2 {
culoare de fundal: verde deschis;
umplutură: 10px 10px 10px 10px;
}
</style>
</head>
<corp>
<h1>CSS Display Inline-Block (set de lățime)</h1>
<div class="inline-block" id="inline-block-1">Acesta este text</div>
<div class="inline-block" id="inline-block-2">cu proprietatea inline-block
valoare.</div>
</body>
</html>
Valoarea inline-block nu pare mult diferită de valoarea inline. Este important să rețineți că puteți seta dimensiunile elementelor cu această valoare, totuși, facilitând lucrul cu acestea în anumite cazuri.
Cea mai simplă valoare de afișare este „niciunul”. Această valoare ascunde elementul și orice element secundar, împreună cu marginile și alte proprietăți de spațiere. Elementele cu valoarea CSS nu afișează nicio valoare sunt încă vizibile în inspectorii browserului.
Creați elemente flexibile și receptive cu afișare CSS: flex
Display flex este unul dintre cele mai noi moduri de aspect CSS. Când display flex este pe un element părinte, toate elementele din interiorul acestuia devin elemente CSS flexibile. Elementul părinte din această configurație este un flexbox.
Flexbox-urile creează modele receptive cu variabile predefinite, cum ar fi lățimea și înălțimea. Merita învățare despre casetele flexibile HTML/CSS înainte de a începe.
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.contracta {
display: flex;
dimensiunea fontului: 3rem;
}
#flex-1 {
culoare de fundal: galben;
latime: 40%;
înălțime: 100px;
}
#flex-2 {
culoare de fundal: verde deschis;
latime: 25%;
înălțime: 100px;
}
#flex-3 {
culoare de fundal: albastru deschis;
latime: 35%;
înălțime: 100px;
}
</style>
</head>
<corp>
<h1>CSS Display Flex</h1>
<div class="contracta">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Poziționați cutii flexibile unul lângă altul Cu afișaj: inline-flex
Inline-flex se comportă la fel ca un flexbox obișnuit, cu avantajul suplimentar al elementului de a putea sta lângă alte elemente.
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.inline-flex {
display: inline-flex;
dimensiunea fontului: 3rem;
lăţime: 49.8%;
}
#inline-flex-1 {
culoare de fundal: galben;
latime: 40%;
înălțime: 100px;
}
#inline-flex-2 {
culoare de fundal: verde deschis;
latime: 25%;
înălțime: 100px;
}
#inline-flex-3 {
culoare de fundal: albastru deschis;
latime: 35%;
înălțime: 100px;
}
</style>
</head>
<corp>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Creați tabele complexe cu afișare CSS: tabel
Valoarea tabelului de afișare amintește de vremurile mai vechi ale designului site-ului web. Deși majoritatea site-urilor web nu folosesc astăzi tabele pentru aspectul lor, acestea sunt încă valabile pentru afișarea datelor și a conținutului într-un format care poate fi citit.
Adăugarea valorii tabelului la un element HTML îl va face să acționeze ca un element de tabel, dar aveți nevoie de valori suplimentare pentru ca tabelul să funcționeze corect.
Afișare CSS: tabel-celulă
Elementele cu valoarea tabel-celulă acționează ca celule individuale în tabelul principal. Și valorile tabel-coloană și tabel-rând grupează aceste celule individuale împreună.
Afișare CSS: tabel-rând
Valoarea rândului tabelului funcționează la fel ca a
Afișare CSS: tabel-coloană
Valoarea tabelului-coloană funcționează similar cu valoarea tabelului-rând, doar că nu împarte tabelul. În schimb, puteți folosi această valoare pentru a adăuga anumite reguli CSS la diferitele coloane care există deja.
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.masa {
afisare: tabel;
dimensiunea fontului: 3rem;
}
.antet {
afișare: tabel-antet-grup;
dimensiunea fontului: 3rem;
}
#coloana-1 {
afișare: tabel-coloană-grup;
culoare de fundal: galben;
}
#coloana-2 {
afișare: tabel-coloană-grup;
culoare de fundal: verde deschis;
}
#coloana-3 {
afișare: tabel-coloană-grup;
culoare de fundal: albastru deschis;
}
#rând-1 {
afișare: masă-rând;
}
#rând-2 {
afișare: masă-rând;
}
#rând-3 {
afișare: masă-rând;
}
#celula {
afisare: tabel-celula;
umplutură: 10px;
latime: 20%;
}
</style>
</head>
<corp>
<h1>Tabel de afișare CSS</h1>
<div class="masa">
<div id="coloana-1"></div>
<div id="coloana-2"></div>
<div id="coloana-3"></div>
<div class="antet">
<div id="celulă">Nume</div>
<div id="celulă">Vârstă</div>
<div id="celulă">Țară</div>
</div>
<div id="rândul-1">
<div id="celulă">Jeff</div>
<div id="celulă">21</div>
<div id="celulă">STATELE UNITE ALE AMERICII</div>
</div>
<div id="rândul-2">
<div id="celulă">a da in judecata</div>
<div id="celulă">34</div>
<div id="celulă">Spania</div>
</div>
<div id="rândul-3">
<div id="celulă">Boris</div>
<div id="celulă">57</div>
<div id="celulă">Singapore</div>
</div>
</div>
</body>
</html>Creați tabele alăturate cu afișare CSS: tabel inline
La fel ca celelalte variante inline pe care le-am analizat deja, inline-table face posibilă plasarea elementelor de tabel lângă alte elemente.
Construiți layout-uri de site receptive cu afișare CSS: grilă
Valoarea grilei de afișare CSS este similară cu valoarea tabelului, numai coloanele și rândurile unei grile pot avea dimensiuni flexibile. Acest lucru face grilele ideale pentru crearea aspectului principal pentru paginile web. Ele lasă spațiu pentru anteturi și subsoluri cu lățime completă, facând în același timp posibilă crearea de zone de conținut de diferite dimensiuni.
<!DOCTYPE html>
<html lang="ro">
<cap>
<meta charset="utf-8">
<titlu>Valori de afișare CSS</title>
<stil>
.grilă {
afisare: grila;
dimensiunea fontului: 3rem;
zone-șablon-grilă:
'header header header header'
'conținut din bara laterală din stânga conținut din bara laterală din dreapta'
'footer footer footer footer';
decalaj: 10px;
}
#grid-1 {
grid-area: antet;
culoare de fundal: galben;
înălțime: 100px;
umplutură: 20px;
text-align: centru;
}
#grid-2 {
grid-area: bara laterală stânga;
culoare de fundal: verde deschis;
înălțime: 200px;
umplutură: 20px;
text-align: centru;
}
#grid-3 {
grid-area: conținut;
culoare de fundal: albastru deschis;
înălțime: 200px;
umplutură: 20px;
text-align: centru;
}
#grid-4 {
grid-area: bara laterală dreapta;
culoare de fundal: verde deschis;
înălțime: 200px;
umplutură: 20px;
text-align: centru;
}
#grid-5 {
grid-area: subsol;
culoare de fundal: galben;
înălțime: 100px;
umplutură: 20px;
text-align: centru;
}
</style>
</head>
<corp>
<h1>Grilă de afișare CSS</h1>
<div class="grilă">
<div id="grila-1">Antet</div>
<div id="grila-2">Bara laterală din stânga</div>
<div id="grila-3">Conţinut</div>
<div id="grila-4">Bara laterală din dreapta</div>
<div id="grila-5">Subsol</div>
</div>
</body>
</html>
Grilele sunt similare cu casetele flexibile, doar că pot plasa elemente sub și lângă altele. Proprietatea grid-template-areas este vitală pentru aceasta. După cum puteți vedea din cod, antetul și subsolul nostru ocupă patru spații în matrice, deoarece sunt cu lățime completă. Barele laterale ocupă câte un slot fiecare, în timp ce conținutul ocupă două, împărțind efectiv rândul din mijloc al grilei în trei coloane.
Afișare CSS: grilă inline
Utilizarea valorii grilei inline va permite grilei dvs. să se așeze lângă alte elemente, la fel ca și celelalte valori inline din acest ghid.
Utilizarea CSS Display pentru Web Design
Proprietatea de afișare CSS oferă o modalitate utilă de a ajusta structurile elementelor site-ului web fără a fi nevoie să modificați marcajul HTML. Acesta este ideal pentru cei care folosesc platforme de livrare de conținut precum Shopify sau WordPress, dar poate fi util și pentru design web general.