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

Добавление стилей для всего сайта

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

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

  • Применить стили глобально

Добавление глобальной таблицы стилей

Заголовок раздела Добавление глобальной таблицы стилей

Вы знаете, что тег <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 = "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";
    ---
  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>?