CSS ਨਾਲ ਵੈੱਬਸਾਈਟ ਫੋਂਟ ਰੰਗਾਂ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ

ਚੰਗੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਡਿਜ਼ਾਇਨ ਸਫਲਤਾਪੂਰਵਕ ਵੈੱਬਸਾਈਟ ਦਾ ਇੱਕ ਅਹਿਮ ਹਿੱਸਾ ਹੈ. CSS ਤੁਹਾਨੂੰ ਵੈਬ ਪੇਜ ਤੇ ਪਾਠ ਦੀ ਦਿੱਖ ਤੇ ਬਹੁਤ ਵਧੀਆ ਨਿਯੰਤ੍ਰਣ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਵੈੱਬ ਪੰਨੇ ਹਨ. ਇਸ ਵਿੱਚ ਤੁਹਾਡੇ ਦੁਆਰਾ ਵਰਤੇ ਗਏ ਫੌਂਟਾਂ ਦੇ ਰੰਗ ਨੂੰ ਬਦਲਣ ਦੀ ਸਮਰੱਥਾ ਸ਼ਾਮਲ ਹੈ.

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

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

ਫੋਂਟ ਰੰਗ ਬਦਲਣ ਲਈ ਸ਼ੈਲੀ ਜੋੜਨਾ

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

ਇੱਥੇ ਤੁਹਾਡੇ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪੈਰਾਗ੍ਰਾਫ ਟੈਗਾਂ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਦਾ ਫੌਂਟ ਰੰਗ ਬਦਲਣਾ ਹੈ.

ਰੰਗ ਦੇ ਮੁੱਲ ਨੂੰ ਰੰਗ ਦੇ ਸ਼ਬਦ, ਆਰਜੀਬੀ ਕਲਰ ਨੰਬਰ, ਜਾਂ ਹੈਕਸਾਡੈਸੀਮਲ ਕਲਰ ਨੰਬਰ ਦੇ ਰੂਪ ਵਿੱਚ ਦਰਸਾਇਆ ਜਾ ਸਕਦਾ ਹੈ.

1. ਪੈਰਾਗ੍ਰਾਫ ਟੈਗ ਲਈ ਸਟਾਈਲ ਐਟਰੀਬਿਊਟ ਜੋੜੋ:
   1. ਪੀ {}
2. ਸ਼ੈਲੀ ਵਿਚ ਰੰਗ ਦੀ ਜਾਇਦਾਦ ਨੂੰ ਰੱਖੋ. ਉਸ ਜਾਇਦਾਦ ਦੇ ਬਾਅਦ ਇੱਕ ਕੋਲੋਨ ਰੱਖੋ:
   1. p {color:}
3. ਫਿਰ ਸੰਪਤੀ ਦੇ ਬਾਅਦ ਆਪਣੇ ਰੰਗ ਦਾ ਮੁੱਲ ਸ਼ਾਮਿਲ ਕਰੋ ਇੱਕ ਅਰਧ-ਕੌਲਨ ਨਾਲ ਇਹ ਮੁੱਲ ਖਤਮ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ:
   1. ਪੀ {ਰੰਗ: ਕਾਲੇ;}

ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਦੇ ਪੈਰਾਗਰਾਫੀ ਹੁਣ ਕਾਲਾ ਹੋ ਜਾਣਗੇ.

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

ਪੀ {color: # 000000; }

ਇਹ CSS ਸਟਾਈਲ ਤੁਹਾਡੇ ਪੈਰਾਗਰਾਫਿਆਂ ਦਾ ਰੰਗ ਕਾਲੇ ਰੰਗ ਵਿੱਚ ਵੀ ਸੈਟ ਕਰੇਗੀ, ਕਿਉਂਕਿ ਹੇਕ ਕੋਡ #000000 ਕਾਲਾ ਵਿੱਚ ਅਨੁਵਾਦ ਕਰਦਾ ਹੈ. ਤੁਸੀਂ ਉਸ ਹੈਕਣ ਮੁੱਲ ਦੇ ਨਾਲ ਲਘੂ ਰੰਗ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਸਿਰਫ਼ 000 ਦੇ ਤੌਰ 'ਤੇ ਲਿਖ ਸਕਦੇ ਹੋ ਅਤੇ ਤੁਹਾਨੂੰ ਉਹੀ ਚੀਜ਼ ਮਿਲਦੀ ਹੈ.

ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਜ਼ਿਕਰ ਕੀਤਾ ਹੈ, ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕ ਰੰਗ ਦੀ ਲੋੜ ਹੈ ਜੋ ਸਿਰਫ਼ ਕਾਲਾ ਜਾਂ ਚਿੱਟਾ ਨਹੀਂ ਹੈ ਤਾਂ ਹੈਕਸ ਮੁੱਲ ਵਧੀਆ ਕੰਮ ਕਰਦੇ ਹਨ. ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:

ਪੀ {color: # 2f5687; }

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

ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਫ਼ੌਂਟ ਰੰਗਾਂ ਲਈ RGBA ਰੰਗ ਦੇ ਮੁੱਲ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ. RGCA ਹੁਣ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਮਰਥਿਤ ਹੈ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਹਨਾਂ ਮੁੱਲਾਂ ਨੂੰ ਬਹੁਤ ਘੱਟ ਚਿੰਤਾ ਨਾਲ ਵਰਤ ਸਕੋ, ਇਹ ਇੱਕ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਮਰਥਤ ਨਹੀਂ ਹੋਵੇਗਾ, ਪਰ ਤੁਸੀਂ ਇੱਕ ਅਸਫਲ ਫਾਲਬੈਕ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ.

ਪੀ {ਰੰਗ: ਰਗਬਾ (47,86,135,1); }

ਇਹ ਆਰਜੀਬੀਏ ਮੁੱਲ ਉਹੀ ਹੈ ਜੋ ਪਹਿਲਾਂ ਦੱਸੇ ਗਏ ਸਲੇਟ ਨੀਲੇ ਰੰਗ ਦੇ ਬਰਾਬਰ ਸੀ. ਪਹਿਲੇ 3 ਮੁੱਲਾਂ ਵਿੱਚ ਲਾਲ, ਗ੍ਰੀਨ, ਅਤੇ ਬਲੂ ਵੈਲਯੂਜ਼ ਸੈਟ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਫਾਈਨਲ ਨੰਬਰ ਐਲਫ਼ਾ ਸੈਟਿੰਗ ਹੈ. ਇਹ "1" ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ "100%", ਇਸ ਲਈ ਇਸ ਰੰਗ ਵਿੱਚ ਕੋਈ ਪਾਰਦਰਸ਼ਤਾ ਨਹੀਂ ਹੋਵੇਗੀ. ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਦਸ਼ਮਲਵ ਸੰਖਿਆ, ਜਿਵੇਂ .85, ਤੇ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ 85% ਧੁੰਦਲਾਪਨ ਦਾ ਅਨੁਵਾਦ ਕਰੇਗਾ ਅਤੇ ਰੰਗ ਥੋੜ੍ਹਾ ਜਿਹਾ ਪਾਰਦਰਸ਼ੀ ਹੋਵੇਗਾ.

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਰੰਗ ਦੇ ਮੁੱਲ ਬੁਲੇਟਪਰੂਫ ਕਰਨੇ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਹ ਕਰੋਗੇ:

ਪੀ {
color: # 2f5687;
ਰੰਗ: rgba (47,86,135,1);
}

ਇਹ ਸੰਟੈਕਸ ਪਹਿਲੇ ਹੈਕਸਾ ਕੋਡ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ. ਇਹ ਫਿਰ RGBA ਨੰਬਰ ਨਾਲ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਟ ਕਰਦਾ ਹੈ. ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਕੋਈ ਵੀ ਪੁਰਾਣੇ ਬਰਾਊਜ਼ਰ, ਜੋ RGBA ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ, ਪਹਿਲੇ ਮੁੱਲ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰੇਗਾ ਅਤੇ ਦੂਜੇ ਨੂੰ ਅਣਡਿੱਠਾ ਕਰੇਗਾ. ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦਾ CSS cascade ਪ੍ਰਤੀ ਦੂਜਾ ਵਰਤੇਗਾ.