В нашей проверяющей системе все стили можно записывать в отдельной вкладке (CSS). Это равнозначно записи глобальных стилей, расположенных между тегами <style>
в разделе <head>
документа. Обычно это делается после тега <title>
. После того как вы оформите стили в отдельном окне, проверяющая система сама подставит их в нужное место в документ. Обратите внимание: во вкладке CSS стили необходимо писать БЕЗ тега <style>
.
Заметьте: если вы делаете сайт, содержащий несколько страниц, то лучше всего стили выносить в отдельный файл и в разделе <head>
прописать ссылку на этот файл.
Задание
В блоке CSS оформите стили для заголовков, абзацев, изображений и других элементов, используя пошаговую инструкцию.
Пошаговая инструкция для оформления стилей
Шаг 1: Установить глобальные стили для <body>
-
Установить шрифт (font-family
) для всей страницы: 'Arial', sans-serif
.
-
Установить межстрочный интервал (line-height
) равный 1.6
.
-
Установить цвет текста (color
) в темно-серый: #333
.
-
Установить фон страницы (background-color
) в светло-серый: #f9f9f9
.
-
Убрать внешние отступы (margin
) и установить внутренние отступы (padding
) в 20px
.
Шаг 2: Оформить заголовок <h1>
-
Установить размер шрифта (font-size
) равный 2.5rem
.
-
Центрировать текст (text-align
): center
.
-
Установить цвет текста (color
) в темно-синий: #2c3e50
.
-
Преобразовать текст в верхний регистр (text-transform
): uppercase
.
-
Добавить отступ снизу (margin-bottom
) в 20px
.
Шаг 3: Оформить раздел <main>
-
Установить максимальную ширину (max-width
) равную 800px
.
-
Центрировать блок по горизонтали (margin
): 0 auto
.
-
Установить внутренние отступы (padding
) в 20px
.
-
Установить фон (background-color
) в белый: #fff
.
-
Скруглить углы (border-radius
) на 10px
.
-
Добавить тень (box-shadow
): 0 4px 8px rgba(0, 0, 0, 0.1)
.
Шаг 4: Оформить раздел <section>
-
Добавить отступ снизу (margin-bottom
) в 30px
.
Шаг 5: Оформить футер <footer>
-
Установить фон (background-color
) в темно-синий: #2c3e50
.
-
Установить цвет текста (color
) в белый: #fff
.
-
Центрировать текст (text-align
): center
.
-
Установить внутренние отступы (padding
) в 15px
.
-
Добавить отступ сверху (margin-top
) в 30px
.
-
Скруглить углы (border-radius
) на 5px
.