04 — Оформляем сайт с помощью CSS

Оформим сайт с помощью CSS: изменим цвета и отступы, добавим класс оформления и после каждого изменения посмотрим результат в браузере.

Предыдущий урок: 03 — Сайт становится моим · Следующий урок: 05 — Красивый сайт с Bootstrap

На сенсорном экране проведите вправо для перехода к следующему уроку, влево — к предыдущему.

Чему научимся

• Использовать класс оформления и распознавать селектор (selector).
• Различать color, background и padding.
• Сразу видеть результат изменения CSS.

Мы пока пробуем разные варианты до регистрации годового проекта. Можно продолжить выбранный пробный проект или создать новый в отдельной папке по инструкциям урока 02. Если начинаете заново, внесите изменения из предыдущих уроков, необходимые для следующих примеров. Сохраните прежние проекты; публиковать их на GitHub пока не нужно.

Открываем и запускаем

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

Небольшая лаборатория оформления

Откройте wwwroot/css/site.css. Оставьте правила шаблона и добавьте в конец правила оформления, приведённые ниже. Запустите dotnet watch или Hot Reload. После добавления измените только --forest, сохраните и посмотрите результат. Затем измените padding и верните удобное значение. class="intro" связывает область HTML с правилом .intro. Класс CSS — это имя правила оформления, а не класс языка C#. Переменные CSS собирают палитру цветов в одном месте.

Два способа использовать классы оформления

class="intro" ссылается на правило .intro, которое мы напишем в site.css. А class="text-center" и class="container" ссылаются на классы Bootstrap, уже включённые в шаблон. В одном атрибуте class можно сочетать несколько имён, разделённых пробелами. На следующем уроке используем эти классы для создания колонок и карточек.

Изменения в коде

RazorTaba/Pages/Index.cshtml

Внесите следующее изменение в существующий файл. Знаки + и - обозначают изменения и не являются частью кода:

 @model IndexModel
 @{
     ViewData["Title"] = "בית";
 }
+<section class="intro">
 <h1>החיות שלי</h1>
 <p>ברוכים הבאים לפינה שלי בטבע. נכיר חיות, נקרא עליהן ונלמד איך מטפלים בהן.</p>
 <h2>מה תמצאו כאן?</h2>
 <ul>
     <li>חיות שיש להן סיפור</li>
     <li>מדריכי טיפול קצרים</li>
     <li>המלצות שלי להיכרות מקרוב</li>
 </ul>
 <a href="https://he.wikipedia.org/wiki/שועל">לקריאה על שועלים</a>
 <img src="~/images/fox.svg" alt="איור של שועל" width="180" />
+</section>

RazorTaba/wwwroot/css/site.css

Добавьте следующие правила в конец файла, после последней закрывающей фигурной скобки. Оставьте правила шаблона на месте; знаки + обозначают новые строки и не входят в вводимый код:

+:root {
+    --forest: #173f35;
+    --leaf: #4d7058;
+    --paper: #f7f5ed;
+    --accent: #e6b66b;
+}
+body { font-family: Arial, sans-serif; color: var(--forest); background: var(--paper); line-height: 1.7; }
+a { color: var(--forest); text-underline-offset: .25em; }
+.intro { background: var(--forest); color: #fff; border-radius: 1.5rem; padding: 3rem; }
+.intro h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; }
+.intro a { color: var(--accent); }
+footer { border-top: 1px solid #d8dfd3; margin-top: 3rem; color: var(--leaf); }

Запускаем и проверяем

1. Фон светлый, а вступительный блок тёмный.
2. Изменение --forest меняет оформление без изменения HTML.
3. На узком экране заголовок не выходит за границы.

Самостоятельное задание и проверка понимания

Выберите свою палитру и измените один отступ. Объясните, какой селектор влияет на заголовок, а какой — на ссылки. Сохраните и проверьте изменение цветов, прежде чем пробовать следующее изменение.

После изменения сохраните файлы, проверьте сайт в браузере и объясните, что изменили. Можно продолжить этот пробный проект или потренироваться в отдельном; запишите, где сохранён каждый из них.

ИИ может помочь разобраться в сообщении об ошибке и найти неисправность. Вы отвечаете за написание, проверку и объяснение кода; не поручайте агенту писать проект.

Дальше

• Дальше: 05 — Красивый сайт с Bootstrap