CSSGIUSEPPE CRAMAROSSAALTERNANZA SCUOLA-LAVORO @ LICEO SCIENTIFICO «G. GALILEI» BITONTO3 DICEMBRE 2016

SOMMARIO

Generalità Commenti Selettori Attributi e valoriPseudoclassi Esempi

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

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

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’asteriscoTag HTML: <div id=‘’identificatore’’></div>Selettore CSS: #identificatore

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;}

PSEUDOCLASSI

Le pseudoclassi modificano solo una parte dell’elemento

Esempi Colori dei link Prima lettera della frase Prima linea

ESEMPIO DI LAYOUT IN HTML E CSS

ESEMPIO DI LAYOUT E MENU IN HTML E CSS

RISULTATO