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

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

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

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

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

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

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

Создайте новый файл по адресу src/styles/global.css (сначала вам нужно создать папку 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;
}

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

---
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";
---

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

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

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

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

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

---
import '../styles/global.css';
---

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

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

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

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

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

Да, <h1> имеет глобальную ширину 2.5rem, но локально в теге <style> — 4rem. Локальное правило 4rem применяется на странице «О нас».
Опишите, как работают global.css и <style> вместе.

Когда конфликтующие стили определены как глобальные, так и в локальном теге <style> страницы, то локальные стили должны переписывать любые глобальные стили. (Но могут быть и другие факторы, поэтому всегда визуально проверяйте свой сайт, чтобы убедиться, что ваши стили правильно применяются!)
Как бы вы выбрали, где объявить стиль — в файле global.css или в теге <style>?

Если вы хотите, чтобы стиль применялся на всем сайте, то выберите файл global.css. Однако, если вы хотите, чтобы стили применялись только к содержимому HTML в одном файле .astro, а не влияли на другие элементы на вашем сайте, вы можете использовать тег <style>.

Чек-лист

Я могу добавить глобальные CSS-стили, импортируя файл .css.