ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਵੇਖੋ ਨੂੰ ਸੁਧਾਰਨਾ ਸਿੱਖੋ
ਆਪਣੀ ਵੈਬਸਾਈਟ ਦੇ ਦਿੱਖ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ CSS ਦੇ ਨਾਲ ਸਟਾਈਲ ਫਾਰਮ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਜ਼ਿਆਦਾਤਰ ਵੈਬ ਪੇਜਾਂ ਤੇ HTML ਫਾਰਮਾਂ ਦੀ ਬਾਹਰੀ ਰੂਪ ਵਿਚ ਸਭ ਤੋਂ ਵੱਧ ਬੇਤੁਕੀ ਚੀਜ਼ਾਂ ਹਨ. ਉਹ ਅਕਸਰ ਬੋਰਿੰਗ ਅਤੇ ਉਪਯੋਗੀ ਹਨ ਅਤੇ ਸਟਾਈਲ ਦੇ ਰੂਪ ਵਿੱਚ ਬਹੁਤ ਕੁਝ ਨਹੀਂ ਦਿੰਦੇ ਹਨ.
CSS ਦੇ ਨਾਲ, ਇਹ ਬਦਲ ਸਕਦਾ ਹੈ. ਵਧੇਰੇ ਵਿਕਸਤ ਫਾਰਮ ਟੈਗਸ ਦੇ ਨਾਲ CSS ਦਾ ਸੰਯੋਗ ਕਰਨਾ ਕੁੱਝ ਸੁੰਦਰ ਦਿੱਖ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦਾ ਹੈ.
ਰੰਗ ਬਦਲੋ
ਜਿਵੇਂ ਕਿ ਪਾਠ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਫੌਰਮ ਐਲੀਮੈਂਟਸ ਦੇ ਫੋਰਗਰਾਉੰਡ ਅਤੇ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ.
ਲਗਭਗ ਸਾਰੇ ਫਾਰਮ ਤੱਤਾਂ ਦਾ ਪਿਛੋਕੜ ਰੰਗ ਬਦਲਣ ਦਾ ਇਕ ਸੌਖਾ ਤਰੀਕਾ ਇਨਪੁਟ ਟੈਗ ਤੇ ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ ਪ੍ਰਾਪਰਟੀ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇਹ ਕੋਡ ਸਾਰੇ ਤੱਤਾਂ ਤੇ ਨੀਲੇ ਬੈਕਗਰਾਊਂਡ ਰੰਗ (# 9 ਸੀਐੱਫ) ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ.
ਇੰਪੁੱਟ {
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # 9 ਸੀਐਫ;
ਰੰਗ: # 000;
}
ਸਿਰਫ ਕੁਝ ਖਾਸ ਫਾਰਮ ਤੱਤਾਂ ਦੀ ਪਿੱਠਭੂਮੀ ਦਾ ਰੰਗ ਬਦਲਣ ਲਈ, ਸਿਰਫ ਟੇਡੇਰੇਆ ਜੋੜੋ ਅਤੇ ਸ਼ੈਲੀ ਨੂੰ ਚੁਣੋ. ਉਦਾਹਰਣ ਲਈ:
ਇੰਪੁੱਟ, ਟੈਕਸਟਰੇਅ, {{
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # 9 ਸੀਐਫ;
ਰੰਗ: # 000;
}
ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਬੈਕਗਰਾਉੰਡ ਕਲਰ ਦਾ ਰੰਗ ਗੂੜ੍ਹਾ ਕਰਦੇ ਹੋ ਤਾਂ ਪਾਠ ਦਾ ਰੰਗ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ. ਉਲਟ ਰੰਗਾਂ ਨੂੰ ਫਾਰਮ ਦੇ ਤੱਤਾਂ ਨੂੰ ਵਧੇਰੇ ਸਪੱਸ਼ਟ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਡਾਰਕ ਲਾਲ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਤੇ ਟੈਕਸਟ ਬਹੁਤ ਆਸਾਨੀ ਨਾਲ ਪੜ੍ਹਿਆ ਜਾਂਦਾ ਹੈ ਜੇਕਰ ਪਾਠ ਦਾ ਰੰਗ ਚਿੱਟਾ ਹੁੰਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਇਹ ਕੋਡ ਸਫੇਦ ਟੈਕਸਟ ਨੂੰ ਲਾਲ ਬੈਕਗ੍ਰਾਉਂਡ ਤੇ ਰੱਖਦਾ ਹੈ.
ਇੰਪੁੱਟ, ਟੈਕਸਟਰੇਅ, {{
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: # c00;
ਰੰਗ: #fff;
}
ਤੁਸੀਂ ਫਾਰਮ ਟੈਗਾਂ ਉੱਤੇ ਵੀ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਪਾ ਸਕਦੇ ਹੋ. ਯਾਦ ਰੱਖੋ ਕਿ ਫਾਰਮ ਟੈਗ ਇੱਕ ਬਲਾਕ ਤੱਤ ਹੈ , ਇਸ ਲਈ ਕਲਰ ਪੂਰੇ ਰਿਤਰੰਗੇਲ ਵਿੱਚ ਭਰਿਆ ਹੁੰਦਾ ਹੈ, ਨਾ ਕਿ ਸਿਰਫ਼ ਤੱਤ ਦੇ ਟਿਕਾਣੇ.
ਖੇਤਰ ਨੂੰ ਬਾਹਰ ਨਿਕਲਣ ਲਈ ਤੁਸੀਂ ਇੱਕ ਪੀਲੀ ਬੈਕਗ੍ਰਾਉਂਡ ਨੂੰ ਇੱਕ ਬਲਾਕ ਤੱਤ ਨਾਲ ਜੋੜ ਸਕਦੇ ਹੋ, ਇਸ ਤਰ੍ਹਾਂ:
ਫਾਰਮ {
ਬੈਕਗ੍ਰਾਉਂਡ-ਰੰਗ: #ffc;
}
ਬੌਰਡਰ ਜੋੜੋ
ਰੰਗ ਦੇ ਨਾਲ ਜਿਵੇਂ ਤੁਸੀਂ ਵੱਖ ਵੱਖ ਫਾਰਮ ਤੱਤਾਂ ਦੇ ਬਾਰਡਰ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਪੂਰੇ ਫਾਰਮ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਕੋਈ ਇੱਕ ਬਾਰਡਰ ਜੋੜ ਸਕਦੇ ਹੋ ਪੈਡਿੰਗ ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ, ਜਾਂ ਤੁਹਾਡੇ ਫਾਰਮ ਦੇ ਤੱਤਾਂ ਨੂੰ ਸਰਹੱਦ ਤੋਂ ਅਗਲੇ ਸੱਜੇ ਪਾਸੇ ਜੰਮਿਆ ਜਾਵੇਗਾ.
ਇੱਥੇ 5 ਪਿਕਸਲ ਪੈਡਿੰਗ ਦੇ ਨਾਲ 1-ਪਿਕਸਲ ਕਾਲਾ ਬਾਰਡਰ ਲਈ ਕੋਡ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
ਫਾਰਮ {
ਸਰਹੱਦ: 1px ਠੋਸ # 000;
ਪੈਡਿੰਗ: 5 ਪੈਕਸ;
}
ਤੁਸੀਂ ਬਾਰਡਰ ਕੇਵਲ ਫਾਰਮ ਤੋਂ ਹੀ ਹੋਰ ਦੇ ਨੇੜੇ-ਤੇੜੇ ਪਾ ਸਕਦੇ ਹੋ. ਇੰਪੁੱਟ ਆਈਟਮਾਂ ਦੀ ਬਾਰਡਰ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਬਾਹਰ ਖੜ੍ਹਾ ਕਰਨ ਲਈ ਬਦਲੋ:
ਇੰਪੁੱਟ {
ਬਾਰਡਰ: 2 ਪੈਕਸ ਧਾਤੂ # c00;
}
ਜਦੋਂ ਤੁਸੀਂ ਇਨਪੁਟ ਬਾੱਕਸ ਤੇ ਬਾਰਡਰ ਲਗਾਉਂਦੇ ਹੋ ਤਾਂ ਉਹ ਸਾਵਧਾਨ ਰਹੋ ਜਦੋਂ ਉਹ ਇਨਪੁਟ ਬੌਕਸ ਦੀ ਤਰ੍ਹਾਂ ਘੱਟ ਦੇਖਦੇ ਹਨ, ਅਤੇ ਕੁਝ ਲੋਕਾਂ ਨੂੰ ਇਹ ਅਹਿਸਾਸ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਉਹ ਫਾਰਮ ਨੂੰ ਭਰ ਸਕਦੇ ਹਨ.
ਸ਼ੈਲੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਜੋੜਨਾ
ਆਪਣੇ ਫਾਰਮ ਦੇ ਤੱਤਾਂ ਨੂੰ ਵਿਚਾਰ ਅਤੇ ਕੁਝ CSS ਨਾਲ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਇੱਕ ਵਧੀਆ ਦਿੱਖ ਵਾਲਾ ਫਾਰਮ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਤੁਹਾਡੀ ਸਾਈਟ ਦੇ ਡਿਜ਼ਾਇਨ ਅਤੇ ਖਾਕਾ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ.