CSS3 ਵਿੱਚ ਵੱਡੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਸਮਝਣਾ
CSS2 ਅਤੇ CSS3 ਵਿਚ ਸਭ ਤੋਂ ਵੱਡਾ ਅੰਤਰ ਹੈ ਕਿ CSS3 ਨੂੰ ਵੱਖ-ਵੱਖ ਭਾਗਾਂ ਵਿੱਚ ਵੰਡਿਆ ਗਿਆ ਹੈ, ਜਿਸਨੂੰ ਮੈਡਿਊਲ ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਹਰੇਕ ਮੈਡਿਊਲ ਸਿਫਾਰਸ਼ ਪ੍ਰਕਿਰਿਆ ਦੇ ਵੱਖ-ਵੱਖ ਪੜਾਵਾਂ ਵਿੱਚ W3C ਦੁਆਰਾ ਆਪਣਾ ਰਾਹ ਬਣਾ ਰਿਹਾ ਹੈ. ਇਸ ਪ੍ਰਕਿਰਿਆ ਨੇ CSS3 ਦੇ ਵੱਖ-ਵੱਖ ਹਿੱਸਿਆਂ ਲਈ ਵੱਖ ਵੱਖ ਨਿਰਮਾਤਾਵਾਂ ਦੁਆਰਾ ਸਵੀਕਾਰ ਕੀਤੇ ਅਤੇ ਲਾਗੂ ਕੀਤੇ ਜਾਣ ਲਈ ਬਹੁਤ ਆਸਾਨ ਬਣਾ ਦਿੱਤਾ ਹੈ.
ਜੇ ਤੁਸੀਂ ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੀ ਤੁਲਨਾ CSS2 ਨਾਲ ਕਰਦੇ ਹੋ, ਜਿੱਥੇ ਸਭ ਕੁਝ ਇਕ ਕੈਲੰਡਿੰਗ ਸ਼ੈਲੀ ਸ਼ੀਟਸ ਜਾਣਕਾਰੀ ਦੇ ਅੰਦਰ ਇਕੋ ਦਸਤਾਵੇਜ਼ ਦੇ ਰੂਪ ਵਿਚ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਸੀ, ਤਾਂ ਤੁਸੀਂ ਸਿਫਾਰਸ਼ ਨੂੰ ਛੋਟੇ, ਵਿਅਕਤੀਗਤ ਟੁਕੜਿਆਂ ਵਿਚ ਵੰਡਣ ਦੇ ਲਾਭਾਂ ਨੂੰ ਵੇਖਣਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ. ਕਿਉਂਕਿ ਹਰੇਕ ਮੈਡਿਊਲ ਨੂੰ ਵੱਖਰੇ ਤੌਰ ਤੇ ਕੰਮ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ, ਸਾਡੇ ਕੋਲ CSS3 ਮੈਡਿਊਲ ਲਈ ਬਰਾਬਰ ਸਮਰਥਨ ਦੀ ਇੱਕ ਬਹੁਤ ਵੱਡੀ ਸ਼੍ਰੇਣੀ ਹੈ.
ਜਿਵੇਂ ਕਿ ਕਿਸੇ ਵੀ ਨਵੇਂ ਅਤੇ ਬਦਲਵੇਂ ਸਪਸ਼ਟੀਕਰਨ ਦੇ ਨਾਲ, ਤੁਹਾਡੇ CSS3 ਪੰਨਿਆਂ ਨੂੰ ਬਹੁਤ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਅਤੇ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ ਵਿੱਚ ਚੰਗੀ ਤਰਾਂ ਜਾਂਚਣਾ ਯਕੀਨੀ ਬਣਾਓ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ. ਯਾਦ ਰੱਖੋ ਕਿ ਹਰ ਪੰਜੀਕਰਣ ਵਿੱਚ ਵੈਬ ਪੇਜ ਬਣਾਉਣਾ ਕੋਈ ਵੈਬ ਪੇਜ ਨਹੀਂ ਬਣਾਉਣਾ ਹੈ, ਪਰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ CSS3 ਸਟਾਈਲਸ ਸਮੇਤ, ਤੁਹਾਡੇ ਦੁਆਰਾ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਉਹ ਸਟਾਈਲ, ਉਹਨਾਂ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਬਹੁਤ ਵਧੀਆ ਦਿੱਖਦਾ ਹੈ ਜੋ ਉਹਨਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਅਤੇ ਇਹ ਕਿ ਉਹ ਪੁਰਾਣੀ ਬ੍ਰਾਉਜ਼ਰਸ ਲਈ ਕ੍ਰਿਪਾ ਨਾਲ ਵਾਪਸ ਚਲੇ ਜਾਂਦੇ ਹਨ ਨਾਂ ਕਰੋ.
ਨਵੇਂ CSS3 ਚੋਣਕਾਰ
CSS3 ਨਵੇਂ ਤਰ੍ਹਾਂ ਦੇ ਨਵੇਂ ਤਰੀਕੇ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜਿਸ ਨਾਲ ਤੁਸੀਂ CSS ਨਿਯਮਾਂ ਨੂੰ ਨਵੇਂ CSS ਚੋਣਕਾਰ ਦੇ ਨਾਲ ਨਾਲ ਇੱਕ ਨਵਾਂ ਜੋੜਕ ਅਤੇ ਕੁਝ ਨਵੇਂ ਸਮੂਦਾ-ਤੱਤ ਦੇ ਰੂਪ ਵਿੱਚ ਲਿਖ ਸਕਦੇ ਹੋ.
ਤਿੰਨ ਨਵੇਂ ਗੁਣ ਚੋਣਕਾਰ:
- ਐਟਰੀਬਿਊਟ ਦੀ ਸ਼ੁਰੂਆਤ ਬਿਲਕੁਲ ਤੱਤ ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ [foo ^ = "bar"] ਇਸ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜਿਸਨੂੰ "ਫਰੂ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ "ਬਾਰ" ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ
- ਗੁਣ ਦਾ ਅੰਤ ਅਖੀਰ ਤੱਤ [foo $ = "bar"] ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜਿਸਨੂੰ "ਫਰੂ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ "ਬਾਰ" ਦੇ ਨਾਲ ਖਤਮ ਹੁੰਦਾ ਹੈ
- ਗੁਣ ਵਿਚ ਮੇਲ ਤੱਤ [foo * = "bar"] ਸ਼ਾਮਿਲ ਹਨ ਐਲੀਮੈਂਟ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜਿਸਨੂੰ foo ਕਹਿੰਦੇ ਹਨ ਜਿਸ ਵਿੱਚ "ਬਾਰ" ਸਤਰ ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ
16 ਨਵੇਂ ਸੂਡੋ ਕਲਾਸਾਂ:
- : ਰੂਟ
- ਦਸਤਾਵੇਜ਼ ਦਾ ਰੂਟੀ ਐਲੀਮੈਂਟ. HTML ਵਿੱਚ ਇਹ ਹਮੇਸ਼ਾ ਹੁੰਦਾ ਹੈ.
- : nth-child (n)
- ਇਸਦਾ ਅਨੁਕੂਲ ਮੈਲ ਮੈਚ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਹੀ ਬਾਲ ਤੱਤਾਂ ਨੂੰ ਮੇਲ ਕਰਨ ਜਾਂ ਵੈਰੀਬਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਵਰਤੋਂ.
- : nth-last-child (n)
- ਅਖੀਰਲੇ ਅਖ਼ੀਰ ਤੋਂ ਮਾਪਦੇ ਹੋਏ ਸਹੀ ਬਾਲ ਤੱਤ ਮਿਲਾਨ ਕਰੋ.
- : nth-of-type (n)
- ਦਸਤਾਵੇਜ਼ੀ ਲੜੀ ਵਿਚ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਉਹੀ ਨਾਮ ਦੇ ਨਾਲ ਸਿਭਾਇਣ ਦੇ ਤੱਤ ਲੱਭੋ.
- : nth-last-of-type (n)
- ਤਲ ਤੋਂ ਮਿਲਦੀ ਗਿਣਤੀ ਵਿੱਚ ਇੱਕੋ ਹੀ ਨਾਮ ਨਾਲ ਮੇਲਣ ਦੇ ਸਿਧਾਂਤ ਮੇਲ ਕਰੋ
- : ਆਖ਼ਰੀ ਬੱਚੇ
- ਮਾਪਿਆਂ ਦੇ ਆਖਰੀ ਬਾਲ ਤੱਤ ਨਾਲ ਮੇਲ ਕਰੋ.
- : ਪਹਿਲੀ-ਦੀ-ਕਿਸਮ
- ਉਸ ਕਿਸਮ ਦੇ ਪਹਿਲੇ ਭਾਸ਼ੀ ਤੱਤ ਦਾ ਮੇਲ ਕਰੋ.
- : ਆਖ਼ਰੀ ਟਾਈਪ
- ਉਸ ਕਿਸਮ ਦੇ ਆਖ਼ਰੀ ਭੈਣ-ਭਰਾ ਨਾਲ ਮੇਲ ਕਰੋ.
- :ਇੱਕਲਾ ਬੱਚਾ
- ਉਸ ਤੱਤ ਦਾ ਅੰਦਾਜ਼ਾ ਲਾਓ ਜੋ ਕਿ ਇਸ ਦੇ ਮਾਤਾ-ਪਿਤਾ ਦਾ ਇੱਕਮਾਤਰ ਬੱਚਾ ਹੈ.
- : ਸਿਰਫ-ਦੀ-ਕਿਸਮ
- ਉਸ ਤੱਤ ਦਾ ਪਤਾ ਲਾਓ ਜੋ ਕਿ ਇਸਦੀ ਇੱਕ ਕਿਸਮ ਹੈ.
- : ਖਾਲੀ
- ਉਸ ਤੱਤ ਦਾ ਪਤਾ ਲਾਓ ਜਿਸਦੇ ਕੋਈ ਬੱਚੇ ਨਹੀਂ ਹਨ (ਟੈਕਸਟ ਨੋਡਸ ਸਮੇਤ).
- : ਟੀਚਾ
- ਉਸ ਤੱਤ ਦਾ ਪਤਾ ਲਗਾਓ ਜੋ ਉਰਫ ਯੂਆਰਆਈ ਦਾ ਟੀਚਾ ਹੈ.
- : ਸਮਰਥਿਤ
- ਤੱਤ ਉਦੋਂ ਮੈਚ ਕਰੋ ਜਦੋਂ ਇਹ ਸਮਰਥਿਤ ਹੋਵੇ.
- : ਅਪਾਹਜ
- ਤੱਤ ਉਦੋਂ ਮਿਲਾਓ ਜਦੋਂ ਇਹ ਅਯੋਗ ਹੋਵੇ
- : ਚੈੱਕ ਕੀਤਾ
- ਤੱਤ ਉਦੋਂ ਪਤਾ ਕਰੋ ਜਦੋਂ ਇਹ ਚੈੱਕ ਕੀਤਾ ਗਿਆ ਹੈ (ਰੇਡੀਓ ਬਟਨ ਜਾਂ ਚੈਕਬਾਕਸ).
- : ਨਹੀਂ (s)
- ਜਦੋਂ ਮਿਲਾਨ ਸਧਾਰਨ ਚੋਣਕਰਤਾ ਨਾਲ ਮਿਲਦਾ ਨਾ ਹੋਵੇ ਤਾਂ ਮੈਚ ਕਰੋ
ਇੱਕ ਨਵਾਂ ਜੋੜਕ:
- elementA ~ elementB
- ਜਦੋਂ EleB elementA ਤੱਤ A ਤੋਂ ਬਾਅਦ ਦੀ ਹੈ, ਤਦ ਇਹ ਜ਼ਰੂਰੀ ਨਹੀਂ ਕਿ ਇਹ ਤੁਰੰਤ ਹੋਵੇ.
ਨਵਾਂ ਵਿਸ਼ੇਸ਼ਤਾ
CSS3 ਨੇ ਕਈ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪੇਸ਼ ਕੀਤੀਆਂ ਹਨ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿਜ਼ੂਅਲ ਸਟਾਈਲ ਬਣਾਉਣਾ ਸਨ ਜੋ ਸੰਭਾਵਤ ਤੌਰ ਤੇ ਇੱਕ ਗ੍ਰਾਫਿਕ ਪ੍ਰੋਗ੍ਰਾਮ ਜਿਵੇਂ ਕਿ ਫੋਟੋਸ਼ਾਪ ਦੇ ਨਾਲ ਹੋਰ ਸੰਗਠਿਤ ਹੋਣ. ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੁਝ, ਬਾਰਡਰ-ਡਿਸਟ੍ਰੀਜ ਜਾਂ ਬੌਕਸ-ਸ਼ੈਡੋ ਵਰਗੇ, ਜੇ CSS3 ਦੀ ਪਛਾਣ ਤੋਂ ਬਾਅਦ ਆਲੇ-ਦੁਆਲੇ ਮੌਜੂਦ ਹਨ. ਦੂਜਿਆਂ, ਜਿਵੇਂ ਕਿ flexbox ਜਾਂ CSS ਗਰਿੱਡ, ਉਹ ਨਵੀਆਂ ਸਟਾਈਲ ਹਨ ਜੋ ਅਜੇ ਵੀ ਅਕਸਰ CSS3 ਦੇ ਵਾਧੇ 'ਤੇ ਵਿਚਾਰ ਕਰਦੇ ਹਨ.
CSS3 ਵਿਚ, ਬਾਕਸ ਮਾਡਲ ਬਦਲਿਆ ਨਹੀਂ ਹੈ. ਪਰ ਤੁਹਾਡੇ ਨਵੇਂ ਸਟਾਈਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਇਕ ਝੁੰਡ ਹੈ ਜੋ ਤੁਹਾਡੇ ਬਕਸੇ ਦੇ ਬੈਕਗਰਾਊਂਡ ਅਤੇ ਬਾਰਡਰਸ ਦੀ ਸ਼ੈਲੀ ਵਿਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰ ਸਕਦੀ ਹੈ.
ਮਲਟੀਪਲ ਪਿੱਠਭੂਮੀ I mages
ਬੈਕਗਰਾਊਂਡ-ਚਿੱਤਰ, ਬੈਕਗ੍ਰਾਉਂਡ-ਪੋਜ਼ਿਸ਼ਨ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ-ਰੀਪਲੇਟ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਤੁਸੀਂ ਕਈ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰਾਂ ਨੂੰ ਬਕਸੇ ਵਿੱਚ ਇੱਕ ਦੂਜੇ ਦੇ ਉੱਪਰ ਰੱਖੇ ਜਾਣ ਲਈ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ. ਪਹਿਲੀ ਚਿੱਤਰ, ਉਸ ਵਿਅਕਤੀ ਦੇ ਸਭ ਤੋਂ ਨੇੜਲੇ ਪਰਤ ਹੈ, ਜਿਸ ਦੇ ਪਿੱਛੇ ਪਟ ਕੀਤੇ ਹੋਏ ਹਨ. ਜੇ ਇੱਥੇ ਕੋਈ ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਹੈ, ਤਾਂ ਇਹ ਸਾਰੀਆਂ ਚਿੱਤਰ ਪਰਤਾਂ ਦੇ ਹੇਠਾਂ ਪੇਂਟ ਕੀਤਾ ਗਿਆ ਹੈ.
ਨਵਾਂ ਬੈਕਗਰਾਊਂਡ ਸ਼ੈਲੀ ਪਰੰਪਰਾ
CSS3 ਵਿਚ ਕੁਝ ਨਵੀਂ ਬੈਕਗਰਾਊਂਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਹਨ.
- ਪਿਛੋਕੜ-ਕਲਿਪ
- ਇਹ ਸੰਪਤੀ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ ਕਿ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਕਿਵੇਂ ਕਲੀਡ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ. ਡਿਫਾਲਟ ਬਾਰਡਰ ਬਾਕਸ ਹੈ, ਪਰ ਇਸਨੂੰ ਪੈਡਿੰਗ ਬਾਕਸ ਜਾਂ ਸਮਗਰੀ ਬਾਕਸ ਵਿੱਚ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ.
- ਪਿੱਠਭੂਮੀ ਮੂਲ
- ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ ਕਿ ਕੀ ਪਿੱਠਭੂਮੀ ਪਿਡਿੰਗ ਬੌਕਸ, ਬਾਰਡਰ ਬਾਕਸ ਜਾਂ ਸਮੱਗਰੀ ਬਾਕਸ ਵਿੱਚ ਸਥਾਨ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ.
- ਬੈਕਗਰਾਊਂਡ-ਆਕਾਰ
- ਇਹ ਸੰਪਤੀ ਤੁਹਾਨੂੰ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਦੇ ਆਕਾਰ ਨੂੰ ਦਰਸਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ. ਇਹ ਤੁਹਾਨੂੰ ਛੋਟੇ ਚਿੱਤਰਾਂ ਨੂੰ ਪੰਨੇ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਸਹਾਇਕ ਹੈ.
ਮੌਜੂਦਾ ਬੈਕਗਰਾਊਂਡ ਸ਼ੈਲੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਬਦਲਾਅ
ਮੌਜੂਦਾ ਪਿਛੋਕੜ ਸਟਾਈਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਕੁਝ ਬਦਲਾਅ ਵੀ ਹਨ:
- ਬੈਕਗ੍ਰਾਉਂਡ-ਦੁਹਰਾਓ
- ਇਸ ਜਾਇਦਾਦ ਦੇ ਦੋ ਨਵੇਂ ਮੁੱਲ ਹਨ: ਸਪੇਸ ਅਤੇ ਗੋਲ ਸਪੇਸ ਟਾਇਲਡ ਚਿੱਤਰ ਨੂੰ ਸਮਤਲ ਰੂਪ ਵਿਚ ਖਿਲਰਿਆ ਬਗੈਰ ਇਕਸਾਰ ਬਕਸੇ ਵਿਚ ਰੱਖ ਦਿੰਦਾ ਹੈ. ਗੋਲ ਬੈਕਗਰਾਊਂਡ ਚਿੱਤਰ ਨੂੰ ਛੁਟਕਾਰਾ ਦਿੰਦਾ ਹੈ ਤਾਂ ਕਿ ਇਹ ਬਕਸੇ ਵਿੱਚ ਸੰਪੂਰਨ ਗਿਣਤੀ ਨੂੰ ਟਾਇਲ ਕਰ ਸਕੇ.
- ਬੈਕਗਰਾਊਂਡ-ਅਟੈਚਮੈਂਟ
- ਇੱਕ ਨਵਾਂ ਮੁੱਲ "ਸਥਾਨਕ" ਜੋੜਿਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਬੈਕਗ੍ਰਾਉਂਡ ਤੱਤ ਦੀ ਸਮਗਰੀ ਨਾਲ ਸਕਰੋਲ ਕੀਤਾ ਜਾਏ ਜਦੋਂ ਇਹ ਤੱਤ ਇੱਕ ਸਕਰੋਲ ਬਾਰ ਹੋਵੇ.
- ਪਿਛੋਕੜ
- ਪਿੱਠਭੂਮੀ ਦੀ ਲਪੇਟ ਲੈਣ ਵਾਲੀ ਜਾਇਦਾਦ ਆਕਾਰ ਅਤੇ ਮੂਲ ਸੰਪਤੀਆਂ ਵਿੱਚ ਜੋੜਦੀ ਹੈ.
CSS3 ਬਾਰਡਰ ਵਿਸ਼ੇਸ਼ਤਾ
CSS3 ਬਾਰਡਰ ਵਿੱਚ ਉਹ ਸਟਾਈਲ ਹੋ ਸਕਦੀਆਂ ਹਨ ਜੋ ਅਸੀਂ (ਠੋਸ, ਡਬਲ, ਡੈਸ਼ਡ, ਆਦਿ) ਲਈ ਵਰਤੀਆਂ ਹਨ ਜਾਂ ਉਹ ਇੱਕ ਚਿੱਤਰ ਹੋ ਸਕਦੀਆਂ ਹਨ ਨਾਲ ਹੀ, CSS3 ਗੋਲ ਘੇਰਾ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ ਲਿਆਉਂਦਾ ਹੈ. ਬਾਰਡਰ ਪ੍ਰਤੀਬਿੰਬਾਂ ਦਿਲਚਸਪ ਹਨ ਕਿਉਂਕਿ ਤੁਸੀਂ ਚਾਰਾਂ ਚਾਰਾਂ ਦੀਆਂ ਤਸਵੀਰਾਂ ਬਣਾਉਂਦੇ ਹੋ ਅਤੇ ਫਿਰ CSS ਨੂੰ ਦੱਸ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਤਸਵੀਰ ਤੁਹਾਡੀ ਸਰਹੱਦ 'ਤੇ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨੀ ਹੈ.
ਨਿਊ ਬਾਰਡਰ ਸਟਾਈਲ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
CSS3 ਵਿਚ ਕੁਝ ਨਵੀਂ ਬਾਰਡਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:
- ਬਾਰਡਰ-ਰੇਡੀਅਸ
- ਸਰਹੱਦ-ਉੱਪਰ-ਸੱਜੇ-ਰੇਡੀਅਸ , ਸਰਹੱਦ-ਹੇਠਲੇ-ਸੱਜੇ-ਰੇਡੀਅਸ , ਸਰਹੱਦ-ਹੇਠਾਂ-ਖੱਬੇ-ਰੇਡੀਅਸ , ਸਰਹੱਦ-ਉੱਪਰ-ਖੱਬੇ-ਰੇਡੀਅਸ
- ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੁਹਾਨੂੰ ਆਪਣੀ ਬਾਰਡਰ ਤੇ ਗੋਲ ਕੋਨਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀਆਂ ਹਨ.
- border-image-source
- ਪਹਿਲਾਂ ਹੀ ਪ੍ਰਭਾਸ਼ਿਤ ਬਾਰਡਰ ਸਟਾਈਲ ਦੀ ਬਜਾਏ ਚਿੱਤਰ ਸਰੋਤ ਫਾਇਲ ਦੱਸਦੀ ਹੈ
- ਬਾਰਡਰ-ਚਿੱਤਰ-ਟੁਕੜਾ
- ਸਰਹੱਦੀ ਚਿੱਤਰਾਂ ਦੇ ਕਿਨਾਰੇ ਤੋਂ ਅੰਦਰੂਨੀ ਆਫਸੈੱਟ ਪ੍ਰਸਤੁਤ ਕਰਦਾ ਹੈ
- ਬਾਰਡਰ-ਚਿੱਤਰ-ਚੌੜਾਈ
- ਤੁਹਾਡੀ ਬਾਰਡਰ ਤਸਵੀਰ ਲਈ ਚੌੜਾਈ ਦੇ ਮੁੱਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
- border-image-startet
- ਉਹ ਹੱਦ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਸਦੀ ਲੰਬਾਈ ਦਾ ਚਿੱਤਰ ਖੇਤਰ ਸਰਹਦੀ ਬਾਕਸ ਤੋਂ ਅੱਗੇ ਵਧਦਾ ਹੈ.
- ਸੀਮਾ-ਚਿੱਤਰ-ਤਣਾਅ
- ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਕਿ ਬਾਰਡਰ ਚਿੱਤਰ ਦੇ ਪਾਸੇ ਅਤੇ ਮੱਧਮ ਹਿੱਸੇ ਕਿਵੇਂ ਟਾਇਲ ਕੀਤੇ ਜਾਣਗੇ ਜਾਂ ਸਕੇਲ ਕੀਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ.
- ਬਾਰਡਰ-ਚਿੱਤਰ
- ਸਾਰੇ ਸਰਹਦੀ ਚਿੱਤਰਾਂ ਦੇ ਸੰਪਤੀਆਂ ਲਈ ਸ਼ੈਲਥੈਡ ਦੀ ਜਾਇਦਾਦ.
ਬੋਰਡਰਜ਼ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ ਨਾਲ ਸੰਬੰਧਿਤ ਵਾਧੂ CSS3 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਜਦੋਂ ਇੱਕ ਪੇਜ ਬਰੇਕ ਤੇ ਇੱਕ ਬਕਸਾ ਟੁੱਟ ਜਾਂਦਾ ਹੈ, ਲਾਈਨ ਬ੍ਰੇਕ (ਇਨਲਾਈਨ ਐਲੀਮੈਂਟਸ) ਲਈ ਕਾਲਮ ਬਰੇਕ, ਬੌਕਸ-ਸਜਾਵਟ-ਬਰੇਕ ਸੰਪਤੀ ਦੱਸਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਨਵੇਂ ਬਾਕਸ ਸਰਹੱਦ ਅਤੇ ਪੈਡਿੰਗ ਨਾਲ ਲਪੇਟਿਆ ਜਾਂਦਾ ਹੈ. ਬੈਕਗ੍ਰਾਉਂਡ ਨੂੰ ਇਸ ਜਾਇਦਾਦ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਈ ਟੁੱਟੀਆਂ ਸੁੱਤਿਆਂ ਵਿਚ ਵੰਡਿਆ ਜਾ ਸਕਦਾ ਹੈ.
ਇਕ ਬਾਕਸ-ਸ਼ੈਡੋ ਦੀ ਜਾਇਦਾਦ ਵੀ ਹੈ ਜੋ ਬਕਸੇ ਦੇ ਤੱਤਾਂ ਲਈ ਸ਼ੈਡੋ ਜੋੜਨ ਲਈ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ.
CSS3 ਦੇ ਨਾਲ, ਤੁਸੀਂ ਹੁਣ ਆਸਾਨੀ ਨਾਲ ਬਿਨਾਂ ਟੇਬਲ ਜਾਂ ਗੁੰਝਲਦਾਰ ਡੀਵੀ ਟੈਗ ਢਾਂਚਿਆਂ ਦੇ ਕਈ ਕਾਲਮ ਵਾਲੇ ਵੈਬ ਪੇਜ ਨੂੰ ਸੈਟ ਅਪ ਕਰ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਬਸ ਦੱਸੋ ਕਿ ਸਰੀਰ ਦੇ ਤੱਤ ਕੋਲ ਕਿੰਨੇ ਕਾਲਮ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ ਅਤੇ ਕਿੰਨੇ ਚੌੜੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ. ਨਾਲ ਹੀ ਤੁਸੀਂ ਬਾਰਡਰ (ਨਿਯਮ), ਬੈਕਗਰਾਉੰਡ ਕਲਰ ਜੋ ਕਿ ਕਾਲਮ ਦੀ ਉਚਾਈ ਤੇ ਫੈਲਾਉਂਦੇ ਹਨ, ਜੋੜ ਸਕਦੇ ਹੋ, ਅਤੇ ਤੁਹਾਡਾ ਟੈਕਸਟ ਆਟੋਮੈਟਿਕ ਸਾਰੀਆਂ ਕਾਲਮਾਂ ਵਿਚ ਲੰਘੇਗਾ.
CSS3 ਦੇ ਕਾਲਮ - ਕਾਲਮ ਦੀ ਗਿਣਤੀ ਅਤੇ ਚੌੜਾਈ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰੋ
ਤਿੰਨ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਅਤੇ ਚੌੜਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦਿੰਦੀਆਂ ਹਨ:
- ਕਾਲਮ-ਚੌੜਾਈ
- ਤੁਹਾਡੇ ਕਾਲਮਾਂ ਦੀ ਚੌੜਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ. ਬ੍ਰਾਉਜ਼ਰ ਫਿਰ ਟੈਕਸਟ ਨੂੰ ਭਰ ਦੇਵੇਗਾ, ਜੋ ਕਿ ਚੌੜਾਈ ਵਾਲੀਆਂ ਕਾਲਮਾਂ ਨਾਲ ਸਪੇਸ ਭਰ ਜਾਵੇਗਾ.
- ਕਾਲਮ-ਗਿਣਤੀ
- ਪੰਨਾ ਤੇ ਕਾਲਮਾਂ ਦੀ ਗਿਣਤੀ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਫਿਰ ਬ੍ਰਾਉਜ਼ਰ ਸਪੇਸ ਵਿਚ ਫਿੱਟ ਕਰਨ ਲਈ ਕਾਫ਼ੀ ਵੱਡੀਆਂ ਕਾਲਮ ਬਣਾਵੇਗਾ, ਪਰੰਤੂ ਉਸ ਨੰਬਰ ਤੇ ਤੁਸੀਂ ਨਿਰਦੋਸ਼ ਕਰੋਗੇ.
- ਕਾਲਮ
- ਸ਼ਾਲਾਂਦ ਦੀ ਜਾਇਦਾਦ ਜਿੱਥੇ ਤੁਸੀਂ ਚੌੜਾਈ ਜਾਂ ਨੰਬਰ (ਜਾਂ ਦੋਵਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਇਹ ਘੱਟ ਹੀ ਸਮਝਦਾ ਹੈ).
CSS3 ਕਾਲਮ ਅੰਤਰਾਲ ਅਤੇ ਨਿਯਮ
ਇੱਕੋ ਮਲਟੀਕੋਲਮੰਮ ਦ੍ਰਿਸ਼ ਦੇ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰਾਲ ਅਤੇ ਨਿਯਮ ਬਣਾਏ ਗਏ ਹਨ. ਅੰਤਰਾਲ ਕਾਲਮਾਂ ਨੂੰ ਵੱਖ ਕਰਦੇ ਹਨ, ਪਰ ਨਿਯਮ ਕਿਸੇ ਵੀ ਥਾਂ ਤੇ ਨਹੀਂ ਲੈਂਦੇ. ਜੇ ਇੱਕ ਕਾਲਮ ਨਿਯਮ ਆਪਣੇ ਪਾੜੇ ਤੋਂ ਵੱਧ ਚੌੜਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਹ ਨਜ਼ਦੀਕੀ ਕਾਲਮਾਂ ਨੂੰ ਓਵਰਲੈਪ ਕਰ ਦੇਵੇਗਾ. ਕਾਲਮ ਨਿਯਮਾਂ ਅਤੇ ਅੰਤਰਾਲਾਂ ਲਈ ਪੰਜ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:
- ਕਾਲਮ-ਪਾੜਾ
- ਕਾਲਮ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਦੀ ਚੌੜਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
- ਕਾਲਮ-ਨਿਯਮ-ਰੰਗ
- ਨਿਯਮ ਦੇ ਰੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
- ਕਾਲਮ-ਨਿਯਮ-ਸ਼ੈਲੀ
- ਨਿਯਮ ਦੀ ਸ਼ੈਲੀ (ਠੋਸ, ਬਿੰਦੂ, ਡਬਲ, ਆਦਿ) ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ.
- ਕਾਲਮ-ਨਿਯਮ-ਚੌੜਾਈ
- ਨਿਯਮ ਦੀ ਚੌੜਾਈ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ
- ਕਾਲਮ-ਨਿਯਮ
- ਇੱਕ ਲਪੇਟਤ ਜਾਇਦਾਦ ਜੋ ਸਾਰੇ ਤਿੰਨ ਕਾਲਮ ਨਿਯਮ ਗੁਣਾਂ ਨੂੰ ਇਕੋ ਵਾਰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ.
CSS3 ਕਾਲਮ ਬ੍ਰੇਕ, ਵਿਭਾਜਨ ਕਾਲਮ, ਅਤੇ ਭਰਨ ਦੇ ਕਾਲਮ
ਕਾਲਮ ਬਰੇਕਜ਼ ਉਸੇ CSS2 ਵਿਕਲਪਾਂ ਨੂੰ ਵਰਤਦਾ ਹੈ ਜੋ ਪੇਜਡ ਸਮਗਰੀ ਵਿੱਚ ਅੰਤਰ ਨੂੰ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਪਰ ਤਿੰਨ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ: ਤੋੜਨ ਤੋਂ ਪਹਿਲਾਂ , ਟੁੱਟਣ ਤੋਂ ਬਾਅਦ , ਅਤੇ ਟੁੱਟ-ਅੰਦਰ
ਟੇਬਲਜ਼ ਵਾਂਗ, ਤੁਸੀਂ ਕਾਲਮ-ਸਪੈਨ ਪ੍ਰਾਪਰਟੀ ਦੇ ਨਾਲ ਕਾਲਮਾਂ ਨੂੰ ਸਪੈਨ ਕਰਨ ਲਈ ਤੱਤ ਨਿਸ਼ਚਿਤ ਕਰ ਸਕਦੇ ਹੋ. ਇਹ ਤੁਹਾਨੂੰ ਸੁਰਖੀਆਂ ਬਣਾਉਣ ਲਈ ਸਹਾਇਕ ਹੈ ਜੋ ਇਕ ਅਖ਼ਬਾਰ ਵਾਂਗ ਬਹੁਤ ਸਾਰੇ ਕਾਲਮਾਂ ਨੂੰ ਸਪੈਨ ਕਰਦਾ ਹੈ.
ਕਾਲਮ ਭਰਨ ਦਾ ਫ਼ੈਸਲਾ ਇਹ ਕਰਦਾ ਹੈ ਕਿ ਹਰੇਕ ਕਾਲਮ ਵਿਚ ਕਿੰਨੀ ਸਮੱਗਰੀ ਹੋਵੇਗੀ. ਸੰਤੁਲਿਤ ਕਾਲਮ ਹਰੇਕ ਕਾਲਮ ਵਿਚ ਸਮਾਨ ਸੰਖਿਆ ਨੂੰ ਪਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਆਟੋਹੀ ਸਿਰਫ ਉਦੋਂ ਤਕ ਸਮਗਰੀ ਨੂੰ ਵਹਿੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਕਾਲਮ ਭਰਿਆ ਨਹੀਂ ਜਾਂਦਾ ਅਤੇ ਫਿਰ ਅਗਲੇ ਇੱਕ ਤੇ ਜਾਂਦਾ ਹੈ.
CSS3 ਵਿੱਚ ਉਹ ਹੋਰ ਫੀਚਰ ਜੋ ਕਿ CSS 2 ਵਿੱਚ ਸ਼ਾਮਿਲ ਨਹੀਂ ਹਨ
CSS3 ਵਿਚ ਬਹੁਤ ਸਾਰੀਆਂ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਜੋ CSS2 ਵਿਚ ਮੌਜੂਦ ਨਹੀਂ ਸਨ, ਜਿਸ ਵਿਚ ਸ਼ਾਮਲ ਹਨ:
- CSS ਖਾਕਾ ਲੇਆਉਟ ਮੈਡਿਊਲ ਅਤੇ CSS3 ਗਰਿੱਡ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਮੋਡੀਊਲ : CSS ਨਾਲ ਗਰਿੱਡ ਬਣਾਉਣਾ.
- CSS3 ਟੈਕਸਟ ਮੋਡੀਊਲ : ਆਉਟਲਾਈਨ ਟੈਕਸਟ ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ CSS ਨਾਲ ਡਰਾਪ-ਸ਼ੇਡਜ਼ ਵੀ ਬਣਾਉ.
- CSS3 ਰੰਗ ਮੋਡੀਊਲ : ਹੁਣ ਧੁੰਦਲਾਪਨ ਦੇ ਨਾਲ
- ਬਾਕਸ ਮਾੱਡਲ ਵਿਚ ਬਦਲਾਵ : ਇਕ ਮਾਰਕ ਦੀ ਜਾਇਦਾਦ ਵੀ ਸ਼ਾਮਲ ਹੈ ਜੋ IE ਟੈਗ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ.
- CSS3 ਯੂਜਰ ਇੰਟਰਫੇਸ ਮੋਡੀਊਲ : ਤੁਹਾਨੂੰ ਨਵੇਂ ਕਰਸਰ, ਕਾਰਵਾਈਆਂ ਦੇ ਜਵਾਬ, ਲੋੜੀਂਦੇ ਖੇਤਰ ਅਤੇ ਤੱਤਾਂ ਨੂੰ ਮੁੜ-ਆਕਾਰ ਦੇਣਾ .
- ਮੀਡੀਆ ਸਵਾਲ : ਮੀਡੀਆ ਕਲਾਂਇਟ ਤੁਹਾਨੂੰ ਇਹ ਦੱਸਣ ਵੇਲੇ ਵਧੇਰੇ ਲਚਕਤਾ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਕਿ ਸਟਾਈਲ ਸ਼ੀਟ ਕਿਵੇਂ ਵਰਤੀ ਜਾਵੇ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਤੁਸੀਂ ਇੱਕ ਸਟਾਈਲ ਸ਼ੀਟ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਸਿਰਫ ਹੈਂਡ-ਯੰਤਰ ਯੰਤਰਾਂ ਲਈ ਹੈ ਜਿਨ੍ਹਾਂ ਦਾ ਵਿਊਪੋਰਟ 20ਮ ਤੋਂ ਵੱਡਾ ਹੈ.
- CSS3 ਰੂਬੀ ਮੋਡੀਊਲ : ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਐਨੋਟੇਟ ਕਰਨ ਲਈ ਟੈਕਸਟਾਈਲ ਰੂਬੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੀਆਂ ਭਾਸ਼ਾਵਾਂ ਲਈ ਸਹਾਇਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ.
- CSS3 ਪੇਜ਼ਡ ਮੀਡਿਆ ਮੈਡਿਊਲ : ਪੇਜ਼ਡ ਮੀਡੀਆ (ਪੇਪਰ, ਪਾਰਦਰਸ਼ਿਤਾ ਆਦਿ) ਲਈ ਹੋਰ ਵੀ ਸਹਾਇਤਾ ਲਈ.
- ਤਿਆਰ ਸਮੱਗਰੀ : L ਚੱਲ ਰਹੇ ਹੈਡਰ ਅਤੇ ਪਦਲੇਖ, ਫੁਟਨੋਟ ਅਤੇ ਹੋਰ ਸਮਗਰੀ ਜੋ ਪ੍ਰੋਗ੍ਰਾਮ ਤਿਆਰ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਖਾਸ ਤੌਰ ਤੇ ਪੇਜ਼ਡ ਮੀਡੀਆ ਲਈ.
- CSS3 ਸਪੀਚ ਮੈਡਿਊਲ : ਸਾਹਿਤ ਸੰਬੰਧੀ CSS ਵਿੱਚ ਬਦਲਾਵ.