CSS ਦੇ ਨਾਲ ਪੈਰਾਗਰਾਫ ਕਿਵੇਂ ਕਰੀਏ

ਟੈਕਸਟ-ਇੰਡੈਂਟ ਪ੍ਰਾਪਰਟੀ ਅਤੇ ਨਜ਼ਦੀਕੀ ਭੈਣ-ਭਰਾ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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

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

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

ਇਸ ਸੰਪੱਤੀ ਲਈ ਸਿੰਟੈਕਸ ਸਾਧਾਰਣ ਹੈ. ਇੱਥੇ ਤੁਸੀਂ ਦਸਤਾਵੇਜ ਦੇ ਸਾਰੇ ਪੈਰਿਆਂ ਨੂੰ ਪਾਠ-ਇੰਡੈਂਟ ਕਿਵੇਂ ਜੋੜਦੇ ਹੋ.

p {text-indent: 2em; }

ਇੰਡੈਂਟਸ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨਾ

ਇਕ ਤਰੀਕਾ ਹੈ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਇੰਡੈਂਟ ਵਿਚ ਪੈਰਾਗ੍ਰਾਫ ਕਰ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਪੈਰਿਆਂ ਨੂੰ ਇਕ ਕਲਾਸ ਵਿਚ ਜੋੜ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਇਸ ਲਈ ਇਹ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ ਵਿਚ ਇਕ ਕਲਾਸ ਜੋੜਨ ਲਈ ਹਰ ਪੈਰੇ ਨੂੰ ਸੋਧੋ. ਇਹ ਅਕੁਸ਼ਲ ਹੈ ਅਤੇ HTML ਕੋਡਿੰਗ ਵਧੀਆ ਪ੍ਰਥਾਵਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦਾ.

ਇਸਦੇ ਬਜਾਏ, ਤੁਹਾਨੂੰ ਇਸ ਗੱਲ ਤੇ ਵਿਚਾਰ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਕਦੋਂ ਤੁਸੀਂ ਪੈਰਾਗਰਾਫ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ. ਤੁਸੀਂ ਪੈਰਾਗਰਾਫ ਇੰਡੰਟ ਕਰਦੇ ਹੋ ਜੋ ਸਿੱਧੇ ਤੌਰ ਤੇ ਇਕ ਹੋਰ ਪੈਰਾ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ. ਅਜਿਹਾ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਬਾਂਹ ਸਹਿਭਾਗੀ ਚੋਣਕਾਰ ਨੂੰ ਵਰਤ ਸਕਦੇ ਹੋ. ਇਸ ਚੋਣਕਰਤਾ ਨਾਲ, ਤੁਸੀਂ ਹਰ ਇਕ ਪੈਰਾ ਦੀ ਚੋਣ ਕਰ ਰਹੇ ਹੋ ਜੋ ਤੁਰੰਤ ਇਕ ਹੋਰ ਪੈਰਾਗ੍ਰਾਫ ਤੋਂ ਅੱਗੇ ਹੁੰਦਾ ਹੈ.

p + p {text-indent: 2em; }

ਕਿਉਂਕਿ ਤੁਸੀਂ ਪਹਿਲੀ ਲਾਈਨ ਨੂੰ ਜੋੜ ਰਹੇ ਹੋ, ਤੁਹਾਨੂੰ ਇਹ ਵੀ ਯਕੀਨੀ ਬਣਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੈਰਿਆਂ ਦੇ ਵਿੱਚ ਕੋਈ ਵਾਧੂ ਸਪੇਸ ਨਾ ਹੋਵੇ (ਜੋ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਡਿਫਾਲਟ ਹੈ). ਸਟਾਈਲਿਸਟਿਕਲੀ ਤੌਰ 'ਤੇ, ਤੁਹਾਨੂੰ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਵਿਚਕਾਰ ਜਾਂ ਪਹਿਲੇ ਲਾਈਨ ਵਿੱਚ ਦਾਖਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਪਰ ਦੋਵੇਂ ਨਹੀਂ.

p {ਹਾਸ਼ੀਆ-ਹੇਠਾਂ: 0; ਪੈਡਿੰਗ-ਥੱਲ: 0; } p + p {ਹਾਸ਼ੀਆ-ਸਿਖਰ: 0; ਪੈਡਿੰਗ-ਟੌਪ: 0; }

ਨੈਗੇਟਿਵ ਇੰਡੈਂਟਸ

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

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

ਬਲਾਕਕੋਟ ਪੀ {text-indent: -5em; }

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

ਮਾਰਜਨ ਅਤੇ ਪੈਡਿੰਗ ਦੇ ਬਾਰੇ

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