IFrames ਨੂੰ ਵੈਬਸਾਈਟ ਡਿਜ਼ਾਇਨ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਹੈ ਇਸ ਨੂੰ ਸਮਝਣਾ
ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਐਚਟੀਐਮਐਲ ਵਿੱਚ ਇਕ ਐਲੀਮੈਂਟ ਨੂੰ ਐਮਬੈੱਡ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ CSS ਸਟਾਇਲਸ ਨੂੰ ਜੋੜਨ ਦੇ ਦੋ ਮੌਕੇ ਹਨ:
- ਤੁਸੀ IFRAME ਖੁਦ ਸ਼ੈਲੀ ਕਰ ਸਕਦੇ ਹੋ
- ਤੁਸੀਂ IFRAME (ਕੁਝ ਸ਼ਰਤਾਂ ਅਧੀਨ) ਦੇ ਪੰਨੇ ਨੂੰ ਸ਼ੈਲੀ ਦੇ ਸਕਦੇ ਹੋ.
IFRAME ਐਲੀਮੈਂਟ ਨੂੰ ਸਟਾਇਲ ਕਰਨ ਲਈ CSS ਨੂੰ ਵਰਤਣਾ
ਤੁਹਾਡੇ ਆਈਫਮਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਵੇਲੇ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ ਇਹ ਵਿਚਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਆਈਫ੍ਰੈਮੇ ਆਪਣੇ ਆਪ ਹੈ. ਹਾਲਾਂਕਿ ਜ਼ਿਆਦਾਤਰ ਬ੍ਰਾਊਜ਼ਰਸ ਵਿਚ ਅਨੇਕਾਂ ਅਤਿਅੰਤ ਸਟਾਲਾਂ ਦੇ ਬਿਨਾਂ ਆਈਰੇਮਾਂ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਇਕਸਾਰਤਾ ਰੱਖਣ ਲਈ ਕੁਝ ਸਟਾਈਲ ਜੋੜਨਾ ਅਜੇ ਵੀ ਵਧੀਆ ਸੁਝਾਅ ਹੈ.
ਇੱਥੇ ਕੁਝ ਸੀਐਸਐਸ ਸਟਾਈਲ ਹਨ ਜੋ ਮੈਂ ਹਮੇਸ਼ਾਂ ਆਪਣੇ ਆਈਐਫ੍ਰਮਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹਾਂ:
- ਹਾਸ਼ੀਆ: 0;
- ਪੈਡਿੰਗ: 0;
- ਬਾਰਡਰ: ਕੋਈ ਨਹੀਂ;
- ਚੌੜਾਈ: ਮੁੱਲ ;
- ਉਚਾਈ: ਮੁੱਲ ;
ਮੇਰੇ ਦਸਤਾਵੇਜ਼ ਵਿਚ ਫਿੱਟ ਹੋਣ ਵਾਲੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਦੇ ਆਕਾਰ ਦੇ ਨਾਲ ਇੱਥੇ ਇੱਕ ਫਰੇਮ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਹਨ, ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਕੋਈ ਵੀ ਸਟਾਈਲ ਨਹੀਂ ਹੈ ਅਤੇ ਇੱਕ ਨੂੰ ਸਟਾਇਲ ਦੇ ਨਾਲ ਹੀ ਮੂਲ ਰੂਪ ਵਿੱਚ ਦਿੱਤਾ ਗਿਆ ਹੈ. ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਇਹ ਸਟਾਈਲ ਜ਼ਿਆਦਾਤਰ ਸਿਰਫ iframe ਦੇ ਆਲੇ ਦੁਆਲੇ ਬਾਰਡਰ ਨੂੰ ਹਟਾਉਂਦੇ ਹਨ, ਪਰ ਉਹ ਇਹ ਵੀ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਜੇ ਆਈਫੈਮ ਇੱਕੋ ਮਾਰਜਿਨ, ਪੈਡਿੰਗ ਅਤੇ ਪੈਮਾਨੇ ਨਾਲ ਹੈ.
HTML5 ਸਕ੍ਰੌਲ ਬਾਰ ਹਟਾਉਣ ਲਈ ਓਵਰਫਲੋ ਸੰਪਤੀ ਦਾ ਉਪਯੋਗ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਭਰੋਸੇਯੋਗ ਨਹੀਂ ਹੈ ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਸਕ੍ਰੌਲ ਬਾਰ ਨੂੰ ਹਟਾਉਣਾ ਜਾਂ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਈਫੈਮ ਤੇ ਸਕਰੋਲਿੰਗ ਐਟੀਬ੍ਰੇਟ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ. ਸਕਰੋਲਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤਣ ਲਈ, ਇਸ ਨੂੰ ਕਿਸੇ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਰੂਪ ਵਿੱਚ ਜੋੜੋ ਅਤੇ ਫਿਰ ਤਿੰਨ ਵਿੱਚੋਂ ਇੱਕ ਮੁੱਲ ਚੁਣੋ: ਹਾਂ, ਨਹੀਂ, ਜਾਂ ਆਟੋ ਹਾਂ, ਬ੍ਰਾਉਜ਼ਰ ਨੂੰ ਹਮੇਸ਼ਾ ਸਕਰੋਲ ਬਾਰਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋਏ ਦੱਸਦੇ ਹਨ ਭਾਵੇਂ ਉਹ ਲੋੜੀਂਦੇ ਨਾ ਹੋਣ. ਕੋਈ ਵੀ ਇਹ ਨਹੀਂ ਕਹਿੰਦਾ ਕਿ ਸਾਰੇ ਸਕ੍ਰੌਲ ਬਾਰ ਹਟਾਉਣ ਜਾਂ ਨਾ ਹੋਣ.
ਆਟੋ ਡਿਫੌਲਟ ਹੈ ਅਤੇ ਜਦੋਂ ਸਕਰੋਲ ਬਾਰਜ਼ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਅਤੇ ਜਦੋਂ ਉਹ ਨਹੀਂ ਹੁੰਦੇ ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ
ਸਕਰੋਲਿੰਗ ਐਟਰੀਬਿਊਟ ਨਾਲ ਸਕ੍ਰੋਲਿੰਗ ਨੂੰ ਬੰਦ ਕਿਵੇਂ ਕਰਨਾ ਹੈ:
ਸਕ੍ਰੋਲਿੰਗ = "ਨਹੀਂ" >
ਇਹ ਇੱਕ ਆਈਫਰੇਮ ਹੈ.
HTML5 ਵਿੱਚ ਸਕ੍ਰੌਲਿੰਗ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਓਵਰਫਲੋ ਪ੍ਰਾਪਰਟੀ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਦੀ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਪਰ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਇਨ੍ਹਾਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹੋ ਇਹ ਹਾਲੇ ਤੱਕ ਸਾਰੇ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਭਰੋਸੇਯੋਗ ਢੰਗ ਨਾਲ ਕੰਮ ਨਹੀਂ ਕਰਦਾ.
ਇੱਥੇ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਓਵਰਫਲੋ ਪ੍ਰਾਪਰਟੀ ਦੇ ਨਾਲ ਸਕ੍ਰੀਨਿੰਗ ਨੂੰ ਚਾਲੂ ਕਿਵੇਂ ਕਰ ਸਕੋਗੇ:
ਸ਼ੈਲੀ = "ਓਵਰਫਲੋ: ਸਕਰੋਲ;" >
ਇਹ ਇੱਕ ਆਈਫਰੇਮ ਹੈ.
ਓਵਰਫਲੋ ਪ੍ਰਾਪਰਟੀ ਦੇ ਨਾਲ ਸਕਰੋਲਿੰਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬੰਦ ਕਰਨ ਦਾ ਕੋਈ ਤਰੀਕਾ ਨਹੀਂ ਹੈ.
ਬਹੁਤ ਸਾਰੇ ਡਿਜ਼ਾਇਨਰਜ਼ ਚਾਹੁੰਦੇ ਹਨ ਕਿ ਆਪਣੇ ਆਈਫਮਾਂ ਨੂੰ ਉਹ ਪੰਨੇ ਦੀ ਬੈਕਗਰਾਊਂਡ ਵਿਚ ਮਿਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ ਪਾਠਕ ਇਹ ਨਾ ਜਾਣ ਕਿ ਪਾਠਕ੍ਰਮ ਤਾਂ ਇੱਥੇ ਵੀ ਮੌਜੂਦ ਹਨ. ਪਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਬਾਹਰ ਖੜੇ ਕਰਨ ਲਈ ਸਟਾਈਲ ਵੀ ਜੋੜ ਸਕਦੇ ਹੋ. ਬਾਰਡਰ ਨੂੰ ਵਿਵਸਥਤ ਕਰਨਾ ਤਾਂ ਜੋ ਆਸਾਨੀ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਦਿਖਾਇਆ ਜਾ ਸਕੇ. ਬਸ ਬਾਰਡਰ ਸਟਾਈਲ ਪ੍ਰਾਪਰਟੀ (ਜਾਂ ਇਹ ਬਾਰਡਰ-ਸਿਖਰ, ਸਰਹੱਦ-ਸੱਜੇ, ਬਾਰਡਰ-ਖੱਬੇ ਅਤੇ ਸਰਹੱਦ-ਹੇਠਲੇ ਸੰਪਤੀਆਂ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ) ਦੀ ਵਰਤੋਂ ਬਾਰਡਰ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਕਰੋ:
iframe {
ਬਾਰਡਰ-ਟਾਪ: # c00 1px ਬਿੰਦੀ;
ਸੀਮਾ-ਸੱਜੇ: # c00 2px ਬਿੰਦੀ;
ਸੀਮਾ-ਖੱਬੇ: # c00 2px ਬਿੰਦੀ;
ਸੀਮਾ-ਹੇਠਾਂ: # c00 4px ਬਿੰਦੀ;
}
ਪਰ ਤੁਹਾਨੂੰ ਆਪਣੇ ਸਟਾਈਲ ਦੇ ਲਈ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਬਾਰਡਰ ਦੇ ਨਾਲ ਰੁਕਣਾ ਨਹੀਂ ਚਾਹੀਦਾ. ਤੁਸੀਂ ਆਪਣੇ ਆਈਆਰਐਫਮਾਂ ਲਈ ਬਹੁਤ ਸਾਰੀਆਂ ਹੋਰ CSS ਸ਼ੈਲੀਆਂ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ. ਇਸ ਉਦਾਹਰਨ ਲਈ iframe ਨੂੰ ਸ਼ੈਡੋ, ਗੋਲ ਕੋਨਿਆਂ ਦੇਣ ਅਤੇ ਇਸ ਨੂੰ 20 ਡਿਗਰੀ ਘੁਮਾਇਆ ਜਾਣ ਲਈ CSS3 ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ.
iframe {
ਹਾਸ਼ੀਆ-ਚੋਟੀ: 20px;
ਹਾਸ਼ੀਆ-ਤਲ: 30px;
-ਮੋਜ਼-ਸੀਮਾ-ਰੇਡੀਅਸ: 12 ਪੈਕਸ;
-webkit-border-radius: 12px;
ਬਾਰਡਰ-ਰੇਡੀਅਸ: 12 ਪੈਕਸ;
-ਮੋਜ-ਬਾਕਸ-ਸ਼ੈਡੋ: 4 ਪੈਕਸ 4 ਪੈਕਸ 14 ਪੈਕਸ 000;
-webkit-box-shadow: 4px 4px 14px # 000;
ਬਾਕਸ-ਸ਼ੈਡੋ: 4 ਪੈਕਸ 4 ਪੈਕਸ 14 ਪੈਕਸ # 000;
-ਮੋਜ-ਬਦਲਾਅ: ਘੁੰਮਾਓ (20 ਡਿਗਰੀ);
-webkit-transform: ਘੁੰਮਾਓ (20 ਡਿਗਰੀ);
-o-transform: ਘੁੰਮਾਓ (20 ਡਿਗਰੀ);
-ਮੀਜ਼-ਟਰਾਂਸਫਾਰਮ: ਘੁੰਮਾਓ (20 ਡਿਗਰੀ);
ਫਿਲਟਰ: ਪ੍ਰੋਗਿਡ: ਡੀਐਕਸਆਈਮੇਜ ਟ੍ਰਾਂਸਫਾਰਮ. ਮਾਈਕ੍ਰੋਸੋਫੋਟ. ਬੈਸਿਕ ਇਮੇਜ (ਰੋਟੇਸ਼ਨ = .2);
}
ਇਫਰੇਮ ਸਮੱਗਰੀ ਸਟਾਈਲਿੰਗ
ਇੱਕ iframe ਦੀਆਂ ਸਮੱਗਰੀਆਂ ਨੂੰ ਸਟਾਇਲਿੰਗ ਕਰਨਾ ਕਿਸੇ ਹੋਰ ਵੈਬ ਪੰਨੇ ਨੂੰ ਸਟਾਇਲ ਕਰਨ ਦੀ ਤਰ੍ਹਾਂ ਹੈ. ਪਰ, ਤੁਹਾਡੇ ਕੋਲ ਪੇਜ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰਨ ਦੀ ਪਹੁੰਚ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ . ਜੇ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਸੰਪਾਦਿਤ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹੋ (ਉਦਾਹਰਣ ਵਜੋਂ, ਇਹ ਕਿਸੇ ਹੋਰ ਸਾਈਟ ਤੇ ਹੈ).
ਜੇ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਸੰਪਾਦਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਦਸਤਾਵੇਜ਼ੀ ਵਿੱਚ ਇਕ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੀਟ ਜਾਂ ਸਟਾਈਲ ਜੋੜ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਆਪਣੀ ਸਾਈਟ ਤੇ ਕਿਸੇ ਵੀ ਹੋਰ ਵੈਬ ਪੇਜ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹੋ.