క్లాసులు మరియు ID లు మీ CSS విస్తరించడానికి సహాయం
నేటి వెబ్లో బిల్డింగ్ వెబ్సైట్లు CSS యొక్క లోతైన అవగాహన అవసరం (కాస్కేడింగ్ స్టైల్ షీట్లు). ఇవి బ్రౌజరు విండోలో లేఅవుట్ ఎలా నిర్ణయించాలో నిర్ణయించడానికి ఒక వెబ్సైట్ను ఇచ్చే సూచనలు. మీరు మీ HTML పత్రానికి వరుస "శైలులను" వర్తింపజేయండి, ఇది మీ వెబ్పేజీ యొక్క రూపాన్ని మరియు అనుభూతిని సృష్టిస్తుంది.
ఒక పత్రం అంతటా ఆ పైన పేర్కొన్న శైలులు దరఖాస్తు అనేక మార్గాలు ఉన్నాయి, కానీ తరచూ మీరు ఒక పత్రంలో కొన్ని అంశాలు మాత్రమే శైలిని ఉపయోగించడానికి కావలసిన, కానీ ఆ మూలకం యొక్క అన్ని సందర్భాల్లో కాదు.
మీరు ఒక్కొక్క ఉదాహరణకి శైలి నియమాన్ని పునరావృతం చేయకుండా, పత్రంలో అనేక అంశాలను వర్తించే శైలిని కూడా మీరు సృష్టించవచ్చు. ఈ కావలసిన శైలులను సాధించడానికి, మీరు తరగతి మరియు ID HTML లక్షణాలను ఉపయోగిస్తారు. ఈ లక్షణాలన్నీ ప్రపంచంలోని అన్ని HTML ట్యాగ్లకు అన్వయించగలవు. మీరు విభాగాలు, పేరాలు, లింకులు, జాబితాలు లేదా మీ పత్రంలోని HTML లోని ఏ ఇతర భాగాలను స్టైలింగ్ చేయాలా అనేదానిని మీరు తరగతి మరియు ID లక్షణాలకు మీరు ఈ పని సాధించడానికి సహాయం!
క్లాస్ సెలెక్టర్లు
తరగతి సెలెక్టర్ మీరు ఒక పత్రంలో అదే మూలకం లేదా ట్యాగ్కు బహుళ శైలులను సెట్ చేయడానికి అనుమతిస్తుంది. ఉదాహరణకు, మీరు పత్రంలోని మిగిలిన టెక్స్ట్ నుండి వేరొక రంగులో పిలువబడే మీ టెక్స్ట్లోని కొన్ని విభాగాలను కలిగి ఉండాలని అనుకోవచ్చు. ఈ హైలైట్ చేయబడిన విభాగాలు మీరు పేజీలో అమర్చిన "హెచ్చరిక" కావచ్చు. మీరు ఇలాంటి తరగతులతో మీ పేరాలను కేటాయించవచ్చు:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
ఈ శైలులు నీలం (# 0000ff) అన్ని పేరాల రంగును సెట్ చేస్తాయి, కాని "హెచ్చరిక" యొక్క తరగతి లక్షణంతో ఏ పేరాతోనూ ఎరుపు (# ff0000) శైలిలో ఉంటుంది. తరగతి లక్షణం మొదటి ట్యాగ్ సెలెక్టర్ను ఉపయోగించే మొదటి CSS నియమం కంటే అధిక ప్రత్యేకతను కలిగి ఉంది.
CSS తో పని చేస్తున్నప్పుడు, మరింత నిర్దిష్టమైన నియమం తక్కువ ప్రత్యేకమైనదాన్ని భర్తీ చేస్తుంది. కాబట్టి ఈ ఉదాహరణలో, సాధారణ నియమం అన్ని పేరాల యొక్క రంగును అమర్చుతుంది, కాని కొన్ని పేరాల్లో మాత్రమే సెట్ చేసే ఓవర్రైడ్ల కంటే రెండవ, మరింత నిర్దిష్ట నిబంధన.
ఇది కొన్ని HTML మార్కప్లో ఎలా ఉపయోగించవచ్చో ఇక్కడ ఉంది:
ఈ పేరా నీలి రంగులో ప్రదర్శించబడుతుంది, ఇది పేజీ కోసం డిఫాల్ట్.
ఈ పేరా కూడా నీలం రంగులో ఉంటుంది.
ఈ పేరా ఎరుపు రంగులో ప్రదర్శించబడుతుంది ఎందుకంటే తరగతి లక్షణం మూలకం సెలెక్టర్ స్టైలింగ్ నుండి ప్రామాణిక నీలిరంగు రంగును భర్తీ చేస్తుంది.
ఆ ఉదాహరణలో, "p.alert" శైలి మాత్రమే "హెచ్చరిక" తరగతిని ఉపయోగించే పేరా మూలకాలకు మాత్రమే వర్తిస్తుంది. మీరు బహుళ HTML అంశాలకు ఆ తరగతిని ఉపయోగించాలనుకుంటే, మీరు కేవలం HTML మూలకాన్ని తొలగిస్తారు శైలి కాల్ (కేవలం కాలం (.) స్థానంలో వదిలి ఖచ్చితంగా, ఈ వంటి:
.ఆర్డర్ {background-color: # ff0000;}
ఈ తరగతి ఇప్పుడు అవసరం ఏ మూలకం అందుబాటులో ఉంది. "హెచ్చరిక" యొక్క తరగతి లక్షణ విలువను కలిగి ఉన్న మీ HTML యొక్క ఏదైనా భాగం ఇప్పుడు ఈ శైలిని పొందుతుంది. దిగువ HTML లో, మనకు "హెచ్చరిక" తరగతిని ఉపయోగించే పేరాగ్రాఫ్ మరియు శీర్షిక స్థాయి 2 రెండింటిని కలిగి ఉంటాయి. ఈ రెండు మేము చూపించిన CSS ఆధారంగా ఎరుపు యొక్క నేపథ్య-రంగు కలిగి ఉంటుంది.
ఈ పేరా ఎరుపులో వ్రాయబడుతుంది.
ఈ h2 కూడా ఎరుపు అవుతుంది.
నేటి వెబ్ సైట్లలో, క్లాస్ లక్షణాలను తరచూ చాలా అంశాలపై ఉపయోగిస్తారు, ఎందుకంటే ID లు ఉన్న ప్రత్యేకమైన దృష్టికోణంలో ఇవి పని చేయడం సులభం. మీరు చాలా ప్రస్తుత HTML పేజీలను తరగతి లక్షణాలతో నింపడానికి కనుగొంటారు, వాటిలో కొన్ని పత్రంలో పలుసార్లు పునరావృతం చేయబడతాయి మరియు ఇతరులు ఒకసారి మాత్రమే కనిపించవచ్చు.
ID సెలెక్టర్లు
ఐడి సెలెక్టర్ మీరు ట్యాగ్ లేదా ఇతర HTML ఎలిమెంట్తో అనుబంధించకుండా ఒక ప్రత్యేక శైలికి ఒక పేరును ఇవ్వడానికి మిమ్మల్ని అనుమతిస్తుంది. మీరు ఈవెంట్ గురించి సమాచారం కలిగి ఉన్న మీ HTML మార్కప్లో ఒక విభాగాన్ని కలిగి ఉన్నారని చెప్పండి.
ఈ డివిజన్ మీకు "ఈవెంట్" యొక్క ID లక్షణాన్ని ఇవ్వగలదు మరియు మీరు 1-పిక్సెల్ వెడల్పు నల్లటి సరిహద్దుతో ఆ విభజనను రూపొందించాలని కోరుకుంటే, మీరు ఈ విధంగా ఒక ID కోడ్ వ్రాస్తారు:
#event {border: 1px ఘన # 000; }
ఐడి సెలెక్టర్లు తో సవాలు వారు ఒక HTML పత్రంలో పునరావృతం కాదు అని. వారు ప్రత్యేకంగా ఉండాలి (మీరు మీ సైట్ యొక్క బహుళ పేజీల్లో ఒకే ID ను ఉపయోగించవచ్చు, కానీ ఒకసారి ఒక్కొక్క HTML పత్రంలో మాత్రమే). మీరు అన్ని ఈ సరిహద్దు అవసరమైన 3 ఈవెంట్స్ కలిగి ఉంటే, మీరు వాటిని "ఈవెంట్ 1", "event2" మరియు "event3" మరియు శైలి ప్రతి యొక్క ID లక్షణాలు ఇవ్వాలి. కాబట్టి, "ఈవెంట్" యొక్క పైన పేర్కొన్న తరగతి గుణం మరియు వాటిని ఒకేసారి శైలిని ఉపయోగించడం చాలా సులభం.
ID గుణాలతో మరొక సవాలు ఏమిటంటే వారు తరగతి గుణాల కన్నా అధిక ప్రత్యేకతను కలిగి ఉంటారు. ఇది మీరు గతంలో ఏర్పాటు చేసిన శైలిని భర్తీ చేసే CSS ను కలిగి ఉండాలంటే, మీరు ID లపై ఎక్కువగా ఆధారపడతారంటే, అలా చేయటం కష్టం. అనేక మంది వెబ్ డెవలపర్లు వారి మార్కప్లో ID లను ఉపయోగించకుండా ఈ కారణంగానే, వారు ఆ విలువను ఒక్కసారి మాత్రమే ఉపయోగించాలని భావిస్తున్నారు మరియు బదులుగా దాదాపు అన్ని రకాల శైలులకు తక్కువ-నిర్దిష్ట తరగతి లక్షణాలకు మారారు.
మీరు యాడ్-పేపర్ యాంకర్ లింకులను కలిగి ఉన్న ఒక పుటను సృష్టించాలనుకునేటప్పుడు ID లక్షణాలను ప్లే చేస్తున్న ఒక ప్రాంతం. ఉదాహరణకు, మీకు ఒక పారలాక్స్ స్టైల్ వెబ్సైట్ ఉన్నట్లయితే, ఆ పేజీ యొక్క వివిధ భాగాలకు "ఇక్కడికి గెంతు" లింక్లతో ఒకే పేజీలోని అన్ని కంటెంట్ను కలిగి ఉంటుంది. ఈ యాంకర్ లింకులను ఉపయోగించే ID గుణాలు మరియు టెక్స్ట్ లింక్లను ఉపయోగించి ఇది జరుగుతుంది.
మీరు లింకు యొక్క href లక్షణానికి, # చిహ్నానికి ముందు, ఆ లక్షణం యొక్క విలువను జోడించి, ఇలా చేస్తారు:
ఇది లింక్
క్లిక్ చేసినప్పుడు లేదా తాకినప్పుడు, ఈ లింక్ ఈ ID లక్షణం ఉన్న పేజీ యొక్క భాగానికి వెళ్తుంది. పేజీలో ఏ ఎలిమెంట్ లేకపోతే ఈ ID విలువను ఉపయోగించినట్లయితే, లింక్ ఏమీ చేయదు.
గుర్తుంచుకోండి, మీరు ఒక సైట్లో ఇన్-పేజ్ లింకింగ్ చేయాలనుకుంటే, ID లక్షణాల ఉపయోగం అవసరం అవుతుంది, కానీ మీరు సాధారణ CSS స్టైలింగ్ ప్రయోజనాల కోసం ఇప్పటికీ తరగతులకు మారవచ్చు. ఈ రోజు నేను పేజీలు అప్ మార్క్ ఎలా ఉంది - నేను వీలైనంత తరగతి సెలెక్టర్లు ఉపయోగించారు మరియు నేను CSS కోసం ఒక హుక్ వంటి కార్యాలయం కానీ కూడా ఒక లో పేజీ లింక్ గా మాత్రమే లక్షణం అవసరం ఉన్నప్పుడు మాత్రమే ID లు చెయ్యి.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ చేత 8/9/17 న సవరించబడింది