CSS: Proprietà di Base
Lezione 03 Le Proprietà di base CSS vanno utilizzate in modo opportuno e proficuo, pertanto è fondamentale comprendere quali sono i valori e le unità che è possibile usare per esse.
Ricordando quanto visto nella Lezione 02, ad ogni proprietà possiamo associare un valore. Ad esempio, se utilizziamo valori con tipi di dati basati su numeri, possiamo utilizzare numeri interi o in virgola mobile. Prima di approfondire le proprietà di base CSS, diamo uno sguardo alle unità di misura più importanti.
In genere, un pixel rappresenta il più piccolo elemento grafico visibile sullo schermo, corrispondente a un punto luminoso. Quindi il pixel è un’unità di misura assoluta, il che significa che è la soluzione migliore per dimensioni ben determinate.
I cosiddetti em rappresentano unità di misura relative, e dipendono dalla dimensione del carattere predefinito. Ad esempio, 0.5em sta per metà della dimensione del carattere predefinito oppure 1.5em sta per una volta e mezzo più grande del carattere predefinito. Gli ems sono molto adatti agli schermi degli smartphone, poichè lasciano al browser il compito di impostare la dimensione giusta del carattere.
/* file styles.css */
p {
border-style: solid;
border-width: 1px;
font-size:1.5em;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Proprietà e valori nei CSS</p> </body> </html>
Proprietà e valori nei CSS
Un’altra importante unità di misura relativa è la percentuale . Come si evince dall’esempio che segue, l’altezza del box è fissata a 50 pixel, mentre la larghezza sfrutterà tutto lo spazio disponibile. Possiamo quindi impostare le dimensioni degli elementi HTML, con un controllo di blocco, con le proprietà width e height.
/* file styles.css */
.box {
border-style: solid;
width: 100%;
height: 50px;
color: red;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <p class="box">Box di altezza bloccata a 50px</p> </body> </html>
Box di altezza bloccata a 50px
Finora, abbiamo visto come modificare la dimensione del font, usando diverse unità di misura. Tuttavia, ci sono molte altre cose con cui possiamo armeggiare per dare stile alla nostra pagina html. Vediamo il seguente esempio.
/* file styles.css */
.myclass-01 {
font-size: 1.5em;
font-style: italic;
font-weight: bold;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <p class="myclass-01">la classe che ho scelto determina il font</p> </body> </html>
la classe che ho scelto determina il font
La scelta del font è spesso un modo per voler dare uno stile personale e particolare al testo. Tuttavia, può capitare che il browser che visualizza il nostro documento, non riconosce quel particolare font. In tal, caso è buona norma utilizzare dei font-family di riserva, anche indicati come backup fonts .
/* file styles.css */
.intestazione {
font-family: "Akzidenz-Grotesk", "Helvetica", "Serif";
font-size: 1.5em;
font-weight: bold;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <h1 class="intestazione">Tre fonts is meglio che one</h1> </body> </html>
Tre fonts is meglio che one
Il browser proverà la prima famiglia di font; se non è disponibile, proverà la seconda. Alla fine, utilizzerà la famiglia di font serif o sans-serif di default. Nell’ultimo esempio, il file styles.css imposta i valori di varie proprietà, tutte che fanno riferimento al font. In alternativa, possiamo usare delle scorciatoie (shorthand properties): possiamo raggruppare i valori in un’unica riga:
/* file styles.css */
.intestazione {
font: italic bold 1.5em "Lucida Grande", sans-serif;
}
Le shorthand ci permettono di impostare i valori di diverse proprietà in una singola dichiarazione, risparmiando tempo e rendendo il foglio di stile più leggibile. Si noti che abbiamo incluso i valori per font-size e font-family: in generale, se un valore non viene inserito, verrà utilizzato un valore predefinito.
Ad esempio, un’altra shorthand properties è quella che ci consente di impostare la larghezza, lo stile e il colore del bordo di un elemento HTML.
/* file styles.css */
.box {
border: 2px dotted red;
}
Ricapitolando, la proprietà font combina tutte le proprietà relative ai font in una singola dichiarazione. Lo stesso accade per border e per altre proprietà attribuibili ad un elemento HTML. Nell’ultimo esempio stiamo definendo un bordo rosso puntato di 2 pixel.
Altre proprietà di base CSS. Rimanendo sul bordo, soffermiamoci sulla scelta dei colori. Abbiamo più possibilità per inserire un valore, possiamo scegliere tra una lista di nomi standard oppure inserire una codifica esadecimale del colore. Proviamo usare i colori firebrick e goldenrod.
/* file styles.css */
.box {
color: firebrick;
background-color: goldenrod;
border: 2px solid firebrick;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <div class="box">Questi colori mi ricordano la Casa del Griffondoro</div> </body> </html>
Questi colori mi ricordano la Casa del Griffondoro
Ci sono ben 140 colori standard che includono nomi strani come papayawhip e peachpuff. Ovviamente, i nomi standard non includono tutti i colori possibili. Si pensi alle infinte tonalità che possiamo dare al rosso o a qualsiasi altro colore. Per raggiungere un livello di dettaglio più avanzato, possiamo usare i codici esadecimali ( hex-code ) per impostare il colore desiderato.
/* file styles.css */
.box {
color: #fff;
background-color: #bf5700;
}
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <div class="box">Esadecimale con cancelletto (hash symbol)</div> </body> </html>
Esadecimale con cancelletto (hash symbol)
Gli hex-code sono i più diffusi sul Web. La sintassi prevede un simbolo di hash seguito da tre o sei cifre che rappresentano la quantità di rosso, verde e blu in un colore.
Ritorna alla precedente <– []–> Vai alla successiva
