Grubość tekstu w CSS

W tej lekcji poznamy właściwość font-weight, która pozwala uczynić tekst pogrubionym lub odwrotnie - usunąć pogrubienie (na przykład dla nagłówków, które są pogrubione domyślnie). Aby uczynić tekst pogrubionym, należy podać wartość bold, a aby usunąć pogrubienie - wartość normal.

Ta właściwość działa podobnie do znacznika b, który już omówiliśmy. Różnica polega na tym, że poprzez CSS znacznie wygodniej jest zarządzać grubością - można na przykład sprawić, aby wszystkie akapity stały się pogrubione, a wszystkie nagłówki - niepogrubione, robiąc zaledwie kilka wpisów w pliku CSS.

Gdybym miał robić pogrubienie za pomocą znacznika b - musiałbym zawartość każdego akapitu opakować w ten znacznik, a to byłoby bardzo czasochłonne (a jeśli później zechcę usunąć pogrubienie akapitom - będę musiał usunąć wszystkie te znaczniki, wyobraźcie sobie, ile to zbędnej, bezużytecznej pracy).

W następnym przykładzie sprawimy, że wszystkie akapity będą pogrubione, a wszystkie nagłówki h2 - niepogrubione:

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>