CSS - зроби це красиво
Last updated
Last updated
Наш блог все ще виглядає доволі жахливо, чи не так? Час зробити його гарним! Для цього будемо використовувати CSS.
Каскадні таблиці стилів (англ. Cascading Style Sheets, скорочено CSS) - спеціальна мова, що використовується для опису зовнішнього вигляду і форматування сайту написаного мовою розмітки (як HTML). Сприймайте це, як свого роду макіяж для нашої веб-сторінки;).
Але ми ж не хочемо починати знову все з нуля, правда? А візьмемо знову щось, що вже було створене програмістами і опубліковано в Інтернеті для вільного користування. Ви ж знаєте, знову винаходити велосипед зовсім не весело.
Bootstrap - один з найбільш популярних HTML і CSS фреймворків для розробки прекрасних веб-сайтів: https://getbootstrap.com/
Він був написаний програмістами, які працювали для Twitter'у і на сьогоднішній день удосконалюється волонтерами з усього світу.
Для встановлення Bootstrap, вам потрібно додати наступні рядки у розділ <head>
вашого .html
файлу (blog/templates/blog/post_list.html
):
Це не додасть жодного файлу до вашого проекту. Натомість ці рядки просто вказують на файли опубліковані в інтернеті. Просто рухайтесь вперед, відкрийте ваш веб-сайт і оновіть сторінку. Ось так!
Вже краще!
Нарешті, ми детальніше розглянемо те, що ми називали статичними файлами. Статичні файли включають усі ваші CSS файли та картинки - файли, які не є динамічними, а отже, їхній вміст не залежить від змісту запиту і буде однаковим для усіх користувачів.
Як ви бачили, коли ми запускали collectstatic
на сервері, Django вже знає, де знайти статичні файли для вбудованого додатку "admin". Тепер нам просто потрібно додати деякі статичні файли для нашого власного додатку blog
.
Створимо директорію static
всередині додатку blog:
Django автоматично знайде всі "статичні" папки всередині будь-якої з папок з вашими додатками, і він буде мати можливість використовувати їх як статичні файли.
Що ж, тепер давайте створимо CSS файл для того, щоб додати ваш власний стиль до вашої веб-сторінки. Створіть нову папку з назвою css
всередині вашої папки 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
- 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
:
Читайте про CSS селектори на w3schools.
Далі, нам треба повідомити наш HTML-шаблон про те, що ми додали CSS. Відкрийте файл blog/templates/blog/post_list.html
і додайте на початок цей рядок:
Тут лише завантажуються статичні файли :) Далі, між <head>
і </head>
, після посилань на CSS файли Bootstrap додайте цей рядок:
Браузер читає файли в порядку їх слідування, тому ми повинні впевнитись, що код написаний в правильному місці. Інакше, код в нашому файлі може перекривати код із файлів Bootstrap. Ми щойно повідомили наш шаблон, де розташовані наші CSS файли.
Тепер ваш файл має виглядати наступним чином:
Добре, збережіть файл і перезавантажте сторінку!
Чудова робота! Можливо, ми також хотіли б дати нашому веб-сайту трохи повітря і збільшити відступ зліва? Давайте спробуємо!
Додайте це до вашого CSS, збережіть файл і подивіться, як це працює!
Може ми могли б також налаштувати шрифт нашого заголовка? Вставте це всередину розділу <head>
файлу blog/templates/blog/post_list.html
:
Цей рядок імпортує шрифт із назвою Lobster із колекції шрифтів Google (https://www.google.com/fonts).
Знайдіть блок визначення стилю h1 a
(код між фігурними дужками {
і }
) в CSS файлі blog/static/css/blog.css
. Тепер додайте Тепер додайте рядок font-family: 'Lobster';
між дужками і перезавантажте сторінку:
Чудово!
Як було зазначено вище, CSS має концепцію класів. Вона дозволяє вам іменувати частину HTML коду і застосовувати стилі лише до цієї частини без будь-якого ефекту на інші частини. Це буває надзвичайно корисним. Скажімо, у вас є два блоки div, але вони виконують зовсім різні функції (як ваш заголовок і пост). Клас дозволяє вам зробити їх вигляд різним.
Дайте імена певним частинам HTML коду. Додайте клас page-header
до блоку div
, що містить ваш заголовок, як це зроблено тут:
А тепер додайте клас post
до вашого блоку div
, що містить сам допис.
А тепер додамо визначення блоків для різних селекторів. Селектори, які починаються із символу .
стосуються класів. Існує багато хороших посібників і пояснень CSS у Вебі, що можуть допомогти вам зрозуміти наступний код. Поки що, просто скопіюйте і вставте це у ваш файл mysite/static/css/blog.css
:
Далі обгорніть HTML код, що відображає пости, визначеннями класів. Замініть це:
в blog/templates/blog/post_list.html
на:
Збережіть ці файли і перезавантажте веб-сайт.
Юхууу! Виглядає прекрасно, чи не так? Код, який ми щойно вставили, насправді не є складним для розуміння і ви в змозі зрозуміти більшу його частину після прочитання.
Не бійтеся трохи повозитися з цим CSS файлом і спробуйте поміняти деякий код. Якщо щось зламається, не хвилюйтесь, ви завжди можете відмінити попередню дію!
В будь-якому разі, дуже рекомендуємо пройти цей безкоштовний онлайн Codeacademy HTML & CSS курс. Він допоможе вам вивчити усе, що потрібно знати про оформлення веб-сайтів за допомогою CSS.
Готові до наступного розділу?! :)