Grosimea textului în CSS

În această lecție vom studia proprietatea font-weight, care permite să facem textul îngroșat sau, dimpotrivă, să anulăm îngroșarea (de exemplu, pentru titluri, care sunt îngroșate în mod implicit). Pentru a face textul îngroșat, trebuie să specificați valoarea bold, iar pentru a anula îngroșarea - valoarea normal.

Această proprietate funcționează similar cu tagul b, pe care l-am analizat deja. Diferența constă în faptul că prin CSS este mult mai convenabil să gestionăm îngroșarea - putem, de exemplu, să forțăm toate paragrafele să devină îngroșate, iar toate titlurile - să nu fie îngroșate, făcând doar câteva intrări în fișierul CSS.

Dacă aș fi făcut textul îngroșat prin tagul b - ar fi trebuit să învălui conținutul fiecărui paragraf în acest tag, iar asta ar fi fost foarte consumator de timp (iar dacă mai târziu aș dori să elimin îngroșarea paragrafelor - va trebui să elimin toate aceste tag-uri, imaginați-vă cât de multă muncă inutilă și fără sens ar fi).

În următorul exemplu vom face toate paragrafele îngroșate, iar toate titlurile h2 - neîngroșate:

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>