Модуль: Основы CSS - каскадные таблицы стилей


7. Оформление документа

 

В нашей проверяющей системе все стили можно записывать в отдельной вкладке (CSS). Это равнозначно записи глобальных стилей, расположенных между тегами <style> в разделе <head> документа. Обычно это делается после тега <title>. После того как вы оформите стили в отдельном окне, проверяющая система сама подставит их в нужное место в документ. Обратите внимание: во вкладке CSS стили необходимо писать БЕЗ тега <style>.

Заметьте: если вы делаете сайт, содержащий несколько страниц, то лучше всего стили выносить в отдельный файл и в разделе <head> прописать ссылку на этот файл.
 

Задание

В блоке CSS оформите стили для заголовков, абзацев, изображений и других элементов, используя пошаговую инструкцию. 


Пошаговая инструкция для оформления стилей

Шаг 1: Установить глобальные стили для <body>

  1. Установить шрифт (font-family) для всей страницы: 'Arial', sans-serif.

  2. Установить межстрочный интервал (line-height) равный 1.6.

  3. Установить цвет текста (color) в темно-серый: #333.

  4. Установить фон страницы (background-color) в светло-серый: #f9f9f9.

  5. Убрать внешние отступы (margin) и установить внутренние отступы (padding) в 20px.

Шаг 2: Оформить заголовок <h1>

  1. Установить размер шрифта (font-size) равный 2.5rem.

  2. Центрировать текст (text-align): center.

  3. Установить цвет текста (color) в темно-синий: #2c3e50.

  4. Преобразовать текст в верхний регистр (text-transform): uppercase.

  5. Добавить отступ снизу (margin-bottom) в 20px.

Шаг 3: Оформить раздел <main>

  1. Установить максимальную ширину (max-width) равную 800px.

  2. Центрировать блок по горизонтали (margin): 0 auto.

  3. Установить внутренние отступы (padding) в 20px.

  4. Установить фон (background-color) в белый: #fff.

  5. Скруглить углы (border-radius) на 10px.

  6. Добавить тень (box-shadow): 0 4px 8px rgba(0, 0, 0, 0.1).

Шаг 4: Оформить раздел <section>

  1. Добавить отступ снизу (margin-bottom) в 30px.

Шаг 5: Оформить футер <footer>

  1. Установить фон (background-color) в темно-синий: #2c3e50.

  2. Установить цвет текста (color) в белый: #fff.

  3. Центрировать текст (text-align): center.

  4. Установить внутренние отступы (padding) в 15px.

  5. Добавить отступ сверху (margin-top) в 30px.

  6. Скруглить углы (border-radius) на 5px.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>План посещения Санкт-Петербурга</title>
</head>
<body>
   
<header>
    <h1>Санкт-Петербург</h1>
</header>
  <main>

<section>
       <h2>О Санкт-Петербурге</h2>
        <p><u>Санкт-Петербург</u> — это город федерального значения, расположенный на северо-западе России. 
          Он был основан в 1703 году Петром I и является важным культурным, историческим и экономическим центром страны. 
          Санкт-Петербург славится своими архитектурными ансамблями, музеями и реками. 
          <a href="https://ru.wikipedia.org/wiki/Санкт-Петербург" target="_blank">Узнать больше</a>.
        </p>
</section>
    
<section>
        <h4>Значение Санкт-Петербурга</h4>
        <p><em>Санкт-Петербург считается культурной столицей России. Здесь находятся такие всемирно известные достопримечательности, как Эрмитаж, Исаакиевский собор, Петергоф и Мариинский театр. Город также играл ключевую роль в истории России, будучи столицей империи на протяжении более двух веков.</em></p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Palace_Bridge_SPB_%28img2%29_Crop.jpg/2880px-Palace_Bridge_SPB_%28img2%29_Crop.jpg" alt="Санкт-Петербург" width="500px">
</section>
  </main>
   
<footer>
    <p>&copy; 2025.  <br> Вы можете оставить обратную связь, написав на адрес: [email protected]</p>
  </footer>
</body>
</html>

JS

     
Результат проверки программы 
Для проверки решения задачи необходимо зарегистрироваться или авторизоваться!