ਇੱਕ ਵੈਬਸਾਈਟ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਸਮੇਂ, ਟੈਕਸਟ ਨੂੰ ਫਾਰਮੈਟ ਕਰਨਾ ਇੱਕ ਆਕਰਸ਼ਕ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਹੈ।
CSS ਕਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਟੈਕਸਟ ਦੇ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਫੌਂਟ ਦਾ ਰੰਗ, ਆਕਾਰ, ਪਰਿਵਾਰ, ਅਲਾਈਨਮੈਂਟ, ਸਪੇਸਿੰਗ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸ਼ਾਮਲ ਹੈ।
ਹੇਠਾਂ ਹਰੇਕ ਸੰਪੱਤੀ ਲਈ ਉਦਾਹਰਨਾਂ ਦੇ ਨਾਲ, ਹਰੇਕ ਟੈਕਸਟ ਫਾਰਮੈਟਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾ 'ਤੇ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਗਾਈਡ ਹੈ।
ਫੌਂਟ ਦਾ ਰੰਗ
ਪੈਰਾਮੀਟਰ: ਇੱਕ ਰੰਗ ਮੁੱਲ, ਜੋ ਇੱਕ ਰੰਗ ਦਾ ਨਾਮ(ਉਦਾਹਰਨ ਲਈ, red), ਹੈਕਸ ਕੋਡ(ਉਦਾਹਰਨ ਲਈ, "#FF0000"), RGB ਮੁੱਲ(ਉਦਾਹਰਨ ਲਈ, "rgb(255, 0, 0)"), ਜਾਂ RGBA ਮੁੱਲ(ਉਦਾਹਰਨ ਲਈ) ਹੋ ਸਕਦਾ ਹੈ, "rgba(255, 0, 0, 0.5)")।
p {
color: blue;
}
ਫੌਂਟ ਦਾ ਆਕਾਰ
ਪੈਰਾਮੀਟਰ: ਇੱਕ ਆਕਾਰ ਦਾ ਮੁੱਲ, ਜੋ ਪਿਕਸਲ ਵਿੱਚ ਹੋ ਸਕਦਾ ਹੈ(ਉਦਾਹਰਨ ਲਈ, "16px"), em ਯੂਨਿਟਾਂ(ਉਦਾਹਰਨ ਲਈ, "1em"), rem ਯੂਨਿਟਾਂ(ਉਦਾਹਰਨ ਲਈ, "1.2rem"), ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਇਕਾਈਆਂ(ਉਦਾਹਰਨ ਲਈ, "10vw"), ਵਿਊਪੋਰਟ ਉਚਾਈ ਇਕਾਈਆਂ(ਉਦਾਹਰਨ ਲਈ, "5vh"), ਜਾਂ ਹੋਰ ਇਕਾਈਆਂ।
h1 {
font-size: 24px;
}
ਫੌਂਟ ਪਰਿਵਾਰ
ਪੈਰਾਮੀਟਰ: ਇੱਕ ਫੌਂਟ ਪਰਿਵਾਰ ਸੂਚੀ, ਤਰਜੀਹੀ ਕ੍ਰਮ ਵਿੱਚ ਨਿਰਧਾਰਤ ਕੀਤੀ ਗਈ ਹੈ। ਤੁਸੀਂ ਫੌਂਟ ਨਾਮ(ਉਦਾਹਰਨ ਲਈ, Arial) ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਡਬਲ ਕੋਟਸ(ਉਦਾਹਰਨ ਲਈ, " Times New Roman) ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਵਾਲੇ ਫੌਂਟ ਨਾਮ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।
body {
font-family: Arial, sans-serif;
}
ਫੌਂਟ ਦਾ ਭਾਰ ਅਤੇ ਸ਼ੈਲੀ
ਪੈਰਾਮੀਟਰ font-weight: normal(default), bold, bolder, lighter, ਜਾਂ ਸੰਖਿਆਤਮਕ ਮੁੱਲ 100 ਤੋਂ 900 ਤੱਕ।
ਪੈਰਾਮੀਟਰ font-style: normal(default), italic _
em {
font-style: italic;
}
strong {
font-weight: bold;
}
ਟੈਕਸਟ ਸਜਾਵਟ
ਪੈਰਾਮੀਟਰ: "none"(default), "underline", "overline", "line-through" ਜਾਂ ਸਪੇਸ ਦੁਆਰਾ ਵੱਖ ਕੀਤੇ ਮੁੱਲਾਂ ਦਾ ਸੁਮੇਲ।
a {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ
ਪੈਰਾਮੀਟਰ: "left"(default), "right", "center" or "justify".
p {
text-align: center;
}
ਰੇਖਾ ਦੀ ਉਚਾਈ ਅਤੇ ਹਾਸ਼ੀਏ
ਪੈਰਾਮੀਟਰ ਲਾਈਨ-ਉਚਾਈ: ਇੱਕ ਸੰਖਿਆਤਮਕ ਮੁੱਲ ਜਾਂ ਮੌਜੂਦਾ ਫੌਂਟ ਆਕਾਰ ਦਾ ਪ੍ਰਤੀਸ਼ਤ।
ਪੈਰਾਮੀਟਰ ਮਾਰਜਿਨ: ਇੱਕ ਮਾਪ ਮੁੱਲ, ਜਿਵੇਂ ਕਿ ਪਿਕਸਲ(px), em ਯੂਨਿਟ(em), rem ਯੂਨਿਟ(rem), ਆਦਿ।
p {
line-height: 1.5;
margin-bottom: 10px;
}
ਮਲਟੀਕਾਲਮ ਟੈਕਸਟ ਲੇਆਉਟ
ਪੈਰਾਮੀਟਰ: ਇੱਕ ਸਕਾਰਾਤਮਕ ਪੂਰਨ ਅੰਕ ਜਾਂ "auto"(default) ।
.container {
column-count: 2;
}
ਹੋਵਰ 'ਤੇ ਟੈਕਸਟ ਦਾ ਰੰਗ ਬਦਲੋ
ਕੋਈ ਖਾਸ ਪੈਰਾਮੀਟਰ ਨਹੀਂ, ਸਿਰਫ਼ ਸੂਡੋ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ :hover ।
a:hover {
color: red;
}
ਸਟੇਟ 'ਤੇ ਟੈਕਸਟ ਦਾ ਰੰਗ ਬਦਲਾਅ(ਸਰਗਰਮ, ਵਿਜ਼ਿਟ ਕੀਤਾ ਗਿਆ)
ਕੋਈ ਖਾਸ ਪੈਰਾਮੀਟਰ ਨਹੀਂ, ਸਿਰਫ਼ ਸੂਡੋ-ਕਲਾਸਾਂ :active ਅਤੇ :visited.
a:visited {
color: purple;
}
ਅਸੀਂ ਉਮੀਦ ਕਰਦੇ ਹਾਂ ਕਿ ਉਪਰੋਕਤ ਵਿਆਖਿਆਵਾਂ ਅਤੇ ਉਦਾਹਰਨਾਂ ਨੇ ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕੀਤੀ ਹੈ ਕਿ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ 'ਤੇ ਇੱਕ ਦ੍ਰਿਸ਼ਟੀਗਤ ਅਤੇ ਆਕਰਸ਼ਕ ਟੈਕਸਟ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ CSS ਵਿੱਚ ਟੈਕਸਟ ਫਾਰਮੈਟਿੰਗ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਹੈ।