Наш блог все еще выглядит довольно ужасно, не так ли? Время сделать его красивым! Для этого будем использовать CSS.
Что такое CSS?
Каскадные таблицы стилей (англ. Cascading Style Sheets, сокращенно CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта написанного на языке разметки (как HTML). Воспринимайте это как своего рода макияж для нашей веб-страницы;).
Но мы же не хотим начинать опять все с нуля, правда? А возьмем опять то, что уже было создано программистами и опубликован в Интернете для свободного пользования. Вы же знаете, снова изобретать велосипед совсем не весело. Кстати, CSS учебник доступен на страницах нашего специализированного сайта.
Воспользуемся Bootstrap!
Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки прекрасных веб-сайтов
Он был написан программистами, которые работали для Twitter’у и на сегодняшний день совершенствуется волонтерами со всего мира.
Установка Boostrap
Для установки Bootstrap, вам нужно добавить следующие строки в раздел <head> вашего .html файла (blog/templates/blog/post_list.html):
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
Это не прибавит ни одного файла вашего проекта. Зато эти строки прямо указывают на файлы опубликованы в интернете. Просто двигайтесь вперед, откройте ваш веб-сайт и обновите страницу. Вот так!
Уже лучше!
Статические файлы в Django
Наконец, мы подробнее рассмотрим то, что мы называли статическими файлами. Статические файлы включают все ваши CSS файлы и картинки — файлы, которые не являются динамическими, а значит, их содержание не зависит от содержания запроса и будет одинаковым для всех пользователей.
Где поместить статические файлы Django
Как вы видели, когда мы запускали collectstatic на сервере Django уже знает, где найти статические файлы для встроенного приложения «admin». Теперь нам просто нужно добавить некоторые статические файлы для нашего собственного приложения blog.
Создадим директорию static внутри приложения blog:
djangogirls
├── blog
│ ├── migrations
│ ├── static
│ └── templates
└── mysite
Django автоматически найдет все «статические» папки внутри любой из папок с вашими приложениями, и он будет иметь возможность использовать их как статические файлы.
Ваш первый CSS файл!
Что же, теперь давайте создадим CSS файл для того, чтобы добавить свой собственный стиль к вашей веб-страницы. Создайте новую папку с названием css внутри вашей папки static. Затем внутри этой папкиcss создайте новый файл blog.css. Готовы?
djangogirls
└─── blog
└─── static
└─── css
└─── blog.css
Пришло время написать CSS! Откройте файл static/css/blog.css в редакторе кода.
Не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что вы можете изучить этот материал самостоятельно после завершения воркшопа. Мы настоятельно рекомендуем пройти курс Codeacademy HTML & CSS course для того, чтобы изучить все, что вам нужно знать об оформлении веб-сайтов с помощью CSS.
Но по крайней мере поработаем немного. Может мы могли бы изменить цвет заголовка? Чтобы понять цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F), а также цифры (0-9). Вы можете найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можете пользоваться уже определенными цветами, такими как red и green.
В вашем файле static/css/blog.css нужно добавить следующий код:
h1 a {
color: #FCA205;
}
h1 a — CSS селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h1 (например, когда мы имеем в коде что-то вроде: <h1><a href="">link</a></h1>). В этом случае, мы сообщаем о том, что надо изменить цвет #FCA205, то оранжевый. Конечно, вы можете определить здесь ваш собственный цвет!
В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a, h1, body), атрибутом class или атрибутом id. Class и id — имена, которые вы присвоюєте элементам собственноручно. Классы (сlasses) определяют группы элементов, а идентификаторы (id), в свою очередь, указывают на специфические элементы. Например, следующий тег может быть идентифицирован CSS с использованием тегового имени a, класса external_linkили идентификатора link_to_wiki_page:
<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
Читайте о CSS селекторы на w3schools.
Далее, нам надо сообщить в наш HTML шаблон о том, что мы добавили CSS. Откройте файл blog/templates/blog/post_list.html и добавьте в начало эта строка:
{% load static %}
Здесь только статические файлы загружаются 🙂 Дальше, между <head> и </head>после ссылок на файлы Bootstrap CSS добавьте эту строку:
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
Браузер читает файлы в порядке их следования, поэтому мы должны убедиться, что код написан в правильном месте. Иначе, код в нашем файле может перекрывать код из файлов Bootstrap. Мы только сообщили наш шаблон, где расположены наши CSS файлов.
Теперь ваш файл должен выглядеть следующим образом:
{% load static %}
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div>
<h1><a href="/">Django Girls Blog</a></h1>
</div>
{% for post in posts %}
<div>
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Хорошо, сохраните файл и перезагрузите страницу!
Замечательная работа! Возможно, мы также хотели бы дать нашему веб-сайта немного воздуха и увеличить отступ слева? Давайте попробуем!
body {
padding-left: 15px;
}
Добавьте это к вашему CSS, сохраните файл и посмотрите, как это работает!
Может мы могли бы также настроить шрифт нашего заголовка? Вставьте внутрь раздела <head> файла blog/templates/blog/post_list.html:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
Эта строка импортирует шрифт с названием Lobster из коллекции шрифтов Google (https://www.google.com/fonts).
Найдите блок определения стиля h1 a (код между фигурными скобками { и }) в CSS файле blog/static/css/blog.css. Теперь добавьте Теперь добавьте строку font-family: 'Lobster'; между скобками и перезагрузите страницу,:
h1 a {
color: #FCA205;
font-family: 'Lobster';
}
Прекрасно!
Как было указано выше, CSS имеет концепцию классов. Она позволяет вам именовать часть HTML кода и применять стили только к этой части без каких-либо эффекта на другие части. Это бывает чрезвычайно полезным. Скажем, у вас есть два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост). Класс позволяет вам сделать их вид различным.
Дайте имена определенным частям HTML кода. Добавьте класс page-header к блоку div, что включает ваш заголовок, как это сделано здесь:
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
А теперь добавьте класс post к вашему блока div, который содержит само сообщение.
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
А теперь добавим определение блоков для разных селекторов. Селекторы, которые начинаются с символа . касающиеся классов. Существует много хороших пособий и объяснений CSS в Интернете, которые могут помочь вам понять следующий код. Пока что, просто скопируйте и вставьте это в ваш файл mysite/static/css/blog.css: