Nato per formattare il contenuto di un documento dal punto di vista logico, HTML non fornisce strumenti adeguati per una completa formattazione del testo. Per ovviare a questo problema sono stati introdotti, nel 1996, i CSS (Cascade Style Sheet) ovvero un meccanismo definito dal W3C per definire l’aspetto delle pagine Web. I CSS sono un insieme di regole il cui compito è quello di indicare al browser come devono essere rappresentati dal punto di vista grafico i contenuti di una pagina HTML. REGOLE Gli elementi costitutivi di una regola CSS sono:
Le proprietà sono gli aspetti sui quali si vuole agire: margini, sfondo, bordi ecc. I valori sono le caratteristiche che ogni proprietà deve assumere: dimensioni margini, colore sfondo ecc. La proprietà con il relativo valore, viene detta dichiarazione. Il selettore specifica a quali oggetti del documento deve essere applicata la dichiarazione: paragrafi o uno specifico paragrafo, intestazioni ecc.
Come prima cosa va indicato il nome del selettore sul quale operare. Tutte le dichiarazioni sono comprese fra parentesi graffe ( '{', '}' ). La singola proprietà è separata dai valori dal carattere ':'. Una regola può contenere più dichiarazioni separate dal carattere ';' (facoltativo dopo l’ultima dichiarazione). Gli spazi vengono ignorati. Per inserire un eventuale commento si utilizza la sintassi in stile C: il commento inizia con la coppia di caratteri '/*' e si chiude con '*/' e può coinvolgere anche più di una riga. /*questo testo è un commento che non sarà valutato dal browser*/ Ecco come inserire un CSS in una pagina HTML: <head> <style type="text/css"> h3 { background:orange; color:blue; font-style:italic } p.maiuscolo { font-weight:bold} /*classi di stili */ h1#primo {color: green} </style> </head> Possiamo ache scrivere lo stile in un file .css che importeremo così: <head> <link rel="stylesheet" type="text/css" href="nomefile.css" /> </head> Possiamo inoltre inserire lo stile nei tag: <h1 style="background:green; color:red"> titolo 1 </h1>
PROPRIETÀ DI STILE DEI FONT - font - font-style (normal – italic) - font-weight (normal – light – bold – bolder – da 100 a 900 passo 100) - font-size (unità di misura: pt (punti) – px (pixel) – in (pollici) – cm (centimetri) ) - font-family: Arial, Courier, Verdana - font-variant (normal – small-caps: le lettere maiuscole occupano lo spesso spazio delle minuscole) CONTROLLO COLORI - color - background-color - background-image: url (nomefile.est) - background-repeat (repeat – repeat-x – repeat-y – no-repeat) - background ALLINEAMENTO TESTO - text-align (left – right – center – justify) - margin-top - margin-right - margin-bottom - margin-left - margin SPAZIATURA DEL TESTO - letter-spacing (regola spaziatura fra caratteri) - text-indent (imposta rientro per prima riga del paragrafo) ALTRI STILI - text-decoration (underline – overline – line-through) - text-transform (none – lowercase – uppercase – capitalize) GLI ELENCHI - list-style-image (none – url() ) - list-style-position (inside – outside) - list-style-type (none – disc – square – circle) (decimal – lower-roman – upper-roman –lower-alpha – upper-alpha) LO SFONDO - background-color (colore – transparent) - background-image ( url(percorso file) – none) - background-repeat (repeat – repeat-x – repeat-y – no-repeat) - backgroung-position (top – bottom – left – right – center - x% - y% / coppia valori) - background-attachment (scroll – fixed) BORDI - border-width (thin – medium – thick – valore) - border-style (hidden – dotted – dashed – solid – double – groove – ridge – inset –outset) - border-color (colore) POSIZIONE position (static – relative – absolute – fixed) OVERFLOW overflow (visible – hidden – scroll – auto)
CSS permette di impostare delle regole che possono essere associate a tipi di tag fra loro omogenei. Il selettore di classe viene definito anteponendo al nome della classe il carattere ‘.’, il nome delle classi è case sensitive. .nomeClasse {…dichiarazioni …} Esempio .notizia {…dichiarazioni …} La classe viene poi associata al tag mediante l’attributo class. <h1 class="notizia"> …… </h1> <p class="notizia"> …… </p> nell’esempio, la formattazione "notizia" viene applicata sia al tag h1 che al tag p. Se la formattazione deve essere diversa è possibile specificare contemporaneamente nome del selettore e della classe, separati da un ‘.’ . Esempio .notizia {…dichiarazioni …} h1.notizia {…dichiarazioni …} p.notizia {…dichiarazioni …} La prima regola si applica a tutti gli oggetti ai quali viene applicata <…. class="notizia"> ; la seconda si applica solo alle intestazioni di primo livello associati alla classe <h1 class="notizia"> l’ultima invece si applica ai paragrafi associati alla classe <p class="notizia" > Gli identificatori vengono utilizzati quando serve identificare un oggetto in modo univoco. Apparentemente potrebbero sembrare simili alle classi ma, mentre le classi raggruppano oggetti omogenei, gli identificatori servono a distinguere un oggetto unico e non ripetibile all’interno di un documento HTML. Il selettore CSS è specificato anteponendo al valore dell’attributo id il simbolo ‘#’, il nome degli identificatori è case sensitive . #identificatore {…} Esempio #logoSito {…} Il selettore viene associato ad un elemento HTML mediante l’utilizzo del’’attributo id. <img …id="#logoSito"… /> Anche in questo caso è possibile legare un identificatore ad uno specifico tag: #logoSito {…} img#logoSito {…} h1#logoSito {…} La prima regola si applica all’oggetto che ha l’attributo id="logoSito", la seconda si applica solo se l’oggetto è un’immagine, la terza si applica solo se l’oggetto è un’intestazione di primo livello. Data l’univocità dell’attributo id, non possono esistere, nella stessa pagina, due tag con lo stesso id es. <img id="logoSito"> e <h1 id="logoSito"> devono trovarsi in pagine diverse. Le pseudoclassi distinguono gli oggetti in base alle loro proprietà intrinsiche, vengono individuate mediante nome dell’oggetto separato dal carattare ':' dalla proprietà intrinsica. Esempio p:first-child {… dichiarazioni …} identifica il primo paragrafo ma non i successivi. a:link {…} a:visited {…} a:hover {…} rappresentano le formattazioni per i link non visitati, per i link visitati e per quando il puntatore del mouse si trova sopra il link. Attenzione all’ordine in cui le regole vengono definite: ogni regola sovrascrive quelle precedenti (es un link visitato sarà formattato con lo stile hover se il mouse si troverà sopra l’elemento). - :first-line - specifica il formato che deve avere la prima riga (definita dal browser) di testo. - :first-letter – definisco il formato della prima lettera di un testo ( p:first-letter {….} ) - :before - :after A volte può essere utile estendere una regola a più selettori contemporaneamente, per fare questo si possono elencare i selettori coinvolti separandoli con una virgola. Esempio h3, p.nomeclasse, #id {…} Il box model permette di determinare l’aspetto degli elementi a livello di blocco. Ogni elemento è caratterizzato da: - altezza dei contenuti – height; - larghezza dei contenuti – width; - bordo – border; - distanza dei contenuti dal bordo – padding; - distanza del bordo dagli altri contenuti della pagina. Height e width rappresentano l’altezza e la larghezza dei contenuti degli elementi a livello di blocco. Le dimensioni possono essere espresse in modo assoluto (px, em ) o con valori in percentuale; il valore predefinito è auto. Il padding (imbottitura) rappresenta la distanza fra bordi e contenuto, Le dimensioni possono essere espresse come per le proprietà viste al punto precedente. Border è permette di impostare colore (border-color), stile (border-style) e spessore (border-width) del bordo. I bordi possono essere impostati uno alla volta aggiungendo alle proprietà desiderate –left, -right, -top o –bottom. Margin definisce lo spazio che intercorre fra il box e gli altri elementi della pagina. I margini possono essere impostati uno alla volta aggiungendo –left, -right, -top o –bottom. In HTML gli elementi a livello di blocco si dispongono in modo sequenziale in verticale; gli elementi in linea in modo sequenziale ma orizzontale in base allo spazio a disposizione, ai margini e al padding. Mediante i CSS è possibile modificare il flusso in cui gli elementi vengono disposti. Un metodo per alterare la posizione di un blocco nel flusso è il posizionamento relativo, definendo un offset ovvero uno scostamento rispetto alla posizione originale. .sposta{ position: relative; top: 4px; left: 3px; } L’elemento appartenente alla classe ‘sposta’ sarà spostato di 3px verso destra e 4px verso il basso. Il comportamento di bottom e right è analogo. I valori delle proprietà possono essere sia positivi che negativi. Un altro metodo per posizionare un elemento variandone il normale flusso è il posizionamento assoluto, con il quale posso disporre un elemento in qualsiasi parte della pagina indipendentemente dal flusso e dagli altri elementi. .posiziona{ position: absolute; top: 150px; left: 100px; } L’elemento appartenente alla classe ‘posiziona’ verrà disposto in modo che l’angolo in alto a sinistra del suo contenitore si trovi nella posizione 150,100. Il posizionamento fisso (position: fixed) è simile a quello assoluto solo che mi riferisco sempre alla dimensione della finestra e quindi i blocchi rimangono ancorati alla loro posizione senza scorrere. I blocchi flottanti permettono di disporre i contenuti lungo il lato sinistro o destro dell’elemento. <img src="disegno.gif" style="float:left" /> Definito un float, la dichiarazione influenzerà tutti i blocchi correlati successivi; per eliminarne l’effetto si deve ricorrere alla proprietà 'clear' che annulla l’effetto di float (left, right, both).