CSS సంస్కరణ వెబ్ పత్రాల్లో ఎలా పనిచేస్తుంది

CSS తో ఒక వెబ్ సైట్ స్టైలింగ్ యొక్క ఒక ముఖ్యమైన భాగం వారసత్వ భావన అర్థం ఉంది.

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

CSS ఇన్హెరిటెన్స్ అంటే ఏమిటి?

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

ఉదాహరణకు, క్రింద ఉన్న ఈ HTML కోడ్ ఒక EM ట్యాగ్ జతచేసే ఒక H1 ట్యాగ్ను కలిగి ఉంటుంది:

ఇది బిగ్ హెడ్లైన్

EM మూలకం H1 మూలకం యొక్క బాల, మరియు వారసత్వంగా పొందిన H1 లోని ఏ శైలులు EM టెక్స్ట్కు కూడా పంపబడతాయి. ఉదాహరణకి:

h1 {font-size: 2em; }

Font-size ఆస్తి వారసత్వంగా ఉన్నందున, "బిగ్" (ఇది EM ట్యాగ్ల లోపల ఏది వున్నది) అని చెప్పే టెక్స్ట్ H1 మిగిలిన భాగంలో అదే పరిమాణాన్ని కలిగి ఉంటుంది. అది CSS ఆస్తిలో సెట్ చేసిన విలువను పొందుతుంది ఎందుకంటే ఇది.

CSS వారసత్వం ఎలా ఉపయోగించాలి

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

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

శరీరం {font-family: Arial, sans-serif; }

ఇన్హెరిట్ శైలి విలువ ఉపయోగించండి

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

శరీరం {margin: 1em; } p {మార్జిన్: వారసత్వంగా; }

ఇన్హెరిటెన్స్ గణిత విలువలను ఉపయోగిస్తుంది

పొడవులను ఉపయోగించే ఫాంట్ పరిమాణాలు వంటి వారసత్వ విలువలు ఇది ముఖ్యమైనవి. ఒక కంప్యూటెడ్ విలువ వెబ్ పేజీలో కొన్ని ఇతర విలువకు సంబంధించి విలువ.

మీరు మీ BODY మూలకంపై 1em యొక్క ఫాంట్-పరిమాణాన్ని సెట్ చేస్తే, మీ మొత్తం పేజీ పరిమాణం 1em మాత్రమే ఉంటుంది. ఇది ఎందుకంటే హెడ్డింగ్స్ (H1-H6) మరియు ఇతర మూలకాలు (కొన్ని బ్రౌజర్లు విభిన్నంగా పట్టిక పట్టికలను గణించడం) వంటి వెబ్ బ్రౌజర్లో సాపేక్ష పరిమాణాన్ని కలిగి ఉంటాయి. ఇతర ఫాంట్ సైజు సమాచారం లేనప్పుడు, వెబ్ బ్రౌజర్ ఎల్లప్పుడూ H1 శీర్షికలో పేజీలో అతిపెద్ద టెక్స్ట్ను చేస్తుంది, తర్వాత H2 మరియు దాని ద్వారా ఉంటుంది. మీరు మీ BODY మూలకాన్ని ఒక ప్రత్యేక ఫాంట్ పరిమాణంలో అమర్చినప్పుడు, అది "సగటు" ఫాంట్ సైజుగా ఉపయోగించబడుతుంది మరియు శీర్షిక మూలకాల నుండి లెక్కించబడుతుంది.

వారసత్వం మరియు నేపధ్యం గుణాలు గురించి గమనిక

జాబితా చేయబడిన శైలుల సంఖ్య W3C లో CSS 2 లో వారసత్వంగా లేదు, కానీ వెబ్ బ్రౌజర్ ఇప్పటికీ విలువలను వారసత్వంగా పొందుతోంది. ఉదాహరణకు, మీరు ఈ కింది HTML మరియు CSS వ్రాసినట్లయితే: