Lezione 7 - 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