CSS ਚੋਣਕਰਤਾਵਾਂ ਲਈ ਕੋਮਾ ਕੀ ਹੈ?

ਕਿਉਂ ਇੱਕ ਸਧਾਰਨ ਕੋਮਾ ਕੋਡਿੰਗ ਨੂੰ ਸੌਖਾ ਕਰਦਾ ਹੈ

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

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

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

Commas ਅਤੇ CSS

ਤੁਸੀਂ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ ਕਿ CSS ਚੋਣਕਾਰ ਸੰਟੈਕਸ ਵਿੱਚ ਕੋਮਾ ਕਿਵੇਂ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦਾ ਹੈ. ਜਿਵੇਂ ਕਿ ਵਾਕਾਂ ਵਿੱਚ, ਕਾਮੇ ਨੂੰ ਸਪੱਸ਼ਟਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ- ਕੋਡ ਨੂੰ-ਵੱਖਰੀਆਂ ਨਹੀਂ. CSS ਚੋਣਕਾਰ ਵਿੱਚ ਕੋਮਾ ਵੱਖ-ਵੱਖ ਚੋਣਕਾਰਾਂ ਨੂੰ ਉਸੇ ਸਟਾਈਲ ਦੇ ਅੰਦਰ ਵੱਖ ਕਰਦਾ ਹੈ.

ਉਦਾਹਰਣ ਲਈ, ਆਓ ਕੁਝ CSS ਨੂੰ ਹੇਠਾਂ ਵੇਖੀਏ.

th {color: red; }
td {color: red; }
p.red {color: red; }
div # firstred {ਰੰਗ: ਲਾਲ; }

ਇਸ ਸੰਟੈਕਸ ਨਾਲ, ਤੁਸੀਂ ਕਹਿ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਫੈਗ ਟੈਗਸ, ਟੀਡੀ ਟੈਗਸ, ਕਲਾਸ ਲਾਲ ਨਾਲ ਪੈਰਾਗ੍ਰਾਫ ਟੈਗਾਂ, ਅਤੇ ਆਈ ਡੀ ਨਾਲ ਵਿਭਾਜਨ ਟੈਗ ਨੂੰ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਸਟਾਈਲ ਰੰਗ ਲਾਲ ਰੱਖਣ ਲਈ ਕਰੋਗੇ.

ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਵੀਕ੍ਰਿਤੀਯੋਗ ਸੀਐਸਐਸ ਹੈ, ਲੇਕਿਨ ਇਸਨੂੰ ਲਿਖਣ ਲਈ ਦੋ ਮਹੱਤਵਪੂਰਨ ਕਮੀਆਂ ਹਨ:

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

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

ਚੋਣਕਾਰਾਂ ਨੂੰ ਅਲੱਗ ਕਰਨ ਲਈ ਕਾਮਾ ਵਰਤਣਾ

4 ਵੱਖਰੇ CSS ਚੋਣਕਾਰ ਅਤੇ 4 ਨਿਯਮਾਂ ਨੂੰ ਲਿਖਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇਹਨਾਂ ਸਾਰੀਆਂ ਸਟਾਈਲ ਨੂੰ ਇੱਕ ਨਿਯਮ ਵਿੱਚ ਜੋੜ ਕੇ ਇਕ ਵੱਖਰੇ ਚੋਣਕਾਰ ਨੂੰ ਕਾਮੇ ਨਾਲ ਮਿਲਾ ਸਕਦੇ ਹੋ. ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਜਾਏਗਾ ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਜਾਏਗਾ:

th, td, p.red, div # firstred {color: red; }

ਕੋਮਾ ਅੱਖਰ ਅਸਲ ਵਿੱਚ ਚੋਣਕਾਰ ਦੇ ਅੰਦਰ "ਅਤੇ" ਸ਼ਬਦ ਦੇ ਤੌਰ ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ. ਇਸ ਲਈ ਇਹ t h ਟੈਗ ਅਤੇ td ਟੈਗ ਅਤੇ ਪੈਰਾਗ੍ਰਾਫ ਟੈਗਸ ਨੂੰ ਕਲਾਸ ਨੂੰ ਲਾਲ ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ID ਨੂੰ ਪਹਿਲ ਦੇ ਨਾਲ ਡਿਵੀ ਟੈਗ ਕਰਦਾ ਹੈ. ਇਹ ਬਿਲਕੁਲ ਉਹੀ ਹੁੰਦਾ ਹੈ ਜੋ ਸਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਸੀ, ਪਰ 4 CSS ਨਿਯਮਾਂ ਦੀ ਬਜਾਏ ਸਾਡੇ ਕੋਲ ਬਹੁਤੇ ਚੋਣਕਾਰਾਂ ਦੇ ਨਾਲ ਇਕੋ ਨਿਯਮ ਹੈ. ਚੋਣਕਰਤਾ ਵਿਚ ਇਹ ਕਾਮੇ ਕੀ ਕਰਦਾ ਹੈ, ਇਹ ਸਾਨੂੰ ਇਕ ਨਿਯਮ ਵਿਚ ਕਈ ਚੋਣਕਾਰ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ.

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

ਸੰਟੈਕਸ ਪਰਿਵਰਤਨ

ਕੁਝ ਲੋਕ ਹਰ ਚੋਣਕਾਰ ਨੂੰ ਆਪਣੀ ਖੁਦ ਦੀ ਲਾਈਨ ਵਿਚ ਅਲੱਗ ਕਰ ਕੇ CSS ਲਿਖਣ ਦੀ ਚੋਣ ਕਰਦੇ ਹਨ, ਇਸ ਨੂੰ ਸਭ ਤੋਂ ਉਪਰ ਇਕ ਲਾਈਨ ਵਿਚ ਲਿਖਣ ਦੀ ਬਜਾਏ. ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਜਾਏਗਾ:

ਤੇ,
td,
ਪੀ.ਆਰ.ਡੀ.,
div # firstred
{
ਰੰਗ: ਲਾਲ;
}

ਧਿਆਨ ਦਿਓ ਕਿ ਤੁਸੀਂ ਹਰ ਚੋਣਕਾਰ ਦੇ ਬਾਅਦ ਇੱਕ ਕਾਮਾ ਪਾਉਂਦੇ ਹੋ ਅਤੇ ਫਿਰ ਅਗਲੇ ਚੋਣਕਾਰ ਨੂੰ ਆਪਣੀ ਲਾਇਨ ਤੇ ਤੋੜਨ ਲਈ "ਦਰਜ ਕਰੋ" ਵਰਤੋਂ. ਤੁਸੀਂ ਅੰਤਿਮ ਚੋਣਕਰਤਾ ਦੇ ਬਾਅਦ ਕੋਈ ਕਾਮੇ ਨਹੀਂ ਜੋੜਦੇ

ਆਪਣੇ ਚੋਣਕਰਤਾਵਾਂ ਦੇ ਦਰਮਿਆਨ ਕਾਮੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਇੱਕ ਹੋਰ ਸੰਖੇਪ ਸਟਾਈਲ ਸ਼ੀਟ ਬਣਾਉਂਦੇ ਹੋ ਜੋ ਭਵਿੱਖ ਵਿੱਚ ਅਪਡੇਟ ਕਰਨਾ ਅਸਾਨ ਹੁੰਦਾ ਹੈ ਅਤੇ ਅੱਜ ਇਹ ਪੜਨਾ ਸੌਖਾ ਹੈ!

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