Пропустить до содержимого
Astro Astro

Добавление стилей на всем сайте

Теперь, когда у вас есть стилизованная страница «О нас», давайте добавим некоторые общие стили для остальной части вашего сайта!

Приготовьтесь к...

  • Применить стили на всем сайте

Добавление общего файла стилей

Вы знаете, что тег <style> в Astro имеет область видимости по умолчанию, что означает, что он влияет только на элементы в своем собственном файле.

Существуют несколько способов определения общих стилей в Astro, но в этом руководстве вы создадите и импортируете файл global.css в каждую из ваших страниц. Это сочетание таблицы стилей и тега <style> дает вам возможность управлять определенными стилями на всем сайте и применять некоторые специфические стили именно там, где вы их хотите увидеть.

  1. Создайте новый файл по адресу src/styles/global.css (сначала вам нужно создать папку styles).

  2. Скопируйте следующий код в свой новый файл, global.css

    src/styles/global.css
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }
    

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }
    

    * {
      box-sizing: border-box;
    }
    

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

  3. В файле about.astro добавьте следующий оператор импорта в свою frontmatter:

    src/pages/about.astro
    ---
    import '../styles/global.css';
    

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

    const identity = {
      firstName: "Николай",
      country: "Нидерланды",
      occupation: "Технический автор",
      obbies: ["фотография", "дизайн", "тенис"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Оптимизация SEO"];
    

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

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

  4. Проверьте предварительный просмотр страницы «О нас» в браузере, и теперь вы должны увидеть, что новые стили применены!

Попробуйте сами — импортируйте свой общий файл стилей

Добавьте необходимую строку кода в каждый файл .astro в вашем проекте, чтобы применить ваши глобальные стили на каждой странице вашего сайта.

✅ Показать мне код! ✅

Добавьте следующий оператор импорта к двум другим файлам страниц: src/pages/index.astro и src/pages/blog.astro

src/pages/index.astro
---
import '../styles/global.css';
---

Внесите любые изменения или дополнения в содержимое своей страницы «Обо мне», добавив элементы HTML на шаблон страницы, как статические, так и динамические. Напишите любой дополнительный JavaScript в своем скрипте frontmatter, чтобы получить значения для использования в вашем HTML. Когда вы будете довольны этой страницей, зафиксируйте все внесенные вами изменения на GitHub, прежде чем перейти к следующему уроку.

Анализ шаблона

Теперь ваша страница «О нас» оформлена с помощью обоих стилей: импортированного файла global.css, и тега <style>.

  • Применяются ли стили из обоих методов оформления?

  • Есть ли конфликтующие стили, и если да, какие применяются?

  • Опишите, как работают global.css и <style> вместе.

  • Как бы вы выбрали, где объявить стиль — в файле global.css или в теге <style>?

Чек-лист

Ресурсы