CSS ਤੋਂ ਪਹਿਲਾਂ - ਅਸਲੀ, ਸੁਵਿਧਾਜਨਕ, ਪ੍ਰੈਕਟੀਕਲ

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

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

ਵੱਡੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਉਦੋਂ ਖੁਲ੍ਹੇ ਜਾਂਦੇ ਹਨ ਜਦੋਂ url () ਸੂਡੋ-ਐਲੀਮੈਂਟ ਦੀਆਂ ਸਮੱਗਰੀਆਂ ਵਿੱਚ ਸਪਸ਼ਟ ਹੁੰਦਾ ਹੈ. ਦਰਅਸਲ, ਇਹ ਚੋਣ ਨਵੇਂ ਹਰੀਜਨਾਂ ਨੂੰ ਖੁੱਲ੍ਹਦਾ ਹੈ, ਦੋਵੇਂ ਸਾਈਟ ਪੇਜ਼ ਲਈ ਕੁਝ ਡਾਊਨਲੋਡ ਕਰਨ ਦੇ ਮਾਮਲੇ ਵਿਚ ਅਤੇ ਕਿਸੇ ਹੋਰ ਥਾਂ ਦੇ ਸੰਭਵ ਸਰਗਰਮੀ ਵਿਚ.

ਸੂਡੋ-ਐਲੀਮੈਂਟਸ ਦੀ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ

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

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

CSS ਛੂਤ-ਕਲਾਸਾਂ ਵਾਂਗ , ਪਹਿਲਾਂ ਅਤੇ ਬਾਅਦ ਵਿੱਚ "": "ਚਿੰਨ੍ਹ" ਤੋਂ ਪਹਿਲਾਂ ਹੁੰਦਾ ਹੈ, ਪਰ CSS3 ਮਿਆਰੀ ਅਨੁਸਾਰ, "::" ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਸਫ਼ੇ 'ਤੇ ਕਿਸੇ ਖ਼ਾਸ ਵਰਤੋਂ ਦੀ ਜਾਂਚ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕਦੇ ਵੀ ਕੋਈ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੋਵੇਗੀ: ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਜਾਂ ਉਹਨਾਂ ਦੇ ਵਰਜਨਾਂ ਨੂੰ ਇਹ ਜਾਂ ਇਹ ਸਿਊ-ਐਲੀਮੈਂਟ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ.

ਵਰਤੋਂ ਦੀਆਂ ਆਮ ਸ਼ਰਤਾਂ

ਉਦਾਹਰਨ ਲਈ, ਕਲਾਸ = 'ਸਕਲੇਮੈਂਟ' ਅਤੇ 'ਐਲੀਮੈਂਟ' ਦੀ ਸਮਗਰੀ ਦੇ ਵਰਣਨ ਦੇ ਨਾਲ ਇੱਕ ਡੀਵੀ ਤੱਤ ਪਾਉਣਾ, ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ CSS ਵੇਰਵੇ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ:

.scElement {
POSITION ...;
Z- ਇੰਡੈਕਸ ...;
...

},

ਤੁਸੀਂ ਇਸ ਨੂੰ ਸੂਡੋ-ਕਲਾਸ ": ਹੋਵਰ" ਅਤੇ ਐਸਸੂ-ਐਲੀਮੈਂਟ ":: ਪਹਿਲਾਂ" CSS ਤੇ ਅਰਜ਼ੀ ਦੇ ਸਕਦੇ ਹੋ:

.scElement: hover :: before {content: 'prefix'; ਰੰਗ ...; ਬੈਕਗਰਾਊਂਡ-ਰੰਗ ...;}

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

ਸੂਡੋ-ਐਲੀਮੈਂਟ ਸਮੱਗਰੀ ਦੇ ਰੂਪ

ਜੇ ਤੁਸੀਂ ਸੂਡੋ ਐਲੀਮੈਂਟ ਵਿਚ ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਦਰਸਾਉਂਦੇ, ਤਾਂ ਉਹ ਮੁੱਖ ਤੱਤ ਦੇ ਰੂਪ ਵਿਚ ਬਣੇ ਰਹਿਣਗੇ - ਸਕਲੇਮੈਂਟ ਤੁਸੀਂ ਇੱਕ url ਨਿਸ਼ਚਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਸੰਖੇਪ: url ('/ scBox / rm-v / sc-rights.png') ਦੀ ਜਾਇਦਾਦ ਉਸ ਤੱਤ ਤੇ ਤਸਵੀਰ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਉੱਤੇ ਹੋਵਰ ਕਰਦੇ ਹੋ. ਸਮੱਗਰੀ ਦੇ ਮਾਮਲੇ ਵਿੱਚ: "\ 03B1", ਗਣਿਤ ਵਾਲਾ ਚਿੰਨ੍ਹ "ਅਲਫ਼ਾ " ਪ੍ਰਗਟ ਹੋਵੇਗਾ , ਪਰ ਵਿਸ਼ੇਸ਼ ਅੱਖਰ ਦੀ ਵਰਤੋਂ ਕਰੋ: "& nbsp;", "& lt;", "& laquo;", "& raquo;" ਅਤੇ ਦੂਜਿਆਂ ਨੂੰ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ - ਉਹ ਜਿਵੇਂ ਹੀ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇਗਾ.

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

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

ਸੂਡੋ-ਐਲੀਮੈਂਟ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

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

ਸਕ੍ਰਿਲੇਟ: ਹੋਵਰ :: ਸਮਗਰੀ: 'ਪ੍ਰੀਫਿਕਸ' ਤੋਂ ਪਹਿਲਾਂ; ...}

ਸਕ੍ਰਿਲੇਟ: ਕਿਰਿਆਸ਼ੀਲ: {content: 'suffix'; ...}

ਇਹ ਭੁੱਲਣਾ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੈ: CSS ਪਹਿਲਾਂ ਸਾਈਟ ਸਮੱਗਰੀ ਦੇ ਬਾਹਰ ਕੰਮ ਕਰਦੀ ਹੈ ਸ਼ੈਲੀ ਪੰਨੇ ਦੀ ਸਮਗਰੀ ਲਈ ਢੁਕਵੇਂ ਨਹੀਂ ਹਨ ਸੂਡੋ-ਐਲੀਮੈਂਟ ਇੱਕ ਅਪਵਾਦ ਨਹੀਂ ਹਨ. ਉਹ DOM ਰੁੱਖ ਵਿੱਚ ਮੌਜੂਦ ਨਹੀਂ ਹਨ ਅਤੇ ਸਾਈਟ ਦੀ ਮਹੱਤਵਪੂਰਣ ਸ਼ੈਕਸ਼ਨਾਂ ਵਿੱਚ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇਹ ਅਣਇੱਛਤ ਹੈ - ਉਹਨਾਂ ਨੂੰ ਸਮਗਰੀ ਵਿੱਚ ਸ਼ਾਮਲ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ.

":" ਅਤੇ "::" ਦੀ ਵਰਤੋਂ ਨੂੰ ਮੋਬਾਇਲ ਪਲੇਟਫਾਰਮ ਅਤੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਸ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹੈ, ਪਰ ਇਹ ਆਮ ਤੌਰ ਤੇ ਪੁਰਾਣੇ ਵਰਜਨਾਂ ਤੇ ਕੰਮ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਨਹੀਂ ਲੋੜੀਂਦਾ ਹੈ.

ਸੂਡੋ ਐਲੀਮੈਂਟ ਦੀ ਸਮਗਰੀ ਸਾਈਟ ਦੀ ਸਮਗਰੀ ਵਿਚ ਸ਼ਾਮਲ ਨਹੀਂ ਕੀਤੀ ਗਈ ਹੈ. ਇਹ ਖੋਜ ਇੰਜਣ ਦੁਆਰਾ ਨਹੀਂ ਦੇਖਿਆ ਜਾਵੇਗਾ. ਇਸ ਸਥਿਤੀ ਦਾ ਇਸਤੇਮਾਲ ਕਿਵੇਂ ਕਰਨਾ ਹੈ ਖਾਸ ਸਥਿਤੀ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਪਰੰਤੂ ਸੀ.ਡੀ.ਐੱਸ. ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਸੁਤੰਤਰ ਤੌਰ' ਤੇ ਜਾਂ ਕੰਪਲੈਕਸ ਵਿਚ, ਇਹ ਉਦੋਂ ਦਿਲਚਸਪ ਹੈ ਜਦੋਂ ਸਮਗਰੀ ਇਕ ਯੂਆਰਏਲ ਹੈ. ਸਾਈਟ ਦੇ ਲਿੰਕ ਦੇ ਰੂਪ ਵਿੱਚ, ਸੂਡੋ-ਐਲੀਮੈਂਟ ਦੀਆਂ ਸਮੱਗਰੀਆਂ ਦੀ ਸਿੱਧੀ ਵਰਤੋਂ, ਤੁਹਾਨੂੰ ਇਸ ਤੋਂ ਇੱਕ ਫਾਇਲ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇਵੇਗਾ, ਉਦਾਹਰਣ ਲਈ, ਇੱਕ ਤਸਵੀਰ.

ਸਾਈਟ ਤੇ ਸਟਾਈਲ ਫਾਈਲਾਂ ਨੂੰ ਸੋਧਣ ਦੀ ਸਮਰੱਥਾ (ਕੈਸਕੇਡਿੰਗ ਸ਼ੈਲੀ ਸ਼ੀਟ ਫਾਈਲਾਂ - ਅਪਵਾਦ ਨਹੀਂ) ਵਿਜ਼ਟਰ ਦੇ ਕਿਰਿਆਵਾਂ ਦੇ ਆਧਾਰ ਤੇ ਅਲਗੋਰਿਦਮ ਦੇ ਸਹੀ ਸਥਾਨ ਤੇ, ਵਿਸ਼ੇਸ਼ ਸਮੇਂ ਤੇ ਸੂਡੋ-ਐਲੀਮੈਂਟਸ ਬਣਾਉਣ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਰੋਕ ਨਹੀਂ ਪਾਉਂਦਾ.