सीएसएस वारसा वेब डॉक्युमेंट्समध्ये कसे कार्य करते

सीएसएस सह वेबसाइट styling एक महत्वाचा भाग वारसा संकल्पना समजून आहे.

सीएसएस वारसा स्वयंचलितपणे वापरले जात मालमत्तेच्या शैली द्वारे परिभाषित केले आहे. आपण शैलीची पार्श्वभूमी-रंग शैली पाहिल्यावर आपल्याला "इनहेरिटन्स" नावाचे एक विभाग दिसेल. आपण बहुतेक वेब डिझाइनरसारखे असल्यास, आपण त्या विभागात दुर्लक्ष केले आहे परंतु हे एका उद्देशाचे पालन करते.

सीएसएस वारसा म्हणजे काय?

एचटीएमएल दस्तऐवजात प्रत्येक घटकास एक भाग आहे आणि आरंभीक एलिमेंटच्या मूलतत्वाचा घटक त्यास जोडलेला असतो. गुणधर्म ज्याला वारशाने मिळू शकतील अशा मूलभूत तत्त्वांवर जे शैली वापरली जाते त्या घटकांमध्ये लागू केले जाऊ शकते.

उदाहरणार्थ, खालील या HTML कोडमध्ये एक EM टॅग अंतर्भूत केल्याने H1 टॅग आहे:

हे एक मोठे मथळा आहे

EM घटक एच -1 घटकांचे मूल आहे आणि एच 1 वरील कोणत्याही शैली ईएम टेक्स्टला देखील पाठवल्या जातील. उदाहरणार्थ:

h1 {font-size: 2em; }

फॉन्ट-आकाराचे मालमत्ता वारसा असल्याने, "बिग" (जे EM टॅग्जच्या आत संलग्न आहे) असे शीर्षक असलेला मजकूर, उर्वरित H1 प्रमाणेच आकार असेल. याचे कारण की तो सीएसएस गुणधर्म मध्ये सेट केलेल्या मूल्यसंदर्भात आहे.

सीएसएस इनहेरिटन्स कसा वापरावा

वापरण्याचा सर्वात सोपा मार्ग म्हणजे सीएसएस गुणधर्मांशी परिचित होणे जे वारसाहक्काने मिळत नाहीत आणि नाही. जर मालमत्तेचा वारसा मिळाला असेल, तर तुम्हाला माहिती आहे की हे डॉक्युमेंटमध्ये प्रत्येक मूल घटकासाठी समानच राहील.

याचा वापर करण्याचा सर्वोत्तम मार्ग म्हणजे आपल्या मूलभूत शैली एका उच्च-स्तरीय घटकामध्ये सेट करणे, जसे शरीर. आपण आपल्या फाँट-कुटुंबाला शरीर ठिकाण वर सेट केल्यास, वारसामुळे धन्यवाद, संपूर्ण दस्तऐवज तेच फॉन्ट-फॅरिअम ठेवतील. हे प्रत्यक्षात लहान स्टाइलशीटसाठी बनवावे जे व्यवस्थापित करणे सोपे आहे कारण कमी एकूणच शैली आहेत. उदाहरणार्थ:

शरीर {फॉन्ट-कुटुंब: एरियल, सेन्स-सेरिफ; }

इनहेरिट शैली मूल्य वापरा

प्रत्येक सीएसएस प्रॉपर्टीमध्ये संभाव्य पर्यायाप्रमाणे मूल्य "वारसा" असते. हे वेब ब्राऊजरला सांगते, जरी सामान्यतः वारसा नसलेले गुणधर्म असले तरीही, त्यास पॅरेंट प्रमाणे समान मूल्य असावे. वारणा नसलेल्या मार्जिनसारखी एखादी शैली आपण सेट केली असल्यास, आपण पालक म्हणून समान फरक त्यांना देण्यासाठी पुढील गुणधर्मांवर वारसाचे मूल्य वापरू शकता. उदाहरणार्थ:

शरीर {समास: 1em; } पी {मार्जिन: वारसाहक्क; }

वारसा गणना मूल्य वापरते

लांबी वापरणाऱ्या फॉन्ट आकारासारख्या वारसासाठी हे महत्त्वाचे आहे. एक गणना मूल्य एक मूल्य आहे जे वेब पृष्ठावर इतर मूल्याच्या तुलनेत आहे.

आपण आपल्या BODY घटकावरील 1em चा फॉन्ट-आकार सेट केल्यास, आपले संपूर्ण पृष्ठ आकारात केवळ 1em होणार नाही. याचे कारण हे की हेडिंग्स (एच 1-एच 6) आणि इतर घटक (काही ब्राऊझर्स सारख्या गुणधर्मांचे मोजमाप वेगवेगळ्या पद्धतीने मोजतात) सारख्या वेब ब्राऊजरमध्ये सापेक्ष आकार असतात. अन्य फॉन्ट आकाराच्या माहितीच्या अनुपस्थितीत, वेब ब्राउझर नेहमी H1 मथळा पृष्ठावर सर्वात मोठा मजकूर करेल, त्यानंतर H2 आणि इतर. जेव्हा आपण आपला BODY घटक एका विशिष्ट फॉन्ट आकारावर सेट करता तेव्हा त्याचा "सरासरी" फॉन्ट आकार म्हणून वापर केला जातो आणि त्यातील मथळा घटकांची गणना केली जाते.

वारसा आणि पार्श्वभूमी गुणधर्मांबद्दल एक टीप

डब्ल्यू .3 सी. वर सीएसएस 2 मध्ये वारशाने न मिळालेली अशी अनेक शैक्षणिक पद्धती आहेत, परंतु वेब ब्राऊजर अद्याप मूल्य प्राप्त करतात. उदाहरणार्थ, जर आपण खालील HTML आणि CSS लिहिले:

<शैली प्रकार = "मजकूर / CSS"> h1 {पार्श्वभूमी-रंग: पिवळा; }

हे एक बिग मथळा आहे

"बिग" शब्दाचा अजूनही एक पिवळ्या पार्श्वभूमी असेल, जरी बॅकग्राउंड-रंगाची मालमत्ता वारशाने मिळालेली नसली तरीही याचे कारण की पार्शल मालमत्तेचे सुरुवातीचे मूल्य "पारदर्शी" आहे. म्हणून आपण वर पार्श्वभूमी रंग पाहत नाही, परंतु

पालकांपासून ते रंग चमकणारे आहेत