Slide della terza lezione di alternanza scuola-lavoro dove ho parlato del CSS.

1. CSS
GIUSEPPE CRAMAROSSA
ALTERNANZA SCUOLA-LAVORO @ LICEO SCIENTIFICO «G. GALILEI» BITONTO
3 DICEMBRE 2016

2. SOMMARIO
 Generalità
 Commenti
 Selettori
 Attributi e valori
 Pseudoclassi
 Esempi

3. GENERALITÀ
 Permette di definire l’aspetto di una pagina
web (colori, dimensioni, forme, posizioni)
 Non è case-sensitive
 Esistono editor e IDE che permettono la
colorazione della sintassi
 Come l’HTML, può anche essere
utilizzato il blocco note
 L’estensione del file è .css
 Può essere incluso nella pagina web in due
modi
 Inline tramite il tag <style></style>
(fortemente sconsigliato)
 In un file separato e aggiunto tramite il
tag <link /> nella testata
 La versione corrente del CSS è la 3

4. COMMENTI
 Molto utili per documentare
 Utili per eventuali modifiche
 Utili per dividere le varie sezioni del documento
 I commenti iniziano con /* (slash asterisco) e
finiscono con */ (asterisco slash)
 Non è possibile creare commenti annidati
 Vengono ignorati dal browser

5. SELETTORI
 Indicano qual è l’elemento a cui applicare quelle regole
 Le classi sono precedute da un . (punto)
 Il tag html deve avere l’attributo class con lo stesso valore senza
il punto
 Tag HTML: <div class=«classe»></div>
 Selettore CSS: .classe
 Gli identificatori sono preceduti da un # (asterisco)
 Il tag html deve avere l’attributo id con lo stesso valore senza
l’asterisco
 Tag HTML: <div id=‘’identificatore’’></div>
 Selettore CSS: #identificatore

6. PROPRIETÀ E VALORI
 Le proprietà indicano il dato da
modificare
 I valori possono essere
costanti, stringhe, numeri
 Ci possono essere anche più
valori
 Proprietà e valori sono separati
da : (due punti)
 Proprietà e valori formano una
dichiarazione
 Le dichiarazioni sono separate
da un ; (punto e virgola)
/* Esempio */
selettore
{
proprietà1: valore;
proprietà2: valore1 valore2;
}

7. PSEUDOCLASSI
 Le pseudoclassi modificano solo una parte
dell’elemento
 Esempi
 Colori dei link
 Prima lettera della frase
 Prima linea

8. ESEMPIO DI LAYOUT IN HTML E CSS

9. ESEMPIO DI LAYOUT E MENU IN HTML
E CSS

10. RISULTATO