Skip to content

Commit 2a9ea25

Browse files
patjoukpatjouk
committed
Fix code
1 parent 38673c9 commit 2a9ea25

1 file changed

Lines changed: 143 additions & 143 deletions

File tree

‎it/css/README.md‎

Lines changed: 143 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ Bootstrap è uno dei più popolari framework HTML e CSS per costruire bellissimi
1818

1919
Per installare Bootstrap, avrai bisogno di aggiungere questo nel tag `<head>` del tuo file `.html` (`blog/templates/blog/post_list.html`):
2020

21-
```html
22-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap.min.css">
23-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap-theme.min.css">
24-
```
21+
```html
22+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
23+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
24+
```
2525

2626
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!
2727

@@ -73,64 +73,64 @@ Facciamo comunque un esempio. Perchè non cambiare il colore del nostro header?
7373

7474
Aggiungi il seguente codice nel tuo file `static/css/blog.css`:
7575

76-
```css
77-
h1 a {
78-
    color: #FCA205;
79-
}
80-
```
76+
```css
77+
h1 a {
78+
    color: #FCA205;
79+
}
80+
```
8181

8282
`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!
8383

8484
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`:
8585

86-
```html
87-
<a href="proxy.php?url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDjango" class="external_link" id="link_to_wiki_page">
88-
```
86+
```html
87+
<a href="http://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
88+
```
8989

9090
Per saperne di più puoi leggere [CSS Selectors in w3schools][4].
9191

9292
[4]: http://www.w3schools.com/cssref/css_selectors.asp
9393

9494
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:
9595

96-
```html
97-
{% load staticfiles %}
98-
```
96+
```html
97+
{% load staticfiles %}
98+
```
9999

100100
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):
101101

102-
```html
103-
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%7B%25+static+"css/blog.css' %}">
104-
```
102+
```html
103+
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
104+
```
105105

106106
Stiamo dicendo al nostro template dove trovare i nostri file CSS.
107107

108108
Il tuo file dovrebbe avere questo aspetto:
109109

110-
```html
111-
{% load staticfiles %}
112-
<html>
113-
    <head>
114-
        <title>Django Girls blog</title>
115-
        <link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap.min.css">
116-
        <link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap-theme.min.css">
117-
        <link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%7B%25+static+"css/blog.css' %}">
118-
    </head>
119-
    <body>
120-
        <div>
121-
            <h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F">Django Girls Blog</a></h1>
122-
        </div>
123-
124-
        {% for post in posts %}
125-
            <div>
126-
                <p>published: {{ post.published_date }}</p>
127-
                <h1><a href="">{{ post.title }}</a></h1>
128-
                <p>{{ post.text|linebreaks }}</p>
129-
            </div>
130-
        {% endfor %}
131-
    </body>
132-
</html>
133-
```
110+
```html
111+
{% load staticfiles %}
112+
<html>
113+
    <head>
114+
        <title>Django Girls blog</title>
115+
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
116+
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
117+
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
118+
    </head>
119+
    <body>
120+
        <div>
121+
            <h1><a href="/">Django Girls Blog</a></h1>
122+
        </div>
123+
124+
        {% for post in posts %}
125+
            <div>
126+
                <p>published: {{ post.published_date }}</p>
127+
                <h1><a href="">{{ post.title }}</a></h1>
128+
                <p>{{ post.text|linebreaks }}</p>
129+
            </div>
130+
        {% endfor %}
131+
    </body>
132+
</html>
133+
```
134134

135135
OK, salviamo il file e ricarichiamo la pagina web!
136136

@@ -140,11 +140,11 @@ OK, salviamo il file e ricarichiamo la pagina web!
140140

141141
Ben fatto! Adesso potremmo dare un po' più d'aria alla nostra pagina web e aumentare il margine nella parte sinistra. Proviamo!
142142

143-
```css
144-
body {
145-
    padding-left: 15px;
146-
}
147-
```
143+
```css
144+
body {
145+
    padding-left: 15px;
146+
}
147+
```
148148

149149
Aggiungi questo al tuo CSS, salva il file e guarda il risultato!
150150

@@ -154,20 +154,20 @@ Aggiungi questo al tuo CSS, salva il file e guarda il risultato!
154154

155155
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`:
156156

157-
```html
158-
<link href="proxy.php?url=http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%26amp%3Bsubset%3Dlatin%2Clatin-ext" rel="stylesheet" type="text/css">
159-
```
157+
```html
158+
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
159+
```
160160

161161
Questa riga consente di importare un font chiamato *Lobster* da Google Fonts (https://www.google.com/fonts).
162162

163163
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:
164164

165-
```css
166-
h1 a {
167-
    color: #FCA205;
168-
    font-family: 'Lobster';
169-
}
170-
```
165+
```css
166+
h1 a {
167+
    color: #FCA205;
168+
    font-family: 'Lobster';
169+
}
170+
```
171171

172172
![Figura 14.3][7]
173173

@@ -179,105 +179,105 @@ Come già accennato, il CSS utilizza il concetto di 'classe' che in pratica ti p
179179

180180
Prova a dare dei nomi ad alcune parti dell'HTML. Aggiungi una classe chiamta `page-header` al tuo `div` che contiene l'intestazione così:
181181

182-
```html
183-
<div class="page-header">
184-
    <h1><a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F">Django Girls Blog</a></h1>
185-
</div>
186-
```
182+
```html
183+
<div class="page-header">
184+
    <h1><a href="/">Django Girls Blog</a></h1>
185+
</div>
186+
```
187187

188188
E ora aggiungi una classe `post` al tuo `div` che contiene un articolo del blog.
189189

190-
```html
191-
<div class="post">
192-
    <p>pubblicato: {{ post.published_date }}</p>
193-
    <h1><a href="">{{ post.title }}</a></h1>
194-
    <p>{{ post.text|linebreaks }}</p>
195-
</div>
196-
```
190+
```html
191+
<div class="post">
192+
    <p>pubblicato: {{ post.published_date }}</p>
193+
    <h1><a href="">{{ post.title }}</a></h1>
194+
    <p>{{ post.text|linebreaks }}</p>
195+
</div>
196+
```
197197

198198
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`:
199199

200-
```css
201-
.page-header {
202-
    background-color: #ff9400;
203-
    margin-top: 0;
204-
    padding: 20px 20px 20px 40px;
205-
}
206-
207-
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
208-
    color: #ffffff;
209-
    font-size: 36pt;
210-
    text-decoration: none;
211-
}
212-
213-
.content {
214-
    margin-left: 40px;
215-
}
216-
217-
h1, h2, h3, h4 {
218-
    font-family: 'Lobster', cursive;
219-
}
220-
221-
.date {
222-
    float: right;
223-
    color: #828282;
224-
}
225-
226-
.save {
227-
    float: right;
228-
}
229-
230-
.post-form textarea, .post-form input {
231-
    width: 100%;
232-
}
233-
234-
.top-menu, .top-menu:hover, .top-menu:visited {
235-
    color: #ffffff;
236-
    float: right;
237-
    font-size: 26pt;
238-
    margin-right: 20px;
239-
}
240-
241-
.post {
242-
    margin-bottom: 70px;
243-
}
244-
245-
.post h1 a, .post h1 a:visited {
246-
    color: #000000;
247-
}
248-
```
200+
```css
201+
.page-header {
202+
    background-color: #ff9400;
203+
    margin-top: 0;
204+
    padding: 20px 20px 20px 40px;
205+
}
206+
207+
.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
208+
    color: #ffffff;
209+
    font-size: 36pt;
210+
    text-decoration: none;
211+
}
212+
213+
.content {
214+
    margin-left: 40px;
215+
}
216+
217+
h1, h2, h3, h4 {
218+
    font-family: 'Lobster', cursive;
219+
}
220+
221+
.date {
222+
    float: right;
223+
    color: #828282;
224+
}
225+
226+
.save {
227+
    float: right;
228+
}
229+
230+
.post-form textarea, .post-form input {
231+
    width: 100%;
232+
}
233+
234+
.top-menu, .top-menu:hover, .top-menu:visited {
235+
    color: #ffffff;
236+
    float: right;
237+
    font-size: 26pt;
238+
    margin-right: 20px;
239+
}
240+
241+
.post {
242+
    margin-bottom: 70px;
243+
}
244+
245+
.post h1 a, .post h1 a:visited {
246+
    color: #000000;
247+
}
248+
```
249249

250250
Ora aggiungi all'esterno del codice HTML riguardante i posts all'interno del blog alcuni elementi con definizione di classi. Sostituisci questo:
251251

252-
```html
253-
{% for post in posts %}
254-
    <div class="post">
255-
        <p>pubblicato: {{ post.published_date }}</p>
256-
        <h1><a href="">{{ post.title }}</a></h1>
257-
        <p>{{ post.text|linebreaks }}</p>
258-
    </div>
259-
{% endfor %}
260-
```
252+
```html
253+
{% for post in posts %}
254+
    <div class="post">
255+
        <p>pubblicato: {{ post.published_date }}</p>
256+
        <h1><a href="">{{ post.title }}</a></h1>
257+
        <p>{{ post.text|linebreaks }}</p>
258+
    </div>
259+
{% endfor %}
260+
```
261261

262262
nel file `blog/templates/blog/post_list.html` con quanto segue:
263263

264-
```html
265-
<div class="content container">
266-
    <div class="row">
267-
        <div class="col-md-8">
268-
            {% for post in posts %}
269-
                <div class="post">
270-
                    <div class="date">
271-
                        {{ post.published_date }}
272-
                    </div>
273-
                    <h1><a href="">{{ post.title }}</a></h1>
274-
                    <p>{{ post.text|linebreaks }}</p>
275-
                </div>
276-
            {% endfor %}
277-
        </div>
278-
    </div>
279-
</div>
280-
```
264+
```html
265+
<div class="content container">
266+
    <div class="row">
267+
        <div class="col-md-8">
268+
            {% for post in posts %}
269+
                <div class="post">
270+
                    <div class="date">
271+
                        {{ post.published_date }}
272+
                    </div>
273+
                    <h1><a href="">{{ post.title }}</a></h1>
274+
                    <p>{{ post.text|linebreaks }}</p>
275+
                </div>
276+
            {% endfor %}
277+
        </div>
278+
    </div>
279+
</div>
280+
```
281281

282282
Salva entrambi i file e ricarica la pagina web.
283283

0 commit comments

Comments
 (0)