వెబ్‌సైట్ లేఅవుట్‌లను నియంత్రించడానికి CSS ప్రదర్శనను ఉపయోగించడం

CSS డిస్‌ప్లే ప్రాపర్టీ అనేది వెబ్ డిజైనర్‌లకు శక్తివంతమైన సాధనం. ఇది వెబ్‌సైట్ ఎలిమెంట్ లేఅవుట్‌లను కనిష్ట స్టైలింగ్‌తో సులభంగా గుర్తుంచుకోగలిగే సాధారణ విలువలతో నియంత్రించడానికి మిమ్మల్ని అనుమతిస్తుంది.

కానీ ఈ ప్రతి విలువలు ఏమి చేస్తాయి మరియు అవి ఎలా పని చేస్తాయి? తెలుసుకుందాం.

రోజు యొక్క వీడియోను తయారు చేయండి

CSS డిస్ప్లే ప్రాపర్టీ అంటే ఏమిటి?

ప్రదర్శన లక్షణం వెబ్‌పేజీలో HTML మూలకాల కోసం ఉపయోగించే బాక్స్ రెండరింగ్ రకాన్ని నిర్దేశిస్తుంది. ఇది అన్నింటిలో కనిపించకపోవటంతో సహా అనేక రకాల ప్రవర్తనలకు దారి తీస్తుంది. మీరు స్టైల్ షీట్ లేదా తగిన CSS అనుకూలీకరణ విభాగాల ద్వారా మీ వెబ్‌సైట్‌లో ఈ విలువలను సవరించవచ్చు WordPress వంటి CMS సాధనాలు .

CSS డిస్‌ప్లేతో ఎలిమెంట్స్‌ని లైన్‌లో ఉంచండి: ఇన్‌లైన్

వెడల్పు మరియు ఎత్తు విలువలు ఇన్‌లైన్ డిస్‌ప్లే ఉన్న మూలకానికి వర్తించవు; లోపల కంటెంట్ దాని కొలతలు సెట్ చేస్తుంది. ఇన్‌లైన్ HTML ఎలిమెంట్‌లు ఇతర మూలకాలతో పక్కపక్కనే కూర్చుని, ఒక లాగా ప్రవర్తించగలవు . టెక్స్ట్ కోసం డిస్ప్లే ఇన్‌లైన్ సాధారణంగా ఉపయోగించబడుతుంది.

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

పైన ఉన్న ఈ HTML మార్కప్ మరియు CSS డిస్‌ప్లే ఇన్‌లైన్ విలువకు మంచి ఉదాహరణ. కలిసి ఉపయోగించినప్పుడు, ఇది రెండు వేర్వేరు HTML మూలకాలతో రూపొందించబడిన వచనం యొక్క ఒకే వరుసను ప్రదర్శిస్తుంది.

CSS ప్రదర్శనతో వెబ్‌సైట్ లేఅవుట్‌లను నియంత్రించండి: నిరోధించండి

కొన్ని మార్గాల్లో, డిస్ప్లే బ్లాక్ విలువ ఇన్లైన్ విలువకు వ్యతిరేకం. ఎత్తు మరియు వెడల్పు కొలతలు సెట్ చేయబడతాయి మరియు ఈ విలువ కలిగిన మూలకాలు ఒకదానికొకటి పక్కన కూర్చోవు. ఎగువ ఉదాహరణ బ్లాక్ విలువతో రెండు మూలకాలను చూపుతుంది. వాటి మాతృ మూలకం యొక్క గరిష్ట వెడల్పు వద్ద బ్లాక్ డిస్‌ప్లే విలువ డిఫాల్ట్‌గా ఉన్న ఎలిమెంట్స్.

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

ఇన్‌లైన్ శైలి ఉదాహరణ వలె కాకుండా, ఈ డిస్‌ప్లే బ్లాక్ విలువ ఉదాహరణ టెక్స్ట్ యొక్క పంక్తులను రెండు వేర్వేరు పంక్తులుగా విభజిస్తుంది. ఫిట్-కంటెంట్ వెడల్పు విలువ టెక్స్ట్ పొడవుతో సరిపోలడానికి మూలకాల వెడల్పును సెట్ చేస్తుంది.

CSS డిస్‌ప్లేతో పక్కపక్కనే HTML ఎలిమెంట్స్: ఇన్‌లైన్-బ్లాక్

css ఇన్‌లైన్-బ్లాక్ విలువతో html మూలకాలు

CSS డిస్‌ప్లే ఇన్‌లైన్-బ్లాక్ విలువ సాధారణ ఇన్‌లైన్ విలువ వలె పని చేస్తుంది, నిర్దిష్ట కొలతలు జోడించగల సామర్థ్యంతో మాత్రమే. ఇది పేరెంట్ ఎలిమెంట్స్ లేకుండా గ్రిడ్ లాంటి లేఅవుట్‌లను సృష్టించడం సాధ్యం చేస్తుంది. మునుపటి ఉదాహరణకి తిరిగి వెళితే, ఇన్‌లైన్-బ్లాక్ విలువను జోడించడం మూలకాలను ఒకదానికొకటి పక్కన పెట్టడానికి అనుమతిస్తుంది.

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

ఇన్‌లైన్-బ్లాక్ విలువ ఇన్‌లైన్ విలువకు భిన్నంగా కనిపించదు. మీరు ఈ విలువతో మూలకాల కొలతలు సెట్ చేయవచ్చని గమనించడం ముఖ్యం, అయితే, కొన్ని సందర్భాల్లో పని చేయడం సులభం అవుతుంది.

CSS డిస్‌ప్లేతో వెబ్‌సైట్ ఎలిమెంట్‌లను దాచండి: ఏదీ లేదు

సరళమైన ప్రదర్శన విలువ 'ఏదీ లేదు'. ఈ విలువ అంచులు మరియు ఇతర అంతరాల లక్షణాలతో పాటు మూలకం మరియు ఏదైనా చైల్డ్ ఎలిమెంట్‌లను దాచిపెడుతుంది. CSS డిస్‌ప్లే ఏవీ విలువ లేని మూలకాలు బ్రౌజర్ ఇన్‌స్పెక్టర్‌లలో ఇప్పటికీ కనిపించవు.

CSS డిస్‌ప్లేతో ఫ్లెక్సిబుల్ మరియు రెస్పాన్సివ్ ఎలిమెంట్స్‌ని సృష్టించండి: ఫ్లెక్స్

డిస్ప్లే ఫ్లెక్స్ అనేది సరికొత్త CSS లేఅవుట్ మోడ్‌లలో ఒకటి. డిస్‌ప్లే ఫ్లెక్స్ పేరెంట్ ఎలిమెంట్‌లో ఉన్నప్పుడు, దానిలోని అన్ని ఎలిమెంట్స్ ఫ్లెక్సిబుల్ CSS ఎలిమెంట్‌లుగా మారతాయి. ఈ కాన్ఫిగరేషన్‌లోని పేరెంట్ ఎలిమెంట్ ఫ్లెక్స్‌బాక్స్.

ఫ్లెక్స్‌బాక్స్‌లు వెడల్పు మరియు ఎత్తు వంటి ముందే నిర్వచించబడిన వేరియబుల్‌లతో ప్రతిస్పందించే డిజైన్‌లను సృష్టిస్తాయి. తగినది HTML/CSS ఫ్లెక్స్‌బాక్స్‌ల గురించి నేర్చుకోవడం మీరు ప్రారంభించడానికి ముందు.

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

డిస్ప్లేతో ఫ్లెక్స్‌బాక్స్‌లను పక్కపక్కనే ఉంచండి: ఇన్‌లైన్-ఫ్లెక్స్

css డిస్ప్లే ఫ్లెక్స్‌బాక్స్ ఇన్‌లైన్ విలువతో

ఇన్‌లైన్-ఫ్లెక్స్ సాధారణ ఫ్లెక్స్‌బాక్స్ వలె ప్రవర్తిస్తుంది, మూలకం యొక్క అదనపు ప్రయోజనం ఇతర మూలకాల పక్కన కూర్చోగలదు.

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

CSS ప్రదర్శనతో సంక్లిష్ట పట్టికలను సృష్టించండి: పట్టిక

ప్రాథమిక html పట్టిక cssతో తయారు చేయబడింది

ప్రదర్శన పట్టిక విలువ వెబ్‌సైట్ రూపకల్పన యొక్క పాత రోజులను గుర్తుకు తెస్తుంది. ఈ రోజు చాలా వెబ్‌సైట్‌లు వాటి లేఅవుట్‌ల కోసం టేబుల్‌లను ఉపయోగించనప్పటికీ, డేటా మరియు కంటెంట్‌ను చదవగలిగే ఫార్మాట్‌లో చూపడం కోసం అవి ఇప్పటికీ చెల్లుబాటు అవుతాయి.

HTML మూలకానికి పట్టిక విలువను జోడించడం వలన అది పట్టిక మూలకం వలె పని చేస్తుంది, కానీ మీ పట్టిక సరిగ్గా పని చేయడానికి మీకు అదనపు విలువలు అవసరం.

CSS ప్రదర్శన: టేబుల్-సెల్

టేబుల్-సెల్ విలువ కలిగిన మూలకాలు ప్రధాన పట్టికలోని వ్యక్తిగత సెల్‌లుగా పనిచేస్తాయి. మరియు పట్టిక-కాలమ్ మరియు పట్టిక-వరుస విలువలు ఈ వ్యక్తిగత కణాలను సమూహపరుస్తాయి.

cpu కోసం ఏ ఉష్ణోగ్రతలు చాలా వేడిగా ఉంటాయి

CSS ప్రదర్శన: పట్టిక-వరుస

పట్టిక-వరుస విలువ HTML మూలకం వలె పని చేస్తుంది. టేబుల్-సెల్ విలువతో మూలకాల యొక్క పేరెంట్‌గా, ఇది మీ పట్టికను క్షితిజ సమాంతర వరుసలుగా విభజిస్తుంది.

CSS ప్రదర్శన: టేబుల్-కాలమ్

పట్టిక-నిలువు వరుస విలువ పట్టిక-వరుస విలువ వలె పని చేస్తుంది, అది మాత్రమే మీ పట్టికను విభజించదు. బదులుగా, మీరు ఇప్పటికే ఉన్న వివిధ నిలువు వరుసలకు నిర్దిష్ట CSS నియమాలను జోడించడానికి ఈ విలువను ఉపయోగించవచ్చు.

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

CSS డిస్‌ప్లేతో ప్రక్క ప్రక్క పట్టికలను సృష్టించండి: ఇన్‌లైన్-టేబుల్

మేము ఇప్పటికే చూసిన ఇతర ఇన్‌లైన్ వేరియంట్‌ల మాదిరిగానే, ఇన్‌లైన్-టేబుల్ ఇతర మూలకాల పక్కన టేబుల్ ఎలిమెంట్‌లను ఉంచడం సాధ్యం చేస్తుంది.

CSS ప్రదర్శనతో ప్రతిస్పందించే వెబ్‌సైట్ లేఅవుట్‌లను రూపొందించండి: గ్రిడ్

CSS డిస్ప్లే గ్రిడ్ విలువ పట్టిక విలువను పోలి ఉంటుంది, గ్రిడ్ యొక్క నిలువు వరుసలు మరియు అడ్డు వరుసలు మాత్రమే అనువైన పరిమాణాన్ని కలిగి ఉంటాయి. ఇది వెబ్ పేజీల కోసం ప్రధాన లేఅవుట్‌ను రూపొందించడానికి గ్రిడ్‌లను అనువైనదిగా చేస్తుంది. విభిన్న పరిమాణాల కంటెంట్ ఏరియాలను కలిగి ఉండేలా చేయడంతో పాటు పూర్తి-వెడల్పు హెడర్‌లు మరియు ఫుటర్‌ల కోసం అవి ఖాళీని వదిలివేస్తాయి.

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

గ్రిడ్‌లు ఫ్లెక్స్‌బాక్స్‌ల మాదిరిగానే ఉంటాయి, అవి మాత్రమే ఎలిమెంట్‌లను ఒకదానికొకటి క్రింద మరియు పక్కన ఉంచగలవు. గ్రిడ్-టెంప్లేట్-ఏరియా ప్రాపర్టీ దీనికి చాలా ముఖ్యమైనది. మీరు కోడ్ నుండి చూడగలిగినట్లుగా, మా హెడర్ మరియు ఫుటర్ పూర్తి-వెడల్పు ఉన్నందున శ్రేణిలో నాలుగు ఖాళీలను తీసుకుంటాయి. సైడ్‌బార్‌లు ఒక్కొక్కటి ఒక్కో స్లాట్‌ను తీసుకుంటాయి, అయితే కంటెంట్ రెండు తీసుకుంటుంది, గ్రిడ్ మధ్య వరుసను మూడు నిలువు వరుసలుగా విభజిస్తుంది.

CSS ప్రదర్శన: ఇన్‌లైన్-గ్రిడ్

ఇన్‌లైన్-గ్రిడ్ విలువను ఉపయోగించడం వలన ఈ గైడ్‌లోని ఇతర ఇన్‌లైన్ విలువల మాదిరిగానే మీ గ్రిడ్ ఇతర మూలకాల పక్కన కూర్చునేలా చేస్తుంది.

వెబ్ డిజైన్ కోసం CSS ప్రదర్శనను ఉపయోగించడం

CSS డిస్ప్లే ప్రాపర్టీ HTML మార్కప్‌ను మార్చకుండా వెబ్‌సైట్ ఎలిమెంట్ నిర్మాణాలను సర్దుబాటు చేయడానికి సులభమైన మార్గాన్ని అందిస్తుంది. Shopify లేదా WordPress వంటి కంటెంట్ డెలివరీ ప్లాట్‌ఫారమ్‌లను ఉపయోగించే వారికి ఇది అనువైనది, అయితే ఇది సాధారణ వెబ్ డిజైన్‌కు కూడా ఉపయోగపడుతుంది.