Používanie zobrazenia CSS na ovládanie rozloženia webových stránok

Používanie zobrazenia CSS na ovládanie rozloženia webových stránok

Vlastnosť CSS display je výkonný nástroj pre web dizajnérov. Umožňuje vám ovládať rozloženia prvkov webovej stránky s minimálnym štýlom, s jednoduchými hodnotami, ktoré si ľahko zapamätáte.





Čo však každá z týchto hodnôt robí a ako fungujú? Poďme zistiť.



VYUŽITIE VIDEA DŇA

Čo je vlastnosť zobrazenia CSS?

Vlastnosť display určuje typ vykresľovania rámčeka použitého pre prvky HTML na webovej stránke. To má za následok rôzne správanie, vrátane toho, že sa vôbec neobjaví. Tieto hodnoty môžete upraviť na svojej webovej lokalite prostredníctvom šablóny štýlov alebo príslušných sekcií prispôsobenia CSS v CMS nástroje ako WordPress .





Udržujte prvky v súlade so zobrazením CSS: vložené

text s vloženou hodnotou css

Hodnoty šírky a výšky sa nevzťahujú na prvok s vloženým zobrazením; obsah vo vnútri určuje jeho rozmery. Vložené prvky HTML môžu sedieť vedľa seba s inými prvkami a správať sa ako a . Display inline sa najčastejšie používa pre 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>

Toto označenie HTML a CSS uvedené vyššie slúžia ako dobrý príklad zobrazenej vnorenej hodnoty. Pri spoločnom použití sa zobrazí jeden riadok textu s dvoma rôznymi prvkami HTML.



keď sa posúvam nadol, stúpa

Ovládanie rozloženia webových stránok pomocou zobrazenia CSS: blok

prvky s blokom zobrazenia css

V niektorých ohľadoch je hodnota bloku zobrazenia opakom vloženej hodnoty. Rozmery výšky a šírky je možné nastaviť a prvky s touto hodnotou nemôžu sedieť vedľa seba. Vyššie uvedený príklad ukazuje dva prvky s hodnotou bloku. Prvky so zobrazenou hodnotou bloku majú predvolenú maximálnu šírku svojho nadradeného prvku.

<!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>

Na rozdiel od príkladu vloženého štýlu tento príklad hodnoty bloku zobrazenia rozdeľuje riadky textu na dva rôzne riadky. Hodnota fit-content width nastavuje šírku prvkov tak, aby zodpovedala dĺžke textu.



Prvky HTML vedľa seba so zobrazením CSS: inline-block

html prvky s hodnotou css inline-block

Hodnota inline-block zobrazenia CSS funguje rovnako ako bežná vložená hodnota, iba s možnosťou pridať konkrétne dimenzie. To umožňuje vytvárať rozloženia podobné mriežke bez toho, aby boli na mieste nadradené prvky. Ak sa vrátime k predchádzajúcemu príkladu, pridanie hodnoty inline-block umožňuje, aby prvky sedeli vedľa seba.

<!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>

Hodnota vloženého bloku sa nezdá byť príliš odlišná od vloženej hodnoty. Je dôležité poznamenať, že pomocou tejto hodnoty môžete nastaviť rozmery prvkov, čím sa v určitých prípadoch uľahčí práca.



Skryť prvky webovej stránky so zobrazením CSS: žiadne

Najjednoduchšia zobrazená hodnota je „žiadna“. Táto hodnota skryje prvok a všetky podradené prvky spolu s okrajmi a inými vlastnosťami medzier. Prvky s hodnotou CSS display none sú stále viditeľné v rámci inšpektorov prehliadača.

Vytvárajte flexibilné a citlivé prvky s CSS displejom: flex

css displej flexbox

Display flex je jedným z najnovších režimov rozloženia CSS. Keď je ohyb zobrazenia na nadradenom prvku, všetky prvky v ňom sa stanú flexibilnými prvkami CSS. Nadradeným prvkom v tejto konfigurácii je flexbox.

Flexboxy vytvárajú responzívne návrhy s preddefinovanými premennými, ako je šírka a výška. Stojí to za to učenie o HTML/CSS flexboxoch než začnete.

<!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>

Umiestnenie Flexboxov vedľa seba S displejom: inline-flex

css displej flexbox s vloženou hodnotou

Inline-flex sa správa rovnako ako bežný flexbox, s ďalšou výhodou prvku, ktorý môže sedieť vedľa iných prvkov.

<!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>

Vytvárajte komplexné tabuľky s CSS zobrazením: tabuľka

základná html tabuľka vytvorená pomocou css

Hodnota zobrazovanej tabuľky pripomína staršie časy dizajnu webových stránok. Zatiaľ čo väčšina webových stránok dnes nepoužíva tabuľky pre svoje rozloženia, stále sú platné na zobrazenie údajov a obsahu v čitateľnom formáte.

Pridaním hodnoty tabuľky do prvku HTML bude fungovať ako prvok tabuľky, ale na správne fungovanie tabuľky potrebujete ďalšie hodnoty.

CSS zobrazenie: tabuľka-bunka

Prvky s hodnotou bunky tabuľky fungujú ako samostatné bunky v hlavnej tabuľke. Hodnoty stĺpca tabuľky a riadka tabuľky zoskupujú tieto jednotlivé bunky.

CSS zobrazenie: table-row

Hodnota riadka tabuľky funguje rovnako ako prvok HTML . Ako rodič prvkov s hodnotou table-cell rozdelí vašu tabuľku na vodorovné riadky.

zmeniť gmail späť na starý štýl

CSS zobrazenie: tabuľka-stĺpec

Hodnota stĺpca tabuľky funguje podobne ako hodnota riadka tabuľky, len vašu tabuľku nerozdeľuje. Namiesto toho môžete túto hodnotu použiť na pridanie konkrétnych pravidiel CSS do rôznych stĺpcov, ktoré už existujú.

<!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>

Vytvárajte tabuľky vedľa seba so zobrazením CSS: vložená tabuľka

Rovnako ako ostatné inline varianty, na ktoré sme sa už pozreli, inline-table umožňuje umiestniť prvky tabuľky vedľa iných prvkov.

Vytvárajte responzívne rozloženia webových stránok s CSS zobrazením: mriežka

css prvky s hodnotou mriežky

Hodnota zobrazovanej mriežky CSS je podobná hodnote tabuľky, iba stĺpce a riadky mriežky môžu mať flexibilnú veľkosť. Vďaka tomu sú mriežky ideálne na vytváranie hlavného rozloženia webových stránok. Nechávajú priestor pre hlavičky a päty s plnou šírkou a zároveň umožňujú mať oblasti obsahu rôznych veľkostí.

<!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>

Mriežky sú podobné ako flexboxy, len môžu umiestniť prvky pod a vedľa seba. Vlastnosť grid-template-areas je na to životne dôležitá. Ako môžete vidieť z kódu, naša hlavička a päta zaberajú štyri medzery v poli, pretože majú celú šírku. Bočné panely zaberajú každý jeden slot, zatiaľ čo obsah zaberá dva, čo efektívne rozdeľuje stredný riadok mriežky na tri stĺpce.

CSS zobrazenie: inline-grid

Použitie hodnoty vloženej mriežky umožní, aby vaša mriežka sedela vedľa iných prvkov, rovnako ako ostatné vložené hodnoty v tejto príručke.

Použitie CSS Display pre webový dizajn

Vlastnosť zobrazenia CSS ponúka praktický spôsob úpravy štruktúr prvkov webových stránok bez toho, aby ste museli meniť označenie HTML. To je ideálne pre tých, ktorí používajú platformy na doručovanie obsahu, ako sú Shopify alebo WordPress, ale môže to byť užitočné aj pre všeobecný webový dizajn.