Стилизуйте страницу «О сайте»

Теперь, когда у вас есть страница «О сайте» с информацией о вас, пришло время её оформить!

Приготовьтесь…

Стилизовать элементы на одной странице
Использовать переменные CSS

Оформление отдельной страницы

Используя собственные теги <style></style> Astro, вы можете придать стиль элементам на вашей странице. Добавление атрибутов и директив к этим тегам дает вам ещё больше возможностей для стилизации.

Скопируйте следующий код и вставьте его в файл src/pages/about.astro:
src/pages/about.astro
```
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>
```
Проверьте все три страницы в предварительном просмотре браузера.
- Какого цвета заголовок страницы на:
  - Главной странице? чёрный
  - Странице «О сайте»? пурпурный
  - Странице блога? чёрный
- Страница с самым большим текстом заголовка? Страница «О сайте»
Если вы не можете определить цвета визуально, вы можете использовать инструменты разработчика в вашем браузере, чтобы осмотреть элементы заголовка <h1> и проверить применённый цвет текста.
Добавьте класс skill к сгенерированным элементам <li> на странице «О сайте», чтобы их можно было стилизовать. Теперь ваш код должен выглядеть следующим образом:
src/pages/about.astro
```
<p>Мои навыки:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
```

Добавьте следующий код в ваш существующий тег <style>:

<style>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: green;
    font-weight: bold;
  }
</style>

Снова зайдите на страницу «О сайте» в браузере и проверьте визуально или с помощью инструментов разработчика, что каждый пункт в списке ваших навыков теперь зелёный и жирный.

Используйте свою первую переменную CSS

Тег Astro <style> также может ссылаться на любые переменные в ваших метаданных с помощью директивы define:vars={ {...} }. Вы можете определить переменные между разделителями кода, а затем использовать их в качестве переменных CSS в теге style.

Определите переменную skillColor, добавив её в блок метаданных в файле src/pages/about.astro, как показано ниже:

---
const pageTitle = "Обо мне";

const identity = {
  firstName: "Сара",
  country: "Канада",
  occupation: "Технический писатель",
  hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
---

Обновите ваш уже существующий тег <style> внизу, чтобы сначала определить, а затем использовать эту переменную skillColor внутри двойных фигурных скобок.
src/pages/about.astro
```
<style define:vars={{skillColor}}>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: green;
    color: var(--skillColor);
    font-weight: bold;
  }
</style>
```
Проверьте страницу «О сайте» в предварительном просмотре браузера. Вы должны увидеть, что навыки теперь тёмно-синие, как установлено переменной skillColor, переданной в директиве define:vars.

Попробуйте сами - Определите переменные CSS

Обновите тег <style> на странице «О сайте» так, чтобы он соответствовал приведённому ниже.

<style define:vars={{skillColor, fontWeight, textCase}}>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
</style>

Добавьте все недостающие определения переменных в свой блок метаданных, чтобы ваш новый тег <style> успешно применил эти стили к списку навыков:
- Цвет текста - тёмно-синий
- Текст выделен жирным шрифтом
- Элементы списка выделены заглавными буквами (все буквы прописные)

✅ Покажите мне код! ✅

---
const pageTitle = "Обо мне";

const identity = {
  firstName: "Сара",
  country: "Канада",
  occupation: "Технический писатель",
  hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

Контрольный список

Я умею добавлять стили CSS на отдельную страницу с помощью тега Astro <style>.
Я умею использовать переменные для стилизации элементов на странице.

Ресурсы

Внести свой вклад Сообщество Sponsor