Skip to content

Latest commit

 

History

History
155 lines (109 loc) · 7.35 KB

5.mdx

File metadata and controls

155 lines (109 loc) · 7.35 KB
type title description i18nReady
tutorial
Добавление стилей для всего сайта
Учебное пособие: Создайте свой первый блог на Astro — Создайте глобальную таблицу стилей для стилизации всего сайта
true

import Checklist from '/components/Checklist.astro'; import Spoiler from '/components/Spoiler.astro'; import Box from '/components/tutorial/Box.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

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

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

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

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

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

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

  1. Скопируйте следующий код в новый файл 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;
}

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

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

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

Попробуйте сами - Импортируйте свою глобальную таблицу стилей

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

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

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

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

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

### Анализируем шаблон

Ваша страница "О сайте" теперь оформлена с использованием обоих стилей: импортированного файла global.css и тега <style>.

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

    Да

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

    Да, `

    ` имеет размер `2,5rem` глобально, но `4rem` локально в теге `<style>`. Локальное правило `4rem` применяется на странице "О сайте".

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

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

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

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

## Чек-лист - [ ] Я могу добавить глобальные стили CSS, импортировав файл `.css`.

Ресурсы