Стилизуйте страницу "О сайте"
Теперь, когда у вас есть страница “О сайте” с информацией о вас, пришло время ее оформить!
Приготовьтесь…
- Стилизовать элементы на одной странице
- Использовать переменные CSS
Оформление отдельной страницы
Заголовок раздела Оформление отдельной страницыИспользуя собственные теги <style></style> Astro, вы можете придать стиль элементам на вашей странице. Добавление атрибутов и директив к этим тегам дает вам еще больше возможностей для стилизации.
-
Скопируйте следующий код и вставьте его в файл
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>Проверьте все три страницы в предварительном просмотре браузера.
-
Какого цвета заголовок страницы на:
- Главной странице?
- Странице “О сайте”?
- Странице блога?
-
Страница с самым большим текстом заголовка?
-
-
Добавьте класс
skillк сгенерированным элементам<li>на странице “О сайте”, чтобы их можно было стилизовать. Теперь ваш код должен выглядеть следующим образом:src/pages/about.astro <p>My skills are:</p><ul>{skills.map((skill) => <li class="skill">{skill}</li>)}</ul> -
Добавьте следующий код в ваш существующий тег стиля:
src/pages/about.astro <style>h1 {color: purple;font-size: 4rem;}.skill {color: green;font-weight: bold;}</style> -
Снова зайдите на страницу “О сайте” в браузере и проверьте визуально или с помощью инструментов разработчика, что каждый пункт в списке ваших навыков теперь зеленый и жирный.
Используйте свою первую переменную CSS
Заголовок раздела Используйте свою первую переменную CSSТег Astro <style> также может ссылаться на любые переменные из вашего скрипта frontmatter с помощью директивы define:vars={ {...} }. Вы можете определить переменные внутри вашего кодового забора, а затем использовать их в качестве переменных CSS в теге стиля.
-
Определите переменную
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";--- -
Обновите ваш уже существующий тег
<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> -
Проверьте страницу “О сайте” в предварительном просмотре браузера. Вы должны увидеть, что навыки теперь темно-синие, как установлено переменной
skillColor, переданной в директивеdefine:vars.
Попробуйте сами - Определите переменные CSS
Заголовок раздела Попробуйте сами - Определите переменные CSS-
Обновите тег
<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> -
Добавьте все недостающие определения переменных в свой скрипт frontmatter, чтобы ваш новый тег
<style>успешно применил эти стили к списку навыков:- Цвет текста - темно-синий
- Текст выделен жирным шрифтом
- Элементы списка выделены заглавными буквами (все буквы прописные)
✅ Покажите мне код! ✅
---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";---