Добро пожаловать в самый весёлый раздел! Пришло время сделать наш сайт уникальным! Мы можем выбирать цвета, шрифты и стили, соответствующие нашей индивидуальности.
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
Имена классов позволяют нам создать тег <style> внутри нашего 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;
}
Это автоматически применит синий фон к тегу <body> на нашей странице.
Чтобы это заработало, нам нужно добавить ссылку на этот файл.
Открой шаблон baseof.html и добавьте эту строку внутри нашего тега <head> (помни <head> необходим для метаданных): <link rel="stylesheet" href="/styles.css">.
Наш baseof.html должен выглядеть вот так:
<!DOCTYPE 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.