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
> Questo lavoro è sotto la licenza internazionale di Creative Commons Attribution-ShareAlike 4.0. Per vedere una copia di questa licenza, visita http://creativecommons.org/licenses/by-sa/4.0/
8
6
@@ -26,7 +24,7 @@ Assomiglierà (più o meno) a questo:
26
24
27
25
[2]: images/application.png
28
26
29
-
> Se lavori da solo/a al tutorial e non hai un'insegnante che ti possa aiutare nel caso avessi qualche problema, abbiamo una chat per te: [!\[Gitter\](https://badges.gitter.im/Join Chat.svg)][1]. Abbiamo chiesto ai nostri insegnanti e partecipanti precedenti di esserci di volta in volta ed aiutare gli altri con il tutorial! Non aver paura di fare domande!
27
+
> Se lavori da solo/a al tutorial e non hai un'insegnante che ti possa aiutare nel caso avessi qualche problema, abbiamo una chat per te: [](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Abbiamo chiesto ai nostri insegnanti e partecipanti precedenti di esserci di volta in volta ed aiutare gli altri con il tutorial! Non aver paura di fare domande!
Le due linee sopra riportate non aggiungono nessun file al tuo progetto. Stanno solo reindirizzando ad alcuni files the esistono in internet. Ma non ti preoccupare troppo, vai avanti e apri la tua pagina web e ricarica la pagina. Eccolo qui!
27
27
@@ -73,41 +73,41 @@ Facciamo comunque un esempio. Perchè non cambiare il colore del nostro header?
73
73
74
74
Aggiungi il seguente codice nel tuo file `static/css/blog.css`:
75
75
76
-
css
76
+
```css
77
77
h1 a {
78
78
color: #FCA205;
79
79
}
80
-
80
+
```
81
81
82
82
`h1 a` è un esempio di selettore CSS. Questo significa che stiamo cercando di cambiare lo stile su tutti gli elementi `a` all'interno di un elemento `h1` (in questo caso, abbiamo una linea di codice così strutturata: `<h1><a href="">link</a></h1>`). In questo caso, stiamo cercando di cambiare il colore con `#FCA205`, che corrisponde all'arancione. Ovviamente puoi mettere il codice di qualsiasi altro colore tu preferisca!
83
83
84
84
In un file CSS definiamo lo stile degli elementi presenti nel file HTML. Gli elementi in questione vengono identificati con il nome (ad esempio `a`, `h1`, `body`) oppure con l'attributo `class` o l'attributo `id`. Class e id sono i nomi che assegni agli elementi. Le classi definiscono gruppi di elementi mentre gli id indicano uno specifico elemento. Ad esempio, il seguente elemento può essere identificato nel CSS utilizzando il nome del tag `a`, la classe `external_link` oppure l'id ` link_to_wiki_page`:
Infine, dobbiamo anche far sapere al nostro template in HTML che abbiamo effettivamente aggiunto un po' di CSS. Apri il file `blog/templates/blog/post_list.html` e aggiungi la seguente riga di testo:
95
95
96
-
html
96
+
```html
97
97
{% load staticfiles %}
98
-
98
+
```
99
99
100
100
Per ora stiamo solamente caricando tutti i nostri static files :). Aggiungi questa riga di testo tra `<head>` e `</head>`, subito dopo il link al file CSS di Bootstrap (il browser legge i file nell'ordine in cui sono dati, per cui il codice nei nostri files può sovrascrivere il codice presente nei files di Bootstrap):
Stiamo dicendo al nostro template dove trovare i nostri file CSS.
107
107
108
108
Il tuo file dovrebbe avere questo aspetto:
109
109
110
-
html
110
+
```html
111
111
{% load staticfiles %}
112
112
<html>
113
113
<head>
@@ -130,7 +130,7 @@ Il tuo file dovrebbe avere questo aspetto:
130
130
{% endfor %}
131
131
</body>
132
132
</html>
133
-
133
+
```
134
134
135
135
OK, salviamo il file e ricarichiamo la pagina web!
136
136
@@ -140,11 +140,11 @@ OK, salviamo il file e ricarichiamo la pagina web!
140
140
141
141
Ben fatto! Adesso potremmo dare un po' più d'aria alla nostra pagina web e aumentare il margine nella parte sinistra. Proviamo!
142
142
143
-
css
143
+
```css
144
144
body {
145
145
padding-left: 15px;
146
146
}
147
-
147
+
```
148
148
149
149
Aggiungi questo al tuo CSS, salva il file e guarda il risultato!
150
150
@@ -154,20 +154,20 @@ Aggiungi questo al tuo CSS, salva il file e guarda il risultato!
154
154
155
155
Potremmo anche personalizzare lo stile calligrafico nel nostro header. Incolla quanto segue all'interno del tag `<head>` che si trova nel file `blog/templates/blog/post_list.html`:
Questa riga consente di importare un font chiamato *Lobster* da Google Fonts (https://www.google.com/fonts).
162
162
163
163
Ora aggiungi `font-family: 'Lobster';` nel file CSS `static/css/blog.css` all'interno del blocco `h1 a` (il codice tra le due parentesi graffe, `{` e `}`) e ricarica la pagina:
164
164
165
-
css
165
+
```css
166
166
h1 a {
167
167
color: #FCA205;
168
168
font-family: 'Lobster';
169
169
}
170
-
170
+
```
171
171
172
172
![Figura 14.3][7]
173
173
@@ -179,25 +179,25 @@ Come già accennato, il CSS utilizza il concetto di 'classe' che in pratica ti p
179
179
180
180
Prova a dare dei nomi ad alcune parti dell'HTML. Aggiungi una classe chiamta `page-header` al tuo `div` che contiene l'intestazione così:
181
181
182
-
html
182
+
```html
183
183
<div class="page-header">
184
184
<h1><a href="/">Django Girls Blog</a></h1>
185
185
</div>
186
-
186
+
```
187
187
188
188
E ora aggiungi una classe `post` al tuo `div` che contiene un articolo del blog.
189
189
190
-
html
190
+
```html
191
191
<div class="post">
192
192
<p>pubblicato: {{ post.published_date }}</p>
193
193
<h1><a href="">{{ post.title }}</a></h1>
194
194
<p>{{ post.text|linebreaks }}</p>
195
195
</div>
196
-
196
+
```
197
197
198
198
Ora aggiungiamo dei blocchi di codice ai nostri nuovi selettori. I selettori che iniziano con `.` indicano una classe. Online ci sono molti tutorial e spiegazioni sul CSS che possono aiutarti a comprendere il codice che stiamo per scrivere. Per ora, copia e incolla quanto segue nel tuo file `mysite/static/css/blog.css`:
199
199
200
-
css
200
+
```css
201
201
.page-header {
202
202
background-color: #ff9400;
203
203
margin-top: 0;
@@ -245,23 +245,23 @@ Ora aggiungiamo dei blocchi di codice ai nostri nuovi selettori. I selettori che
245
245
.post h1 a, .post h1 a:visited {
246
246
color: #000000;
247
247
}
248
-
248
+
```
249
249
250
250
Ora aggiungi all'esterno del codice HTML riguardante i posts all'interno del blog alcuni elementi con definizione di classi. Sostituisci questo:
251
251
252
-
html
252
+
```html
253
253
{% for post in posts %}
254
254
<div class="post">
255
255
<p>pubblicato: {{ post.published_date }}</p>
256
256
<h1><a href="">{{ post.title }}</a></h1>
257
257
<p>{{ post.text|linebreaks }}</p>
258
258
</div>
259
259
{% endfor %}
260
-
260
+
```
261
261
262
262
nel file `blog/templates/blog/post_list.html` con quanto segue:
263
263
264
-
html
264
+
```html
265
265
<div class="content container">
266
266
<div class="row">
267
267
<div class="col-md-8">
@@ -277,7 +277,7 @@ nel file `blog/templates/blog/post_list.html` con quanto segue:
0 commit comments