Перейти к содержимому

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

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

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

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

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

  1. Скопируйте следующий код и вставьте его в файл src/pages/about.astro:

    src/pages/about.astro
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
    h1 {
    color: purple;
    font-size: 4rem;
    }
    </style>
    </head>

    Проверьте все три страницы в предварительном просмотре браузера.

    • Какого цвета заголовок страницы на:

      • Главной странице?
      • Странице “О сайте”?
      • Странице блога?
    • Страница с самым большим текстом заголовка?

  2. Добавьте класс skill к сгенерированным элементам <li> на странице “О сайте”, чтобы их можно было стилизовать. Теперь ваш код должен выглядеть следующим образом:

    src/pages/about.astro
    <p>My skills are:</p>
    <ul>
    {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
  3. Добавьте следующий код в ваш существующий тег стиля:

    src/pages/about.astro
    <style>
    h1 {
    color: purple;
    font-size: 4rem;
    }
    .skill {
    color: green;
    font-weight: bold;
    }
    </style>
  4. Снова зайдите на страницу “О сайте” в браузере и проверьте визуально или с помощью инструментов разработчика, что каждый пункт в списке ваших навыков теперь зеленый и жирный.

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

Заголовок раздела Используйте свою первую переменную CSS

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

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

    src/pages/about.astro
    ---
    const pageTitle = "About Me";
    const identity = {
    firstName: "Sarah",
    country: "Canada",
    occupation: "Technical Writer",
    hobbies: ["photography", "birdwatching", "baseball"],
    };
    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    const happy = true;
    const finished = false;
    const goal = 3;
    const skillColor = "navy";
    ---
  2. Обновите ваш уже существующий тег <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>
  3. Проверьте страницу “О сайте” в предварительном просмотре браузера. Вы должны увидеть, что навыки теперь темно-синие, как установлено переменной skillColor, переданной в директиве define:vars.

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

Заголовок раздела Попробуйте сами - Определите переменные CSS
  1. Обновите тег <style> на странице “О сайте” так, чтобы он соответствовал приведенному ниже.

    src/pages/about.astro
    <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>
  2. Добавьте все недостающие определения переменных в свой скрипт frontmatter, чтобы ваш новый тег <style> успешно применил эти стили к списку навыков:

    • Цвет текста - темно-синий
    • Текст выделен жирным шрифтом
    • Элементы списка выделены заглавными буквами (все буквы прописные)
✅ Покажите мне код! ✅
src/pages/about.astro
---
const pageTitle = "About Me";
const identity = {
firstName: "Sarah",
country: "Canada",
occupation: "Technical Writer",
hobbies: ["photography", "birdwatching", "baseball"],
};
const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
const happy = true;
const finished = false;
const goal = 3;
const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---