Задание: Стилизирование школьного сайта
=======================================

* Назад
* Обзор: Styling text

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

| Предварительные требования: | Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке. |
| --- | --- |
| Задача: | Проверить понимание методов CSS по стилизации текста. |

Отправная точка
---------------

Чтобы начать эту оценку, вам необходимо:

* Перейти и взять файлы HTML и CSS для упражнения, а также предоставленную иконку внешней ссылки.
* Сделайте их копии на вашем компьютере.

В качестве альтернативы, вы можете пользоваться сайтами как JSBin или Glitch чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать этот URL чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент `<style>` в head документа.

**Примечание:** Если вы застрянете, то попросите помощи — см. секцию Оценка или дальнейшая помощь в конце этой страницы.

Краткое описание проекта
------------------------

Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает ещё каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с лёгкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.

Шрифты:

* Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьёзности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.
* Используйте подходящий сервис для генерации пуленепробиваемого `@font-face` кода для этих двух шрифтов.
* Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.

Общая стилизация текста:

* Дайте всей странице `font-size` `10px`.
* Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответствующие относительные единицы.
* Дайте основному тексту подходящую `line-height`.
* Отцентрируйте ваш заголовок верхнего уровня на странице.
* Дайте вашим заголовкам немного `letter-spacing` чтобы они не были слишком сжатыми, позвольте буквам немного дышать.
* Дайте основному тексту немного `letter-spacing` и `word-spacing`, при необходимости.
* Дайте первым параграфам после каждого заголовка в `<section>` немного отступа, скажем 20px.

Ссылки:

* Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.
* Сделайте так чтобы ссылки были подчёркнутыми по умолчанию, но, чтобы подчёркивание исчезало, когда вы фокусируетесь или наводите мышь на них.
* Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.
* Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все ещё вписывался в общий дизайн страницы.
* Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.

Списки:

* Убедитесь, что интервалы ваших списков и пунктов списка совпадают со стилизацией всей страницы. Все элементы списка должны иметь ту же `line-height` что и строки параграфов, и каждый список должен иметь те же интервалы сверху и снизу которые имеются между параграфами.
* Дайте элементам списка симпатичные маркеры, соответствующие дизайну страницы. Выберете ли вы пользовательские изображения для маркеров или что-то другое — зависит от вас.

Меню навигации:

* Стилизуйте ваше меню навигации так чтоб оно соответствовало внешнему виду страницы.
Советы и подсказки
------------------

* Вам не надо как-либо редактировать HTML в этом упражнении.
* Вам не надо обязательно делать меню навигации в виде кнопок, но надо чтоб они были более-менее высокими, чтобы они не выглядели глупо на краю страницы; также помните, что вам надо сделать его вертикальным меню навигации.
Пример
------

Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.

![](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage/example2.png)

Оценка или дальнейшая помощь
----------------------------

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch.
2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать:
    * Описательный заголовок такой как "Требуется оценка вёрстки домашней страницы общественный школы".
    * Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
    * Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
    * Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
* Назад
* Обзор: Styling text