ਬਹੁ CSS ਚੋਣਕਾਰ ਗਰੁੱਪਿੰਗ

ਲੋਡ ਸਪੀਡ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਬਹੁ CSS ਚੋਣਕਾਰ ਸਮੂਹ

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

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

ਗਰੁੱਪਿੰਗ ਚੋਣਕਾਰ

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

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

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

CSS ਚੋਣਕਾਰ ਗਰੁੱਪ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ

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

div, p {color: # f00; }

ਕਾਮੇ ਦਾ ਮੂਲ ਰੂਪ ਵਿੱਚ "ਅਤੇ" ਇਸ ਲਈ ਇਹ ਚੋਣਕਾਰ ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫ ਤੱਤਾਂ ਅਤੇ ਸਾਰੇ ਵੰਡ ਤੱਤਾਂ ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ. ਜੇ ਕੋਮਾ ਲਾਪਤਾ ਹੋ ਗਿਆ ਹੈ, ਤਾਂ ਇਹ ਇਸਦੇ ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫ ਤੱਤ ਹੋ ਜਾਣਗੇ ਜੋ ਇੱਕ ਵੰਡ ਦੇ ਬੱਚੇ ਹਨ. ਇਹ ਇਕ ਬਹੁਤ ਹੀ ਵੱਖਰੀ ਚੋਣਕਾਰ ਹੈ, ਇਸ ਲਈ ਇਹ ਕੋਮਾ ਅਸਲ ਚੋਣਕਾਰ ਦਾ ਅਰਥ ਬਦਲਦਾ ਹੈ!

ਚੋਣਕਾਰ ਦੇ ਕਿਸੇ ਵੀ ਰੂਪ ਨੂੰ ਕਿਸੇ ਹੋਰ ਚੋਣਕਾਰ ਨਾਲ ਵੰਡਿਆ ਜਾ ਸਕਦਾ ਹੈ. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, ਇੱਕ ਕਲਾਸ ਚੋਣਕਾਰ ਨੂੰ ਇੱਕ ID ਚੋਣਕਾਰ ਨਾਲ ਸਮੂਹਿਕ ਕੀਤਾ ਗਿਆ ਹੈ:

p.red, #sub {color: # f00; }

ਇਸ ਲਈ ਇਹ ਸ਼ੈਲੀ "ਲਾਲ" ਦੀ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਅਤੇ ਕਿਸੇ ਵੀ ਤੱਤ (ਕਿਉਂਕਿ ਅਸੀਂ ਕਿਹੜਾ ਕਿਸ ਤਰਾਂ ਨਹੀਂ ਦਰਸਾਇਆ ਹੈ) ਦੇ ਕਿਸੇ ਵੀ ਪੈਰਾ ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜਿਸਦਾ "ਸਬ" ਇੱਕ ID ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ.

ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਗਿਣਤੀ ਦੇ ਚੋਣਕਾਰਾਂ ਨੂੰ ਇਕੱਠੇ ਕਰ ਸਕਦੇ ਹੋ, ਚੋਣਕਾਰ, ਜਿਸ ਵਿੱਚ ਇਕ ਸ਼ਬਦ ਅਤੇ ਕੰਪੰਡ ਚੋਣਕਾਰ ਸ਼ਾਮਲ ਹਨ. ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਚਾਰ ਵੱਖ-ਵੱਖ ਚੋਣਕਾਰ ਸ਼ਾਮਲ ਹਨ:

p, .red, #sub, div a: link {color: # f00; }

ਇਸ ਲਈ ਇਹ CSS ਨਿਯਮ ਹੇਠ ਲਿਖੇ 'ਤੇ ਲਾਗੂ ਹੋਣਗੇ:

• ਕੋਈ ਪੈਰਾਗ੍ਰਾਫ ਤੱਤ
• "ਲਾਲ" ਦੀ ਕਲਾਸ ਦੇ ਨਾਲ ਕੋਈ ਵੀ ਤੱਤ
• "ਉਪ" ਦੀ ਇਕ ਆਈਡੀ ਨਾਲ ਕੋਈ ਵੀ ਤੱਤ
• ਐਂਕਰ ਐਲੀਮੈਂਟ ਦੀ "ਲਿੰਕ" ਸੂਡੋ ਸ਼੍ਰੇਣੀ ਜੋ ਕਿਸੇ ਡਿਵੀਜ਼ਨ ਦੇ ਦਹਾਕਿਆਂ ਹਨ.

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

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

ਕੋਈ ਵੀ ਚੋਣਕਾਰ ਨੂੰ ਗਰੁੱਪ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ

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

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

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

ਜਾਂ ਤੁਸੀਂ ਵਿਅਕਤੀਗਤ ਸਤਰਾਂ ਤੇ ਸਪਸ਼ਟਤਾ ਲਈ ਸਟਾਈਲ ਦੀ ਸੂਚੀ ਦੇ ਸਕਦੇ ਹੋ:

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

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

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