ਕਿਵੇਂ CSS ਵਿਰਾਸਤ ਵੈੱਬ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿਚ ਕੰਮ ਕਰਦਾ ਹੈ

CSS ਦੇ ਨਾਲ ਇੱਕ ਵੈਬਸਾਈਟ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ ਵਿਰਾਸਤ ਦਾ ਸੰਕਲਪ ਸਮਝ ਰਿਹਾ ਹੈ.

CSS ਵਿਰਾਸਤ ਨੂੰ ਸਵੈਚਲਿਤ ਰੂਪ ਵਲੋਂ ਵਰਤੀ ਜਾ ਰਹੀ ਸੰਪਤੀ ਦੀ ਸ਼ੈਲੀ ਦੁਆਰਾ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ. ਜਦੋਂ ਤੁਸੀਂ ਸਟਾਇਲ ਦੀ ਪ੍ਰਾਪਰਟੀ ਬੈਕਗ੍ਰਾਉਂਡ-ਕਲਰ ਵੇਖਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ "ਵਿਰਾਸਤੀ" ਨਾਮਕ ਇਕ ਭਾਗ ਵੇਖੋਗੇ. ਜੇ ਤੁਸੀਂ ਜ਼ਿਆਦਾਤਰ ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਦੀ ਤਰ੍ਹਾਂ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਭਾਗ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਹੈ, ਪਰ ਇਹ ਇੱਕ ਮਕਸਦ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ.

CSS ਵਿਰਾਸਤਾ ਕੀ ਹੈ?

ਇੱਕ HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਹਰ ਇੱਕ ਐਲੀਮੈਂਟ ਇੱਕ ਟ੍ਰੀ ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ ਸ਼ੁਰੂਆਤੀ ਐਲੀਮੈਂਟ ਨੂੰ ਛੱਡ ਕੇ ਹਰੇਕ ਤੱਤ ਦਾ ਇੱਕ ਮੂਲ ਤੱਤ ਹੁੰਦਾ ਹੈ ਜੋ ਇਸ ਨੂੰ ਨੱਥੀ ਕਰਦਾ ਹੈ. ਉਸ ਮੂਲ ਤੱਤ ਲਈ ਜੋ ਵੀ ਸਟਾਈਲ ਲਾਗੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਉਸ ਵਿਚ ਲਾਗੂ ਹੋਏ ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੇ ਜਾਇਦਾਦਾਂ ਵਿਰਾਸਤ ਹੋ ਸਕਦੀਆਂ ਹਨ.

ਉਦਾਹਰਨ ਲਈ, ਹੇਠਾਂ ਦਿੱਤੇ ਇਸ ਐਚ ਟੀ ਟੀ ਕੋਡ ਵਿੱਚ ਇੱਕ ਈ ਐਮ ਟੈਗ ਸ਼ਾਮਲ ਇੱਕ H1 ਟੈਗ ਹੈ:

ਇਹ ਇੱਕ ਵੱਡੇ ਹੈਡਲਾਈਨ ਹੈ

EM ਐਲੀਮੈਂਟ ਐਚ -1 ਐਲੀਮੈਂਟ ਦਾ ਇੱਕ ਬੱਚੇ ਹੈ, ਅਤੇ ਵਿਜੇਤਾ ਪ੍ਰਾਪਤ H1 ਤੇ ਕਿਸੇ ਵੀ ਸਟਾਈਲ ਨੂੰ EM ਟੈਕਸਟ ਤੇ ਵੀ ਪਾਸ ਕੀਤਾ ਜਾਵੇਗਾ. ਉਦਾਹਰਣ ਲਈ:

h1 {font-size: 2em; }

ਫੌਂਟ-ਅਕਾਰ ਦੀ ਪ੍ਰਾਪਰਟੀ ਵਿਰਾਸਤ ਹੋਣ ਦੇ ਬਾਅਦ, "ਬਿਗ" (ਜੋ ਕਿ ਈਐਮ ਟੈਗਸ ਦੇ ਅੰਦਰ ਹੈ) ਦੇ ਪਾਠ ਦਾ ਇਕੋ ਅਕਾਰ ਹੋਵੇਗਾ, ਬਾਕੀ ਦੇ H1 ਵਾਂਗ. ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਇਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਮੁੱਲ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ.

CSS ਵਿਰਾਸਤਾ ਦਾ ਇਸਤੇਮਾਲ ਕਿਵੇਂ ਕਰੀਏ

ਇਸਦਾ ਉਪਯੋਗ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ ਕਿ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਜਾਣੂ ਹੋਣਾ ਅਤੇ ਵਿਰਾਸਤੀ ਨਹੀਂ ਹਨ. ਜੇ ਜਾਇਦਾਦ ਵਿਰਾਸਤ ਵਿਚ ਮਿਲੀ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਪਤਾ ਲਗਦਾ ਹੈ ਕਿ ਦਸਤਾਵੇਜ਼ ਵਿਚਲੇ ਹਰ ਇਕਾਈ ਦੇ ਲਈ ਇਕਸਾਰ ਮੁੱਲ ਹੀ ਰਹੇਗਾ.

ਇਸਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਆਪਣੀ ਬੁਨਿਆਦੀ ਸਟਾਈਲ ਨੂੰ ਇੱਕ ਬਹੁਤ ਉੱਚ ਪੱਧਰੀ ਤੱਤ ਤੇ ਸੈੱਟ ਕਰੋ, ਜਿਵੇਂ ਕਿ BODY. ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਫੌਂਟ-ਫੈਮਿਲੀ ਨੂੰ ਸਰੀਰ ਦੀ ਜਾਇਦਾਦ ਤੇ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ, ਵਿਰਾਸਤ ਲਈ ਧੰਨਵਾਦ, ਪੂਰਾ ਦਸਤਾਵੇਜ਼ ਉਹੀ ਫੌਂਟ-ਫੈਮਿਲੀ ਰਹੇਗਾ ਇਹ ਅਸਲ ਵਿਚ ਛੋਟੇ ਸਟਾਈਲਸ਼ੀਟਾਂ ਲਈ ਬਣਾਏਗਾ ਜੋ ਕਿ ਪਰਬੰਧਨ ਲਈ ਸੌਖਾ ਹੋ ਸਕਦਾ ਹੈ ਕਿਉਂਕਿ ਘੱਟ ਸਮੁੱਚੀ ਸਟਾਈਲ ਵਾਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ. ਉਦਾਹਰਣ ਲਈ:

body {font-family: Arial, sans-serif; }

Inherit Style Value ਦਾ ਇਸਤੇਮਾਲ ਕਰੋ

ਹਰ ਸੀਐਸਐਸ ਦੀ ਜਾਇਦਾਦ ਵਿੱਚ ਸੰਭਾਵਿਤ ਵਿਕਲਪ ਦੇ ਰੂਪ ਵਿੱਚ "ਵਾਰਸ" ਦਾ ਮੁੱਲ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ. ਇਹ ਵੈਬ ਬਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ, ਕਿ ਭਾਵੇਂ ਆਮ ਤੌਰ ਤੇ ਜਾਇਦਾਦ ਵਿਰਸੇ ਵਿਚ ਨਹੀਂ ਮਿਲਦੀ, ਇਸ ਦੇ ਮਾਪੇ ਦੇ ਬਰਾਬਰ ਦੀ ਕੀਮਤ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ. ਜੇ ਤੁਸੀਂ ਕੋਈ ਸਟਾਈਲ ਸੈਟ ਕਰਦੇ ਹੋ ਜਿਵੇਂ ਇਕ ਹਾਸ਼ੀਏ ਦਾ ਜੋ ਵਿਰਾਸਤ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਤੁਸੀਂ ਉਸਦੇ ਅਨੁਸਾਰੀ ਸੰਪਤੀਆਂ ਤੇ ਵਾਰਸ ਵੈਲਯੂ ਦਾ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਉਹ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਦੇ ਬਰਾਬਰ ਮੌਰਨਜ ਦੇ ਸਕਣ. ਉਦਾਹਰਣ ਲਈ:

ਸਰੀਰ {ਹਾਸ਼ੀਆ: 1em; } p {ਹਾਸ਼ੀਆ: ਵਾਰਸ; }

ਵਿਰਾਸਤੀ ਗਣਿਤ ਮੁੱਲ ਵਰਤਦਾ ਹੈ

ਇਹ ਵਿਸਤਾਰਿਤ ਮੁੱਲਾਂ ਜਿਵੇਂ ਕਿ ਫੌਂਟ ਅਕਾਰ ਜੋ ਲੰਬਾਈ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ. ਇੱਕ ਗਣਨਾ ਵੈਲਯੂ ਉਹ ਮੁੱਲ ਹੈ ਜੋ ਵੈਬ ਪੰਨੇ ਤੇ ਕਿਸੇ ਹੋਰ ਮੁੱਲ ਦੇ ਬਰਾਬਰ ਹੈ.

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਸਰੀਰਿਕ ਤੱਤ ਦੇ 1x ਦੇ ਫੌਂਟ-ਅਕਾਰ ਨੂੰ ਸੈੱਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਸਾਰਾ ਪੰਨਾ ਆਕਾਰ ਵਿਚ ਸਿਰਫ 1EM ਨਹੀਂ ਹੋਵੇਗਾ. ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਸਿਰਲੇਖ (H1-H6) ਅਤੇ ਹੋਰ ਤੱਤ (ਕੁਝ ਬ੍ਰਾਉਜ਼ਰ ਵੱਖਰੇ ਰੂਪ ਵਿੱਚ ਟੇਬਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਤੁਲਨਾ ਕਰਦੇ ਹਨ) ਵਰਗੇ ਤੱਤ ਵੈਬ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਇੱਕ ਅਨੁਸਾਰੀ ਆਕਾਰ ਰੱਖਦੇ ਹਨ. ਹੋਰ ਫ਼ੌਂਟ ਸਾਈਜ ਦੀ ਜਾਣਕਾਰੀ ਦੀ ਗੈਰਹਾਜ਼ਰੀ ਵਿੱਚ, ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਹਮੇਸ਼ਾ ਇੱਕ H1 ਸਿਰਲੇਖ ਨੂੰ ਸਫ਼ੇ ਤੇ ਸਭ ਤੋਂ ਵੱਡਾ ਟੈਕਸਟ ਬਣਾਵੇਗਾ, H2 ਅਤੇ ਇਸ ਤੋਂ ਅੱਗੇ. ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਖਾਸ ਫੌਂਟ ਸਾਈਜ ਲਈ ਆਪਣੇ ਸਰੀਰ ਦੇ ਤੱਤ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ "ਔਸਤ" ਫੌਂਟ ਸਾਈਜ ਦੇ ਤੌਰ ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਹੈੱਡਲਾਈਨ ਤੱਤ ਇਸ ਤੋਂ ਗਣਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ.

ਵਿਰਾਸਤ ਅਤੇ ਪਿਛੋਕੜ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਇੱਕ ਸੂਚਨਾ

ਸੂਚੀਬੱਧ ਹੋਣ ਵਾਲੀਆਂ ਕਈ ਸਟਾਈਲ W3C ਤੇ CSS 2 ਵਿੱਚ ਵਿਰਾਸਤੀ ਨਹੀਂ ਹਨ, ਪਰ ਵੈਬ ਬ੍ਰਾਉਜ਼ਰ ਅਜੇ ਵੀ ਕਦਰਾਂ ਕੀਮਤਾਂ ਦਾ ਹਿੱਸਾ ਹਨ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਤੁਸੀਂ ਅੱਗੇ ਦਿੱਤੇ HTML ਅਤੇ CSS ਲਿਖ ਲਏ ਹਨ: