CSS ਚੋਣਕਾਰ ਕਲਾਸ ਅਤੇ ਆਈਡੀ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ? HTML ਵਿੱਚ id ਅਤੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ

CSS ਚੋਣਕਾਰ ਕਲਾਸ ਅਤੇ ਆਈਡੀ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ? HTML ਵਿੱਚ id ਅਤੇ ਕਲਾਸ ਦੀ ਵਰਤੋਂ

ਚੇਨ ਵੇਇਲਿਯਾਂਗ ਹਾਲ ਹੀ ਵਿੱਚ SEO 'ਤੇ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ , ਵੈੱਬਸਾਈਟ ਦੇ ਵਰਡਪ੍ਰੈਸ ਥੀਮ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਰਿਹਾ ਹੈ।

ਹਾਲਾਂਕਿ ਮੈਂ ਪਹਿਲਾਂ ਕੁਝ ਬੁਨਿਆਦੀ HTML ਅਤੇ CSS ਗਿਆਨ ਸਿੱਖਿਆ ਹੈ, ਪਰ ਮੈਂ ਇਸਨੂੰ ਕੁਝ ਸਮੇਂ ਲਈ ਨਹੀਂ ਚਲਾਇਆ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ CSS ਭਾਗ ਦੀ ਵਰਤੋਂ, ਭੁੱਲਣਾ ਆਸਾਨ ਹੈ.

ਇਸ ਲਈ, CSS ਚੋਣਕਾਰ ਆਈਡੀ ਅਤੇ ਕਲਾਸ ਦੇ ਅੰਤਰ ਅਤੇ ਵਰਤੋਂ ਨੂੰ ਇੱਥੇ ਰਿਕਾਰਡ ਕਰੋ ਅਤੇ ਸੰਖੇਪ ਕਰੋ:

• id #div ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ
• ਕਲਾਸ .div ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ

ਆਈਡੀ ਅਤੇ ਕਲਾਸ ਵਿੱਚ ਅੰਤਰ

ਆਈਡੀ ਦਾ ਵੇਰਵਾ

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

ਕਲਾਸ ਦਾ ਵੇਰਵਾ

• ਕਲਾਸ ਇੱਕ ਸ਼ੈਲੀ ਸਮੂਹ ਹੈ, ਜਿਸਦੀ ਵਰਤੋਂ ਵੈਬ ਪੇਜ ਵਿੱਚ ਵਿਸਤ੍ਰਿਤ ਸ਼ੈਲੀਆਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸਨੂੰ .div ਦੇ ਰੂਪ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਦੁਹਰਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।
• ਉਦਾਹਰਨ ਲਈ: ਇੱਕ ਖਾਸ ਮੀਨੂ, ਟੈਕਸਟ ਦੀ ਇੱਕ ਲਾਈਨ, ਆਦਿ...
• ਉਸੇ ਪੰਨੇ 'ਤੇ, ਇਸ ਨੂੰ ਕਈ ਤੱਤਾਂ ਦੁਆਰਾ ਵਾਰ-ਵਾਰ ਬੁਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ

div ਚੋਣਕਾਰ ਦੀ ਆਪਣੇ ਆਪ ਵਿੱਚ ਕੋਈ ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਹੈ। ਇਸਦੇ css ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਕੇ, ਇਹ ਕੁਝ ਲੇਆਉਟਸ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ div ਦੀ ਚੌੜਾਈ, ਉਚਾਈ, ਪਿਛੋਕੜ ਦਾ ਰੰਗ ਅਤੇ ਟੈਕਸਟ ਦਾ ਆਕਾਰ।

ਵੈੱਬਸਾਈਟ ਬਿਲਡਿੰਗ ਪ੍ਰੋਗਰਾਮਾਂ ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਆਮ ਈ-ਕਾਮਰਸ ਵੈੱਬਸਾਈਟਾਂ ਅਤੇ HTML ਵੈੱਬ ਪੰਨੇ ਪੰਨੇ ਦੇ ਲੇਆਉਟ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।

ਇੱਕ ਚੋਣਕਾਰ ਕੀ ਹੈ?

ਹਰੇਕ CSS ਸ਼ੈਲੀ ਦੀ ਪਰਿਭਾਸ਼ਾ ਵਿੱਚ 2 ਭਾਗ ਹੁੰਦੇ ਹਨ:

选择器 {样式}

• {} ਤੋਂ ਪਹਿਲਾਂ ਵਾਲਾ ਹਿੱਸਾ "ਚੋਣਕਾਰ" ਹੈ।
• "ਚੋਣਕਾਰ" {} ਦੀ "ਸ਼ੈਲੀ" ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਸ ਨਾਲ ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ।
• ਭਾਵ, ਵੈਬ ਪੇਜ ਦੇ ਕਿਹੜੇ ਤੱਤ 'ਤੇ ਇਹ "ਸ਼ੈਲੀ" ਕੰਮ ਕਰਦੀ ਹੈ?

ਕੋਡ ਉਦਾਹਰਨ

ਕਲਾਸ="ਸਾਈਡਬਾਰ" ਐਲੀਮੈਂਟ ਨੂੰ ਕਿਵੇਂ ਚੁਣਨਾ ਅਤੇ ਸਟਾਈਲ ਕਰਨਾ ਹੈ ਇਹ ਇੱਥੇ ਹੈ:

.sidebar
{ 
background-color:black;
}

ਇੱਥੇ id="footer" ਨਾਲ ਕਿਸੇ ਤੱਤ ਨੂੰ ਚੁਣਨ ਅਤੇ ਸਟਾਈਲ ਕਰਨ ਦਾ ਤਰੀਕਾ ਦੱਸਿਆ ਗਿਆ ਹੈ:

#footer
{ 
background-color:black;
}