మీరు మూలకంకు ఒక సింగిల్ CSS తరగతికి పరిమితం కాలేదు.
క్యాస్కేడింగ్ స్టైల్ షీట్స్ (CSS) మీరు ఆ మూలకానికి వర్తించే లక్షణాల్లోకి అడుగుతూ ఒక మూలకం యొక్క రూపాన్ని నిర్వచించడానికి మిమ్మల్ని అనుమతిస్తాయి. ఈ లక్షణాలను గాని మరియు ID లేదా తరగతి గానీ మరియు అన్ని గుణాల లాగా ఉండవచ్చు, వారు జోడించిన అంశాలకు సహాయకరమైన సమాచారాన్ని జోడించండి. ఏ అంశానికి మీరు జోడించే లక్షణాన్ని బట్టి, మీరు ఆ కోణాన్ని మరియు వెబ్సైట్ మొత్తానికి మరియు అనుభూతిని సాధించడానికి అవసరమైన దృశ్య శైలులను వర్తింపజేయడానికి CSS సెలెక్టర్ను వ్రాయవచ్చు.
ID నియమాలు లేదా తరగతులు CSS నియమాలు వాటిని లోకి క్రింది సందర్భములో కోసం పని చేస్తున్నప్పుడు, ఆధునిక వెబ్ రూపకల్పన పద్ధతులు ఐడిల మీద తరగతులకు అనుకూలంగా ఉంటాయి, ఎందుకంటే వారు తక్కువగా నిర్దిష్ట మరియు మొత్తంతో పనిచేయడం సులభం. అవును, ID లను ఉపయోగించే అనేక సైట్లను మీరు ఇప్పటికీ కనుగొంటారు, కానీ ఆ లక్షణాలను గతంలో కంటే తక్కువ ఖర్చుతో వర్తింప చేస్తున్నారు, అయితే తరగతులు ఆధునిక వెబ్ పేజీలను స్వాధీనం చేసుకున్నాయి.
CSS లో సింగిల్ లేదా బహుళ క్లాసులు?
చాలా సందర్భాల్లో మీరు ఒక తరగతికి ఒక తరగతి లక్షణాన్ని కేటాయించవచ్చు, కానీ మీరు ID లు ఉన్న వారు కేవలం ఒక తరగతికి మాత్రమే పరిమితం కాదు. ఒక మూలకం మాత్రమే ఒక సింగిల్ ID లక్షణం కలిగి ఉండగా, మీరు ఖచ్చితంగా ఒక మూలకం బహుళ తరగతులు ఇవ్వగలిగిన మరియు, కొన్ని సందర్భాల్లో, మీ శైలి సులభంగా శైలి మరియు మరింత అనువైన చేస్తుంది!
మీరు ఒక మూలకాన్ని బహుళ తరగతులను కేటాయించాల్సిన అవసరం ఉంటే, మీరు అదనపు తరగతులను జోడించవచ్చు మరియు వాటిని మీ లక్షణంలో ఖాళీతో వేరు చేయవచ్చు.
ఉదాహరణకు, ఈ పేరాలో మూడు తరగతులు ఉన్నాయి:
pullquote featured left "> ఇది పేరాగ్రాఫ్ యొక్క టెక్స్ట్ అవుతుంది
ఇది పేరా ట్యాగ్లో క్రింది మూడు తరగతులను అమర్చుతుంది:
- Pullquote
- ఫీచర్
- ఎడమ
ఈ తరగతి విలువల్లో ప్రతి ఒక్కటి మధ్య ఖాళీలు గమనించండి. ఆ ఖాళీలు వేర్వేరు, వ్యక్తిగత తరగతులుగా వాటిని అమర్చుకుంటాయి. తరగతి పేర్లు వాటిలో ఖాళీలు ఎందుకు ఉండకూడదు అనేదానికి కూడా ఇది కారణం.
ఉదాహరణకు, మీరు ఒక స్థలం లేకుండా "లాక్క్లోట్-ఫీచర్డ్-లెఫ్ట్" ను ఉపయోగించినట్లయితే, ఇది ఒక తరగతి విలువగా ఉంటుంది, కానీ పైన పేర్కొన్న ఉదాహరణ, ఈ మూడు పదాలను ఖాళీతో వేరు చేసి, వాటిని వ్యక్తిగత విలువలుగా సెట్ చేస్తుంది. మీ వెబ్పార్సులో తరగతి విలువలు ఏది ఉపయోగించాలో నిర్ణయించేటప్పుడు ఈ భావనను అర్థం చేసుకోవడం చాలా ముఖ్యం.
మీరు HTML లో మీ తరగతి విలువలను కలిగి ఉంటే, మీరు మీ CSS లో తరగతులుగా ఈ పెట్టవచ్చు మరియు మీరు జోడించాలనుకుంటున్న శైలులను వర్తింపజేయవచ్చు. ఉదాహరణకి.
. pullquote {...}
.ఫీచర్ {...}
p.left {...}
ఈ ఉదాహరణలలో, CSS డిక్లరేషన్లు మరియు విలువలు జంటలు గిరజాల కలుపులు లోపల ఉంటాయి, ఆ శైలులు సరైన సెలెక్టర్కు వర్తింపజేయబడతాయి.
గమనిక - మీరు ఒక నిర్దిష్ట అంశానికి ఒక తరగతి సెట్ చేస్తే (ఉదాహరణకు, p.left), మీరు ఇప్పటికీ దానిని తరగతుల జాబితాలో భాగంగా ఉపయోగించవచ్చు; అయినప్పటికీ, CSS లో పేర్కొన్న ఆ అంశాలని మాత్రమే ప్రభావితం చేస్తుందని తెలుసుకోండి. ఇతర మాటలలో, p.left శైలి ఈ తరగతికి సంబంధించిన పేరాలకు మాత్రమే వర్తిస్తుంది, ఎందుకంటే మీ సెలెక్టర్ వాస్తవానికి 'ఎడమ' యొక్క తరగతి విలువతో పేరాలకు వర్తింపజేస్తుందని చెప్పడం జరిగింది. దీనికి విరుద్ధంగా, ఉదాహరణలోని ఇతర రెండు సెలెక్టర్లు నిర్దిష్ట మూలకాన్ని పేర్కొనవు, కాబట్టి ఆ వర్గ విలువలను ఉపయోగించే ఎలిమెంట్కు అవి వర్తిస్తాయి.
బహుళ తరగతుల ప్రయోజనాలు
బహుళ తరగతులు ఆ మూలకం కోసం సరికొత్త శైలిని సృష్టించడానికి చేయకుండా అంశాలకు ప్రత్యేక ప్రభావాలను సులభంగా జోడించవచ్చు.
ఉదాహరణకు, మీరు ఎడమ లేదా కుడి వైపుకు అంశాలను తేలుతున్న సామర్ధ్యాన్ని కలిగి ఉండొచ్చు. మీరు కేవలం రెండు ఫ్లోట్లను వ్రాయవచ్చు మరియు కుడివైపున ఫ్లోట్ తో వ్రాయవచ్చు: ఎడమ; మరియు ఫ్లోట్: కుడి; వాటిలో. అప్పుడు, మీరు ఎలిమెంట్ ను కలిగి ఉన్నప్పుడల్లా మీరు ఎడమ ఫ్లోట్ అవసరం, మీరు తరగతి తరగతికి "ఎడమ" ను చేర్చుతారు.
ఇక్కడ నడవడానికి సన్నని గీత ఉంది. వెబ్ ప్రమాణాలు శైలి మరియు నిర్మాణం యొక్క విభజనను నిర్దేశిస్తాయి. శైలి CSS లో ఉండగా నిర్మాణం HTML ద్వారా నిర్వహించబడుతుంది.
మీ HTML పత్రం మూలకాలతో నిండి ఉంటే, అన్ని "ఎరుపు" లేదా "ఎడమ" వంటి తరగతి పేర్లను కలిగి ఉన్నట్లయితే, అవి ఎటువంటి అంశాలను కాకుండా, ఎలా ఉన్నాయో తెలిపే పేర్లను సూచిస్తాయి, మీరు నిర్మాణం మరియు శైలి మధ్య ఆ రేఖను దాటుతుంటారు. నేను ఈ కారణంగా నా నాన్-సెమాంటిక్ తరగతి పేర్లను వీలైనంతగా పరిమితం చేసేందుకు ప్రయత్నిస్తాను.
బహుళ క్లాసులు, సెమాంటిక్స్, మరియు జావాస్క్రిప్ట్
బహుళ తరగతులను ఉపయోగించడం కోసం మరొక ప్రయోజనం ఇది మీకు మరింత ప్రభావవంతమైన అవకాశాలను అందిస్తుంది.
మీరు ప్రారంభ తరగతులు ఏ తొలగించకుండా జావాస్క్రిప్ట్ ఉపయోగించి ఉన్న మూలకాలకు కొత్త తరగతులు దరఖాస్తు చేసుకోవచ్చు. మీరు ఒక మూలకం యొక్క అర్థాలను నిర్వచించడానికి తరగతులను ఉపయోగించవచ్చు. దీని అర్ధం ఏమిటంటే ఆ మూలకం అర్ధం అర్థవంతంగా నిర్వచించటానికి అదనపు తరగతులలో చేర్చవచ్చు. ఈ విధంగా మైక్రోఫార్మాట్స్ పని చేస్తుంది.
బహుళ తరగతుల ప్రతికూలతలు
మీ అంశాలపై బహుళ తరగతులను ఉపయోగించడం అతిపెద్ద నష్టమేమిటంటే, వాటిని కాలానుగుణంగా చూడడానికి మరియు నిర్వహించడానికి ఒక బిట్ అతిపెద్దదిగా చేయవచ్చు. శైలులు ఏ మూలకాన్ని ప్రభావితం చేస్తాయనే విషయాన్ని గుర్తించడం కష్టమవుతుంది మరియు ఏ స్క్రిప్ట్స్ అది ప్రభావితం చేస్తే. బూట్స్ట్రాప్ లాంటి అనేక చట్రాలు నేడు అనేక వర్గాలతో ఉన్న అంశాలని ఎక్కువగా ఉపయోగించుకుంటాయి. మీరు జాగ్రత్తగా ఉండకపోతే, ఆ కోడ్ చాలా త్వరగా పని చేయగలదు మరియు కష్టపడదు.
మీరు బహుళ తరగతులను ఉపయోగించినప్పుడు, మీరు ఈ కోసమే ఉద్దేశించకపోయినా, మరొక తరగతి శైలిని ఓ క్లాస్ కోసం శైలి కలిగివుండే ప్రమాదం ఉంది. ఇది మీ శైలులను వారు తప్పనిసరిగా కనిపించినప్పుడు కూడా ఎందుకు అన్వయిస్తున్నారు అనే విషయాన్ని గుర్తించడం కష్టం.
మీరు ఒక మూలకానికి అనువర్తిస్తున్న లక్షణాలతో కూడా ప్రత్యేకతను గురించి తెలుసుకోవాలి!
Chrome లో వెబ్మాస్టర్ టూల్స్ వంటి సాధనాన్ని ఉపయోగించడం ద్వారా, మీ తరగతులు మీ శైలులను ఎలా ప్రభావితం చేస్తాయో మరింత సులభంగా చూడవచ్చు మరియు వైరుధ్య శైలులు మరియు లక్షణాల యొక్క ఈ సమస్యను నివారించండి.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. 8/7/17 న జెరెమీ గిరార్డ్ చేత సవరించబడింది