ਬਲੌਗਰ: ਤੁਹਾਡੇ ਬਲੌਗ 'ਤੇ ਕੋਡ ਲਈ CSS ਸ਼ੈਲੀ
ਇੱਕ ਦੋਸਤ ਨੇ ਮੈਨੂੰ ਪੁੱਛਿਆ ਕਿ ਮੈਂ Blogger ਐਂਟਰੀ ਵਿੱਚ ਕੋਡ ਖੇਤਰ ਕਿਵੇਂ ਬਣਾਏ। ਮੈਂ ਇਹ ਮੇਰੇ ਬਲੌਗਰ ਟੈਂਪਲੇਟ ਵਿੱਚ CSS ਲਈ ਇੱਕ ਸ਼ੈਲੀ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕੀਤਾ ਹੈ। ਇਹ ਹੈ ਜੋ ਮੈਂ ਜੋੜਿਆ ਹੈ:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: ਇਹ ਇੱਕ CSS ਨਿਯਮ ਹੈ ਜੋ HTML ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦਾ ਹੈ<p>
ਕਲਾਸ ਨਾਮ "ਕੋਡ" ਵਾਲੇ ਤੱਤ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਸ ਸ਼੍ਰੇਣੀ ਵਾਲਾ ਕੋਈ ਵੀ ਪੈਰਾ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਅਨੁਸਾਰ ਸਟਾਈਲ ਕੀਤਾ ਜਾਵੇਗਾ।font-family: Courier New;
: ਇਹ ਸੰਪੱਤੀ ਫੌਂਟ ਪਰਿਵਾਰ ਨੂੰ "ਕੁਰੀਅਰ ਨਿਊ" 'ਤੇ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਇਹ ਫੌਂਟ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਜੋ ਟੀਚੇ ਵਾਲੇ ਤੱਤਾਂ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ।font-size: 8pt;
: ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਫੌਂਟ ਆਕਾਰ ਨੂੰ 8 ਪੁਆਇੰਟਾਂ 'ਤੇ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਨਿਸ਼ਾਨਾ ਤੱਤ ਦੇ ਅੰਦਰ ਟੈਕਸਟ ਨੂੰ ਇਸ ਫੌਂਟ ਆਕਾਰ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ।border-style: inset;
: ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਬਾਰਡਰ ਸ਼ੈਲੀ ਨੂੰ "ਇਨਸੈੱਟ" 'ਤੇ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਇਹ ਨਿਸ਼ਾਨਾ ਤੱਤਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ ਬਾਰਡਰ ਲਈ ਇੱਕ ਡੁੱਬੀ ਜਾਂ ਦਬਾਈ ਦਿੱਖ ਬਣਾਉਂਦਾ ਹੈ।border-width: 3px;
: ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਬਾਰਡਰ ਚੌੜਾਈ ਨੂੰ 3 ਪਿਕਸਲ 'ਤੇ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਤੱਤਾਂ ਦੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਬਾਰਡਰ 3 ਪਿਕਸਲ ਮੋਟੀ ਹੋਵੇਗੀ।padding: 5px;
: ਇਹ ਸੰਪੱਤੀ ਨਿਸ਼ਾਨਾ ਤੱਤ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਦੇ ਦੁਆਲੇ ਪੈਡਿੰਗ ਦੇ 5 ਪਿਕਸਲ ਜੋੜਦੀ ਹੈ। ਇਹ ਟੈਕਸਟ ਅਤੇ ਬਾਰਡਰ ਵਿਚਕਾਰ ਵਿੱਥ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।background-color: #FFFFFF;
: ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਬੈਕਗਰਾਊਂਡ ਰੰਗ ਨੂੰ ਸਫੈਦ (#FFFFFF) 'ਤੇ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਨਿਸ਼ਾਨਾ ਤੱਤ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਸਫੈਦ ਪਿਛੋਕੜ ਹੋਵੇਗੀ.line-height: 100%;
: ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਲਾਈਨ ਦੀ ਉਚਾਈ ਨੂੰ ਫੌਂਟ ਆਕਾਰ ਦੇ 100% ਤੱਕ ਸੈੱਟ ਕਰਦੀ ਹੈ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਟੈਕਸਟ ਲਾਈਨਾਂ ਫੌਂਟ ਦੇ ਆਕਾਰ ਦੇ ਅਨੁਸਾਰ ਵਿੱਥ ਰੱਖਦੀਆਂ ਹਨ।margin: 10px;
: ਇਹ ਸੰਪੱਤੀ ਪੂਰੇ ਤੱਤ ਦੇ ਦੁਆਲੇ 10 ਪਿਕਸਲ ਦਾ ਹਾਸ਼ੀਆ ਜੋੜਦੀ ਹੈ। ਇਹ ਇਸ ਤੱਤ ਅਤੇ ਪੰਨੇ 'ਤੇ ਹੋਰ ਤੱਤਾਂ ਵਿਚਕਾਰ ਵਿੱਥ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਪ੍ਰਦਾਨ ਕੀਤਾ CSS ਕੋਡ ਕਲਾਸ “ਕੋਡ” ਵਾਲੇ HTML ਪੈਰਿਆਂ ਲਈ ਇੱਕ ਸ਼ੈਲੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਇਹਨਾਂ ਪੈਰਿਆਂ ਲਈ ਫੌਂਟ, ਫੌਂਟ ਆਕਾਰ, ਬਾਰਡਰ ਸ਼ੈਲੀ, ਬਾਰਡਰ ਚੌੜਾਈ, ਪੈਡਿੰਗ, ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ, ਲਾਈਨ ਦੀ ਉਚਾਈ, ਅਤੇ ਹਾਸ਼ੀਏ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਇਸ ਸ਼ੈਲੀ ਨੂੰ ਇੱਕ ਖਾਸ ਦਿੱਖ ਦੇਣ ਲਈ ਇੱਕ Blogger ਪੋਸਟ ਵਿੱਚ ਕੋਡ ਸਨਿੱਪਟ ਜਾਂ ਪ੍ਰੀਫਾਰਮੈਟ ਕੀਤੇ ਟੈਕਸਟ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਇੱਥੇ ਇਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
p.code {
ਫੌਂਟ-ਫੈਮਿਲੀ: ਕੋਰੀਅਰ ਨਵਾਂ;
ਫੌਂਟ-ਸਾਈਜ਼: 8pt;
ਬਾਰਡਰ-ਸ਼ੈਲੀ: ਇਨਸੈੱਟ;
ਬਾਰਡਰ-ਚੌੜਾਈ: 3px;
ਪੈਡਿੰਗ: ਐਕਸਯੂ.ਐੱਨ.ਐੱਮ.ਐੱਮ.ਐਕਸ.
ਪਿਛੋਕੜ-ਰੰਗ: #FFFFFF;
ਲਾਈਨ-ਉਚਾਈ: 100%;
ਹਾਸ਼ੀਆ: 10px;
}
ਹੈਡਿੰਗ ਕੋਡਿੰਗ!