దశ 2: శీర్షికను జోడించండి

తరువాత, ఏదైనా 'ని ఉపయోగించడం ద్వారా శీర్షికను చొప్పించండి

' నుండి '

' టాగ్లు. ఉదాహరణకి, '

” అనే శీర్షికను జోడిస్తుంది.

దశ 3: జాబితాకు డేటాను జోడించండి

జాబితా రూపంలో డేటాను చొప్పించడానికి, “ని ఉపయోగించండి <ఆ> ”ట్యాగ్:

---

---

< div తరగతి = 'పెంపుడు జంతువు' >

< h1 > పెంపుడు జంతువుల జాబితా < / h1 >

< అని > కోడి < / అని >

< అని > బాతు < / అని >

< అని > కుక్క < / అని >

< అని > పిల్లి < / అని >

< అని > కుందేలు < / అని >

< / div >

పైన పేర్కొన్న కోడ్ యొక్క అవుట్‌పుట్ క్రింది విధంగా ఉంది:

ఇప్పుడు, జాబితాను స్టైలింగ్ చేయడానికి CSS విభాగం వైపు ముందుకు సాగండి.

దశ 4: స్టైల్ “.పెట్-యానిమల్” ఎలిమెంట్

యాక్సెస్ చేయండి '

'అసైన్డ్ క్లాస్ సహాయంతో మూలకం' .పెంపుడు జంతువు ” మరియు జాబితా చేయబడిన లక్షణాలను వర్తింపజేయండి:

.పెంపుడు జంతువు {

సరిహద్దు : 2px చుక్కలున్నాయి rgb ( 230 , పదిహేను , పదిహేను ) ;

మార్జిన్ : 50px ;

నేపథ్య రంగు : rgb ( 252 , 239 , 169 ) ;

}

ఇక్కడ:

• ' సరిహద్దు మూలకం చుట్టూ సరిహద్దును పేర్కొనడానికి ఆస్తి ఉపయోగించబడుతుంది.
• ' మార్జిన్ ” మూలకం సరిహద్దు చుట్టూ ఖాళీని నిర్వచిస్తుంది.
• ' నేపథ్య రంగు ” మూలకం వెనుకవైపు రంగును కేటాయిస్తుంది.

ఫలిత చిత్రం పై కోడ్ యొక్క అవుట్‌పుట్‌ను చూపుతుంది:

దశ 5: శైలి జోడించిన జాబితా 'li'

ఇప్పుడు, '' జాబితాను యాక్సెస్ చేయండి div 'క్లాస్ కలిగిన కంటైనర్' పెంపుడు జంతువు 'ఉపయోగించి' .pet-animal > లి ” మరియు క్రింద పేర్కొన్న లక్షణాలను వర్తింపజేయండి:

.పెంపుడు జంతువు > అని {

దృశ్యమానత : దాచబడింది ;

అస్పష్టత : 0.2 ;

పరివర్తన : దృశ్యమానత 0సె , అస్పష్టత 0.5సె సరళ ;

}

ఇక్కడ:

• ది ' దృశ్యమానత ” CSS దాచబడిన లేదా కనిపించే వంటి పత్రం యొక్క లేఅవుట్‌ను మార్చకుండా మూలకం యొక్క దృశ్యమానతను సెట్ చేయడానికి ఉపయోగించబడుతుంది.
• ' అస్పష్టత ” ఒక మూలకం యొక్క పారదర్శకతను నిర్దేశిస్తుంది.
• ' పరివర్తన ” ఇచ్చిన వ్యవధిలో ఆస్తి విలువలను సజావుగా మార్చుకోవడానికి వినియోగదారులను అనుమతిస్తుంది:

దశ 6: 'హోవర్' సూడో క్లాస్‌ని వర్తింపజేయండి

ఇప్పుడు, వర్తించు ' హోవర్ 'జాబితాలో ఆస్తి:

.పెంపుడు జంతువు : హోవర్ > అని {

దృశ్యమానత : కనిపించే ;

అస్పష్టత : ఒకటి ;

}

ది ' : హోవర్ ” CSS అనేది ఒక నకిలీ-తరగతి, ఇది మూలకంపై మౌస్ పాయింటర్ తరలించబడినప్పుడు రన్ టైమ్‌లో మార్పులు చేస్తుంది. 'ని ఉపయోగించి జాబితాను కనిపించేలా చేయండి దృశ్యమానత 'మరియు' ఉపయోగించి పారదర్శకతను సెట్ చేయండి అస్పష్టత హోవర్‌లో జాబితాకు CSS లక్షణాలు:

''పై మేము పరివర్తనను విజయవంతంగా వర్తింపజేసినట్లు గమనించవచ్చు. ప్రదర్శన ”ఆస్తి.

ముగింపు

CSS పరివర్తన నేరుగా 'కి వర్తించదు ప్రదర్శన ”ఆస్తి. అయితే, ఇది ప్రత్యామ్నాయ మార్గంలో వర్తించవచ్చు. అలా చేయడానికి, HTML డాక్యుమెంట్‌లో జాబితా ట్యాగ్‌ని జోడించి, ట్యాగ్ పేరు ద్వారా జాబితాను యాక్సెస్ చేసి, “ని వర్తింపజేయండి. పరివర్తన ',' అస్పష్టత ', మరియు' దృశ్యమానత ”జాబితాలో CSS లక్షణాలు. అప్పుడు, 'ని ఉపయోగించండి : హోవర్ 'సూడో-క్లాస్ మరియు విజిబిలిటీ విలువను సెట్ చేయండి' కనిపించే ”. CSS డిస్‌ప్లే ప్రాపర్టీకి పరివర్తన ఎలా వర్తింపజేయబడుతుందో ఈ పోస్ట్ వివరించింది.