Дебелина на текста в CSS

В този урок ще изучим свойството font-weight, което позволява текстът да се направи удебелен или обратно - да се отмени дебелината (например за заглавия, които са удебелени по подразбиране). За да направите текста удебелен, трябва да зададете стойност bold, а за да отмените дебелината - стойност normal.

Това свойство работи аналогично на тага b, който вече разгледахме. Разликата е, че чрез CSS управлението на дебелината е много по-удобно - може, например, да накарате всички абзаци да станат удебелени, а всички заглавия - неугдебелени, като направите само няколко записи в CSS файла.

Ако правех удебелен чрез тага b - щеше да се наложи съдържанието на всеки абзац да се обгради с този таг, а това би било много отнемащо време (а ако след това реша да махна дебелината на абзаците - ще трябва да премахна всички тези тагове, представете си колко е това излишна, безполезна работа).

В следващия пример ще направим всички абзаци удебелени, а всички заглавия h2 - неугдебелени:

html<h2>Title</h2>
<p>
  This is a paragraph with text.
</p>

cssh2 {
  font-weight: normal;
}
p {
  font-weight: bold;
}

Результат:

html<table border="1">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>200$</td>
  </tr>
  <tr>
    <td>Nick</td>
    <td>Mayers</td>
    <td>300$</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>Jonson</td>
    <td>400$</td>
  </tr>
</table>