سی ایس ای متن

CSS ਟੈਕਸਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨਾਲ ਟੈਕਸਟ ਦੇ ਦਿਸ਼ਾ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਟੈਕਸਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਤੁਸੀਂ ਟੈਕਸਟ ਦੇ ਰੰਗ, ਗ੍ਰੁਪ ਅੰਤਰ, ਟੈਕਸਟ ਦੀ ਸਮਾਨਤਾ, ਸਨਮਾਨ, ਟੈਕਸਟ ਸਿਕ੍ਰੇਨ ਕਰਨਾ ਆਦਿ ਬਦਲ ਸਕਦੇ ਹੋ

تکسر متن

ਵੈੱਬ ਪੰਨੇ 'ਤੇ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਪਹਿਲੇ ਵਾਕ ਨੂੰ ਸਿਕ੍ਰੇਨ ਕਰਨਾ, ਇਹ ਸਭ ਤੋਂ ਆਮ ਟੈਕਸਟ ਫਾਰਮੈਟਿੰਗ ਪ੍ਰਭਾਵ ਵਿਚ ਹੈ。

CSS ਨੇ ਪ੍ਰਦਾਨ ਕੀਤਾ ਹੈ ਟੈਕਸਟ-ਇੰਡੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾਇਹ ਪ੍ਰਤੀਯੋਗਿਤਾ ਟੈਕਸਟ ਸਿਕ੍ਰੇਨ ਨੂੰ ਸੌਖੇ ਤਰੀਕੇ ਨਾਲ ਸੰਭਵ ਬਣਾਉਂਦੀ ਹੈ。

ਟੈਕਸਟ-ਇੰਡੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਸਾਰੇ ਐਲੀਮੈਂਟਾਂ ਦੇ ਪਹਿਲੇ ਵਾਕ ਨੂੰ ਇੱਕ ਨਿਰਧਾਰਿਤ ਲੰਬਾਈ ਤੋਂ ਸਿਕ੍ਰੇਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉਹ ਨੈਗਟਿਵ ਵੀ ਹੋ ਸਕਦਾ ਹੈ。

这个属性最常见的用途是将落的首行缩进，下面的规则会使所有落的首行缩进 5 em：

p {text-indent: 5em;}

Note:一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如落）的首行中有一个图像，它会随该行的其余文本移动。

ਸੁਝਾਅ:ਜੇਕਰ ਇੱਕ ਇੰਡੋਲ ਐਲੀਮੈਂਟ ਦੇ ਪਹਿਲੇ ਪ੍ਰਾਗਰਾਮ ਨੂੰ 'ਸਕਰੋਲ' ਕਰਨਾ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ ਬਾਹਰੀ ਜਾਂ ਅੰਦਰੂਨੀ ਮਾਰਜਿਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਨੂੰ ਪੈਦਾ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਨੈਗਟਿਵ ਮੁੱਲ ਦੀ ਵਰਤੋਂ

text-indent ਨੂੰ ਨੈਗਟਿਵ ਮੁੱਲ ਨਾਲ ਵੀ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸ ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਨਾਲ ਕਈ ਆਕਰਸ਼ਕ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ 'ਹੰਗਿੰਗ ਇੰਡੈਂਟੇਸ਼ਨ' ਜਿਸ ਵਿੱਚ ਪਹਿਲੇ ਪ੍ਰਾਗਰਾਮ ਵਾਲੇ ਟੈਕਸਟ ਐਲੀਮੈਂਟ ਦੇ ਖੱਬੇ ਕਿਨਾਰੇ ਤੇ ਸਥਾਪਤ ਹੁੰਦੇ ਹਨ:

p {text-indent: -5em;}

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

p {text-indent: -5em; padding-left: 5em;}

ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਦੀ ਵਰਤੋਂ

text-indent ਸਾਰੇ ਲੰਬਾਈ ਇਕਾਈਆਂ ਨੂੰ ਵਰਤ ਸਕਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਵੀ ਸ਼ਾਮਲ ਹੈ。

ਪ੍ਰਤੀਸ਼ਤ ਸਕਰੋਲ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਪ੍ਰਾਪਰ ਦੇ ਅਨੁਸਾਰ ਹੈ। ਫਿਰ ਵੀ, ਜੇਕਰ ਸਕਰੋਲ ਵਾਲੇ ਮੁੱਲ 20% ਦਾ ਮੁੱਲ ਹੈ, ਤਾਂ ਪ੍ਰਭਾਵਿਤ ਐਲੀਮੈਂਟ ਦੇ ਪਹਿਲੇ ਪ੍ਰਾਗਰਾਮ ਵਾਲੇ ਟੈਕਸਟ ਵਾਲੇ ਪਿਕਸਲ ਦੇ ਪ੍ਰਾਪਰ ਦੇ 20% ਵਾਲੇ ਸਕਰੋਲ ਹੋਵੇਗਾ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, ਸਕਰੋਲ ਮੁੱਲ ਪ੍ਰਾਪਰ ਦੇ ਮੁੱਲ ਦਾ 20% ਹੈ, ਯਾਨੀ 100 ਪਿਕਸਲ:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

ਮੁਰੀਦ

text-indent ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਮੁਰੀਦ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਦੇਖੋ ਨਿਮਨ ਟੈਗ:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

ਇਸ ਟੈਗ ਵਿੱਚ ਦਾ ਪ੍ਰਾਗਰਾਮ 50 ਪਿਕਸਲ ਤੱਕ ਸਕਰੋਲ ਹੋਵੇਗਾ, ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਇਹ ਪ੍ਰਾਗਰਾਮ id ਵਾਲੇ div ਐਲੀਮੈਂਟ ਦੇ ਸਕਰੋਲ ਵਾਲੇ ਮੁੱਲ ਨੂੰ ਲੈ ਲਿਆ ਹੈ。

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

ਸੁਝਾਅ:ਬਲਕ ਐਲੀਮੈਂਟ ਜਾਂ ਟੇਬਲ ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਾਨ ਕਰਨ ਲਈ, ਇਨ੍ਹਾਂ ਐਲੀਮੈਂਟਾਂ 'ਤੇ ਉਚਿਤ ਲੈਫਟ ਅਤੇ ਰਾਇਟ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨਾ ਹੁੰਦਾ ਹੈ。

text-align:center ਅਤੇ <CENTER>

ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ ਕਿ text-align:center ਅਤੇ <CENTER> ਐਲੀਮੈਂਟ ਦਾ ਕੰਮ ਇੱਕ ਜਾਂਦਾ ਹੈ, ਲੇਕਿਨ ਇਹ ਅਸਲ ਵਿੱਚ ਬਹੁਤ ਅਲੱਗ ਹਨ。

<CENTER> ਨਾ ਸਿਰਫ਼ ਟੈਕਸਟ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ, ਸਗੋਂ ਪੂਰੇ ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਾਨ ਕਰਦਾ ਹੈ। text-align ਐਲੀਮੈਂਟ ਦੇ ਸਮਾਨ ਨੂੰ ਨਿਯੰਤਰਿਤ ਨਹੀਂ ਕਰਦਾ, ਸਗੋਂ ਇਸ ਦੇ ਅੰਦਰੀ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ। ਐਲੀਮੈਂਟ ਦੀ ਕੋਈ ਵੀ ਕਿਸਮ ਦੀ ਸ਼ੁਰੂ ਵਿੱਚ ਨਹੀਂ ਹੋਵੇਗੀ, ਸਿਰਫ਼ ਉਸ ਵਿੱਚ ਦੇ ਟੈਕਸਟ ਪ੍ਰਭਾਵਿਤ ਹੋਵੇਗਾ。

justify

ਆਖਰੀ ਪੱਧਰੀ ਸਮਾਨ ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ਹੈ।

ਦੁਵੱਲੇ ਸਮਾਨ ਟੈਕਸਟ ਵਿੱਚ, ਟੈਕਸਟ ਲਾਈਨ ਦੇ ਦੋਵੇਂ ਪੱਖ ਫਾਦਰ ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰੀ ਕਿਨਾਰਿਆਂ 'ਤੇ ਰਹਿੰਦੇ ਹਨ। ਫਿਰ ਸ਼ਬਦ ਅਤੇ ਅੱਖਰਾਂ ਦਰਮਿਆਨ ਦੀ ਜਗ੍ਹਾ ਸੰਤੁਲਿਤ ਕਰਨ ਲਈ ਸੰਤੁਲਿਤ ਕੀਤੀ ਜਾਵੇਗੀ, ਤਾਕਿ ਹਰ ਲਾਈਨ ਦੀ ਲੰਬਾਈ ਇੱਕ ਜਾਂਦੀ ਹੋਵੇ। ਤੁਸੀਂ ਮੰਨ ਸਕਦੇ ਹੋ ਕਿ ਦੁਵੱਲੇ ਸਮਾਨ ਟੈਕਸਟ ਪ੍ਰਿੰਟਿੰਗ ਦੇ ਖੇਤਰ ਵਿੱਚ ਬਹੁਤ ਮਸ਼ਹੂਰ ਹੈ。

ਧਿਆਨ ਦੇਣਾ ਹੈ ਕਿ ਦੁਵੱਲੇ ਸਮਾਨ ਟੈਕਸਟ ਕਿਵੇਂ ਫਾਦਰ ਐਲੀਮੈਂਟ ਦੇ ਬਾਹਰੀ ਕਿਨਾਰਿਆਂ ਦਰਮਿਆਨ ਦੀ ਜਗ੍ਹਾ ਭਰੇ ਜਾਵੇਗਾ, ਇਹ ਯੂਜ਼ਰ ਏਜੈਂਟ (ਨਹੀਂ ਕੀ CSS) ਦੁਆਰਾ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾਵੇਗਾ। ਵਿਸਤਾਰ ਲਈ ਦੇਖੋ: CSS text-align ਪ੍ਰਤੀਯੋਗਿਤਾ ਪੰਨਾ。

ਸ਼ਬਦ ਅੰਤਰ

word-spacing ਪ੍ਰਤੀਯੋਗਿਤਾਸ਼ਬਦ (ਸ਼ਬਦ) ਦਰਮਿਆਨ ਦੀ ਮਿਆਰੀ ਜਗ੍ਹਾ ਬਦਲ ਸਕਦੀ ਹੈ। ਇਸ ਦੀ ਮੂਲ ਮੁੱਲ normal ਨੂੰ ਸੈਟ 0 ਨਾਲ ਇੱਕ ਜਾਂਦਾ ਹੈ。

word-spacing ਪ੍ਰਤੀਯੋਗਿਤਾ ਇੱਕ ਸਕਾਰਾਤਮਕ ਲੰਬਾਈ ਵਾਲਾ ਮੁੱਲ ਜਾਂ ਨਕਾਰਾਤਮਕ ਲੰਬਾਈ ਵਾਲਾ ਮੁੱਲ ਸਵੀਕਾਰ ਕਰਦੀ ਹੈ। ਜੇਕਰ ਇੱਕ ਸਕਾਰਾਤਮਕ ਲੰਬਾਈ ਵਾਲਾ ਮੁੱਲ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਸ਼ਬਦਾਂ ਦਰਮਿਆਨ ਦੀ ਜਗ੍ਹਾ ਵਧੇਗੀ। word-spacing ਨੂੰ ਨਕਾਰਾਤਮਕ ਮੁੱਲ ਨਾਲ ਸੈਟ ਕਰਨ ਨਾਲ ਉਹ ਨੇੜੇ ਹੋ ਜਾਵੇਗਾ:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
ਇਹ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਹੈ। ਸ਼ਬਦਾਂ ਦਰਮਿਆਨ ਦੀਆਂ ਜਗ੍ਹਾਵਾਂ ਵਧਾਈਆਂ ਜਾਣਗੀਆਂ。
</p>
<p class="tight">
ਇਹ ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ ਹੈ।ਸ਼ਬਦਾਂ ਦਰਮਿਆਨ ਦੀ ਦੂਰੀ ਘਟਾਈ ਜਾਵੇਗੀ。
</p>

ਉਦਾਹਰਣ TIY: ਸ਼ਬਦ ਦੀ ਦੂਰੀ ਵਧਾਉਣ ਜਾਂ ਘਟਾਉਣਾ (ਕਿਸਮ ਦੀ ਦੂਰੀ)

Note:ਜੇਕਰ ਤੁਸੀਂ CSS ਵਿੱਚ 'ਕਿਸਮ' (word) ਦੀ ਵਿਆਖਿਆ ਨੂੰ ਸਮਝਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਲਈ ਪ੍ਰਵੇਸ਼ ਕਰੋ CSS word-spacing ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪੰਨਾ。

ਅੱਖਰ ਦੂਰੀ

letter-spacing 属性word-spacing ਦੇ ਅਲਾਵਾ, letter-spacing ਦੀ ਵਰਤੋਂ ਅੱਖਰਾਂ ਜਾਂ ਅੱਖਰਾਂ ਦਰਮਿਆਨ ਦੀ ਦੂਰੀ ਨਿਯੰਤਰਿਤ ਕਰਦੀ ਹੈ。

word-spacing ਦੇ ਮੁਕਾਬਲੇ, letter-spacing ਦੇ ਮੁੱਲ ਸਾਰੇ ਲੰਬਾਈਆਂ ਵਿੱਚ ਹਨ।ਮੂਲ ਕੀਵਾਰਡ normal (ਇਹ letter-spacing:0 ਨਾਲ ਬਰਾਬਰ ਹੈ) ਹੈ।ਇਨਪੁਟ ਕੀਤੀ ਗਈ ਲੰਬਾਈ ਮੁੱਲ ਨਾਲ ਅੱਖਰਾਂ ਦਰਮਿਆਨ ਦੀ ਦੂਰੀ ਵਧਾਉਣ ਜਾਂ ਘਟਾਉਣ ਦਾ ਮੁੱਲ ਹੁੰਦਾ ਹੈ:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

ਉਦਾਹਰਣ TIY: ਅੱਖਰਾਂ ਦਰਮਿਆਨ ਦੀ ਦੂਰੀ ਨਿਯੰਤਰਿਤ ਕਰੋ

ਅੱਖਰ ਟਰਾਂਸਫਾਰਮ

text-transform 属性ਟੈਕਸਟ ਦੇ ਮਾਪ ਨੂੰ ਹੱਲਾਉਣਾ।ਇਸ ਅਤੀਤੀ ਵਿੱਚ 4 ਮੁੱਲ ਹਨ:

  • none
  • uppercase
  • lowercase
  • capitalize

ਮੂਲ ਮਾਪ none ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਕੋਈ ਤਬਦੀਲੀ ਨਹੀਂ ਕਰਦਾ, ਸਰੋਤ ਦੇ ਸਾਹਮਣੇ ਮੂਲ ਮਾਪ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ।ਮਤਲਬ ਹੈ ਕਿ uppercase ਅਤੇ lowercase ਟੈਕਸਟ ਨੂੰ ਪੂਰੇ ਬੜੇ ਅੱਖਰ ਅਤੇ ਪੂਰੇ ਛੋਟੇ ਅੱਖਰ ਵਿੱਚ ਬਦਲ ਦੇਣਗੇ।ਆਖਰਿਵ, capitalize ਕੇਵਲ ਹਰ ਸ਼ਬਦ ਦੀ ਪਹਿਲੀ ਅੱਖਰ ਨੂੰ ਬੜੇ ਅੱਖਰ ਵਿੱਚ ਬਦਲੇਗਾ。

ਇੱਕ ਅਤੀਤੀ ਦੇ ਰੂਪ 'ਚ, text-transform ਦੀ ਵਰਤੋਂ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਨਹੀਂ ਹੋ ਸਕਦੀ, ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਅਤੇ ਤੇ ਸਾਰੇ h1 ਅਣੁ ਨੂੰ ਬੜੇ ਅੱਖਰ ਵਿੱਚ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹ ਅਤੀਤੀ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੋ ਜਾਵੇਗੀ।ਤੁਸੀਂ ਸਾਰੇ h1 ਅਣੂ ਦੇ ਸਮਾਚਾਰ ਨੂੰ ਸੰਸ਼ੋਧਤ ਨਹੀਂ ਕਰਨੇ ਚਾਹੀਦੇ, ਬਿਨਾਂ ਕਿ text-transform ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਇਹ ਸੰਸ਼ੋਧਨ ਕਰ ਸਕਦੇ ਹੋ:

h1 {text-transform: uppercase}

text-transform ਦੀ ਵਰਤੋਂ ਦੋ ਪਹਿਲੂਆਂ ਦਾ ਲਾਭ ਹੁੰਦਾ ਹੈ।ਪਹਿਲਾਂ, ਇੱਕ ਸਰਲ ਨਿਯਮ ਨਾਲ ਇਹ ਸੰਸ਼ੋਧਨ ਕਰਨਾ ਹੈ, ਬਿਨਾਂ ਕਿ h1 ਅਣੁ ਨੂੰ ਸੰਸ਼ੋਧਤ ਕੀਤੇ ਜਾਵੇ।ਦੂਜੇ ਤੌਰ 'ਤੇ, ਜੇਕਰ ਤੁਸੀਂ ਭਵਿੱਖ ਵਿੱਚ ਸਾਰੇ ਅੱਖਰਾਂ ਦਾ ਮੂਲ ਮਾਪ ਵਾਪਸ ਲਿਆਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸੰਸ਼ੋਧਨ ਕਰਨਾ ਹੋਰ ਅਸਾਨ ਹੋਵੇਗਾ।

ਉਦਾਹਰਣ TIY: ਟੈਕਸਟ ਵਿੱਚ ਅੱਖਰਾਂ ਦਾ ਮਾਪ ਨਿਯੰਤਰਿਤ ਕਰੋ

text-decoration 属性

ਅਗਲੇ, ਅਸੀਂ ਚਰਚਾ ਕਰਾਂਗੇ text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

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

a {text-decoration: none;}

Note:ਜੇਕਰ ਇਸ ਤਰ੍ਹਾਂ ਦਾ ਨਿਯਮ ਲਗਾਇਆ ਜਾਵੇ ਤਾਂ ਲਿੰਕ ਦੀ ਹੇਠਲੀ ਲਾਈਨ ਨੂੰ ਹਟਾਇਆ ਜਾਵੇਗਾ, ਤਾਂ ਅੰਕੜੇ ਅਤੇ ਸਧਾਰਨ ਪਾਠ ਦਰਮਿਆਨ ਵਿਜੂਅਲ ਤੌਰ 'ਤੇ ਇੱਕਮਾਤਰ ਅੰਤਰ ਰੰਗ ਹੋਵੇਗਾ (ਕੁਝ ਹੱਦ ਤੱਕ ਇਹ ਤਰ੍ਹਾਂ ਹੀ ਹੋਵੇਗਾ, ਪਰ ਇਹ ਰੰਗ ਹਰਦਾਸਤ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਸੁਨਿਸ਼ਚਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ)।

ਇੱਕ ਨਿਯਮ ਵਿੱਚ ਕਈ ਸਜਾਇਕਤਾਵਾਂ ਨੂੰ ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਸਾਰੇ ਲਿੰਕਾਂ ਨੂੰ ਹੇਠਲੀ ਅਤੇ ਉੱਪਰੀ ਲਾਈਨ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਨਿਮਨਲਿਖਤ ਨਿਯਮ ਦਿਆਂ:

a:link a:visited {text-decoration: underline overline;}

ਲੇਕਿਨ ਧਿਆਨ ਦੇਣਾ ਹੈ ਕਿ ਜੇਕਰ ਦੋ ਵੱਖਰੇ ਸਜਾਇਕਤਾਵਾਂ ਨੇ ਇੱਕ ਅਮਲ ਨਾਲ ਮੇਲ ਖਾਂਦੀਆਂ ਹਨ, ਤਾਂ ਜਿੱਤਣ ਵਾਲੀ ਕੀਮਤ ਦੂਜੀ ਕੀਮਤ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੋਂ ਬਦਲ ਦੇਵੇਗੀ। ਨਿਮਨਲਿਖਤ ਨਿਯਮ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

ਦਿੱਤੇ ਹੋਏ ਨਿਯਮ ਲਈ, ਸਾਰੇ class ਦੇ ਹੋਣ ਵਾਲੇ h2 ਅਮਲਾਂ ਨੂੰ ਇੱਕ ਹੀ ਦਾਖਲ ਲਾਈਨ ਸਜਾਇਕਤਾ ਦਿਖਾਈ ਦੇਵੇਗੀ, ਨਾ ਕਿ ਹੇਠਲੀ ਲਾਈਨ ਜਾਂ ਉੱਪਰੀ ਲਾਈਨ, ਕਿਉਂਕਿ text-decoration ਕੀਮਤ ਬਦਲ ਦੇਣਗੇ ਨਹੀਂ ਕਿ ਸਾਂਝੇ ਹੋਣਗੇ。

ਖਾਲੀ ਪਦਾਂ ਦਾ ਪ੍ਰਬੰਧਨ

white-space ਵਿਸ਼ੇਸ਼ਤਾਇਹ ਉਪਭੋਗਤਾ ਏਜੰਟ ਦੁਆਰਾ ਸਰੋਤ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਖਾਲੀ ਪਦਾਂ, ਲਾਈਨ ਬੰਦੀਆਂ ਅਤੇ tab ਅੱਖਰਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ।

ਇਸ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਨਾਲ, ਬਰਾਉਜ਼ਰ ਨੂੰ ਅੱਖਰਾਂ ਦਰਮਿਆਨ ਅਤੇ ਪਾਠ ਲਾਈਨਾਂ ਦਰਮਿਆਨ ਖਾਲੀ ਪਦਾਂ ਦੇ ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਦੇ ਢੰਗ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦੇ ਹਨ। ਕੁਝ ਹੱਦ ਤੱਕ, ਮੂਲਭੂਤ XHTML ਪ੍ਰਬੰਧਨ ਨੇ ਖਾਲੀ ਪਦਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕੀਤਾ ਹੈ: ਉਹ ਸਾਰੇ ਖਾਲੀ ਪਦਾਂ ਨੂੰ ਇੱਕ ਖਾਲੀ ਜਗ੍ਹਾ ਵਿੱਚ ਮਿਲਾ ਦਿੰਦੇ ਹਨ। ਇਸ ਲਈ ਦਿੱਤੇ ਹੋਏ ਟੈਗ ਨੂੰ ਵੈੱਬ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਦਿਖਾਉਣ ਤੱਕ, ਅੱਖਰਾਂ ਦਰਮਿਆਨ ਸਿਰਫ ਇੱਕ ਖਾਲੀ ਜਗ੍ਹਾ ਦਿਖਾਈ ਦੇਵੇਗੀ, ਅਤੇ ਉਸ ਅਮਲ ਵਿੱਚ ਨਹੀਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

This     paragraph has    many
    spaces           in it.

可以用以下声明显式地设置这种默认行为：

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

实例 TIY ：white-space: normal

值 pre

不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

实例 TIY ：white-space: pre

Note:经测试，IE 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例。

值 nowrap

与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

مثال: white-space: nowrap

مقادیر pre-wrap اور pre-line

CSS2.1 میں مقادیر pre-wrap اور pre-line شروع کی گئی تھی، جو پچھلے نسلوں کی CSS میں نہیں تھی تھی۔ ان مقادیر کا مقصد اس بات کو اجازت دینا ہوا تھا کہ خالقین بہتر طور پر خالی علامات کا بندوبست کرسکیں

اگر عناصر کی وائی-اسپیس کا مقادیر pre-wrap رکھا گیا ہوا تو عناصر میں کلمات کا سفر بند ہوجائیگا، لیکن کلمات کی سطر کا چرن نرمی سے ہوگا۔ اگر اس مقادیر کو اس طرح رکھا گیا تو سورس کی کلمات میں سطر کا بندار اور پیدا ہونے والا سطر کا بندار بھی رکھا جائیگاً pre-line کا قدم pre-wrap کا مخالف ہوگا، جو عادتاً کلمات کی سفر بند کی جاندی ہوتی ہیں، لیکن سطر کا بندار رکھتا ہوگاً

Example TIY: white-space: pre-wrap

Example TIY: white-space: pre-line

Note:We tested the two examples above in IE7 and FireFox2.0 browsers, but the result is that the values pre-wrap and pre-line are not well supported.

Summary

The following table summarizes the behavior of the white-space property:

Value Space character Line feed Automatic line break
pre-line Merge Retain Allow
normal Merge Ignore Allow
nowrap Merge Ignore Disallow
pre Retain Retain Disallow
pre-wrap Retain Retain Allow

Text direction

If you are reading an English book, you will read from left to right and from top to bottom, which is the flow direction of English. However, not all languages are like this. We know that ancient Chinese is read from right to left, of course, including Hebrew and Arabic, etc. CSS2 introduced a property to describe its directionality.

direction propertyIt affects the writing direction of block-level elements in Chinese, the layout direction of table columns, the direction of horizontal filling of its element box, and the position of the last line in elements aligned at both ends.

Note:For inline elements, only when unicode-bidi propertyThe direction property will only be applied when set to embed or bidi-override.

The direction property has two values: ltr and rtl. Most of the time, the default value is ltr, which displays text from left to right. If you want to display text from right to left, you should use the value rtl.

CSS text example:

set text color
This example demonstrates how to set the color of the text.
Set the background color of the text
This example shows how to set the background color of part of the text.
Specify character spacing
This example demonstrates how to increase or decrease the character spacing.
Set line spacing using a percentage
This example demonstrates how to set the line spacing in a paragraph using a percentage value.
Set line spacing using a pixel value
This example demonstrates how to set the line spacing in a paragraph using a pixel value.
Set line spacing using a number
This example demonstrates how to set the line spacing in a paragraph using a number.
Align text
This example demonstrates how to align the text.
Decorate text
This example demonstrates how to add decorations to the text.
تکسر متن
This example demonstrates how to indent the first line of text.
Control text letters
This example demonstrates how to control the letters in the text.
Prevent text wrapping in an element
This example demonstrates how to prevent text wrapping inside an element.
Increase word spacing
This example demonstrates how to increase the space between words in a paragraph.

CSS text property

property description
color set text color
direction تکسر کی سمت سیٹ آپ
line-height لائن کی بلندی سیٹ آپ
letter-spacing حرف کی فاصلہ سیٹ آپ
text-align عنصر میں متن کو درست کرنا
text-decoration تکسر میں آرائش دینا
text-indent عنصر میں متن کا پہلا سطر کو سجست آپ
text-shadow تکسر کا شادی سیٹ آپ، سی ایس ای2 میں شامل ہوتا ہے، لیکن سی ایس ای2.1 میں محفوظ نہیں رہا ہے。
text-transform عنصر میں حروف کا کنٹرول
unicode-bidi تکسر کی سمت سیٹ آپ
white-space عنصر میں خالی کا طریقہ کار سیٹ آپ
word-spacing فونت کی فاصلہ کا سیٹ آپ