Собственный CSS
Добро пожаловать в самый весёлый раздел! Пришло время сделать наш сайт уникальным! Мы можем выбирать цвета, шрифты и стили, соответствующие нашей индивидуальности.
CSS — это язык, созданный специально для стилизации элементов HTML так, чтобы они выглядели так, как нам хотелось бы.
Свойства
Доступно более сотни различных свойств CSS, а это означает, что сочетание стилей практически бесконечно. Мы можем создавать комбинации стилей, которых никогда раньше не было, что позволит сделать наш сайт единственным в своём рода.
Вот некоторые популярные свойства:
- margin: Пустое пространство вокруг элемента.
- font-family: Шрифт, используемый для текста.
- font-size: Размер шрифта.
- font-weight: Толщина шрифта.
- color: Цвет текста.
- background: Цвет фона или изображение в качестве фона.
- border: Очертание элемента линией определенного цвета и ширины.
- text-align: Выравнивание текста по левому краю, по центру или по правому краю.
- height: Определяет какой высоты должен быть элемент.
- width: Определяет какой ширины должен быть элемент.
Это лишь некоторые из основных свойств, но их так много, что описывать все здесь не составит никакой возможности, вместо этого мы предлагаем ознакомится с полным списком по этой ссылке.
Селекторы
Есть несколько разных способов применения стилей к нашим HTML-элементам, теги style , имена классов ( class ) или ids .
Style tags
Самый быстрый способ начать экспериментировать с CSS — это написать атрибут style в твоём HTML-элементе, который ты хочешь стилизовать.
Если бы у нас был текст, который мы хотели бы сделать белым с черным фоном, мы бы сделали следующее:
p style="color: white; background: black;">Я - какой-то текстp> В тегах style мы разделяем каждый стиль точкой с запятой ; . Каждый стиль состоит из двух частей: названия свойства, например color или background , и значения, например white , black , blue , или #4287f5 .
Обратной стороной использования таких тегов является то, что мы должны писать одни и те же стили снова и снова, без возможности использовать их повторно. Для повторного использования стилей мы используем class .
Сlass names
Имена классов позволяют нам создать тег внутри нашего HTML-документа и написать наши стили в нём, а не внутри каждого элемента.
style> .some-text < color: blue; font-size: 24px; > .box < border: 1px solid red; padding: 30px; height: 45px; width: 45px; text-align: center; > style> p class="some-text">Я - текстp> div class="box">Я - поле div> Как мы видим, мы пишем classes внутри нашего тега style, а затем мы можем многократно использовать тот же стиль во всем HTML-документе, что позволяет нам не дублировать код снова и снова.
Кроме того, мы также можем полностью записать стили наших классов в отдельный файл и дать ему расширение .css .
Стилизация нашего сайта
Создай файл с именем styles.css и помести его в свою папку static .
Твоя структура папок теперь должна выглядеть так:
my-blog ├── archetypes | └── default.md ├── content | └── posts | └── my-first-post.md ├── data ├── layouts | ├── _default | | ├── summary.html | | ├── single.html | | ├── list.html | | └── baseof.html | ├── partials | | ├── footer.html | | └── navbar.html | ├── 404.html | └── index.html ├── static | └── styles.css ├── themes └── config.toml Открой styles.css в VSCode и вставь туда следующее.
body < background: blue; > Это автоматически применит синий фон к тегу на нашей странице.
Чтобы это заработало, нам нужно добавить ссылку на этот файл.
Открой шаблон baseof.html и добавьте эту строку внутри нашего тега (помни необходим для метаданных): .
Наш baseof.html должен выглядеть вот так:
html> head> meta charset="utf-8"> link rel="stylesheet" href="/styles.css"> title> block "title" . >> .Site.Title >> end >>title> head> body> partial "navbar.html" . >> block "main" . >> end >> partial "footer.html" . >> body> html> Теперь, если мы войдем в наш браузер и посетим локальный сервер разработки, мы увидим синий фон на всех страницах.
На это, скорее всего, не очень приятно смотреть, поэтому давай удалим этот стиль из нашего файла styles.css , а в следующем разделе рассмотрим библиотеку Bulma, которая поможет нам быстрее писать CSS.