Egyelőre nem túl szép a blogunk, igaz? Itt az ideje, hogy kicsinosítsd! Erre a CSS-t fogjuk használni.
A CSS (Cascading Style Sheets) egy nyelv, amit a HTML-ben megírt weboldalak kinézetének leírására használunk. Vagyis mintha kisminkelnéd a weboldaladat ;).
De nem akarjuk megint az alapoktól kezdeni, igaz? Itt is olyasmit fogunk felhasználni, amit más programozók már létrehoztak, és szabadon elérhetővé tettek az Interneten. Minek találnánk fel újra a spanyolviaszt?
A Bootstrap az egyik legnépszerűbb HTML és CSS keretrendszer, amivel szép weboldalakat készíthetünk: https://getbootstrap.com/
Eredetileg a Twitternél dolgozó programozók készítették, de most önkéntesek fejlesztik szerte a világon.
Hogy telepítsd a Bootstrapet, add hozzá a következő a sorokat a <head> részhez a .html fájlodban (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">Ezzel nem adsz hozzá új fájlokat a projektedhez, csak az Interneten létező fájlokra hivatkozol. Nyisd meg újra a weboldaladat, és frissítsd! Itt is van!
Már sokkal jobban néz ki!
Most nézzük meg kicsit közelebbről ezeket a "statikus fájl"-nak nevezett dolgokat. A CSS-ed és az összes képfájl statikus fájlnak számít -- ilyen minden, ami nem dinamikus, vagyis aminek a tartalma nem függ a kontextustól (magyarul a weboldal aktuális állapotától), és ezért minden felhasználó számára ugyanaz.
Django már tudja, hol találja a statikus fájlokat a beépíttett "admin" alkalmazáshoz. Most csak annyit kell tennünk, hogy a saját, blog alkalmazásunkhoz hozzáadunk néhány statikus fájlt.
Ehhez pedig létre kell hozunk egy "static" nevű könyvtárat a blog applikáción belül:
djangogirls
├── blog
│ ├── migrations
│ ├── static
│ └── templates
└── mysite
A Django automatikusan megtalál minden "static" nevű mappát az alkalmazásaid könyvtárain belül, és képes lesz használni azok tartalmát statikus fájlokként.
Írjunk egy CSS fájlt, hogy hozzáadd a saját stílusodat a weboldaladhoz. Hozz létre egy css nevű könyvtárat a static könyvtárban! Majd hozz létre egy új fájlt blog.css néven a css könyvtárban. Kész vagy?
djangogirls
└─── blog
└─── static
└─── css
└─── blog.css
Itt az ideje, hogy a CSS fájlunkba írjunk is valamit! Nyisd meg a blog/static/css/blog.css fájlt a kódszerkesztődben.
Most nem fogunk túlságosan belemélyedni a CSS-be, mert nem bonyolult, és magadtól is meg tudod majd tanulni a workshop után. Ennek a fejezetnek a végén ajánlunk egy ingyenes kurzust, ahol többet tudhatsz meg a CSS-ről.
De azért egy pár dolgot megmutatunk. Például megváltoztathatnánk a header színét? Hogy a számítógépek megértsék a színeket, speciális kódokat használnak. # jellel kezdődnek, majd 6 betű (A-F) és szám (0-9) következik. Színkódokat például itt találhatsz: http://www.colorpicker.com/. Előre meghatározott színeket is használhatsz, mint a red vagy a green.
A blog/static/css/blog.css fájlba írd bele a következő kódot:
h1 a {
color: #FCA205;
}A h1 a egy CSS szelektor. Ez azt jelenti, hogy alkalmazzuk a stílusunkat minden olyan a elemre, ami egy h1 elemen belül van (például, mikor valami ilyesmi van a kódban: <h1><a href="">link</a></h1>). Ebben az esetben azt mondjuk, hogy változtasd meg a kiválasztott elem színét #FCA205-re, ami narancssárgát jelent. Természetesen nyugodtan használd a saját színedet itt!
A CSS fájlban mondjuk meg, hogy nézzenek ki a HTML fájl elemei. Az egyes elemek beazonosíthatók az elemek nevei alapján (pl. a, h1, body), és a class vagy az id attribútumaik alapján. A class és az id olyan nevek, amelyeket te adhatsz meg az elemeknek. A class attribútum elemek egy csoportjára vonatkozik, míg az id-val kifejezetetten egy elemet tudunk beazonosítani. A következő tag például beazonosítható akár az "a" tag névvel, az external_link class-szal vagy a link_to_wiki_page id-val:
<a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">Olvass utána a CSS szelektorokról a w3schools oldalán.
Mindezek után közölnünk kell a HTML fájlunkkal is, hogy hozzáadtunk pár CSS-t. Nyisd meg a blog/templates/blog/post_list.html fájlt és add a következő sort a fájl legelejére:
{% load static %}Itt csak betöltünk pár statikus fájlt :). Ezután a <head> és a </head> tagek közé, a Bootstrap CSS fájlok linkjei után (a böngésző olyan sorrendben olvassa az egyes fájlokat, amilyenben követik egymást, tehát a mi fájlunkban lévő kód lehet, hogy felülír pár kódot a Bootstrap fájlban), a következő sort add:
<link rel="stylesheet" href="{% static 'css/blog.css' %}">Most megmondtuk a template-ünknek, hol találja a CSS fájlokat.
Így kellene kinéznie a fájlodnak:
{% 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>Oké, mentsd el a fájlt és frissítsd be az oldalt!
Szép munka! Lehet, hogy jó lenne adni egy kis "teret" a weboldalunknak és növelni a bal oldali margót. Próbáljuk meg!
body {
padding-left: 15px;
}Írd hozzá a CSS fájlodhoz, mentsd el és lássuk, működik-e!
Lehet, hogy testre szabhatnánk a betű stílusát a header-ünkben. A következő sort másold bele a <head>-be a blog/templates/blog/post_list.html fájlon belül:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">Ez a sor beimportál egy Lobster nevű betűtípust a Google Fonts-ból (https://www.google.com/fonts).
Most add hozzá a font-family: 'Lobster'; sort a blog/static/css/blog.css fájlodban, a h1 a stílusát meghatározó blokkhoz (ez a { kapcsos zárójel } közötti kód) és frissítsd az oldalt:
h1 a {
color: #FCA205;
font-family: 'Lobster';
}
Szuper!
Ahogy fentebb említettük, a CSS-ben van egy "class" nevű fogalom, ami alapvetően azt teszi lehetővé, hogy elnevezd a HTML kódod egy részét és alkalmazz rajta egy stílust, csak ezen a részen, ami így nem befolyásolja a többit. Nagyon hasznos tud lenni, például amikor van két dived, amelyek nagyon különböző dolgokat csinálnak (akár a header-ed vagy a post-od), tehát nem akarod, hogy ugyanúgy nézzenek ki.
Menj végig és nevezd el egy részét a HTML kódodnak. Adj egy page-header nevű class-t a div-edhez, amelyik a header-t tartalmazza, akárcsak így:
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>És most adj egy post class-t a div-hez, ami a blog postokat tartalmazza.
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>Most pedig adjunk stílusblokkokat a különböző szelektorokhoz. A . -tal kezdődő szelektorok classokra utalnak. Rengeteg szuper tutorial és magyarázat található a weben a CSS-ről, ami segít megérteni a következő kódot. Most csak másold ki és illeszd be a blog/static/css/blog.css fájlodba:
.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;
}Ezután jelöld ki a HTML kódot, ami a post-okat jeleníti meg egy class="post" attribútummal. Cseréld le ezt:
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}a blog/templates/blog/post_list.html fájlban ezzel:
<div class="content container">
<div class="row">
<div class="col-md-8">
{% for post in posts %}
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</div>
</div>
</div>Mentsd el a fájlokat és frissítsd az oldalad.
Nahát! Fantaszikus nem? A kódot, amit beillesztettünk, nem túl nehéz megérteni és a nagyja már csak átolvasva is érthető kell, hogy legyen. Mit változtatnál ahhoz, hogy a dátum türkízkék színű legyen?
Ne félj kicsit megbuherálni ezt a CSS-t és megváltoztatni pár dolgot. Ha valamit elrontasz, ne aggódj, vissza tudod csinálni!
Mindenesetre melegen ajánljuk ezt az ingyenes online [Codeacademy HTML & CSS kurzust][2], mint workshop utáni házi feladatot, hogy mindent tudj arról, hogyan tudod csinosabbá varázsolni a weboldaladat CSS-sel.
Készen állsz a következő fejezetre?! :)