నేటి వెబ్లో బిల్డింగ్ వెబ్సైట్లు 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 ఆధారంగా ఎరుపు యొక్క నేపథ్య-రంగు కలిగి ఉంటుంది.
ఈ పేరా ఎరుపులో వ్రాయబడుతుంది.
నేటి వెబ్ సైట్లలో, క్లాస్ లక్షణాలను తరచూ చాలా అంశాలపై ఉపయోగిస్తారు, ఎందుకంటే ID లు ఉన్న ప్రత్యేకమైన దృష్టికోణంలో ఇవి పని చేయడం సులభం. మీరు చాలా ప్రస్తుత HTML పేజీలను తరగతి లక్షణాలతో నింపడానికి కనుగొంటారు, వాటిలో కొన్ని పత్రంలో పలుసార్లు పునరావృతం చేయబడతాయి మరియు ఇతరులు ఒకసారి మాత్రమే కనిపించవచ్చు. ఐడి సెలెక్టర్ మీరు ట్యాగ్ లేదా ఇతర 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 లకు మారుస్తాము.మరియు ఈ h2 కూడా ఎరుపు అవుతుంది.
ID సెలెక్టర్లు
ID గుణముల ఉపద్రవాలు
