Theory
ઊતરી આવતું કુટુંબવૃક્ષ
તમે તમારી portfolio ની site ના <body> tag પર એક સુંદર font ની style અને ભૂખરો રંગ ગોઠવો છો, અપેક્ષા રાખતાં કે એ તમારું આખું પાનું style કરશે. તમારા ફકરા અને યાદીઓ માટે એ બરાબર કામ કરે છે. પણ જ્યારે તમે તમારી hyperlinks જુઓ, એ હજી પણ હઠીલી, default તેજસ્વી ભૂરી અને નીચે લીટીવાળી છે. અમુક elements પોતાના માતાપિતાની styles સહેલાઈથી કેમ નકલ કરે છે જ્યારે બીજાં એમને સંપૂર્ણપણે અવગણે છે? Browser કેવી રીતે નક્કી કરે છે કે તમારા HTML ના માળખામાં કઈ styles નીચે ઊતરે?
Theory
DNA અને પૂર્વજોની મિલકત
તમારા HTML document ના માળખાને એક કુટુંબવૃક્ષ જેવું વિચારો. જ્યારે એક દાદા મિલકત આપે છે કે એક માતાપિતા આંખના રંગ જેવો આનુવંશિક ગુણ આપે છે, બાળકો પૂછ્યા વગર કુદરતી રીતે એ વારસામાં મેળવે છે. આ તમારા webpage પર લખાણના રંગો કે font ના કુટુંબો નીચે વહેવા જેવું છે. પણ, અમુક વસ્તુઓ અત્યંત અંગત હોય છે. માતાપિતાનું ખાસ ચામડાનું jacket કે સિવડાવેલા બૂટ આપોઆપ સંકોચાઈને કે ખેંચાઈને બાળકને બંધ બેસતાં નથી. CSS માં, margins, padding, અને borders જેવા ગુણધર્મો અંગત લક્ષણો છે જે elements ક્યારેય પોતાનાં બાળકોને આપતાં નથી.
Theory
DOM વૃક્ષો અને CSS Inheritance
એક HTML document ને Document Object Model (DOM) નામના એક ક્રમબદ્ધ વૃક્ષના માળખામાં parse કરાય છે. આ વૃક્ષમાં, બીજાં tags ની અંદર મુકાયેલાં tags એ બાળકો છે, જ્યારે વીંટાળતાં tags એ માતાપિતા છે. CSS Inheritance એ એવી વ્યવસ્થા છે જેના દ્વારા ચોક્કસ property ની values એક માતાપિતા element પાસેથી એનાં વંશજ elements સુધી નીચે ઊતરે છે. આ તમને તમારા webpage પરના દરેકે દરેક nested tag માટે દોહરાવાતો styling નો code લખવાથી બચાવે છે.
At a glance
Document ના માળખા પર સામાન્ય CSS ના ગુણધર્મોનું વર્તન.
| Property નો પ્રકાર | આપોઆપ વારસામાં મળે? | ઉદાહરણો |
|---|---|---|
| લખાણ અને Font ના ગુણધર્મો | હા | color, font-family, font-size, line-height, text-align |
| Box Model ના ગુણધર્મો | ના | margin, padding, border, width, height |
| પશ્ચાદભૂમિ અને Layout | ના | background-color, background-image, display, position |
Practical
Inheritance in a Portfolio Section
<section style="color: darkgreen; border: 2px solid black;">
<h2>Project Title</h2>
<p>This is a description of my placement project.</p>
</section>
/* Let us analyze what happens:
1. The <section> is the parent element.
2. The <h2> and <p> elements are its children.
3. <h2> and <p> inherit color: darkgreen automatically.
4. <h2> and <p> DO NOT inherit the black border. */This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
જો તમે એક `<div>` tag પર 'margin: 20px;' ગોઠવો, તો એની અંદરનું `<p>` tag default રીતે કયો margin વારસામાં મેળવશે?
- 20px
- 0px
- 10px
- એ બમણો margin (40px) વારસામાં મેળવશે
Show the answer
0px
Margin એ એક box model નો ગુણધર્મ છે. margins, padding, અને borders જેવા box model ના ગુણધર્મો વારસામાં મળતા નથી. <p> tag માતાપિતાનો margin વારસામાં મેળવતું નથી અને પોતાની default margin ની value જાળવે છે, જે browser ની stylesheet દ્વારા બીજું નિર્દિષ્ટ ન થાય ત્યાં સુધી 0px હોય છે.
Think first
Inheritance ને સ્પષ્ટપણે લાદવું
ધારો કે તમારે એક બાળક element ને એના માતાપિતા પાસેથી background-color જેવો વારસામાં ન મળતો ગુણધર્મ વારસામાં આપવો છે. મનમાં આગાહી કરો કે આ મેળવવા તમે કઈ ખાસ CSS ની value વાપરી શકો. Tap કરતાં પહેલાં વિચારો.
Show the answer
તમે 'inherit' keyword વાપરી શકો છો. ઉદાહરણ તરીકે, બાળક element પર 'background-color: inherit;' લખવાથી એ પોતાના તાત્કાલિક માતાપિતા element ની પશ્ચાદભૂમિના રંગની value ઉપર જોઈને નકલ કરવા મજબૂર થાય છે.
Watch out
વારસામાં મળતાં Form અને Link નો અપવાદ
University ની વ્યવહારુ પરીક્ષાઓમાં marks ગુમાવતો એક classic ફાંદો છે એવું ધારવું કે બધાં લખાણનાં elements styles બરાબર વારસામાં મેળવે છે. Form ના inputs, textareas, buttons, અને hyperlinks (<a> tags) પાસે હઠીલા user agent browser ના defaults હોય છે. તમે <body> tag પર વૈશ્વિક font નું કુટુંબ કે રંગ ગોઠવો તો પણ, આ ચોક્કસ elements એ અવગણશે. એમનો દેખાવ બદલવા તમારે તમારી stylesheet માં links અને form ના ઘટકોને સીધા નિશાન બનાવવા જ પડશે.
Theory
સાફ અને વિસ્તરી શકે એવું Code નું માળખું
Inheritance સમજવું નવા નિશાળિયા coders ને વ્યાવસાયિક developers થી અલગ પાડે છે. પચાસ જુદાં લખાણનાં tags માટે font ના નિયમો લખવાને બદલે, વ્યાવસાયિકો <body> કે :root selector પર એક જ font નું કુટુંબ અને વૈશ્વિક લખાણનો રંગ લગાવે છે. આ document ના વૃક્ષને ભારે કામ કરવા દે છે. જ્યારે તમે મોટી અનેક પાનાંની applications બનાવો કે Semester 3 માં frameworks વાપરો, ત્યારે inheritance નો લાભ લેવો તમારી stylesheets ને ટૂંકી, વાંચી શકાય એવી, અને બદલવામાં અતિશય ઝડપી રાખે છે.
Formula
Inheritance ના પ્રશ્નો માટે Exam નું સૂત્ર
જ્યારે theory ની પરીક્ષામાં CSS inheritance સમજાવવાનું કહેવાય, બિલકુલ આ માળખું વાપરો:
- 1. DOM નો ક્રમ: એક નાનકડા nested tag ના ઉદાહરણ વાપરીને માતાપિતા, બાળક, અને વંશજના સંબંધો સમજાવો.
- 2. વારસામાં મળતા સામે ન મળતા: બે શ્રેણીઓ વ્યાખ્યાયિત કરો. દરેકનાં 3 સ્પષ્ટ ઉદાહરણ આપો (દા.ત. color સામે border).
- 3. અપવાદના નિયમો: જણાવો કે hyperlinks અને form નાં નિયંત્રણો browser ના defaults ને કારણે fonts કે રંગો વારસામાં મેળવતાં નથી, અને સ્પષ્ટ ઉકેલ તરીકે 'inherit' keyword નો ઉલ્લેખ કરો.
Summary
Key takeaways
- HTML નું DOM વૃક્ષ કડક માતાપિતા, બાળક, પૂર્વજ, અને વંશજના સંબંધો બનાવે છે.
- CSS Inheritance આપોઆપ typography અને લખાણનું styling માતાપિતાથી બાળકોમાં ખસેડે છે.
- margins, padding, borders, અને પશ્ચાદભૂમિ જેવાં box model નાં લક્ષણો ક્યારેય આપોઆપ વારસામાં મળતાં નથી.
- Hyperlinks અને form નાં elements browser ની default styles વાપરીને કુદરતી inheritance પર ભારે પડે છે.
- માતાપિતાની style અપનાવવા મજબૂર કરવા inherit keyword કોઈ પણ ગુણધર્મને સ્પષ્ટપણે સોંપી શકાય છે.
- Memory Hook: Fonts અને રંગો લીટીએ નીચે વહે છે, પણ સીમાઓ અને ખોખાં સખ્તાઈથી મારાં જ રહે છે.