વેબ દસ્તાવેજોમાં કેવી રીતે CSS વારસા કાર્ય કરે છે

સી.એસ.એસ. સાથે વેબસાઇટને સ્ટાઇલીંગ કરવાનું મહત્વનું ભાગ એ વારસાના ખ્યાલને સમજવાનો છે.

સીએસએસ વારસાને ઉપયોગમાં લેવાતી મિલકતની શૈલી દ્વારા આપમેળે વ્યાખ્યાયિત કરવામાં આવે છે. જ્યારે તમે સ્ટાઇલ પ્રોપર્ટી બેકગ્રાઉન્ડ-રંગ જુઓ છો, ત્યારે તમને "Inheritance" શીર્ષકવાળા વિભાગ દેખાશે. જો તમે મોટાભાગના વેબ ડીઝાઇનરોની જેમ છો, તો તમે તે વિભાગને અવગણ્યો છે, પરંતુ તે હેતુસર સેવા આપે છે.

સીએસએસ વારસા શું છે?

એક HTML દસ્તાવેજમાં દરેક તત્વ એક વૃક્ષનો ભાગ છે અને પ્રારંભિક ઘટક સિવાયના દરેક તત્વને પિતૃ ઘટક હોય છે જે તેને બંધ કરે છે. જે પિતૃ તત્વ પર જે પ્રકારો લાગુ પાડવામાં આવે છે તે આમાં બંધાયેલ તત્વો પર લાગુ થઈ શકે છે જો ગુણધર્મો એ વારસાગત થઈ શકે છે.

ઉદાહરણ તરીકે, નીચે આ એચટીએમએલ કોડમાં એક EM ટેગને સમાવતી H1 ટેગ છે:

આ બિગ હેડલાઇન છે

ઇએમ એલિમેન્ટ એ એચ -1 (H1) એલિમેન્ટનો બાળક છે, અને એચ 1 (H1) પરની કોઈપણ શૈલી, જે વારસાગત છે, ઇએમ ટેક્સ્ટમાં પણ પસાર થશે. દાખ્લા તરીકે:

h1 {font-size: 2em; }

ફૉન્ટ-સાઈઝની મિલકત વારસાગત હોવાથી, "બીગ" (જે ઇએમ ટેગની અંદર છે) એ ટેક્સ્ટ છે જે બાકીના એચ 1 તરીકેનું માપ છે. આ કારણ છે કે તે સીએસએસ ગુણધર્મમાં મૂલ્ય સમૂહને પ્રાપ્ત કરે છે.

સી.એસ.એસ. હેરિટેન્સનો ઉપયોગ કેવી રીતે કરવો

તેનો ઉપયોગ કરવાનો સૌથી સહેલો રસ્તો એ છે કે CSS ગુણધર્મો સાથે પરિચિત થવું એ છે કે જે વારસાગત નથી. જો મિલકત વારસાગત હોય, તો પછી તમે જાણો છો કે મૂલ્ય દસ્તાવેજના દરેક બાળક ઘટક માટે સમાન રહેશે.

આનો ઉપયોગ કરવાનો શ્રેષ્ઠ રસ્તો એ છે કે તમારી મૂળભૂત શૈલીઓ ખૂબ ઊંચા-સ્તરની તત્વ પર સેટ કરો, જેમ કે BODY. જો તમે તમારા ફૉન્ટ-ફેમિલીને બોડી પ્રોપર્ટી પર સેટ કરો છો, તો પછી, વારસાને આભાર, સમગ્ર દસ્તાવેજ તે જ ફોન્ટ-ફેમિલી રાખશે. આ વાસ્તવમાં નાના સ્ટાઈલશીટ માટે બનાવશે જે મેનેજ કરવાનું સરળ છે કારણ કે ત્યાં એકંદર સંપૂર્ણ શૈલી છે દાખ્લા તરીકે:

શરીર {ફોન્ટ-કુટુંબ: એરિયલ, સાન્સ-સેરીફ; }

ઇનહેઇટ પ્રકાર મૂલ્યનો ઉપયોગ કરો

પ્રત્યેક સીએસએસ ગુણધર્મમાં શક્ય વિકલ્પ તરીકે "વારસામાં" મૂલ્ય શામેલ છે. આ વેબ બ્રાઉઝરને કહે છે કે, જો મિલકત સામાન્ય રીતે વારસામાં આપવામાં આવશે નહીં, તો તેના માતાપિતા જેટલું જ મૂલ્ય હોવું જોઈએ. જો તમે માર્જીન જેવી કોઈ શૈલી સેટ કરો છો જે વારસાગત નથી, તો તમે વારસાની જેમ તેમને સમાન માર્જિન આપવા માટે અનુગામી ગુણધર્મોમાં વારસા મૂલ્યનો ઉપયોગ કરી શકો છો. દાખ્લા તરીકે:

શરીર {ગાળો: 1em; } પી {માર્જીન: બોનસ; }

વારસો ગણતરી કરેલ મૂલ્યોનો ઉપયોગ કરે છે

વારસાગત મૂલ્યો જેવા કે ફોન્ટ કદ જે લંબાઈનો ઉપયોગ કરે છે. ગણતરી કરેલ મૂલ્ય એવી મૂલ્ય છે જે વેબ પેજ પર અન્ય કોઈ મૂલ્યની તુલનામાં હોય છે.

જો તમે તમારા BODY તત્વ પર ફૉન્ટ-માપ 1EM સેટ કરો છો, તો તમારું આખું પાનું કદમાં ફક્ત 1em હશે નહીં. આનું કારણ એ છે કે હેડિંગ (H1-H6) અને અન્ય ઘટકો (કેટલાક બ્રાઉઝર્સ કોષ્ટક ગુણધર્મોને અલગ રીતે ગણતરી કરતા હોય છે) જેવા વેબ બ્રાઉઝરમાં સંબંધિત કદ ધરાવે છે. અન્ય ફોન્ટ માપની માહિતીની ગેરહાજરીમાં, વેબ બ્રાઉઝર હંમેશાં H1 હેડલાઇનને પૃષ્ઠ પરનું સૌથી મોટું ટેક્સ્ટ બનાવશે, પછી H2 અને તેથી આગળ. જ્યારે તમે કોઈ ચોક્કસ ફૉન્ટ કદ પર તમારા BODY ઘટકને સેટ કરો છો, તો તે "સરેરાશ" ફોન્ટ કદ તરીકે ઉપયોગમાં લેવાય છે, અને તેમાંથી હેડલાઇન તત્વોની ગણતરી કરવામાં આવે છે

વારસા અને પૃષ્ઠભૂમિ ગુણધર્મો વિશે નોંધ

W3C પર CSS 2 માં વારસાગત નથી તેવી સંખ્યાબંધ શૈલીઓ શામેલ છે, પરંતુ વેબ બ્રાઉઝરો હજી પણ મૂલ્યોને પ્રાપ્ત કરે છે. ઉદાહરણ તરીકે, જો તમે નીચેના HTML અને CSS લખ્યાં છે: