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
To nepřidá žádné soubory do projektu. Jen to odkazuje na soubory, které existují na internetu. Jen do toho, otevři tvůj web a aktualizuj stránku. Tady to je!
@@ -42,11 +42,11 @@ Jak jsi viděla, když jsme spustili `collectstatic` na serveru, Django už ví,
42
42
Uděláš to tak, že vytvoříš složku s názvem `static` uvnitř aplikace blog:
43
43
44
44
```
45
-
djangogirls
46
-
├── blog
47
-
│ ├── migrations
48
-
│ └── static
49
-
└── mysite
45
+
djangogirls
46
+
├── blog
47
+
│ ├── migrations
48
+
│ └── static
49
+
└── mysite
50
50
```
51
51
52
52
Django automaticky najde všechny složky s názvem "static" uvnitř vašich složek aplikací, a bude moci využívat jejich obsahu jako statické soubory.
@@ -56,12 +56,12 @@ Django automaticky najde všechny složky s názvem "static" uvnitř vašich slo
56
56
Vytvoř soubor CSS, chceš-li na stránku www přidat svůj vlastní styl. Vytvoř nový adresář s názvem `css` uvnitř adresáře `static`. Vytvoř nový soubor s názvem `blog.css` uvnitř tohoto adresáře `css`. Připraveno?
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
Čas k napsání nějakého CSS! Otevři soubor `blog/static/css/blog.css` v editoru kódu.
67
67
@@ -76,17 +76,17 @@ Ale pojďme něco málo udělat. Možná bychom mohli změnit barvu našeho záh
76
76
V souboru `blog/static/css/blog.css` přidej následující kód:
77
77
78
78
```css
79
-
h1a {
80
-
color: #FCA205;
81
-
}
79
+
h1a {
80
+
color: #FCA205;
81
+
}
82
82
```
83
83
84
84
`h1` je CSS selector. To znamená, že budeme aplikovat naše styly na jakýkoliv `a` element uvnitř `h1` (např. když máme v kódu něco jako: `< h1 >< href = "" > odkaz < /a >< / h1 >`). V takovém případě sdělujeme, že barvu elementu měníme na `#FCA205`, což je oranžová. Samozřejmě zde můžeš vložit vlastní barvu!
85
85
86
86
V CSS souboru určujeme styly pro prvky v souboru HTML. Prvky jsou identifikovány pomocí názvu prvku (tj, `a`,`h1`, `body`), atributem `class` nebo atributem `id`. Třídy/Class a id jsou jména, které pojmenovávají samotný prvek. Třídy definují skupiny prvků a Id poukazují na konkrétní prvky. Například, následující tag může identifikovat pomocí CSS tag `a`, třídu `external_link` nebo id `link_to_wiki_page`:
@@ -96,42 +96,42 @@ Přečti si o [CSS selektorech ve w3schools][4].
96
96
Pak je třeba také říct naší HTML šabloně, že jsme přidali nějaké CSS. Otevři soubor `blog/templates/blog/post_list.html` a přidej tento řádek na samý začátek:
97
97
98
98
```html
99
-
{% load staticfiles %}
99
+
{% load staticfiles %}
100
100
```
101
101
102
102
Právě nahráváme statické soubory :). Pak mezi `< head >``a/< / head >`, za odkazy na soubory Bootstrap CSS (prohlížeč načte soubory v pořadí, ve kterém jsou zapsány, takže kód v našem souboru může přepsat kód v Bootstrap souborech), přidejte tento řádek:
Tento řádek bude importovat písmo s názvem *Lobster* z Google písem (https://www.google.com/fonts).
164
164
165
165
Nyní přidej řádek `font-family: "Lobster";` do CSS souboru `blog/static/css/blog.css` uvnitř deklarace `h1` bloku (kód mezi závorkami `{` a `}`) a aktualizuj stránky:
166
166
167
167
```css
168
-
h1a {
169
-
color: #FCA205;
170
-
font-family: 'Lobster';
171
-
}
168
+
h1a {
169
+
color: #FCA205;
170
+
font-family: 'Lobster';
171
+
}
172
172
```
173
173
174
174
![Obrázek 14.3][7]
@@ -182,103 +182,103 @@ Jak bylo uvedeno výše, CSS má koncept tříd, který v podstatě umožňuje p
182
182
Pokračuj a pojmenuj některé části kódu HTML. Přidáš třídu s názvem `page-header` do tvého `div` tagu, který obsahuje záhlaví, jako je tento:
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 nyní přidej třídu, `post` do svého `div` obsahující 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|linebreaksbr }}</p>
197
-
</div>
193
+
<divclass="post">
194
+
<p>published: {{ post.published_date }}</p>
195
+
<h1><ahref="">{{ post.title }}</a></h1>
196
+
<p>{{ post.text|linebreaksbr }}</p>
197
+
</div>
198
198
```
199
199
200
200
Nyní přidáme deklaraci bloků pro jiné selektory. Selektory začínající `.` se týkají tříd. Existuje mnoho skvělých návodů a vysvětlení CSS na webu, které ti pomohou pochopit následující kód. Pro tuto chvíli stačí zkopírovat a vložit do souboru `blog/static/css/blog.css`:
0 commit comments