CSS- ਚੋਣਕਾਰ ਅਤੇ HTML- ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਵਿੱਚ ਉਸਦੀ ਭੂਮਿਕਾ

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

CSS ਵਿੱਚ ਚੋਣਕਾਰ ਦੀਆਂ ਕਿਸਮਾਂ

ਇਹ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਿਸ HTML ਐਲੀਮੈਂਟ ਨੂੰ ਫਾਰਮੈਟਿੰਗ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, CSS ਚੋਣਕਰਤਾ ਹੇਠ ਦਿੱਤੇ ਸਮੂਹਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦਾ ਹਵਾਲਾ ਦੇ ਸਕਦਾ ਹੈ:

• ਟੈਗਸ ਦੇ ਚੋਣਕਾਰ;
• ਕਲਾਸ ਚੋਣਕਾਰ;
• ਆਈਡੀ-ਚੋਣਕਾਰ;
• ਗੁਣ ਚੋਣਕਾਰ

ਚੋਣਕਾਰ ਟੈਗ

ਇਸਨੂੰ "ਟਾਈਪ ਚੋਣਕਾਰ" ਜਾਂ "ਤੱਤ ਦੁਆਰਾ" ਵੀ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਸਰਲ ਅਤੇ ਸਭ ਤੋਂ ਆਮ ਹੈ ਜਿਵੇਂ ਕਿ CSS- ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇਸ ਦਾ ਨਾਂ ਹੈ html-file ਦੇ ਉਹਨਾਂ ਤੱਤਾਂ ਦੇ ਨਾਂ ਜਿਹੜੇ ਅਸੀਂ ਬਿਆਨ ਕਰਦੇ ਹਾਂ. ਉਦਾਹਰਨ ਲਈ, ਜੇ ਸਾਨੂੰ ਪੈਰਾਗ੍ਰਾਫ ਸ਼ੈਲੀ ਨੂੰ ਦਰਸਾਉਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਅਸੀਂ ਪੋਰਟ ਲਈ {ਗੁਣਵੱਤਾ: x; ਰੰਗ: y; ਆਕਾਰ: z}. ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਵੈਬ ਪੇਜ ਦੇ ਸਾਰੇ ਪੈਰਿਆਂ ਕੋਲ ਉਸੇ ਸਰੂਪਣ (ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ, ਪਾਠ, ਆਕਾਰ, ਆਦਿ) ਹੋਣਗੇ.

ਕਲਾਸ ਚੋਣਕਾਰ

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

ਇਸ ਕੇਸ ਵਿੱਚ CSS ਦਸਤਾਵੇਜ਼ ਹੇਠ ਲਿਖੀ ਇੰਦਰਾਜ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋਣਗੇ: p.first {color: x; ਫੋਂਟ-ਸਾਈਜ਼: y}. ਇਸ ਲਈ, ਅਸੀਂ ਪਹਿਲਾਂ ਸਿਰਫ ਕਲਾਸ ਦੇ ਪੈਰਾਗ੍ਰਾਫਟ ਲਈ "ਰੰਗ" ਅਤੇ "ਆਕਾਰ" ਸੰਪਤੀਆਂ ਨੂੰ ਸੈਟ ਕਰਦੇ ਹਾਂ.

ਇਸ ਕੇਸ ਵਿੱਚ html- ਦਸਤਾਵੇਜ਼ ਵਿੱਚ, ਤੁਸੀਂ ਪਹਿਲੀ ਬਾਰ ਸਟਾਈਲ ਦੇ ਨਾਮ ਨਾਲ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਦਾਖਲ ਕਰਦੇ ਹੋ. ਕਲਾਸਾਂ ਉਹ ਵੀ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਜਿੰਨੇ ਉਹ ਸਟਾਈਲ ਜੋ ਤੁਸੀਂ ਵੈੱਬ ਪੇਜ਼ ਦੇ ਤੱਤ ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ.

Id ਦੁਆਰਾ ਚੋਣਕਾਰ

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

ਤਦ html- ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਅਸੀਂ ਹੈਡਰ ਨੂੰ ਪਛਾਣਕਰਤਾ h1 ਦੇ ਰੂਪ ਵਿੱਚ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਾਂ, ਉਦਾਹਰਨ ਲਈ articlename. ਅਤੇ CSS ਫਾਈਲ ਵਿੱਚ, ਪਛਾਣਕਰਤਾ ਨਾਂ ਤੋਂ ਪਹਿਲਾਂ ਜਾਲੀ ਨੂੰ ਜੋੜ ਕੇ ਸ਼ੈਲੀ ਸੈਟ ਕਰੋ: #articlename {color: blue; ਪਾਠ-ਅਲਾਈਨ: ਸੈਂਟਰ}. ਹੁਣ ਸਾਡੇ ਹੈਡਰ ਵਿੱਚ ਰੰਗ ਨੀਲਾ ਅਤੇ ਸੈਂਟਰ ਅਲਾਈਨਮੈਂਟ ਹੋਵੇਗਾ.

ਉਪਰੋਕਤ ਹਰ ਇੱਕ ਨੂੰ "ਸਧਾਰਨ CSS- ਚੋਣਕਾਰ" ਕਿਹਾ ਜਾ ਸਕਦਾ ਹੈ. ਉਹ ਇੱਕ HTML ਦਸਤਾਵੇਜ ਦੇ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਮਾਪਦੰਡ ਲਈ ਫਾਰਮੇਟਿੰਗ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ: ਇੱਕ ਸਮਾਨ ਤੱਤਾਂ ਦਾ ਸੰਗ੍ਰਹਿ (ਉਦਾਹਰਣ ਲਈ, ਇੱਕ ਲੇਖ ਦੇ ਸਾਰੇ ਪੈਰਿਆਂ), ਇੱਕ ਕਲਾਸ (ਉਦਾਹਰਨ ਲਈ, ਸਿਰਫ ਪਹਿਲਾ ਪੈਰਾਗ੍ਰਾਫ) ਜਾਂ ਇੱਕ ਖਾਸ ਤੱਤ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਲੇਖ ਦਾ ਸਿਰਲੇਖ).

ਗੁਣ ਚੋਣਕਾਰ

ਉਪਰੋਕਤ ਤੋਂ ਇਲਾਵਾ, CSS ਵਿਸ਼ੇਸ਼ਤਾ ਚੋਣਕਾਰ ਹਨ - ਸਟਾਇਲਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਗੁੰਝਲਦਾਰ ਤਰੀਕਾ. ਇਹ ਤੁਹਾਨੂੰ ਚੁਣੀ ਗਈ ਐਟਰੀਬਿਊਟ ਜਾਂ ਇਸਦੀ ਵੈਲਯੂ ਦੁਆਰਾ html ਐਲੀਮੈਂਟਸ ਨੂੰ ਫੌਰਮੈਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਇਸ ਚੋਣਕਾਰ ਦੀਆਂ ਕਈ ਕਿਸਮਾਂ ਹਨ:

• ਕਿਸੇ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਮੌਜੂਦਗੀ ਨਾਲ;
• ਇਸਦੇ ਸਹੀ ਮੁੱਲ ਦੁਆਰਾ;
• ਅੰਸ਼ਕ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ ਦੁਆਰਾ;
• ਇਸਦੇ ਖਾਸ ਅਰਥ ਦੁਆਰਾ

ਆਉ ਇਹਨਾਂ ਵਿਕਸਤ ਕਿਸਮਾਂ ਬਾਰੇ ਵਿਸਥਾਰ ਨਾਲ ਵਿਚਾਰ ਕਰੀਏ:

1. ਪਹਿਲਾ ਕੇਸ ਫਰੇਮੈਟਿੰਗ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਜੇ html-code (ਉਹ p, div, header, ਆਦਿ) ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ. ਜੇ ਇਹ ਗੁੰਮ ਹੈ, ਤਾਂ ਸਾਰੇ ਤੱਤਾਂ ਲਈ ਇਕ ਵਿਆਪਕ ਸਟਾਈਲ ਵਰਤੀ ਜਾਂਦੀ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਲਈ ਜਿਹਨਾਂ ਕੋਲ ਇੱਕ ਸਿਰਲੇਖ ਹੈ (ਇੱਕ ਟੂਲ-ਟਿੱਪ).
2. ਦੂਜਾ ਕੇਸ. ਇਹ ਸ਼ੈਲੀ ਉਨ੍ਹਾਂ HTML ਐਲੀਮੈਂਟ ਤੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ ਜਿਨ੍ਹਾਂ ਦਾ ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲਾਂ ਦਾ ਸਹੀ ਮੇਲ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਉਨ੍ਹਾਂ ਇਨਪੁਟ ਐਲੀਮੈਂਟਸ ਜਿਨ੍ਹਾਂ ਦਾ ਮੁੱਲ ਐਟਰੀਬਿਊਟ ਦੇ ਬਰਾਬਰ ਹੈ ਜਮ੍ਹਾਂ ਕਰਾਉਣ ਦੇ ਬਰਾਬਰ ਹੈ.
3. ਤੀਜਾ ਕੇਸ. ਮੁੱਲਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਸ਼ਬਦ ਦੇ ਨਾਲ ਆਈਟਮਾਂ ਲਈ ਫਾਰਮੈਟਿੰਗ ਸੀਮਿਤ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਡੀਵੀ ਤੱਤ ਦੇ "ਕਲਾਸ" ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਸਾਈਡਬਾਰ.
4. ਚੌਥਾ ਕੇਸ ਸਟਾਈਲ ਨੂੰ ਸਿਰਫ਼ html- ਦਸਤਾਵੇਜ਼ ਦੇ ਉਹਨਾਂ ਤੱਤਾਂ ਲਈ ਨਿਸ਼ਚਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਿਸ ਦੇ ਲਈ ਇਕ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਨਿਸ਼ਚਿਤ ਮੁੱਲ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਖਾਸ ਤੱਤ ਨੂੰ ਉਹਨਾਂ ਸਾਰੇ ਤੱਤਾਂ ਲਈ ਲਾਗੂ ਕਰਨਾ ਜਿਨ੍ਹਾਂ ਦੀ ਗੁਣਾਂ ਦੀ ਭਾਸ਼ਾ ਅੰਗਰੇਜ਼ੀ ਹੈ (ਇਹ ਐਨ, ਐਨ-ਰੂ, ਐਨ-ਏਯੂ, ਆਦਿ) ਹੋ ਸਕਦੀ ਹੈ.

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