CSS ਨਾਲ ਸ਼ਾਨਦਾਰ ਸਿਰਲੇਖਾਂ ਨੂੰ ਬਣਾਓ

ਹੈਡਲਾਈਨਾਂ ਨੂੰ ਸਜਾਉਣ ਲਈ ਫੌਂਟ, ਬਾਰਡਰ ਅਤੇ ਚਿੱਤਰ ਵਰਤੋ

ਜ਼ਿਆਦਾਤਰ ਵੈਬ ਪੇਜਾਂ ਤੇ ਹੈੱਡਲਾਈਨਸ ਆਮ ਹਨ ਵਾਸਤਵ ਵਿੱਚ, ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਡੌਕਯੂਮੈਂਟ ਵਿੱਚ ਘੱਟੋ ਘੱਟ ਇੱਕ ਹੈਡਲਾਈਨ ਹੋਣ ਦਾ ਰੁਝਾਨ ਹੁੰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋਵੋ ਕਿ ਤੁਸੀਂ ਕੀ ਪੜ ਰਹੇ ਹੋ. ਇਹ ਸੁਰਖੀਆਂ HTML ਸਿਰਲੇਖ ਦੇ ਤੱਤਾਂ - h1, h2, h3, h4, h5, ਅਤੇ h6 ਵਰਤ ਕੇ ਕੋਡਿਡ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ.

ਕੁਝ ਸਾਈਟਾਂ 'ਤੇ, ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗ ਸਕਦਾ ਹੈ ਕਿ ਇਹਨਾਂ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਗੈਰ ਸਿਰਲੇਖਾਂ ਨੂੰ ਕੋਡਬੱਧ ਕੀਤਾ ਗਿਆ ਹੈ. ਇਸ ਦੀ ਬਜਾਏ, ਸੁਰਖੀਆ ਉਨ੍ਹਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਸ਼੍ਰੇਣੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਜੁੜੇ ਪੈਰਾਗਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੀ ਹੈ, ਜਾਂ ਕਲਾਸ ਦੇ ਤੱਤਾਂ ਨਾਲ ਵੰਡੀਆਂ. ਕਾਰਨ ਹੈ ਕਿ ਮੈਂ ਅਕਸਰ ਇਸ ਗਲਤ ਅਭਿਆਸ ਬਾਰੇ ਸੁਣਦਾ ਹਾਂ ਇਹ ਹੈ ਕਿ ਡਿਜ਼ਾਇਨਰ "ਸਿਰਲੇਖਾਂ ਦੇ ਢੰਗ ਨੂੰ ਪਸੰਦ ਨਹੀਂ ਕਰਦਾ" ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ, ਹੈਡਿੰਗ ਬੋਲਡ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੇ ਹਨ ਅਤੇ ਉਹ ਵੱਡੇ ਹੁੰਦੇ ਹਨ, ਖਾਸ ਕਰਕੇ h1 ਅਤੇ h2 ਐਲੀਮੈਂਟ ਜੋ ਬਾਕੀ ਸਫ਼ੇ ਦੇ ਟੈਕਸਟ ਦੇ ਮੁਕਾਬਲੇ ਬਹੁਤ ਵੱਡੇ ਫੌਂਟ ਸਾਈਜ਼ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੇ ਹਨ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ ਇਹ ਕੇਵਲ ਇਨ੍ਹਾਂ ਤੱਤਾਂ ਦੀ ਮੂਲ ਦਿੱਖ ਹੈ! CSS ਦੇ ਨਾਲ, ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਸੀਂ ਸਿਰਲੇਖ ਦੇਖ ਸਕਦੇ ਹੋ! ਤੁਸੀਂ ਫ਼ੌਂਟ ਸਾਈਜ਼ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ, ਬੋਲਡ ਨੂੰ ਹਟਾ ਸਕਦੇ ਹੋ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸਿਰਲੇਖ ਇੱਕ ਸਫ਼ੇ ਦੀਆਂ ਸੁਰਖੀਆਂ ਨੂੰ ਕੋਡ ਦੇਣ ਦਾ ਸਹੀ ਤਰੀਕਾ ਹੈ ਇੱਥੇ ਕੁਝ ਕਾਰਨ ਹਨ, ਕਿਉਂ

ਡੀਈਵੀ ਅਤੇ ਸਟਾਇਲ ਦੀ ਬਜਾਏ ਸਿਰਲੇਖ ਟੈਗ ਕਿਉਂ ਵਰਤਣਾ ਹੈ

ਸਿਰਲੇਖ ਟੈਗਸ ਦੀ ਤਰ੍ਹਾਂ ਖੋਜ ਇੰਜਣ


ਇਹ ਹੈਡਿੰਗਾਂ ਨੂੰ ਵਰਤਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਕਾਰਨ ਹੈ, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਕ੍ਰਮ (ਅਰਥਾਤ h1, ਫਿਰ h2, ਫਿਰ h3, ਆਦਿ) ਵਿੱਚ ਵਰਤੋ. ਖੋਜ ਇੰਜਣ ਸਿਰਲੇਖ ਟੈੱਕਸਟਾਂ ਦੇ ਅੰਦਰ ਸ਼ਾਮਲ ਪਾਠ ਦੇ ਸਭ ਤੋਂ ਵੱਧ ਤਵੱਜੋ ਦਿੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਸ ਟੈਕਸਟ ਲਈ ਸਿਮੈਨਿਕ ਦਾ ਮੁੱਲ ਹੁੰਦਾ ਹੈ. ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿਚ, ਤੁਹਾਡੇ ਪੇਜ ਦੇ ਹਾਈਟਲ ਨੂੰ ਲੇਬਲ ਕਰਕੇ, ਤੁਸੀਂ ਸਰਚ ਇੰਜਣ ਮੱਕੜੀ ਨੂੰ ਕਹਿੰਦੇ ਹੋ ਕਿ ਇਹ ਪੇਜ ਦੇ # 1 ਫੋਕਸ ਹੈ. H2 ਸਿਰਲੇਖਾਂ ਤੇ # 2 ਜ਼ੋਰ, ਅਤੇ ਇਸੇ ਤਰ੍ਹਾਂ ਦੇ.

ਤੁਹਾਨੂੰ ਯਾਦ ਰੱਖਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੀਆਂ ਸੁਰਖੀਆਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਕਿਹੜੀਆਂ ਕਲਾਸਾਂ ਵਰਤੀਆਂ ਸਨ

ਜਦੋਂ ਤੁਹਾਨੂੰ ਪਤਾ ਲਗਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਸਾਰੇ ਵੈਬ ਪੇਜਾਂ 'ਤੇ ਇੱਕ H1 ਹੈ ਜੋ ਬੋਲਡ, 2 ਐਮ ਅਤੇ ਪੀਲੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੀ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਇੱਕ ਵਾਰ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. 6 ਮਹੀਨੇ ਬਾਅਦ, ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਹੋਰ ਪੰਨੇ ਨੂੰ ਜੋੜ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਪੰਨੇ ਦੇ ਉੱਪਰਲੇ ਹਿੱਸੇ ਨੂੰ ਐਚ 1 ਟੈਗ ਨਾਲ ਜੋੜਦੇ ਹੋ, ਇਹ ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਸਟਾਇਲ ID ਜਾਂ ਕਲਾਸ ਹੈ ਜੋ ਮੁੱਖ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਸੀ ਸਿਰਲੇਖ ਅਤੇ ਉਪ-ਸਿਰ

ਉਹ ਇੱਕ ਮਜ਼ਬੂਤ ​​ਪੇਜ ਆਉਟਲਾਈਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ

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

ਤੁਹਾਡਾ ਸਫਾ ਭਾਵਨਾ ਬਣਾਉਂਦਾ ਹੈ ਨਾਲ ਵੀ ਸਟਾਈਲ ਬੰਦ ਹੋ ਗਿਆ ਹੈ

ਹਰ ਕੋਈ ਸਟਾਈਲ ਸ਼ੀਟਸ ਨੂੰ ਵੇਖ ਜਾਂ ਵਰਤ ਸਕਦਾ ਹੈ (ਅਤੇ ਇਹ # 1 'ਤੇ ਵਾਪਸ ਆਉਂਦੀ ਹੈ - ਖੋਜ ਇੰਜਣ ਸਟਾਈਲ ਸ਼ੀਟਸ ਨਾ, ਤੁਹਾਡੇ ਪੰਨੇ ਦੀ ਸਮਗਰੀ (ਟੈਕਸਟ) ਨੂੰ ਵੇਖਦੇ ਹਨ). ਜੇ ਤੁਸੀਂ ਸਿਰਲੇਖ ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਪੰਨਿਆਂ ਨੂੰ ਵਧੇਰੇ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦੇ ਹੋ ਕਿਉਂਕਿ ਮੁੱਖ ਸੂਚਨਾਵਾਂ ਉਹ ਜਾਣਕਾਰੀ ਦਿੰਦੀਆਂ ਹਨ ਜੋ ਇੱਕ ਡੀਵੀ ਟੈਗ ਨਹੀਂ ਕਰਨਗੇ.

ਇਹ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਤੇ ਵੈਬਸਾਈਟ ਅਸੈਸਬਿਲਟੀ ਲਈ ਉਪਯੋਗੀ ਹੈ

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

ਆਪਣੀ ਸੁਰਖੀ ਦੇ ਪਾਠ ਅਤੇ ਫੋਂਟ ਦੀ ਸ਼ੈਲੀ

ਸਿਰਲੇਖ ਟੈਗਸ ਦੀ "ਵੱਡੀ, ਗੂੜ੍ਹੀ ਅਤੇ ਦੁਸ਼ਟ" ਸਮੱਸਿਆ ਤੋਂ ਦੂਰ ਜਾਣ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ ਪਾਠ ਨੂੰ ਉਸ ਤਰੀਕੇ ਨਾਲ ਸ਼ੈਲੀ ਕਰਨਾ ਜਿਸ ਤਰ੍ਹਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ. ਵਾਸਤਵ ਵਿੱਚ, ਜਦੋਂ ਮੈਂ ਇੱਕ ਨਵੀਂ ਵੈਬਸਾਈਟ ਤੇ ਕੰਮ ਕਰ ਰਿਹਾ ਹਾਂ, ਮੈਂ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਪੈਰਾ, H1, H2, ਅਤੇ H3 ਸਟਾਈਲ ਪਹਿਲੀ ਗੱਲ ਲਿਖਦਾ ਹਾਂ. ਮੈਂ ਆਮ ਤੌਰ 'ਤੇ ਸਿਰਫ਼ ਫੌਂਟ ਪਰਿਵਾਰ ਅਤੇ ਆਕਾਰ / ਭਾਰ ਨਾਲ ਲਓ. ਉਦਾਹਰਣ ਵਜੋਂ, ਇਹ ਇੱਕ ਨਵੀਂ ਸਾਈਟ ਲਈ ਸ਼ੁਰੂਆਤੀ ਸਟਾਈਲ ਸ਼ੀਟ ਹੋ ਸਕਦੀ ਹੈ (ਇਹ ਸਿਰਫ ਕੁਝ ਉਦਾਹਰਨ ਸਟਾਈਲ ਹਨ ਜੋ ਵਰਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ):

body, html {margin: 0; ਪੈਡਿੰਗ: 0; } p {ਫੌਂਟ: 1ਮ ਏਰੀਅਲ, ਜਿਨੀਵਾ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {ਫੌਂਟ: ਬੋਲਡ 1.5ਮ "ਟਾਈਮਸ ਨਿਊ ਰੋਮਨ", ਟਾਈਮਜ਼, ਸੀਰੀਫ; } h3 {ਫੌਂਟ: ਬੋਲਡ 1.2 ਐਮ ਏਰੀਅਲ, ਜਿਨੀਵਾ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸਿਰਫ; }

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

h1 {font: bold italic 2em / 1em "ਟਾਈਮਸ ਨਿਊ ਰੋਮਨ", "ਐਮ ਐਸ ਸੈਰੀਫ", "ਨਿਊਯਾਰਕ", ਸੇਰਿਫ਼; ਹਾਸ਼ੀਆ: 0; ਪੈਡਿੰਗ: 0; ਰੰਗ: # e7ce00; }

ਸਰਹੱਦਾਂ ਉੱਪਰ ਕੱਪੜੇ ਪਾ ਸਕਦੇ ਹਨ

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

h1 {font: bold italic 2em / 1em "ਟਾਈਮਸ ਨਿਊ ਰੋਮਨ", "ਐਮ ਐਸ ਸੈਰੀਫ", "ਨਿਊਯਾਰਕ", ਸੇਰਿਫ਼; ਹਾਸ਼ੀਆ: 0; ਪੈਡਿੰਗ: 0; ਰੰਗ: # e7ce00; ਸਰਹੱਦੀ ਚੋਟੀ: ਠੋਸ # e7ce00 ਮਾਧਿਅਮ; ਬਾਰਡਰ-ਥੱਲੇ: ਬਿੰਦੀ # e7ce00 ਪਤਲੇ; ਚੌੜਾਈ: 600 ਪੈਕਸ; }

ਮੈਂ ਕੁਝ ਦਿਲਚਸਪ ਵਿਜ਼ੁਅਲ ਸਟਾਈਲ ਪੇਸ਼ ਕਰਨ ਲਈ ਮੇਰੇ ਨਮੂਨੇ ਦੇ ਸਿਰਲੇਖ ਨੂੰ ਇੱਕ ਚੋਟੀ ਅਤੇ ਹੇਠਲਾ ਬਾਰਡਰ ਜੋੜਿਆ ਹੈ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਸਰਹੱਦਾਂ ਜੋੜ ਸਕਦੇ ਹੋ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਉਸ ਡਿਜ਼ਾਇਨ ਸਟਾਈਲ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ

ਹੋਰ ਵੀ ਪੀਜ਼ਾਜ਼ ਲਈ ਤੁਹਾਡੇ ਸਿਰਲੇਖਾਂ ਲਈ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਜੋੜੋ

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

h1 {font: bold italic 3em / 1em "ਟਾਈਮਜ਼ ਨਿਊ ਰੋਮਨ", "ਐਮ ਐਸ ਸੈਰੀਫ", "ਨਿਊਯਾਰਕ", ਸੇਰਿਫ਼; ਪਿਛੋਕੜ: #fff url ("fancyheadline.jpg") ਦੁਹਰਾਓ- x ਤਲ; ਪੈਡਿੰਗ: 0.5 ਐੱਮ 090 ਪੈਕਸ 0; text-align: ਸੈਂਟਰ; ਹਾਸ਼ੀਆ: 0; ਸੀਮਾ-ਹੇਠਾਂ: ਠੋਸ # e7ce00 0.25em; ਰੰਗ: # e7ce00; }

ਇਸ ਸੁਰਖੀ ਦੀ ਚਾਲ ਇਹ ਹੈ ਕਿ ਮੈਨੂੰ ਪਤਾ ਹੈ ਕਿ ਮੇਰੀ ਚਿੱਤਰ 90 ਫੁੱਟ ਲੰਬੇ ਹੈ ਇਸ ਲਈ ਮੈਂ 90px ਦੀ ਹੈੱਡਲਾਈਨ ਦੇ ਹੇਠਾਂ ਪੈਂਡਿੰਗ ਜੋੜਿਆ (ਚਿਣਨ: 0.5 0 90 ਪੈਕਸ 0 ਪ;). ਤੁਸੀ ਮਾਰਗਿਨ, ਲਾਈਨ-ਉਚਾਈ, ਅਤੇ ਪੈਡਿੰਗ ਨਾਲ ਮੁੰਤਕਿਲ ਕਰਨ ਲਈ ਹੈਡਲਾਈਨ ਦੇ ਟੈਕਸਟ ਨੂੰ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ

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

ਸੁਰਖੀਆਂ ਵਿੱਚ ਚਿੱਤਰ ਬਦਲਣਾ

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

ਜੈਨੀਫਰ ਕ੍ਰਿਨਿਨ ਦੁਆਰਾ ਮੂਲ ਲੇਖ. 9/6/17 ਨੂੰ ਜੈਰੀਮੀ ਗਿਰਾਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ