ਸਧਾਰਨ ਸਟਾਈਲ ਸ਼ੀਟ ਨਾਲ ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਸ ਦੀ ਇੱਕ ਸੰਖੇਪ ਜਾਣਕਾਰੀ
ਜਦੋਂ ਤੁਸੀਂ ਸਕਰੈਚ ਤੋਂ ਇੱਕ ਵੈਬਸਾਈਟ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਬੁਨਿਆਦੀ ਸਟਾਈਲ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਮਾਰਟ ਹੈ ਇਹ ਇੱਕ ਸਾਫ਼ ਕੈਨਵਾਸ ਅਤੇ ਤਾਜ਼ੇ ਬ੍ਰਸ਼ ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਰਗਾ ਹੈ. ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨ ਵਾਲੀਆਂ ਪਹਿਲੀ ਸਮੱਸਿਆਵਾਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਸਾਰੇ ਵੱਖਰੇ ਹਨ. ਡਿਫੌਲਟ ਫੌਂਟ ਅਕਾਰ ਪਲੇਟਫਾਰਮ ਤੋਂ ਲੈ ਕੇ ਪਲੇਟਫਾਰਮ ਤੱਕ ਵੱਖਰੇ ਹੁੰਦਾ ਹੈ, ਡਿਫਾਲਟ ਫੋਂਟ ਪਰਿਵਾਰ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ, ਕੁਝ ਬ੍ਰਾਉਜ਼ਰ ਬੌਡੀ ਟੈਗ ਤੇ ਹਾਸ਼ੀਆ ਅਤੇ ਪੈਡਿੰਗ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ ਹਨ ਜਦਕਿ ਦੂਜੇ ਨਹੀਂ ਕਰਦੇ, ਅਤੇ ਹੋਰ ਵੀ. ਆਪਣੇ ਵੈਬ ਪੰਨਿਆਂ ਲਈ ਡਿਫੌਲਟ ਸਟਾਈਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਕੇ ਇਹਨਾਂ ਅਸਪਸ਼ਟਤਾਵਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰੋ.
CSS ਅਤੇ ਅੱਖਰ ਸੈੱਟ
ਪਹਿਲਾਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਪਣੇ CSS ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਅੱਖਰ ਸਮੂਹ ਨੂੰ utf-8 ਤੇ ਸੈੱਟ ਕਰੋ ਹਾਲਾਂਕਿ ਇਹ ਸੰਭਾਵਨਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੇ ਗਏ ਬਹੁਤੇ ਪੰਨੇ ਅੰਗਰੇਜ਼ੀ ਵਿੱਚ ਲਿਖੇ ਗਏ ਹਨ, ਕੁਝ ਵੱਖਰੇ ਭਾਸ਼ਾਈ ਅਤੇ ਸੱਭਿਆਚਾਰਕ ਸੰਦਰਭ ਲਈ ਵੱਖ-ਵੱਖ ਹੋ ਸਕਦੇ ਹਨ ਜਦੋਂ ਉਹ ਹਨ, ਯੂਟਫ -8 ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸੌਖਾ ਕਰਦਾ ਹੈ. ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਵਿੱਚ ਅੱਖਰ ਸਮੂਹ ਨੂੰ ਸੈੱਟ ਕਰਨਾ ਇੱਕ HTTP ਹੈਡਰ ਤੇ ਤਰਜੀਹ ਨਹੀਂ ਦੇਵੇਗਾ, ਪਰ ਹੋਰ ਸਾਰੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ, ਇਹ ਕਰੇਗਾ.
ਅੱਖਰ ਸਮੂਹ ਨੂੰ ਸੈੱਟ ਕਰਨਾ ਆਸਾਨ ਹੈ CSS ਦਸਤਾਵੇਜ਼ ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਲਿਖੋ:
@ ਕਰਸਰੈੱਟ "utf-8";ਇਸ ਤਰੀਕੇ ਨਾਲ, ਜੇ ਤੁਸੀਂ ਸਮੱਗਰੀ ਦੀ ਸੰਪੱਤੀ ਜਾਂ ਕਲਾਸ ਅਤੇ ਆਈਡੀ ਦੇ ਨਾਂਵਾਂ ਵਿੱਚ ਅੰਤਰਰਾਸ਼ਟਰੀ ਅੱਖਰ ਵਰਤਦੇ ਹੋ, ਸ਼ੈਲੀ ਸ਼ੀਟ ਅਜੇ ਵੀ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰੇਗੀ.
ਪੇਜ ਬਾਡੀ ਨੂੰ ਸਟਾਇਲਿੰਗ
ਅਗਲੀ ਚੀਜ ਜੋ ਡਿਫਾਲਟ ਸ਼ੈਲੀ ਸ਼ੀਟ ਦੀ ਲੋੜ ਹੈ ਮਾਰਜਿਨ, ਪੈਡਿੰਗ, ਅਤੇ ਬਾਰਡਰ ਨੂੰ ਜ਼ੀਰੋ ਕਰਨ ਲਈ ਸਟਾਈਲ. ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਸਮਾਨ ਜਗ੍ਹਾ ਵਿੱਚ ਸਮਗਰੀ ਨੂੰ ਰੱਖਦੇ ਹਨ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਸਮਗਰੀ ਦੇ ਵਿਚਕਾਰ ਕੋਈ ਵੀ ਲੁਕੇ ਥਾਂ ਨਹੀਂ ਹੁੰਦੇ. ਬਹੁਤੇ ਵੈਬ ਪੇਜਾਂ ਲਈ, ਇਹ ਟੈਕਸਟ ਦੇ ਕਿਨਾਰੇ ਦੇ ਬਹੁਤ ਨਜ਼ਦੀਕ ਹੈ, ਪਰ ਇੱਥੇ ਸ਼ੁਰੂ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਤਾਂ ਜੋ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਅਤੇ ਲੇਆਉਟ ਡਿਵੀਜ਼ਨਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕਤਾਰਬੱਧ ਕੀਤਾ ਜਾ ਸਕੇ.
html, body {ਹਾਸ਼ੀਆ: 0 ਪੈਕਸ; ਪੈਡਿੰਗ: 0 ਪੈਕਸ; ਬਾਰਡਰ: 0 ਪੈਕਸ; }ਡਿਫਾਲਟ ਫਾਰਗਰਾਉੰਡ ਜਾਂ ਫੌਂਟ ਰੰਗ ਨੂੰ ਕਾਲਾ ਅਤੇ ਡਿਫਾਲਟ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਸਫੇਦ ਤੇ ਸੈੱਟ ਕਰੋ. ਹਾਲਾਂਕਿ ਇਹ ਸਭ ਵੈਬਪੇਜ ਡਿਜ਼ਾਈਨ ਲਈ ਸੰਭਾਵਤ ਤੌਰ ਤੇ ਬਦਲਾਵ ਹੋਵੇਗਾ, ਪਹਿਲਾਂ ਇਹ ਸਟੈੱਡਰਡ ਰੰਗ ਸਰੀਰ ਅਤੇ HTML ਟੈਗ ਤੇ ਰੱਖੇ ਹੋਣ ਨਾਲ ਪੇਜ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਪੜ੍ਹਨਾ ਅਤੇ ਕੰਮ ਕਰਨਾ ਸੌਖਾ ਹੁੰਦਾ ਹੈ.
html, body {color: # 000; ਪਿਛੋਕੜ: #fff; }ਡਿਫਾਲਟ ਫੌਂਟ ਸ਼ੈਲੀ
ਫੌਂਟ ਸਾਈਜ਼ ਅਤੇ ਫੌਂਟ ਪਰਿਵਾਰ ਉਹ ਚੀਜ਼ ਹੈ ਜੋ ਡਿਜਾਇਨ ਨੂੰ ਫੜ ਲੈਣ ਤੋਂ ਬਾਅਦ ਜ਼ਰੂਰ ਬਦਲਣਗੀਆਂ ਪਰ 1 ਐਮ ਦੇ ਡਿਫੌਲਟ ਫੌਂਟ ਸਾਈਜ਼ ਅਤੇ ਅਰੀਅਲ, ਜਨੇਵਾ, ਜਾਂ ਕੁਝ ਹੋਰ ਸੈਂਸ-ਸੀਰੀਫ ਫੌਂਟ ਦੇ ਡਿਫੌਲਟ ਫੌਂਟ ਪਰਿਵਾਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ. ਈਮਜ਼ ਦੀ ਵਰਤੋਂ ਪੇਜ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਸਕੈਨ ਤੇ ਸਾਬਨ-ਸੀਰੀਫ ਫੌਂਟ ਹੋਰ ਸਪਸ਼ਟ ਹੋ ਜਾਂਦਾ ਹੈ.
html, body, p, th, td, li, dd, dt {font: 1em ਆਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ; }ਹੋਰ ਸਥਾਨ ਵੀ ਹੋ ਸਕਦੇ ਹਨ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਟੈਕਸਟ ਮਿਲ ਸਕਦਾ ਹੈ, ਪਰ p , th , td , li , dd , ਅਤੇ dt ਬੇਸ ਫੋਂਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਵਧੀਆ ਸ਼ੁਰੂਆਤ ਹੈ. ਜੇਕਰ ਐਚਐਮਐਲ ਜਾਂ ਬਾਡੀ ਲਈ ਸਿਰਫ ਆਪਣੇ ਫੋਂਟਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ ਤਾਂ ਬਹੁਤ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰ ਫੌਂਟ ਵਿਕਲਪਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹਨ.
ਸੁਰਖੀਆਂ
ਤੁਹਾਡੀ ਸਾਈਟ ਦੀ ਰੂਪਰੇਖਾ ਦੀ ਮਦਦ ਲਈ HTML ਸਿਰਲੇਖਾਂ ਨੂੰ ਵਰਤਣਾ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ ਅਤੇ ਖੋਜ ਇੰਜਣ ਨੂੰ ਆਪਣੀ ਸਾਈਟ ਤੇ ਡੂੰਘਾ ਕਰਨ ਦਿਓ. ਸਟਾਈਲ ਦੇ ਬਿਨਾਂ, ਉਹ ਸਾਰੇ ਬਿਲਕੁਲ ਹੀ ਬਦਸੂਰਤ ਹਨ, ਇਸਲਈ ਉਹਨਾਂ ਸਾਰੇ ਡਿਫਾਲਟ ਸਟਾਈਲਸ ਨਿਰਧਾਰਤ ਕਰੋ ਅਤੇ ਹਰੇਕ ਲਈ ਫੋਂਟ ਪਰਿਵਾਰ ਅਤੇ ਫੌਂਟ ਸਾਈਜ਼ ਨਿਸ਼ਚਿਤ ਕਰੋ.
h1, h2, h3, h4, h5, h6 {ਫੋਂਟ-ਫੈਮਿਲੀ: ਏਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ; } h1 {font-size: 2em; } h2 {ਫੌਂਟ-ਆਕਾਰ: 1.5ਮ; } h3 {ਫੌਂਟ-ਸਾਈਜ਼: 1.2 ਐਮ; } h4 {font-size: 1.0em; } h5 {ਫੌਂਟ-ਆਕਾਰ: 0.9ਮ; } h6 {ਫੌਂਟ-ਸਾਈਜ਼: 0.8 ਐਮਐਮ; }ਲਿੰਕ ਭੁੱਲ ਨਾ ਕਰੋ
ਲਿੰਕ ਰੰਗਾਂ ਦੀ ਸਟਾਈਲਿੰਗ ਹਮੇਸ਼ਾਂ ਡਿਜ਼ਾਇਨ ਦਾ ਇੱਕ ਅਹਿਮ ਹਿੱਸਾ ਹੈ, ਪਰ ਜੇ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਡਿਫੌਲਟ ਸਟਾਈਲ ਵਿੱਚ ਨਹੀਂ ਪਰਿਭਾਸ਼ਤ ਕਰਦੇ, ਤਾਂ ਸੰਭਾਵਨਾ ਹੈ ਕਿ ਤੁਸੀਂ ਘੱਟੋ-ਘੱਟ ਇੱਕ ਸੂਡੋ-ਵਰਗ ਨੂੰ ਭੁੱਲ ਜਾਓਗੇ. ਨੀਲੇ ਤੇ ਕੁਝ ਛੋਟੇ ਪਰਿਵਰਤਨ ਦੇ ਨਾਲ ਉਹਨਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਫਿਰ ਉਹਨਾਂ ਨੂੰ ਬਦਲ ਦਿਓ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਸਾਈਟ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਰੰਗ ਪੈਲੈੱਟ ਹੋਵੇ.
ਨੀਲੇ ਦੇ ਸ਼ੇਡ ਵਿੱਚ ਲਿੰਕਾਂ ਨੂੰ ਸੈਟ ਕਰਨ ਲਈ, ਸੈਟ ਕਰੋ:
- ਨੀਲੇ ਦੇ ਤੌਰ ਤੇ ਲਿੰਕ
- ਗੂੜ੍ਹੇ ਨੀਲੇ ਦੇ ਤੌਰ ਤੇ ਲਏ ਗਏ ਲਿੰਕ
- ਹਲਕੇ ਨੀਲੇ ਦੇ ਰੂਪ ਵਿੱਚ ਜੋੜਦੇ ਰਹੋ
- ਕਿਰਿਆਸ਼ੀਲ ਲਿੰਕਾਂ ਜਿਵੇਂ ਕਿ ਨੀਲੀ ਨੀਲੀ
ਜਿਵੇਂ ਕਿ ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ:
a: ਲਿੰਕ {color: # 00f; } a: ਦੌਰਾ ਕੀਤਾ ਗਿਆ {color: # 009; } a: ਹੋਵਰ (ਰੰਗ: # 06f; } a: ਕ੍ਰਿਆਸ਼ੀਲ {color: # 0cf; } ਇਕ ਨਿਰਉਤਸ਼ਾਹੀ ਰੰਗ ਸਕੀਮ ਨਾਲ ਸੰਬੰਧ ਜੋੜ ਕੇ ਇਹ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਮੈਂ ਕਿਸੇ ਵੀ ਕਲਾਸ ਨੂੰ ਨਹੀਂ ਭੁੱਲਾਂਗਾ, ਅਤੇ ਇਹ ਡਿਫਾਲਟ ਨੀਲਾ, ਲਾਲ ਅਤੇ ਜਾਮਨੀ ਦੇ ਮੁਕਾਬਲੇ ਥੋੜਾ ਘੱਟ ਜੋਰਦਾਰ ਬਣਾ ਦਿੰਦਾ ਹੈ.ਪੂਰੀ ਸਟਾਈਲ ਸ਼ੀਟ
ਇੱਥੇ ਪੂਰੀ ਸ਼ੈਲੀ ਸ਼ੀਟ ਹੈ:
@ ਕਰਸਰੈੱਟ "utf-8"; html, body {ਹਾਸ਼ੀਆ: 0 ਪੈਕਸ; ਪੈਡਿੰਗ: 0 ਪੈਕਸ; ਬਾਰਡਰ: 0 ਪੈਕਸ; ਰੰਗ: # 000; ਪਿਛੋਕੜ: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {ਫੋਂਟ-ਫੈਮਿਲੀ: ਏਰੀਅਲ, ਹੇਲਵੇਟਿਕਾ, ਸੀਨਸ-ਸੀਰੀਫ; } h1 {font-size: 2em; } h2 {ਫੌਂਟ-ਆਕਾਰ: 1.5ਮ; } h3 {ਫੌਂਟ-ਸਾਈਜ਼: 1.2 ਐਮ; } h4 {font-size: 1.0em; } h5 {ਫੌਂਟ-ਆਕਾਰ: 0.9ਮ; } h6 {ਫੌਂਟ-ਸਾਈਜ਼: 0.8 ਐਮਐਮ; } a: ਲਿੰਕ {color: # 00f; } a: ਦੌਰਾ ਕੀਤਾ ਗਿਆ {color: # 009; } a: ਹੋਵਰ (ਰੰਗ: # 06f; } a: ਕ੍ਰਿਆਸ਼ੀਲ {color: # 0cf; }