వెబ్ పేజీ భాగాలను నిర్వహించడంలో HTML మూలకాల స్థానం కీలక పాత్ర పోషిస్తుంది. మరింత ప్రత్యేకంగా, CSS 'ని ఉపయోగించడం ద్వారా మూలకాల స్థానాన్ని సర్దుబాటు చేయవచ్చు. స్థానం ”ఆస్తి. పేజీలోని మూలకాన్ని సర్దుబాటు చేయడానికి నిర్దిష్ట విలువలను అందించే ఎగువ, ఎడమ, కుడి మరియు దిగువ లక్షణాల వంటి ఆఫ్‌సెట్ లక్షణాలతో ఈ ఆస్తి అనుబంధించబడుతుంది. అయితే, ' సంపూర్ణ ”స్థాన మూలకాలను సమీప స్థాన మూలకానికి సంబంధించి సర్దుబాటు చేయవచ్చు.
ఈ పోస్ట్ CSS సంపూర్ణ స్థానాలను వివరిస్తుంది.
CSS 'స్థానం' ఆస్తి
ది ' స్థానం మూలకం యొక్క స్థానాన్ని సర్దుబాటు చేయడానికి CSSలోని ఆస్తిని ఉపయోగించవచ్చు. స్థాన ఆస్తి యొక్క విభిన్న విలువలు స్థిరమైనవి, సంపూర్ణమైనవి, సాపేక్షమైనవి, స్థిరమైనవి మరియు అంటుకునేవి. మూలకం యొక్క స్థానాన్ని సర్దుబాటు చేయడానికి ఎగువ, కుడి, ఎడమ మరియు దిగువ వంటి ఆఫ్‌సెట్ లక్షణాలతో ఈ విలువలు సెట్ చేయబడ్డాయి.
CSS సంపూర్ణ పొజిషనింగ్‌ను ఎలా దరఖాస్తు చేయాలి?
మూలకం యొక్క సంపూర్ణ స్థానాలను CSS ఉపయోగించి వర్తింపజేయవచ్చు ' స్థానం 'విలువతో ఆస్తి' సంపూర్ణ ”. సంపూర్ణ స్థానంతో ఉన్న మూలకం దాని సమీప స్థానంలో ఉన్న మాతృ మూలకానికి అనుగుణంగా సర్దుబాటు చేయబడుతుంది. కానీ పూర్వీకులు ఉంచబడకపోతే, అది పత్రం యొక్క శరీర విభాగానికి సంబంధించి సర్దుబాటు చేస్తుంది.
ఉదాహరణ
ఆచరణాత్మక ఉదాహరణతో భావనను అర్థం చేసుకుందాం.
దశ 1: HTML ఫైల్‌ను సృష్టించండి
HTML ఫైల్‌లో, బాడీ ఎలిమెంట్‌లో, 'క్లాస్ పేరుతో ఒక divని జోడించండి ప్రధాన ”. ఆపై, సృష్టించిన div లోపల, క్రింది లక్షణాలతో అనుబంధించబడిన HTML ట్యాగ్‌ని జోడించండి:
-
- ' src ” చిత్రానికి లింక్ అందిస్తుంది.
- ' తరగతి ” మూలకాలను స్టైల్ చేయడానికి CSSలో ఉపయోగించబడుతుంది.
- ' ప్రతిదీ పేజీలో చిత్రం లోడ్ కావడంలో విఫలమైతే చిత్రం స్థానంలో చూపే వచనాన్ని లక్షణం నిర్దేశిస్తుంది.
- ' ప్రతిదీ ”అట్రిబ్యూట్ చిత్రం పేజీలో లోడ్ చేయడంలో విఫలమైతే, చిత్రం స్థానంలో పేజీలో చూపే వచనాన్ని నిర్దేశిస్తుంది.
ఆపై, శీర్షిక మరియు పేరా యొక్క h1 మరియు p మూలకాలను కలిగి ఉన్న మరొక డివిని జోడించండి:
< div తరగతి = 'ప్రధాన' >< div తరగతి = 'విషయము' >
< img src = 'images/linuxlogo.png' తరగతి = 'ఇల్లు' ప్రతిదీ = 'linux లోగో' వెడల్పు = '80px' >
< h1 > CSS సంపూర్ణ స్థానాలు h1 >
< p > హలో Linuxhint బృందం ! p >
div >
div >
CSSలో, HTML మూలకాలను అలంకరించేందుకు అనేక స్టైలింగ్ లక్షణాలు ఉపయోగించబడతాయి.
దశ 2: 'అన్ని' ఎలిమెంట్స్ శైలి
* {ఫాంట్-కుటుంబం: వర్దానా, జెనీవా, తహోమా, సాన్స్-సెరిఫ్;
}
HTML మూలకాలు “ని ఉపయోగించి స్టైల్ చేయబడ్డాయి ఫాంట్ కుటుంబం 'విలువతో ఆస్తి' వర్దానా, జెనీవా, తహోమా, సాన్స్-సెరిఫ్ ”. ఈ విలువల జాబితా బ్రౌజర్ మొదటి శైలికి మద్దతు ఇవ్వకపోతే, మరొకటి వర్తింపజేయబడుతుందని నిర్ధారిస్తుంది.
దశ 3: శైలి 'హోమ్' డివి
.హోమ్ {స్థానం: సంపూర్ణ;
టాప్: 50px;
ఎడమ: 45px;
}
'కి వర్తించే లక్షణాలు క్రింద ఉన్నాయి ఇల్లు 'విభాగం:
-
- ' స్థానం ” ఆస్తి మూలకం యొక్క స్థానాన్ని సెట్ చేస్తుంది. ఇక్కడ, జోడించబడింది ' సంపూర్ణ ” HTML యొక్క శరీర విభాగానికి సంబంధించి మూలకాన్ని ఉంచుతుంది.
- ' టాప్ మూలకం యొక్క నిలువు సర్దుబాటు కోసం ఆస్తి ఉపయోగించబడుతుంది.
- ' వదిలేశారు మూలకం యొక్క క్షితిజ సమాంతర సర్దుబాటు కోసం ఆస్తి ఉపయోగించబడుతుంది.
దశ 4: శైలి “కంటెంట్” డివి
.విషయము {నేపథ్య రంగు: క్యాడెట్బ్లూ;
వెడల్పు: 300px;
ఎత్తు: 250px;
పాడింగ్-ఎడమ: 40px;
అంచు-ఎడమ: 80px;
}
“కి వర్తించే CSS లక్షణాలు క్రింద ఉన్నాయి విషయము 'విభాగం:
-
- ' నేపథ్య రంగు ”ప్రాపర్టీ మూలకం యొక్క నేపథ్య రంగును సెట్ చేస్తుంది.
- ' వెడల్పు ” ఆస్తి మూలకం యొక్క వెడల్పును సెట్ చేస్తుంది.
- ' ఎత్తు ”ఆస్తి మూలకం యొక్క ఎత్తును సెట్ చేస్తుంది.
- ' పాడింగ్-ఎడమ ” ఎలిమెంట్ కంటెంట్‌కి ఎడమవైపు స్పేస్‌ని జోడించడానికి ప్రాపర్టీ సెట్ చేయబడింది.
- ' మార్జిన్-ఎడమ ” లక్షణం మూలకం యొక్క ఎడమ వైపున ఉన్న స్థలాన్ని నిర్దేశిస్తుంది.
ఈ సమయంలో, మా వెబ్ పేజీ ఇలా కనిపిస్తుంది:
పత్రం యొక్క శరీరం యొక్క ఎగువ నుండి 50px మరియు ఎడమ నుండి 45px వద్ద div హోమ్ యొక్క చిత్రం ఉంచబడిందని పై ఫలితం నుండి చూడవచ్చు. అంతేకాకుండా, హోమ్ డివి యొక్క స్థానం HTML యొక్క శరీర విభాగానికి సంబంధించి సెట్ చేయబడింది.
పొజిషన్డ్ పేరెంట్ ఎలిమెంట్‌కి 'సంబంధిత' మూలకం యొక్క స్థానాన్ని ఎలా సర్దుబాటు చేయాలి?
ఈ విభాగం సమీప స్థానానికి సంబంధించిన మూలకం యొక్క స్థానాన్ని సర్దుబాటు చేయడంపై మీకు మార్గనిర్దేశం చేస్తుంది.
'కంటెంట్' డివి యొక్క 'స్థానం' లక్షణాన్ని సెట్ చేయండి
స్థానం: బంధువు;
మాతృ మూలకానికి సంబంధించి మూలకం యొక్క స్థానాన్ని సర్దుబాటు చేయడానికి, 'ని సెట్ చేయండి స్థానం 'మాతృ మూలకం యొక్క ఆస్తికి' బంధువు ' విలువ.
'img' మూలకం యొక్క 'స్థానం' లక్షణాన్ని సెట్ చేయండి
.హోమ్ {స్థానం: సంపూర్ణ;
టాప్: 100px;
ఎడమ: 220px;
}
ఇక్కడ:
-
- ' స్థానం 'విలువతో ఆస్తి'గా సెట్ చేయబడింది సంపూర్ణ ” పేరెంట్ ఎలిమెంట్‌కి సంబంధించి ఉంచబడుతుంది (అంటే, కంటెంట్ డివివ్ స్థానం సంబంధిత విలువతో సెట్ చేయబడింది).
- ' టాప్ ”ఎలిమెంట్ పొజిషన్‌ను ఎగువ నుండి సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
- ' వదిలేశారు ” ఎలిమెంట్ పొజిషన్‌ను ఎడమవైపు నుండి సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
అవుట్‌పుట్
చిత్రం దాని పేరెంట్ డివికి సంబంధించి ఉంచబడిందని మరియు అది సముచితంగా ఉందని ఫలితం నుండి చూడవచ్చు.
ముగింపు
CSS' స్థానం HTML మూలకాల స్థానాన్ని సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది. ఈ ఆస్తిని స్థిరంగా, సాపేక్షంగా, సంపూర్ణంగా, జిగటగా మరియు స్థిరంగా అంచనా వేయవచ్చు. ది ' సంపూర్ణ ”విలువ మూలకం దాని సమీపంలోని స్థానంలో ఉన్న పేరెంట్ ఎలిమెంట్‌కు అనుగుణంగా ఉంటుంది. ఈ పోస్ట్ CSS సంపూర్ణ స్థానాలను ఆచరణాత్మక ఉదాహరణతో వివరించింది.