CSS - зроби це красиво

PreviousDjango шаблони NextШаблонне розширення

Last updated 1 year ago

CSS - зроби це красиво

Наш блог все ще виглядає доволі жахливо, чи не так? Час зробити його гарним! Для цього будемо використовувати CSS.

Що таке CSS?

Каскадні таблиці стилів (англ. Cascading Style Sheets, скорочено CSS) - спеціальна мова, що використовується для опису зовнішнього вигляду і форматування сайту написаного мовою розмітки (як HTML). Сприймайте це, як свого роду макіяж для нашої веб-сторінки;).

Але ми ж не хочемо починати знову все з нуля, правда? А візьмемо знову щось, що вже було створене програмістами і опубліковано в Інтернеті для вільного користування. Ви ж знаєте, знову винаходити велосипед зовсім не весело.

Скористаємось Bootstrap!

Bootstrap - один з найбільш популярних HTML і CSS фреймворків для розробки прекрасних веб-сайтів: https://getbootstrap.com/

Він був написаний програмістами, які працювали для 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 і додайте на початок цей рядок:


<div data-gb-custom-block data-tag="load"></div>

Тут лише завантажуються статичні файли :) Далі, між <head> і </head>, після посилань на CSS файли Bootstrap додайте цей рядок:

<link rel="stylesheet" href="

<div data-gb-custom-block data-tag="static" data-0='css/blog.css'></div>

">

Браузер читає файли в порядку їх слідування, тому ми повинні впевнитись, що код написаний в правильному місці. Інакше, код в нашому файлі може перекривати код із файлів Bootstrap. Ми щойно повідомили наш шаблон, де розташовані наші CSS файли.

Тепер ваш файл має виглядати наступним чином:


<div data-gb-custom-block data-tag="load"></div>

<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="

<div data-gb-custom-block data-tag="static" data-0='css/blog.css'></div>">
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div data-gb-custom-block data-tag="for">

            <div>
                <p>published: {{ post.published_date }}</p>
                <h1><a href="">{{ post.title }}</a></h1>
                <p>{{ post.text|linebreaksbr }}</p>
            </div>
        

</div>

    </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:

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Lobster', cursive;
}

.date {
    float: right;
    color: #828282;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h1 a, .post h1 a:visited {
    color: #000000;
}

Далі обгорніть HTML код, що відображає пости, визначеннями класів. Замініть це:


<div data-gb-custom-block data-tag="for">

    <div class="post">
        <p>published: {{ post.published_date }}</p>
        <h1><a href="">{{ post.title }}</a></h1>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>

</div>

в blog/templates/blog/post_list.html на:

<div class="content container">
    <div class="row">
        <div class="col-md-8">
            

<div data-gb-custom-block data-tag="for">

                <div class="post">
                    <div class="date">
                        <p>published: {{ post.published_date }}</p>
                    </div>
                    <h1><a href="">{{ post.title }}</a></h1>
                    <p>{{ post.text|linebreaksbr }}</p>
                </div>
            

</div>
        </div>
    </div>
</div>

Збережіть ці файли і перезавантажте веб-сайт.

Юхууу! Виглядає прекрасно, чи не так? Код, який ми щойно вставили, насправді не є складним для розуміння і ви в змозі зрозуміти більшу його частину після прочитання.

Не бійтеся трохи повозитися з цим CSS файлом і спробуйте поміняти деякий код. Якщо щось зламається, не хвилюйтесь, ви завжди можете відмінити попередню дію!

В будь-якому разі, дуже рекомендуємо пройти цей безкоштовний онлайн Codeacademy HTML & CSS курс. Він допоможе вам вивчити усе, що потрібно знати про оформлення веб-сайтів за допомогою CSS.

Готові до наступного розділу?! :)