You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Nepridá to do tvojho projektu žiadne súbory. Iba to ukazuje na súbory, ktoré už existujú na internete. Skúsme to, otvor svoju webstránku a obnov stránku. Tu to máme!
@@ -42,12 +42,12 @@ Ako si už videla, keď sme spustili `collectstatic` na serveri, Django už vie,
42
42
To urobíme tak, že vo vnútri našej aplikácie blog vytvoríme adresár s názvom `static`:
43
43
44
44
```
45
-
djangogirls
46
-
├── blog
47
-
│ ├── migrations
48
-
│ └── static
49
-
└── mysite
50
-
```
45
+
djangogirls
46
+
├── blog
47
+
│ ├── migrations
48
+
│ └── static
49
+
└── mysite
50
+
```
51
51
52
52
Django automaticky nájde všetky priečinky s názvom "static" vo všetkých priečinkoch tvojich aplikácií a bude môcť používať ich obsah ako statické súbory.
53
53
@@ -56,12 +56,12 @@ Django automaticky nájde všetky priečinky s názvom "static" vo všetkých pr
56
56
Vytvorme teraz CSS súbor, ktorý tvojej web stránke pridá vlastný štýl. Vytvor nový adresár s názvom `css` vnútri adresára `static`. Potom vytvor nový súbor s názvom `blog.css` vo vnútri tohto adresára `css`. Pripravená?
57
57
58
58
```
59
-
djangogirls
60
-
└─── blog
61
-
└─── static
62
-
└─── css
63
-
└─── blog.css
64
-
```
59
+
djangogirls
60
+
└─── blog
61
+
└─── static
62
+
└─── css
63
+
└─── blog.css
64
+
```
65
65
66
66
Je čas napísať nejaké CSS! Otvor v editore kódu súbor `blog/static/css/blog.css`.
67
67
@@ -76,18 +76,18 @@ Ale urobme aspoň niečo. Čo keby sme zmenili farbu hlavičky? Počítače pou
76
76
V súbore `blog/static/css/blog.css` pridaj nasledujúci kód:
77
77
78
78
```css
79
-
h1a {
80
-
color: #FCA205;
81
-
}
82
-
```
79
+
h1a {
80
+
color: #FCA205;
81
+
}
82
+
```
83
83
84
84
`h1 a` je CSS Selector. To znamená, že náš štýl aplikujeme na akýkoľvek element `a` vo vnútri elementu `h1` (napríklad ak máme v kóde niečo takéto: `<h1><a href="">link</a></h1>`). V tomto prípade elementu hovoríme, aby zmenil svoju farbu na `#FCA205`, čo je oranžová. Samozrejme, sem môžeš zadať vlastnú farbu!
85
85
86
86
V CSS súbore definujeme štýly pre elementy v HTML súbore. Elementy sa identifikujú podľa svojho názvu (t. j. `a``h1`, `body`), atribútom `class` (trieda) alebo atribútom `id`. Triedy a id sú názvy, ktorými nazveš elementy. Triedy definujú skupiny elementov a idy poukazujú na konkrétne elementy. Napríklad, nasledujúci tag môže byť identifikovaný v CSS pomocou tagu `a`, triedy `external_link` a idu `link_to_wiki_page`:
@@ -96,42 +96,42 @@ Prečítaj si o [CSS selektoroch na w3schools][4].
96
96
Potom musíme povedať našej HTML šablóne, že sme pridali nejaké CSS. Otvor súbor `blog/templates/blog/post_list.html` a pridaj tento riadok na úplný začiatok:
97
97
98
98
```html
99
-
{% load staticfiles %}
100
-
```
99
+
{% load staticfiles %}
100
+
```
101
101
102
102
Práve načítavame statické súbory :). Potom medzi `<head>` a `</head>`, po odkazoch na CSS súbory Bootstrapu pridaj nasledujúci riadok (prehliadač číta súbory v poradí, v akom sú zadané, takže kód v našom súbore môže prepísať už načítaný kód z Bootstrapu):
Tento riadok naimportuje z Google fontov (https://www.google.com/fonts) font, ktorý sa volá *Lobster*.
164
164
165
165
Teraz pridaj riadok `font-rodina: 'Lobster';` do CSS súboru `blog/static/css/blog.css` vnútri deklarácie `h1 a` (to je ten kód medzi zátvorkami `{` a `}`) a obnov stránku:
166
166
167
167
```css
168
-
h1a {
169
-
color: #FCA205;
170
-
font-family: 'Lobster';
171
-
}
172
-
```
168
+
h1a {
169
+
color: #FCA205;
170
+
font-family: 'Lobster';
171
+
}
172
+
```
173
173
174
174
![Obrázok 14.3][7]
175
175
@@ -182,104 +182,104 @@ Ako sme už spomenuli vyššie, CSS má koncept tried, ktorými v podstate pomen
182
182
Skús pomenovať niektoré časti HTML kódu. Pridaj triedu s názvom `page-header` do `div`u, ktorý obsahuje hlavičku, takto nejako:
183
183
184
184
```html
185
-
<divclass="page-header">
186
-
<h1><ahref="/">Django Girls Blog</a></h1>
187
-
</div>
185
+
<divclass="page-header">
186
+
<h1><ahref="/">Django Girls Blog</a></h1>
187
+
</div>
188
188
```
189
189
190
190
A teraz pridaj triedu, `post` do `div`u, v ktorom je blog post.
191
191
192
192
```html
193
-
<divclass="post">
194
-
<p>published: {{ post.published_date }}</p>
195
-
<h1><ahref="">{{ post.title }}</a></h1>
196
-
<p>{{ post.text|linebreaks }}</p>
197
-
</div>
198
-
```
193
+
<divclass="post">
194
+
<p>published: {{ post.published_date }}</p>
195
+
<h1><ahref="">{{ post.title }}</a></h1>
196
+
<p>{{ post.text|linebreaks }}</p>
197
+
</div>
198
+
```
199
199
200
200
Teraz pridáme deklarácie rôznym selektorom. Selektory, ktoré začínajú `.` sa týkajú tried. Na webe je ohľadne CSS veľa skvelých tutorialov a vysvetlení, ktoré ti pomôžu pochopiť nasledujúci kód. Ale teraz len skopíruj a vlož nasledujúci kód do súboru `blog/static/css/blog.css`:
Teraz s deklaráciami tried obklop HTML kód, ktorý zobrazuje posty. Nahraď toto:
253
253
254
254
```html
255
-
{% for post in posts %}
256
-
<divclass="post">
257
-
<p>published: {{ post.published_date }}</p>
258
-
<h1><ahref="">{{ post.title }}</a></h1>
259
-
<p>{{ post.text|linebreaks }}</p>
260
-
</div>
261
-
{% endfor %}
262
-
```
255
+
{% for post in posts %}
256
+
<divclass="post">
257
+
<p>published: {{ post.published_date }}</p>
258
+
<h1><ahref="">{{ post.title }}</a></h1>
259
+
<p>{{ post.text|linebreaks }}</p>
260
+
</div>
261
+
{% endfor %}
262
+
```
263
263
264
264
v súbore `blog/templates/blog/post_list.html` týmto:
265
265
266
266
```html
267
-
<divclass="content container">
268
-
<divclass="row">
269
-
<divclass="col-md-8">
270
-
{% for post in posts %}
271
-
<divclass="post">
272
-
<divclass="date">
273
-
{{ post.published_date }}
274
-
</div>
275
-
<h1><ahref="">{{ post.title }}</a></h1>
276
-
<p>{{ post.text|linebreaks }}</p>
267
+
<divclass="content container">
268
+
<divclass="row">
269
+
<divclass="col-md-8">
270
+
{% for post in posts %}
271
+
<divclass="post">
272
+
<divclass="date">
273
+
{{ post.published_date }}
277
274
</div>
278
-
{% endfor %}
279
-
</div>
275
+
<h1><ahref="">{{ post.title }}</a></h1>
276
+
<p>{{ post.text|linebreaks }}</p>
277
+
</div>
278
+
{% endfor %}
280
279
</div>
281
280
</div>
282
-
```
281
+
</div>
282
+
```
283
283
284
284
Ulož tieto súbory a obnov svoju web stránku.
285
285
@@ -293,4 +293,4 @@ Neboj sa trochu pohrať s týmto CSS, skús niektoré veci zmeniť. Ak niečo po
293
293
294
294
Mimochodom, naozaj odporúčame tento bezplatný on-line [kurz HTML & CSS Codeacademy ][2] ako domácu úlohu po skončení tohto workshopu, kde sa naučíš všetko, čo potrebuješ vedieť, aby boli tvoje webové stránky s CSS krajšie.
0 commit comments