13.Жирность текста на CSS

13.Жирность текста на CSS


В данном уроке мы с вами изучим свойство font-weight, которое позволяет сделать текст жирным или наоборот - отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold, а чтобы отменить жирность - значение normal.

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

Если бы я делал жирный через тег b - мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам - мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).

В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 - нежирными:

<h2>Заголовок</h2>
<p>
абзац с текстом
</p>h2 {
font-weight: normal;
}
p {
font-weight: bold;
}

Результат выполнения кода:

Заголовок абзац с текстом

Задача 1

Скопируйте следующий HTML код себе на страницу:

<table border="1">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Зарплата</th>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>200$</td>
</tr>
<tr>
<td>Николай</td>
<td>Петров</td>
<td>300$</td>
</tr>
</table>

Результат выполнения кода:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Петров 300$

Установите таблице ширину в 500px

высоту в 300px

Сделайте ячейки td жирными и по центру

ячейки th - нежирными

Источник: