CSS సెలెక్టర్ల గురించి మీరు తెలుసుకోవలసిన ప్రతిదీ

ఈ వ్యాసం ఒక ఆసక్తికరమైన మరియు ముఖ్యమైన అంశాన్ని ముందుకు తెస్తుంది సెలెక్టర్లు మరియు సహాయక ఆచరణాత్మక ప్రదర్శనతో దాన్ని అనుసరిస్తారు. ఈ వ్యాసంలో క్రింది గమనికలు కవర్ చేయబడతాయి,

• HTML ఎలిమెంట్స్ స్టైలింగ్
• CSS సెలెక్టర్లు
• CSS ఐడి సెలెక్టర్
• CSS క్లాస్ సెలెక్టర్
• CSS యూనివర్సల్ సెలెక్టర్
• CSS గ్రూప్ సెలెక్టర్లు

కాబట్టి అప్పుడు ప్రారంభిద్దాం,

HTML ఎలిమెంట్స్ స్టైలింగ్

మేము CSS సెలెక్టర్లకు వెళ్ళే ముందు CSS అంటే ఏమిటో అర్థం చేసుకుందాం. HTML ను అస్థిపంజరంగా పరిగణించాలంటే, CSS (క్యాస్కేడింగ్ స్టైల్ షీట్స్) కండరాలు మరియు చర్మం లాంటిది. మెదడు జావాస్క్రిప్ట్. కాబట్టి, వెబ్ పేజీ కోసం, CSS శైలులు తప్పనిసరిగా లేఅవుట్ మరియు రూపకల్పన. చిత్రాలు మరియు వచనం యొక్క స్థానం నుండి ఫాంట్ పరిమాణం మరియు నేపథ్య రంగు వరకు, బ్రౌజర్‌లో HTML అంశాలు ఎలా కనిపిస్తాయో CSS నియంత్రిస్తుంది.

CSS సెలెక్టర్లు ఏమిటో మీకు మంచి అవగాహన ఉంటే మీరు CSS ను బాగా అర్థం చేసుకోవచ్చు. ఈ సెలెక్టర్లు నిర్దిష్ట HTML మూలకాలను లక్ష్యంగా చేసుకోవడానికి మిమ్మల్ని అనుమతిస్తాయి, తద్వారా మీరు వారికి సరైన శైలిని వర్తింపజేయవచ్చు.

మేము HTML మూలకాలను ఎలా ఎంచుకోవాలో అర్థం చేసుకుందాం,

మూలకాలను ఎలా ఎంచుకోవాలి?

చెప్పండి, వెబ్ పేజీలోని మిగిలిన కంటెంట్‌కు భిన్నంగా ఒక నిర్దిష్ట శీర్షిక ఉండాలని మీరు కోరుకుంటారు. ఇప్పుడు, CSS సెలెక్టర్లను ఉపయోగించి మీరు ఆ HTML మూలకాన్ని భిన్నంగా శైలిని లక్ష్యంగా చేసుకోవచ్చు. CSS సెలెక్టర్లు నిర్దిష్ట CSS నియమాలు వర్తించే అంశాలను నిర్వచించడంలో సహాయపడతాయి. మీరు శైలిని కోరుకునే అంశాలను ఖచ్చితంగా ఎంచుకోవడానికి మిమ్మల్ని అనుమతించే వివిధ రకాల CSS సెలెక్టర్లు ఉన్నాయి. మీరు మొత్తం వెబ్ పేజీకి సాధారణ స్టైలింగ్ ఇవ్వవచ్చు, ఆపై పేజీ యొక్క ఇతర అంశాలను శైలి చేయడానికి మీ మార్గం పని చేయవచ్చు.

సెలెక్టర్లు ఒక CSS నియమంలో ఒక భాగం, మరియు ఈ సెలెక్టర్లు CSS బ్లాకుల ప్రకటనకు ముందే వస్తారు. మంచి అవగాహన కోసం, మీరు క్రింది చిత్రాన్ని చూడవచ్చు.

CSS సెలెక్టర్ల కథనంతో కదులుతోంది

CSS సెలెక్టర్లు

ఈ సెలెక్టర్ దాని పేరుతో ఒక HTML మూలకాన్ని ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది.

దిగువ కోడ్‌ను పరిశీలించండి:

p {టెక్స్ట్-అలైన్: సెంటర్ కలర్: మెజెంటా}
ఈ శైలి ప్రతి పేరాలో వర్తించబడుతుంది.
 
పేరా 1
 
పేరా 2
 

ఈ కోడ్ మీకు ఈ క్రింది అవుట్‌పుట్‌ను ఇస్తుంది:

ఈ శైలి ప్రతి పేరాలో వర్తించబడుతుంది

పేరా 1

పేరా 2

SQL లో పైవట్ మరియు అన్‌పివోట్

పై కోడ్‌లో, HTML మూలకాలు మధ్యలో సమలేఖనం చేయబడ్డాయి మరియు “మెజెంటా” రంగును కలిగి ఉన్నాయి.

CSS సెలెక్టర్ల కథనంతో కదులుతోంది

CSS ఐడి సెలెక్టర్

HTML మూలకం యొక్క ఐడి లక్షణాన్ని ఎంచుకోవడం ద్వారా, మీరు నిర్దిష్ట మూలకాన్ని ఎంచుకోవచ్చు. ఐడి పేజీకి ప్రత్యేకమైనది కాబట్టి, మీరు ఐడి లక్షణాన్ని ఉపయోగించి సరైన మూలకాన్ని ఎంచుకోవచ్చు.

మీరు “#” ను ఉపయోగించి HTML మూలకాన్ని ఎంచుకోవచ్చు, ఆ మూలకం యొక్క ఐడి తరువాత. ఉదాహరణకు, “# మొదటి పేరు” ఐడి “మొదటి పేరు” ఉన్న మూలకాన్ని ఎంచుకుంటుంది.

కింది కోడ్‌ను పరిశీలించండి:

# పారా 1 {టెక్స్ట్-అలైన్: మధ్య రంగు: నారింజ}
హలో వరల్డ్
 
ఈ పేరా ప్రభావితం కాదు.
 

పై కోడ్ యొక్క అవుట్పుట్:

హలో వరల్డ్

ఈ పేరా ప్రభావితం కాదు.

పై అవుట్‌పుట్‌లో మీరు చూడగలిగినట్లుగా, id = ”para1 include ను చేర్చడం ద్వారా, మేము ఆ మూలకం యొక్క రంగును నారింజ రంగులోకి మార్చగలిగాము. ఇది లేని ఇతర మూలకం ప్రభావితం కాదు.

CSS సెలెక్టర్ల కథనంతో కదులుతోంది

CSS క్లాస్ సెలెక్టర్

క్లాస్ సెలెక్టర్ ఉపయోగించి, మీరు నిర్దిష్ట తరగతి లక్షణాన్ని కలిగి ఉన్న HTML అంశాలను ఎంచుకోవచ్చు. తరగతి పేరు తరువాత కాలం (పూర్తి-స్టాప్ గుర్తు) ఉపయోగించి మీరు సెలెక్టర్‌ను నిర్వచించవచ్చు. ఉదాహరణకు, .intro తరగతి “పరిచయము” ఉన్న అంశాలను ఎన్నుకుంటుంది. గుర్తుంచుకోవలసిన ఒక విషయం ఏమిటంటే, మీరు ఎప్పటికీ తరగతి పేరును సంఖ్యతో ప్రారంభించలేరు.

కింది కోడ్‌ను పరిశీలించండి:

.సెంటర్ {టెక్స్ట్-అలైన్: సెంటర్ కలర్: పింక్}
ఈ శీర్షిక పింక్ మరియు మధ్యలో సమలేఖనం చేయబడింది.
 
ఈ పేరా గులాబీ మరియు మధ్యలో సమలేఖనం చేయబడింది.
 
 
 

పై కోడ్ యొక్క అవుట్పుట్:

ఈ శీర్షిక పింక్ మరియు మధ్యలో సమలేఖనం చేయబడింది.

ఈ పేరా గులాబీ మరియు మధ్యలో సమలేఖనం చేయబడింది.

మీరు ఒక నిర్దిష్ట మూలకం కోసం CSS క్లాస్ సెలెక్టర్లను ఉపయోగించవచ్చు. మీరు ఒక నిర్దిష్ట మూలకాన్ని మాత్రమే శైలిలో ఉంచాలనుకుంటే, మీరు క్లాస్ సెలెక్టర్‌తో పాటు మూలకం పేరును ఉపయోగించవచ్చు.

ఉదాహరణకు, కింది కోడ్‌ను పరిశీలించండి:

p.center {text-align: center color: pink}
ఈ శీర్షిక ప్రభావితం కాదు
 
ఈ పేరా గులాబీ మరియు మధ్యలో సమలేఖనం చేయబడింది.
 
 
 

పై కోడ్ యొక్క అవుట్పుట్:

ఈ శీర్షిక ప్రభావితం కాదు

ఈ పేరా గులాబీ మరియు మధ్యలో సమలేఖనం చేయబడింది.

మీరు అవుట్పుట్లో చూడగలిగినట్లుగా, శీర్షిక h2 శైలి ద్వారా ప్రభావితం కాదు. మేము “p.center” ని పేర్కొన్నందున, పేరా మాత్రమే శైలి ద్వారా ప్రభావితమవుతుంది.

ప్రారంభకులకు నా SQL ట్యుటోరియల్స్

ఈ CSS సెలెక్టర్ల కథనంతో ముందుకు సాగుతోంది,

CSS యూనివర్సల్ సెలెక్టర్

ఈ రకమైన సెలెక్టర్‌ను పేజీలోని అన్ని అంశాలను ఎంచుకునే వైల్డ్‌కార్డ్ అక్షరంగా పరిగణించవచ్చు. ఇది పేజీలోని అన్ని అంశాలను ఎన్నుకుంటుంది మరియు ఇది “*” ద్వారా పేర్కొనబడుతుంది.

ఉదాహరణకు, క్రింది కోడ్‌ను పరిశీలించండి:

* {రంగు: ముదురు ఆకుపచ్చ ఫాంట్-పరిమాణం: 30 పిక్స్}
ఇది ఒక పరీక్ష (చిన్న ఫాంట్)
 
ఇది పేరా.
 

పై కోడ్ యొక్క అవుట్పుట్:

హలో వరల్డ్

ఇది ఒక పరీక్ష (చిన్న ఫాంట్)

ఇది పేరా.

మీరు అవుట్పుట్లో చూడగలిగినట్లుగా, గ్రూప్ సెలెక్టర్ ఉపయోగించి నిర్వచించబడిన అన్ని అంశాలు ఒకే స్టైల్ డెఫినిషన్ కలిగి ఉంటాయి - అవి సెంటర్-అలైన్డ్ మరియు ఫాంట్ కలర్ సియాన్.

ఇది ఈ వ్యాసం చివరకి మనలను తీసుకువస్తుంది.

మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.

మాకు ప్రశ్న ఉందా? దయచేసి వ్యాసం యొక్క వ్యాఖ్యల విభాగంలో దీనిని ప్రస్తావించండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.