Теория
Теория

Испытание: интерактивное расследование

Пришла пора испытания. Но испытание это не совсем обычное: в части вы изучали селекторы, но CSS-код сейчас вам писать не придётся. Редактор CSS заблокирован, а в его коде используются как раз те селекторы, которые вы изучили в этой части.

В HTML создана таблица с результатами соревнований четырёх спортсменов. В ней выводится имя участника, его очки в каждом из раундов и суммарный итог. В итоге среди спортсменов определились золотой, серебряный и бронзовый медалист, а один участник был дисквалифицирован.

А что же нужно сделать? Вам нужно проанализировать CSS-код и понять, какие именно правки нужно внести в разметку, чтобы все стили применялись к ней. Вот список того, что должно быть сделано:

нужно заменить некоторые теги на другие;
нужно прописать классы для некоторых элементов.

Подробная информация по таблицам и по оформлению текстов есть в соответствующих частях.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: интерактивное расследование</title>
    <link rel="stylesheet" href="challenge.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Результаты соревнования</h1>
    <table class="results">
      <tr>
        <th>Игрок</th>
        <th>Раунд 1</th>
        <th>Раунд 2</th>
        <th>Раунд 3</th>
        <th>Итог</th>
      </tr>
      <tr class="player-1">
        <td>Иван Васильев</td>
        <td>10</td>
        <td>-20</td>
        <td>30</td>
        <td class="total"><span>20</span></td>
      </tr>
      <tr class="player-2">
        <td>Анна Иванова</td>
        <td>50</td>
        <td>10</td>
        <td>-30</td>
        <td class="total"><span>30</span></td>
      </tr>
      <tr class="player-3 disqualified">
        <td>Василий Ольгин</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td class="total"><span>150</span></td>
      </tr>
      <tr class="player-4">
        <td>Ольга Аннова</td>
        <td>-10</td>
        <td>-20</td>
        <td>40</td>
        <td class="total"><span>10</span></td>
      </tr>
    </table>
  </body>
</html>

Минимальный вид табов

index.html

HTML

Испытание: интерактивное расследование

Притормози, дружище