Utilizarea CSS Display pentru a controla aspectul site-ului web

Utilizarea CSS Display pentru a controla aspectul site-ului web

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.





REALIZAREA VIDEOCLIPULUI ZILEI

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

  text cu valoare inline css

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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

  elemente cu bloc de afișare css

Î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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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

  elemente html cu valoare css inline-block

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.





Ascunde elementele site-ului cu afișare CSS: niciunul

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

  CSS display flexbox

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<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

  css display flexbox cu valoare inline

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<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

  tabel html de bază realizat cu css

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 un element HTML . Ca părinte al elementelor cu valoarea tabel-celulă, va împărți tabelul în rânduri orizontale.

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">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ă

  elemente css cu valoare de 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 întreagă, facând totodată posibilă crearea de zone de conținut de diferite dimensiuni.

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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.

ce înseamnă smh în mesaje text

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.