CSS - зроби це красивим · Django Girls Tutorial
Наш блог все ще виглядає досить погано, чи не так? Час зробити його красивим! Для цього використовуватимемо CSS.
Що таке CSS?
Давай використати Bootstrap!
Bootstrap — один з найпопулярніших HTML та CSS фреймворків для розробки красивих сайтів: https://getbootstrap.com/
Він був написаний програмістами, які працювали в Twitter, а зараз удосконалюється волонтерами з усього світу.
Установка Bootstrap
Для встановлення Bootstrap тобі потрібно додати наступні рядки у твого .html файлу (blog/templates/blog/post_list.html):
Виглядає вже краще!
Статичні файли в Django
Куди помістити статичні файли в Django
Django вже знає, де шукати статичні файли для вбудованої програми "admin". Тепер нам потрібно додати статичні файли для свого додатку blog.
Ми зробимо це, створивши папку static усередині каталогу з нашим додатком:
Django автоматично знаходитиме папки static всередині всіх каталогів твоїх додатків і зможе використовувати їх вміст як статичні файли.
Твій перший файл CSS!
Давай створимо CSS файл, щоб додати свій стиль для твоїй веб-сторінки. Створи нову папку під назвою css всередині твоєї папки static . Потім створи новий файл під назвою blog.css усередині папки css. Готово?
Ми не будемо тут занурюватися надто глибоко в процес налаштування та вивчення CSS, оскільки це так просто, що ти зможеш вивчити цей матеріал самостійно після цього посібника. Наприкінці цього розділу ми порекомендуємо тобі безкоштовний курс для подальшого вивчення.
Але давай зробимо хоча б трохи. Можливо, ми можемо змінити колір заголовка? Щоб розумітикольори, комп'ютери використовують спеціальні коди. Вони починаються з # і далі слідують 6 букв (A-F) та цифр (0-9). Ти можеш знайти коди кольорів, наприклад тут: http://www.colorpicker.com/. Також можеш користуватися певними кольорами, такими як red і green.
У файлі blog/static/css/blog.css тобі потрібно додати наступний код:
h1 a – це CSS-селектор. Це означає, що ми застосовуємо наші стилі до кожного елемента a всередині елемента h1 (наприклад, коли у нас у коді щось на кшталт:
У CSS-файлі ми визначаємо стилі для елементів файлу HTML. Елементи ідентифікуються іменами (тобто a, h1, body), атрибутом class або атрибутом id. Class та id – це імена, які ти сама присвоюєш елементам. Класи (сlass) визначають групи елементів, а ідентифікатори (id) свідчить про конкретні елементи. Наприклад, наступний тег може бути ідентифікований CSS з використанням імені тега a класу external_link або ідентифікатора link_to_wiki_page :
Почитай про CSS селектори в CSS Selectors на w3schools.
Потім нам також потрібно повідомити наш HTML-шаблон про те, що ми додали CSS. Відкрий файл blog/templates/blog/post_list.html і додай цей рядок на початок:
Ми просто завантажуємо тут статичні файли :) Далі між і після посилань на файли Bootstrap CSS, додай такий рядок:
Браузер читає файли в порядку їхнього прямування, тому нам необхідно переконатися, що файл розташований у необхідному місці. Інакше код файлу може перевизначити код у файлах Bootstrap. Ми тільки-но сказали нашому шаблону, де знаходиться наш CSS файл.
Твій файл повинен тепер виглядати так:
Ок, збережи файл та онови сторінку!
Відмінна робота! Можливо, ми також хотіли б додати наш веб-сайттрохи простору та збільшити відступ зліва? Давай спробуємо!
Додай це до твого CSS, збережи файл та подивися, як це працює!
Можливо ми можемо налаштувати шрифт нашого заголовка? Встав це всередину тега у файлі blog/templates/blog/post_list.html :
Як і раніше, перевір порядок і встав цей рядок перед посиланням на blog/static/css/blog.css . Цей рядок імпортує шрифт під назвою Lobster зі шрифтів Google (https://www.google.com/fonts).
Тепер додай рядок font-family: 'Lobster'; у CSS файлі blog/static/css/blog.css всередині блоку визначення стилю h1 a (код поміщається між дужками < та >) та онови сторінку:
Як було зазначено вище, у CSS використовується концепція класів, яка дозволяє назвати частину HTML коду та застосовувати стилі тільки для цієї частини без жодного ефекту для інших. Це дуже корисно, якщо у тебе є, скажімо, два блоки div, але вони виконують зовсім різні функції (як ваш заголовок та пост), отже, ти не хочеш, щоб вони виглядали однаково.
Дамо імена певним частинам HTML коду. Додай клас під назвою page-header до блоку div , який містить наш заголовок, як це зроблено тут:
А тепер додай клас post у твій div , що містить повідомлення у блозі:
Тепер додамо визначення блоків для різних селекторів. Селектори, які починають із символу . , відносяться до класів. В Інтернеті багато хороших довідників CSS, які можуть допомогти тобі зрозуміти наступний код. А зараз просто скопіюй та встав код у файл djangogirls/static/css/blog.css :
Далі переробимо код HTML, що відображає пости, використовуючи класи. Заміни:
у blog/templates/blog/post_list.html цим кодом:
Збережи ці файли та оновіть свій веб-сайт.
Юхуу! Виглядає чудово, чи не так? Код, який ми тільки-но вставили, насправді не складний для розуміння, і ти, просто прочитавши його, зможеш зрозуміти більшу частину.
Не бійся трохи повозитись із цим CSS-файлом і спробуй поміняти деякі речі. Якщо щось зламається, не хвилюйся, ти завжди можеш скасувати попередню дію!