Lezione CSS - Lezione 2 - Iniziamo a usare i CSS. ProprietĂ CSS background, color.
Ciao a tutti. Quindi, nella lezione precedente ho creato due file: uno HTML e uno CSS. Ecco il loro codice:
index.html:
<html> <head> <title>Corso CSS</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p>Impara CSS insieme a drupalbook.org</p> <p>Seconda riga: impara CSS insieme a drupalbook.org</p> </body> </html>
style.css:
body{
background: #eeeeee; /* sfondo della pagina */
font-size: 14px; /* dimensione del font */
}
p{
color: #ff0000; /* colore del testo */
}
In questa lezione continueremo a studiare i CSS e daremo un po’ di colore e vivacità al nostro modello. Iniziamo con la proprietà background, che abbiamo già applicato al tag body:
body{
background: #eeeeee; /* sfondo della pagina */
font-size: 14px; /* dimensione del font */
}
Come potete vedere, è apparso uno sfondo grigio per la pagina:
Analizziamo prima la sintassi del file CSS. Tutte le proprietà CSS iniziano con un selettore che indica a quale elemento vogliamo applicare le proprietà , ad esempio i selettori body, p, .class, #id. Potete notare che davanti al selettore può esserci un punto o un cancelletto. Il punto si usa per i tag (uno o più) di una determinata classe, mentre il cancelletto per un tag con un determinato id. Ecco un esempio per chiarire:
<html>
<head>
<title>Corso CSS</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
<body>
<div class="green">
<p>Impara CSS insieme a drupalbook.org</p>
</div>
<div id="blue">
<p>Seconda riga: impara CSS insieme a drupalbook.org</p>
</div>
</body>
</html>
Ho aggiunto due blocchi: uno con la classe green e uno con l’id blue. Ora scriverò il CSS per questi elementi:
body{
background: #eeeeee; /* sfondo della pagina */
font-size: 14px; /* dimensione del font */
}
.green{
color: #00ff00 /* colore del testo */
}
#blue{
color: #0000ff /* colore del testo */
}
Come vedete, ho scritto senza punto o cancelletto per il tag body. Allo stesso modo, senza simboli scriviamo il CSS per altri tag come p, span, ul, li e così via. Con il punto scriviamo il CSS per tag con una certa classe, con il cancelletto per tag con un certo id. Vi consiglio di annotarlo per non confondervi in futuro:
Punto – per le classi
Cancelletto – per gli id
Senza punto né cancelletto – per i tag senza classi o id
Dopo aver indicato il tag, la classe o l’id, scriviamo il CSS tra parentesi graffe {}:
body{ /* tag */
}
.green{ /* classe */
}
#blue{ /* id */
}
Come ricordate dal mio breve corso HTML, gli attributi class e id sono universali per i tag HTML, quindi possono essere applicati a qualsiasi tag. In questo modo, tra molti tag come p, span, li, possiamo assegnare diversi stili CSS a elementi specifici.
Ora, all’interno delle parentesi graffe, possiamo scrivere le proprietà CSS. Iniziamo dalla più semplice: color. Color definisce il colore del testo. Si scrive prima il nome della proprietà , poi dopo i due punti si indica il valore. Per la proprietà color possiamo usare sia valori numerici sia parole chiave:
.green{
color: #00ff00; /* colore del testo */
}
#blue{
color: #0000ff; /* colore del testo */
}
/* in modo analogo */
.green{
color: green; /* colore del testo */
}
#blue{
color: blue; /* colore del testo */
}
Se usiamo la notazione numerica, composta da 6 cifre esadecimali, mettiamo un cancelletto davanti al numero. Le prime due cifre indicano la quantità di rosso, la terza e la quarta la quantità di verde, la quinta e la sesta quella di blu. Questo schema è chiamato RGB (Red = rosso, Green = verde, Blue = blu). I numeri esadecimali vanno da 0 a F, dove dopo il 9 segue la lettera A. Per scegliere un colore in formato esadecimale possiamo usare Photoshop. Cliccate sul selettore dei colori e scegliete la tonalità desiderata dalla palette:
Ora che sapete come scegliere un colore per la proprietĂ color, potete facilmente selezionare anche un colore per la proprietĂ background. Cambiamo quindi il colore dello sfondo e rendiamo il testo piĂą leggibile:
body{
background: #fafafa; /* sfondo della pagina */
color: #333; /* colore di tutto il testo nella pagina */
}
.green{
/* colore del testo */
}
#blue{
/* colore del testo */
}
Quando scrivete più di una proprietà CSS, dovete usare il punto e virgola per indicare la fine di ogni istruzione. Ora la nostra pagina è più leggibile:
Aggiungiamo ora un po’ di verde e blu qua e là :
index.html:
<html> <head> <title>Corso CSS</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p><span id="blue">Impara CSS</span> insieme a <span class="green">drupalbook.org</span></p> <p>Seconda riga: impara CSS insieme a <span class="green">drupalbook.org</span></p> </body> </html>
E style.css:
body{
background: #fafafa; /* sfondo della pagina */
color: #333;
}
.green{
color: #26e921; /* colore del testo */
}
#blue{
color: #0f15f3; /* colore del testo */
}
