కోడ్ పునరావృతం కాకుండా ఉండటానికి, మేము HTML మరియు CSSలో బహుళ తరగతులను ఉపయోగిస్తాము. CSSతో, మేము రెండు తరగతులను కలిపి నిర్వచించవచ్చు మరియు స్టైల్ చేయవచ్చు మరియు వాటికి వేర్వేరు క్లాస్ ఐడిలను కేటాయించడం ద్వారా ఒక మూలకంలో బహుళ తరగతులను ఉపయోగించవచ్చు. ఒక HTML మూలకానికి బహుళ తరగతులను జోడించడానికి స్థలం-వేరు చేయబడిన సింటాక్స్‌ని ఉపయోగించడం ద్వారా ఈ విధానాన్ని అనుసరించవచ్చు.
ఈ వ్యాసంలో, ఒక మూలకానికి బహుళ తరగతులను ఎలా జోడించాలో నేర్చుకుంటాము.
CSSలో బహుళ తరగతులను ఎలా ఉపయోగించాలి?
ఒక మూలకంలో రెండు లేదా అంతకంటే ఎక్కువ తరగతులను ఉపయోగించడానికి, ప్రతి తరగతి id ఖాళీతో వేరు చేయబడుతుంది.
ఒక మూలకంలో బహుళ తరగతులను ఉపయోగించడానికి మీరు క్రింది వాక్యనిర్మాణాన్ని అనుసరించాలి:
< h1 తరగతి = 'తరగతి_1 తరగతి_2 తరగతి_3' > అప్పగించడం... h >
ఒకే HTML మూలకంలో, మీరు వాటిని ఖాళీతో వేరు చేయడం ద్వారా ఒకటి కంటే ఎక్కువ తరగతులను చేర్చవచ్చు. మీ సౌలభ్యం కోసం, ఇక్కడ ఒక ఉదాహరణ ఉంది.
ఉదాహరణ: CSSలో బహుళ తరగతులను ఉపయోగించడం
దిగువ ఉదాహరణలో, మేము సృష్టిస్తాము:
-
ట్యాగ్‌ని ఉపయోగించి శీర్షిక మరియు తరగతి పేరును కేటాయించండి “ శీర్షిక ”.
- తరువాత, మేము మరొక శీర్షికను సృష్టిస్తాము మరియు దానిని రెండు వేర్వేరు తరగతులకు కేటాయిస్తాము: ' శీర్షిక 'మరియు' లైన్ ”. ఈ క్లాస్ ఐడిలు స్పేస్ ద్వారా వేరు చేయబడ్డాయి:
HTML
h1 >
< h1 తరగతి = 'హెడింగ్ లైన్' >
బహుళ తరగతులు లో ఒక మూలకం
h1 >
ఇప్పుడు, CSS ఫైల్‌కి వెళ్లి, క్రింద జాబితా చేయబడిన కొన్ని CSS లక్షణాలను వర్తింపజేద్దాం:
- rgb() ఫంక్షన్‌ని ఉపయోగించి శీర్షికకు నేపథ్య రంగును సెట్ చేయండి ' (69, 51, 151) ”.
- ఫాంట్ శైలిని సెట్ చేయండి ' ఇటాలిక్ ” శీర్షిక కోసం.
HTML తరగతిలో, మొదటి శీర్షిక తరగతి పేరును ఉపయోగిస్తుంది “ శీర్షిక ”. కాబట్టి, పేర్కొన్న తరగతిలో పేర్కొన్న శైలి మొదటి శీర్షికలో అమలు చేయబడుతుంది:
.శీర్షిక {
నేపథ్య రంగు: rgb ( 69 , 51 , 151 ) ;
ఫాంట్-శైలి:ఇటాలిక్
}
కొరకు ' లైన్ 'తరగతి, మాకు ఉన్నాయి:
- rgb() ఫంక్షన్‌ని ఉపయోగించి శీర్షిక యొక్క రంగును ''గా సెట్ చేయండి (255, 0, 0) ”.
- టెక్స్ట్-డెకరేషన్-లైన్‌ని ఇలా వర్తింపజేయి అండర్లైన్ ”.
రెండవ శీర్షిక రెండు తరగతుల శైలులను ఉపయోగించుకుంటుంది: ' శీర్షిక 'మరియు' లైన్ 'తరగతి:
.లైన్ {రంగు: rgb ( 255 , 0 , 0 ) ;
టెక్స్ట్-డెకరేషన్-లైన్:అండర్లైన్;
}
అమలు చేసిన తర్వాత, ఫలితాన్ని తనిఖీ చేయండి:
అవుట్‌పుట్ నుండి, రెండవ శీర్షిక రెండు CSS తరగతులను ఉపయోగించడాన్ని మీరు గమనించవచ్చు.
ముగింపు
ఒకే మూలకంపై బహుళ తరగతులను ఉపయోగించడానికి, తెలుపు ఖాళీలతో వేరు చేయబడిన విభిన్న తరగతి idలను ఉపయోగించండి. దీన్ని ఉపయోగించి, మేము ఒకేసారి వివిధ CSS లక్షణాలను వర్తింపజేయవచ్చు. సారూప్య అంశాలు ఉన్న తరగతిని మళ్లీ ఉపయోగించేందుకు ఇది అనుమతిస్తుంది. ఈ కథనం ఒకే మూలకంలో బహుళ తరగతులను ఎలా ఉపయోగించాలో మరియు ఉదాహరణతో పాటు దానిని ఎలా స్టైల్ చేయాలో వివరించింది.