క్యాస్కేడింగ్ స్టైల్ షీట్లు ఏమిటి మరియు CSS దేనికి ఉపయోగించబడుతుంది?

CSS HTML మరియు JavaScript తో పాటు కోర్ వెబ్ టెక్నాలజీల ట్రిపుల్‌కు చెందినది. జాగ్రత్తగా ప్రణాళికతో, CSS ఆందోళనల విభజనకు దోహదం చేస్తుంది. స్వతంత్ర వనరులు కంటెంట్ నిర్మాణం, దాని ప్రదర్శన మరియు దాని ప్రవర్తనను నియంత్రిస్తాయి.

యాక్సెస్, స్కేలబిలిటీ మరియు వెబ్ పనితీరులో కూడా స్టైల్ షీట్‌లు ముఖ్యమైన పాత్ర పోషిస్తాయి. కంటెంట్ రచయిత లేదా వెబ్ డిజైనర్‌గా, పరికరాలు కంటెంట్‌ని ఎలా అందిస్తాయనే దానిపై వారు మీకు నియంత్రణను ఇస్తారు. లేఅవుట్ నుండి ఫాంట్ పరిమాణం మరియు రంగు వరకు, CSS కంటెంట్‌ను అందంగా కనిపించే పేజీలుగా మారుస్తుంది.

CSS ఎలా ఉంటుంది?

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

HTML మూలకాలు CSS శైలిని కలిగి ఉండే వివిధ లక్షణాలను కలిగి ఉంటాయి. ది రంగు ఆస్తి ముందుభాగం (ఉదా. టెక్స్ట్) రంగును సెట్ చేస్తుంది. ఫాంట్ పరిమాణం మీద ఆధారపడి ఉంటుంది ఫాంట్ పరిమాణం ఆస్తి.

ప్రతి ఆస్తి మద్దతు విలువకు సెట్ చేయవచ్చు. ఆస్తికి విలువ కేటాయింపు అనేది 'డిక్లరేషన్'. సాధారణంగా, అవి ఇలా కనిపిస్తాయి:

property: value

ఉదాహరణకి:

నేను నా అమెజాన్ ప్యాకేజీని అందుకోలేదు

color: red

విభిన్న లక్షణాల విలువలు చాలా భిన్నంగా కనిపిస్తాయి, ఒకే ఆస్తి విలువలు కూడా. ఉదాహరణకు, మునుపటి ప్రకటనను వ్రాయడానికి ఇక్కడ మరో రెండు మార్గాలు ఉన్నాయి:

color: #ff0000  
color: rgb(255, 0, 0)

HTML మరియు స్టైల్ షీట్‌లు ఎలా కలిసి వస్తాయి

మీరు HTML మరియు CSS లను కొన్ని రకాలుగా మిళితం చేయవచ్చు, ప్రతి దాని ప్రయోజనాలతో.

స్టైల్స్ ఇన్‌లైన్ రాయడం

HTML ఫైల్‌లోని మూలకానికి నేరుగా స్టైల్ డిక్లరేషన్‌లను అటాచ్ చేయడం సరళమైన పద్ధతి. మీరు దీన్ని ఉపయోగించి దీన్ని చేయవచ్చు శైలి లక్షణం ఇలా:

  
 Most of this text is red …
  
 … but this isn’t!

స్టైలింగ్ ఎలిమెంట్స్ ఇలా ఇన్‌లైన్ సౌకర్యవంతంగా ఉన్నప్పటికీ, దీనికి అనేక లోపాలు ఉన్నాయి. ప్రారంభించడానికి, ఇది HTML ని క్లిష్టతరం చేస్తుంది, ఇది ఒక చూపులో చదవడం కష్టతరం చేస్తుంది. ఇది నిర్వహించడానికి కూడా ఇబ్బందికరంగా ఉంది: ప్రతి పేరా యొక్క రంగును సెట్ చేయాలనుకుంటున్న సుదీర్ఘ పత్రాన్ని ఊహించండి. ఇది CSS, కానీ ఇది 'స్టైల్ షీట్‌లు' కాదు.

తలలో స్టైల్స్ పొందుపరచడం

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

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

మా శైలి సూచనలకు మునుపటి కంటే కొంచెం ఎక్కువ వివరాలు అవసరం. మేము వాటిని తలకు తరలించినందున, ప్రతి నియమం ఇకపై ఒక మూలకంతో అనుబంధించబడదు. మేము ప్రకటించవచ్చు రంగు: ఎరుపు , కానీ ఆ రంగు ఏమి కలిగి ఉండాలి?

ఇక్కడే CSS సెలెక్టర్లు వస్తారు. ఈ వాక్యనిర్మాణాన్ని ఉపయోగించి పేజీ యొక్క నిర్దిష్ట భాగాలను లక్ష్యంగా చేసుకుని, వాటి శైలిని ఒకే చోట నిర్వచించడానికి అవి మాకు అనుమతిస్తాయి:

xbox one కంట్రోలర్ కంప్యూటర్‌లో ఉండదు

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

ఉదాహరణకు, పేరాగ్రాఫ్‌ల టెక్స్ట్ బ్లూ స్టైల్ చేయడానికి, మేము ఈ క్రింది వాటిని పేర్కొనవచ్చు:

p {  
 color: blue;  
}

ఈ ఉదాహరణలో, సెలెక్టర్ కేవలం p , ఇది మా డాక్యుమెంట్‌లోని అన్ని పేరాగ్రాఫ్ ఎలిమెంట్‌లకు సరిపోతుంది. ఇది అన్ని టెక్స్ట్ నీలం రంగులో ఉంటుంది, అది ఉన్నంత వరకు

బాహ్య శైలి షీట్‌ను లింక్ చేస్తోంది

కవర్ చేయడానికి చివరి పద్ధతి లింక్ చేయడం. ఇప్పటివరకు, ఇది చాలా ఉపయోగకరమైన విధానం, మరియు మీరు ఎక్కువ సమయం ఎంచుకోవాలి. లో CSS నియమాలను పొందుపరచడానికి బదులుగా శైలి మూలకం నేరుగా మీ పత్రంలో, మీరు వాటిని ప్రత్యేక ఫైల్‌కు తరలించవచ్చు.

లోపల ఈ కోడ్‌ని అతికించండి మీ బాహ్య స్టైల్ షీట్‌ను లింక్ చేయడానికి మీ HTML ఫైల్ యొక్క ట్యాగ్‌లు.

CSS యొక్క శక్తి

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

ఈ విభజన యొక్క కొన్ని ప్రయోజనాలు ఇక్కడ ఉన్నాయి:

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

చాలా పేజీలు అవసరమైన స్టైల్ షీట్లను షేర్ చేయగలవు. ఒకే ఫైల్‌ను మార్చడం ద్వారా, మీరు మొత్తం వెబ్‌సైట్ యొక్క రూపాన్ని మరియు అనుభూతిని అప్‌డేట్ చేయవచ్చు.

పేజీని 'కంటెంట్' మరియు 'స్టైల్' గా విభజించడం వల్ల సాంకేతిక ప్రయోజనాలు ఉన్నాయి. ప్రాక్సీలు మరియు బ్రౌజర్‌లు వ్యక్తిగత ఫైల్‌లను విడిగా కాష్ చేయగలవు. దీని అర్థం ఒక సైట్ ప్రతి ఒక్క పేజీలో చేర్చడం కంటే, తన స్టైల్ సమాచారాన్ని ఒకసారి పంపగలదు.

సహకరించేటప్పుడు, విభిన్న బృందాలు తమ శక్తి మేరకు పని చేయవచ్చు, ఒకదానికొకటి ప్రభావితం చేయకుండా ప్రత్యేక ఫైళ్ళను సృష్టించవచ్చు మరియు సవరించవచ్చు.

క్యాస్కేడ్ వివరిస్తోంది

మీరు స్టైల్స్ మరియు స్టైల్ షీట్‌ల గురించి చాలా నేర్చుకున్నారు, కానీ CSS యొక్క క్యాస్కేడింగ్ భాగం గురించి ఏమిటి?

బహుళ స్టైల్ షీట్లు ఉన్నప్పుడు ఏ స్టైల్స్ ఉపయోగించాలో క్యాస్కేడ్ నిర్ణయిస్తుంది. రచయిత వారి కంటెంట్ కోసం శైలులను ఎలా పేర్కొనవచ్చో మీరు చూశారు. కానీ CSS యొక్క మరొక లక్షణం ఏమిటంటే, ఇది పాఠకులకు మరియు బ్రౌజర్ తయారీదారులకు కూడా ఈ విషయంలో కొన్ని చెబుతుంది.

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

వినియోగదారు-ఏజెంట్ శైలుల తర్వాత రచయిత శైలి షీట్ వర్తిస్తుందని క్యాస్కేడ్ పేర్కొంటుంది. శీర్షికలు బోల్డ్ అని మా బ్రౌజర్ చెబితే, పేజీ రచయిత ఈ పేజీలోని హెడ్డింగ్‌లు తేలికైనవిగా ప్రకటించినట్లయితే, అవి వెలుగులోకి వస్తాయి.

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

విభిన్న మీడియాను లక్ష్యంగా చేసుకోవడం

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

సంబంధిత: మీరు అంధులు లేదా దృష్టి లోపం ఉన్నవారు అయితే వెబ్ బ్రౌజ్ చేయడం ఎలా
టిక్‌టాక్‌లో డార్క్ మోడ్‌ను ఎలా పొందాలి

వికీపీడియా వంటి సైట్‌లు వాటి ముద్రణ శైలిని నియంత్రించడానికి, అవాంఛిత అంశాలను దాచడానికి మరియు లేఅవుట్‌ని సరళీకృతం చేయడానికి CSS ని ఉపయోగిస్తాయి.

CSS HTML బాగుంది

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

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

ప్రోగ్రామింగ్

వెబ్ అభివృద్ధి

CSS

రచయిత గురుంచి బాబీ జాక్(58 కథనాలు ప్రచురించబడ్డాయి)
రెండు దశాబ్దాల పాటు సాఫ్ట్‌వేర్ డెవలపర్‌గా పనిచేసిన బాబీ ఒక టెక్నాలజీ astత్సాహికుడు. అతను గేమింగ్‌పై మక్కువ కలిగి, స్విచ్ ప్లేయర్ మ్యాగజైన్‌లో రివ్యూస్ ఎడిటర్‌గా పని చేస్తున్నాడు మరియు ఆన్‌లైన్ పబ్లిషింగ్ & వెబ్ డెవలప్‌మెంట్ యొక్క అన్ని అంశాలలో మునిగిపోయాడు.
బాబీ జాక్ నుండి మరిన్ని
మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి