ਵੈਬ ਪੇਜਾਂ ਤੇ ਲਿੰਕ ਬਹੁਤ ਆਮ ਹੁੰਦੇ ਹਨ, ਪਰ ਬਹੁਤ ਸਾਰੇ ਵੈਬ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਇਸ ਗੱਲ ਦਾ ਅਹਿਸਾਸ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਉਨ੍ਹਾਂ ਕੋਲ CSS ਨੂੰ ਸੀਮਤ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਦੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਕਾਬੂ ਕਰਨ ਦੀ ਸ਼ਕਤੀ ਹੈ. ਤੁਸੀਂ ਦੌਰਾ ਕੀਤੇ, ਹੋਵਰ ਅਤੇ ਸਰਗਰਮ ਰਾਜਾਂ ਨਾਲ ਸਬੰਧਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਆਪਣੇ ਲਿੰਕਾਂ ਨੂੰ ਜ਼ਿਆਦਾ ਪਿਕਰੇਜ ਦੇਣ ਲਈ ਉਹਨਾਂ ਨੂੰ ਬਾਰਡਰ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਦੇ ਨਾਲ ਵੀ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਬਟਨ ਜਾਂ ਇੱਥੋਂ ਦੀਆਂ ਤਸਵੀਰਾਂ ਵਰਗੇ ਬਣਾਉ.
ਜ਼ਿਆਦਾਤਰ ਵੈਬ ਡਿਜ਼ਾਇਨਰ "a" ਟੈਗ 'ਤੇ ਇੱਕ ਸ਼ੈਲੀ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ:
ਇੱਕ {ਰੰਗ: ਲਾਲ; }ਇਹ ਲਿੰਕ ਦੇ ਸਾਰੇ ਪਹਿਲੂਆਂ ਦੀ ਸ਼ੈਲੀ ਕਰੇਗਾ (ਹੋਵਰ, ਦੌਰਾ ਕੀਤਾ, ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ). ਹਰੇਕ ਹਿੱਸੇ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸਟਾਇਲ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਲਿੰਕ ਸਿਊਡ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ.
ਲਿੰਕ ਸੂਡੋ-ਕਲਾਸ
ਇੱਥੇ ਚਾਰ ਬੁਨਿਆਦੀ ਕਿਸਮਾਂ ਦੇ ਲਿੰਕ ਸਿਡਓ-ਕਲਾਸਾਂ ਹਨ ਜੋ ਤੁਸੀਂ ਪਰਿਭਾਸ਼ਤ ਕਰ ਸਕਦੇ ਹੋ:
- : ਲਿੰਕ - ਇਹ ਲਿੰਕ ਲਈ ਡਿਫਾਲਟ ਸ਼ੈਲੀ ਹੈ
- : ਦਾ ਦੌਰਾ ਕੀਤਾ - ਇੱਕ ਲਿੰਕ ਦੇ ਬਾਅਦ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਹੈ
- : ਹੋਵਰ - ਇੱਕ ਮਾਊਸ ਦੇ ਤੌਰ ਤੇ ਇੱਕ ਲਿੰਕ (ਪੂਰਵ-ਕਲਿਕ)
- : ਸਰਗਰਮ - ਜਿਵੇਂ ਕਿ ਲਿੰਕ ਨੂੰ ਦਬਾਇਆ ਜਾ ਰਿਹਾ ਹੈ
ਇੱਕ ਲਿੰਕ ਸੂਡੋ-ਕਲਾਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ, ਇਸਨੂੰ ਆਪਣੇ CSS ਚੋਣਕਾਰ ਵਿੱਚ ਇੱਕ ਟੈਗ ਦੇ ਨਾਲ ਵਰਤੋ. ਇਸ ਲਈ, ਆਪਣੇ ਸਾਰੇ ਲਿੰਕਾਂ ਦਾ ਦੌਰਾਿਆ ਰੰਗ ਬਦਲਣ ਲਈ, ਲਿਖੋ:
a: ਦੌਰਾ ਕੀਤਾ {ਰੰਗ: ਸਲੇਟੀ; }ਜੇ ਤੁਸੀਂ ਇੱਕ ਸਫੇ-ਕਲਾਸ ਨੂੰ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਉਨ੍ਹਾਂ ਸਾਰਿਆਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦਾ ਵਧੀਆ ਸੁਝਾਅ ਹੈ. ਇਸ ਤਰੀਕੇ ਨਾਲ ਤੁਸੀਂ ਬਾਹਰਲੇ ਨਤੀਜਿਆਂ ਤੋਂ ਹੈਰਾਨ ਹੋਵੋਗੇ. ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਸਿਰਫ ਰੰਗ ਦਾ ਰੰਗ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਸਲੇਟੀ ਰੰਗ ਨੂੰ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਜਦੋਂ ਕਿ ਤੁਹਾਡੇ ਲਿੰਕ ਦੀਆਂ ਸਾਰੀਆਂ ਦੂਜੀਆਂ-ਸਹੇਲੀਆਂ ਰਹਿੰਦੀਆਂ ਰਹਿਣਗੀਆਂ, ਤੁਸੀਂ ਲਿਖੋ:
a: ਲਿੰਕ, ਏ: ਹੋਵਰ, ਏ: ਐਕਟਿਵ {ਰੰਗ: ਕਾਲੇ; } a: ਦੌਰਾ ਕੀਤਾ {ਰੰਗ: ਸਲੇਟੀ; }ਲਿੰਕ ਕਲਰ ਬਦਲੋ
ਸਟਾਈਲ ਲਿੰਕਾਂ ਦਾ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਹਰਮਨਪਿਆਰਾ ਤਰੀਕਾ ਹੈ ਕਿ ਰੰਗ ਬਦਲਣਾ ਹੈ ਜਦੋਂ ਮਾਊਸ ਇਸ ਉੱਤੇ ਆਵੇ:
ਇੱਕ {ਰੰਗ: # 00f; } a: ਹੋਵਰ (ਰੰਗ: # 0f0; }ਪਰ ਇਹ ਨਾ ਭੁੱਲੋ ਕਿ ਤੁਸੀਂ ਇਹ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਲਿੰਕ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਜਿਵੇਂ ਉਹ ਇਸ ਉੱਤੇ ਕਲਿੱਕ ਕਰ ਰਹੇ ਹਨ: ਸਰਗਰਮ ਜਾਇਦਾਦ:
ਇੱਕ {ਰੰਗ: # 00f; } a: ਕ੍ਰਿਆਸ਼ੀਲ {color: # f00; }ਜਾਂ ਤੁਸੀਂ ਇਹ ਦੇਖਣ ਤੋਂ ਬਾਅਦ ਕਿ ਇਹ ਕਿਵੇਂ ਦੇਖੀ ਜਾ ਸਕਦੀ ਹੈ: ਮੁਲਾਕਾਤ ਕੀਤੀ ਸੰਪਤੀ:
ਇੱਕ {ਰੰਗ: # 00f; } a: ਦੌਰਾ ਕੀਤਾ {color: # f0f; }ਇਹ ਸਭ ਇਕੱਠੇ ਕਰਨ ਲਈ:
ਇੱਕ {ਰੰਗ: # 00f; } a: ਦੌਰਾ ਕੀਤਾ {color: # f0f; } a: ਹੋਵਰ (ਰੰਗ: # 0f0; } a: ਕ੍ਰਿਆਸ਼ੀਲ {color: # f00; }ਆਈਕਾਨ ਜਾਂ ਬਿੰਦੀਆਂ ਜੋੜਨ ਲਈ ਲਿੰਕ ਤੇ ਬੈਕਗਰਾਊਂਡ ਪਾਓ
ਤੁਸੀਂ ਸਟਾਈਲਿਸ਼ ਬੈਕਗ੍ਰਾਉਂਡ ਲੇਖ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਤੇ ਪਿਛੋਕੜ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਪਿਛੋਕੜ ਨਾਲ ਥੋੜਾ ਖੇਡ ਕੇ, ਤੁਸੀਂ ਇੱਕ ਲਿੰਕ ਬਣਾ ਸਕਦੇ ਹੋ ਜਿਸਦੇ ਸਬੰਧਿਤ ਆਈਕਨ ਹੈ ਇੱਕ ਚਿੰਨ੍ਹ ਚੁਣੋ ਜੋ ਛੋਟਾ ਹੈ, 15px ਤੋਂ 15px ਤਕ, ਜਦੋਂ ਤਕ ਤੁਹਾਡਾ ਟੈਕਸਟ ਵੱਡਾ ਨਹੀਂ ਹੁੰਦਾ. ਬੈਕਗ੍ਰਾਉਂਡ ਨੂੰ ਲਿੰਕ ਦੇ ਇਕ ਪਾਸੇ ਰੱਖੋ ਅਤੇ ਦੁਹਰਾਓ ਚੋਣ ਨੂੰ ਨਾਪ-ਦੁਹਰਾਓ ਤਕ ਸੈੱਟ ਕਰੋ. ਫਿਰ, ਲਿੰਕ ਨੂੰ ਲਿੰਕ ਕਰੋ ਤਾਂ ਕਿ ਆਈਕਾਨ ਨੂੰ ਦੇਖਣ ਲਈ ਲਿੰਕ ਦੇ ਅੰਦਰਲੇ ਪਾਸੇ ਖੱਬੇ ਪਾਸੇ ਜਾਂ ਖੱਬੇ ਪਾਸੇ ਵੱਲ ਭੇਜਿਆ ਜਾ ਸਕੇ.
ਇੱਕ {ਚਿਣੋ: 0 2 ਪੈਕਸ 1 ਪੈਕਸ 15 ਪੈਕਸ; ਪਿਛੋਕੜ: #fff url (ball.gif) ਖੱਬੇ ਕੇਂਦਰ ਦਾ ਕੋਈ ਵੀ ਦੁਹਰਾਇਆ ਨਹੀਂ; ਰੰਗ: # c00; }ਇੱਕ ਵਾਰ ਤੁਹਾਡੇ ਆਈਕਾਨ ਨੂੰ ਮਿਲ ਜਾਣ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਲਿੰਕ ਬਦਲਾਵ ਕਰਨ ਲਈ ਆਪਣੇ ਹੋਵਰ, ਸਕਿਰਿਆ, ਅਤੇ ਵਿਜਿਟ ਕੀਤੇ ਆਈਕਨ ਵਜੋਂ ਇੱਕ ਵੱਖਰੀ ਤਸਵੀਰ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ:
ਇੱਕ {ਚਿਣੋ: 0 2 ਪੈਕਸ 1 ਪੈਕਸ 15 ਪੈਕਸ; ਪਿਛੋਕੜ: #fff url (ball.gif) ਖੱਬੇ ਕੇਂਦਰ ਦਾ ਕੋਈ ਵੀ ਦੁਹਰਾਇਆ ਨਹੀਂ; ਰੰਗ: # c00; } a: ਹੋਵਰ (ਪਿਛੋਕੜ: #fff url (ball2.gif) ਖੱਬੇ ਕੇਂਦਰ ਨੋ-ਦੁਹਰਾਉ; } a: ਸਕ੍ਰਿਅ {ਬੈਕਗ੍ਰਾਉਂਡ: #fff url (ball3.gif) ਖੱਬੇ ਕੇਂਦਰ ਨੰੂ ਦੁਹਰਾਈ; }ਆਪਣੀਆਂ ਲਿੰਕ ਵੇਖੋ ਬਟਨ
ਬਟਨਾਂ ਬਹੁਤ ਮਸ਼ਹੂਰ ਹੁੰਦੀਆਂ ਹਨ, ਪਰ ਜਦੋਂ ਤੱਕ ਸੀਐਸਐਸ ਨਾਲ ਨਹੀਂ ਆਉਂਦਾ, ਤੁਹਾਨੂੰ ਤਸਵੀਰਾਂ ਦੀ ਵਰਤੋਂ ਨਾਲ ਬਟਨ ਬਣਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਨੂੰ ਲੋਡ ਕਰਨ ਵਿੱਚ ਵਧੇਰੇ ਸਮਾਂ ਲੈਂਦਾ ਹੈ. ਸੁਭਾਗਪੂਰਵਕ, ਇੱਕ ਬਾਰਡਰ ਸਟਾਈਲ ਹੈ ਜੋ ਕਿ CSS ਦੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਇੱਕ ਬਟਨ ਵਰਗੇ ਅਸਰ ਬਣਾਉਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰ ਸਕਦੀ ਹੈ.
ਇੱਕ ਸੀਮਾ: 4 ਪੀ ਐਕਸ ਸ਼ੁਰੂਆਤ; ਪੈਡਿੰਗ: 2 ਪੈਕਸ; ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; } a: ਸਰਗਰਮ {ਬਾਰਡਰ: 4 ਪੀ ਐੱਨ ਇਨਸੈਟ; }ਨੋਟ ਕਰੋ, ਜਦੋਂ ਤੁਸੀਂ ਸ਼ੁਰੂਆਤ ਅਤੇ ਰੰਗ ਦੇ ਸ਼ੈਲੀਆਂ ਤੇ ਰੰਗ ਪਾਉਂਦੇ ਹੋ, ਬ੍ਰਾਉਜ਼ਰ ਉਹਨਾਂ ਦੀ ਰੇਂਡਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜਿੰਨੇ ਤੁਸੀਂ ਉਮੀਦ ਕਰ ਸਕਦੇ ਹੋ ਇਸ ਲਈ, ਇੱਥੇ ਰੰਗਦਾਰ ਬਾਰਡਰ ਦੇ ਨਾਲ ਇੱਕ ਫੈਨਸੀਅਰ ਬਟਨ ਹੈ:
ਇੱਕ ਬਾਰਡਰ ਸਟਾਈਲ: ਠੋਸ; ਬਾਰਡਰ-ਚੌੜਾਈ: 1 ਪੈਕਸ 4 ਪੈਕਸ 4 ਪੈਕਸ 1 ਪੈਕਸ; ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; ਪੈਡਿੰਗ: 4 ਪੈਕਸ; ਬਾਰਡਰ ਰੰਗ: # 69f # 00f # 00f # 69f; }ਅਤੇ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਲਿੰਕ ਦੇ ਹੋਵਰ ਅਤੇ ਐਕਟਿਵ ਸਟਾਈਲ ਨੂੰ ਵੀ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਸਿਰਫ ਉਹ ਸੂਡੋ-ਵਰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ:
a: ਲਿੰਕ {ਬਾਰਡਰ ਸਟਾਈਲ: ਠੋਸ; ਬਾਰਡਰ-ਚੌੜਾਈ: 1 ਪੈਕਸ 4 ਪੈਕਸ 4 ਪੈਕਸ 1 ਪੈਕਸ; ਪਾਠ-ਸਜਾਵਟ: ਕੋਈ ਨਹੀਂ; ਪੈਡਿੰਗ: 4 ਪੈਕਸ; ਬਾਰਡਰ ਰੰਗ: # 69f # 00f # 00f # 69f; } a: ਹੋਵਰ (ਬਾਰਡਰ-ਰੰਗ: # ਸੀਸੀਸੀ; }