Prof. Pagani Corrado FOGLI DI STILE CSS
INTRODUZIONE L acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e rappresenta un linguaggio per definire lo stile degli ipertesti del web. La storia dei CSS procede su binari paralleli rispetto a quelli di HTML, di cui vuole essere l ideale complemento. La prima specifica ufficiale di CSS risale al dicembre del 1996 CSS 1 1998 CSS 2 2011 Primi moduli CSS 3
ELEMENTI DI BLOCCO E INLINE Una pagina HTML è composta da vari elementi: Elementi blocco con cornice nera Elementi inline con cornice rossa Elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Elementi inline non possono contenere elementi blocco, ma solo altri elementi inline. Quando sono inseriti nel documento non danno origine ad una nuova riga.
STRUTTURA AD ALBERO DI UN IPERTESTO Un documento HTML ha una forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore figlio. Non tutti gli elementi possono contenere ciascun altro elemento come proprio figlio esistono restrizioni Html è l elemento radice del documento
DOCUMENTI CSS L'introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione mantenendo una struttura più chiara e facile da utilizzare e garantendo contemporaneamente anche il riutilizzo di codice ed una sua più facile manutenzione. 3 tipi di dichiarazioni in un documento css regole; commenti; direttive @-rules.
SITO WEB SOLO HTML SENZA CSS Pag html 1 Pag html 2 Pag html 3 Se voglio cambiare una disposizione grafica (ad esempio il colore del titolo principale di ogni pagina) devo intervenire manualmente su ogni singola pagina!!.. Pag html n I contenuti delle pagine e le direttive grafiche risiedono sugli stessi file
MODALITA DI SCRITTURA DELLE DIRETTIVE CSS L'inserimento di codice CSS nelle pagine web può essere effettuato in tre modi: 1. Inserendo nel tag <head> della pagina HTML un collegamento al file esterno.css contenente le direttive grafiche css <head> </head> <title>esempio</title> <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/> questa soluzione garantisce il massimo riuso di codice possibile potendo essere richiamato in ciascuna delle pagine web HTML desiderate.
MODALITA DI SCRITTURA DELLE DIRETTIVE CSS 2. Inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css. <head> </head> <title>esempio</title> <style type="text/css">. Istruzioni in codice css. </style> Questa soluzione garantisce il riuso di codice solo all'interno della stessa pagina HTML 3. In linea all'interno degli elementi <tag style="dichiarazioni CSS">...</tag> Perdo totalmente il riuso anche all interno della stessa pagina
SITO WEB HTML + CSS ESTERNO Pag html 1 Pag html 2 Pag html 3.. Pag html N File CSS Se voglio cambiare una disposizione grafica (ad esempio il colore del titolo principale di ogni pagina) intervengo una sola volta sul file CSS I contenuti delle pagine e le direttive grafiche risiedono su file separati e non è necessario toccare i file html
REGOLE CSS Il selettore serve a definire la parte del documento cui verrà applicata la regola. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe Il separatore delle dichiarazioni è il carattere ; Una dichiarazione è composta da una coppia di termini separati dal carattere : : proprietà valore
DICHIARAZIONI AVANZATE E COMMENTI In una stessa dichiarazione è possibile specificare più valori Esempio p {font: 14px Verdana, arial;} Dichiarazioni con proprietà a sintassi abbreviata Esempio div {margin: 10px 5px 10px 5px;} Equivale a div { } margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; le parti racchiuse tra i segni /* e */, rappresentano commenti al codice.
SELETTORI CSS Selettore universale Il selettore universale * serve a selezionare tutti gli elementi di un documento. Selettore di tipo * {color: red;} È costituito dal nome di uno specifico elemento HTML e seleziona tutti gli elementi di quel tipo presenti nel documento. h1 {color: red;} E anche possibile raggruppare i selettori per specificare proprietà comuni
ESERCIZIO 1 : PAGINA HTML CON CSS Creare una pagina html con Un titolo 2 sottotitoli dello stesso tipo 2 paragrafi 1 immagine Impostare da css esterno Il colore e la dimensione del titolo e dei sottotitoli I paragrafi con stile italico La dimensione in percentuale dell immagine
ESERCIZIO 1 : SOLUZIONE HTML
ESERCIZIO 1 : SOLUZIONE CSS
ESERCIZIO 2 Modifica di un template (modello) css preimpostato Diversi siti propongono templates scaricabili Prendere un template a scelta dal sito http://www.csszengarden.com/ e modificarne contenuti e immagini creando almeno 3 pagine che si riferiscano allo stesso file css
ESERCIZIO 3 Scegliere un template da http://www.csszengarden.com/ e creare un sito di quattro pagine con tale template css Il sito dovrà avere le seguenti caratteristiche: Le pagine devono avere un unico menu che permetta la navigazione tra le pagine sfruttare la sezione select a desing Gli argomenti descritti nelle pagine dovranno essere: immagini raster e vettoriali codifica dei colori RGB compressione c/s perdita codifica del suono Personalizzare le immagini a seconda degli argomenti
ID E CLASSI I CSS sono diventati uno strumento estremamente importante anche grazie ai selettori Id e classi che permettono di diversificare il comportamento grafico anche all interno di tag dello stesso tipo. Ad esempio per i 2 seguenti tag paragrafo potremmo specificare da css caratteristiche grafiche differenti <p class="testo_italico_rosso">...</p> <p class="testo_blu">...</p> Finché il valore dell attributo class non trova corrispondenza in un selettore del foglio di stile, i due paragrafi non subiscono nessuna modifica
REGOLE CSS CON SELETTORI DI TIPO Una regola CSS con selettore di tipo classe ha la seguente sintassi:.class_value {dichiarazione;} E in riferimento all esempio precedente avremo:. testo_italico_rosso { color: red; font-style; italic } Assegna lo stile solo ai tag p con classe testo_blu p.testo_blu {color: blue;}
SELETTORI ID Lo stesso meccanismo è valido per i selettori di tipo id. Ma con una differenza In un documento HTML l attributo id è usato per identificare in modo univoco un elemento. Se uno stile va applicato ad un solo elemento della pagina definiamo un id. Se invece pensiamo di usarlo su più elementi della pagina, definiamo nel CSS una classe Il selettore classe è preceduto da. Il selettore id è preceduto da #
ESERCIZIO
ESERCIZIO Id container Id menuarea Id leftarea Id rightarea class servicebox
CENTRARE IL CONTENUTO DI UNA PAGINA Impostare i margini sinistro e desto a auto permette di centrare orizzontalmente l elemento all'interno del suo contenitore. body { } width: 100%; #container { width: 1000px; margin: auto; }
DA DIMENSIONI FISSE A RESPONSIVE Implementiamo le modifiche solo sul file CSS Devo eliminare da tutti gli elementi adattabili le dimensioni fisse Eventualmente impongo dei limiti con max-width (oppure min-width ) Elimino width dagli elementi interni ai contenitori adattabili #container { } #leftarea { } width: 100%; max-width: 1000px; margin: auto; width: 80%; max-width: 800px; float: left; @media only screen and (max-width: 1000px) { #rightarea{ width: 100%; } #leftarea{ width: 100%; }.lato{ width: 200px; margin: 10px; } }
SELETTORI COMBINATORI O DI RELAZIONE Una categoria fondamentale di selettori CSS è rappresentata dai cosiddetti combinatori (detti anche selettori di relazione). Hanno la funzione di mettere in relazione elementi presenti all interno dell albero del documento. Selettore Simbolo Selettore di discendenti Selettore di figli > Selettore di fratelli adiacenti + Selettore generale di fratelli ~
SELETTORE DI DISCENDENTI Il selettore di discendenti è quello più utilizzato dei quattro; ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello. Esempi: antenato discendente {dichiarazioni;} #contenitore p {color: #FF0000;} Assegna lo stile solo ai tag p contenuti nel div #contenitore, Assegna lo stile ai div con class itembox contenuti nel div #contenitore, #contenitore.itembox {color: #FF0000;}
ALTRI SELETTORI DI RELAZIONE Il selettore di figli (>) consente di selezionare un elemento che è figlio diretto (obbligatoriamente di primo livello) dell elemento padre. padre > figlio {dichiarazioni;} Il selettore di fratelli adiacenti serve a scorrere in orizzontale l albero del DOM assegnando le regole CSS agli elementi che si trovano allo stesso livello solo se sono immediatamente adiacenti. fratello + fratello {dichiarazioni;} L ultimo combinatore (~) è una generalizzazione di quello visto in precedenza. Esso assegna uno stile a tutti gli elementi che sono fratelli. fratello ~ fratello {dichiarazioni;}
SELETTORI DI ATTRIBUTO I selettori di attributo servono a selezionare gli elementi in base ai loro attributi e/o al valore. Con il primo tipo di selettore si selezionano tutti gli elementi che presentino un determinato attributo, a prescindere dal valore dell attributo stesso. elemento[attributo] {dichiarazioni;} Il selettore con valore corrispondenteindividua tutti gli elementi che abbiano come valore dell attributo specificato il testo impostato nella regola CSS. elemento[attributo="valore"] {dichiarazioni;}
PSEUDO CLASSI Il concetto di pseudo classe definisce il particolare stato di un elemento. selettore:pseudo-classe {dichiarazioni;} Vediamo le pseudo classi per i link: :link definisce l aspetto iniziale dei link :visited serve a modificarne l aspetto quando siano stati visitati. :hover viene applicata quando si passa con il cursore su un elemento senza cliccarci sopra :active serve a impostare un elemento mentre viene attivato dall utente, ossia mentre si tiene premuto il pulsante su di esso, ovvero per tutto il tempo che intercorre tra il click e il rilascio del pulsante. :focus viene attivata quando un elemento riceve il focus, ossia quando un elemento può accettare eventi da tastiera, per esempio l inserimento di testo in un modulo.
PSEUDO ELEMENTI Vi sono parti in un documento HTML che non sono rappresentate da nessun elemento, ma che è possibile comunque modificare e formattare con i CSS grazie agli pseudo-elementi. Vediamo alcuni utili pseudo elementi :first-letter formatta la prima lettera di un elemento p:first-letter {color: #FF0000; font-weight: bold;} :first-line formatta la prima riga di un elemento :before e :after è possibile inserire nel documento HTML un contenuto non presente nel documento stesso h3:before {content: "1 ";} inserisce un num prima del titolo
EREDITARIETA Il primo concetto è quello di ereditarietà. Secondo questo meccanismo le impostazioni di stile applicate ad un elemento vengono ereditate anche dai suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà.
CONFLITTI E possibile incorrere in conflitti (anche senza usare ereditarietà) cosa succede se applico le regole seguenti ad un paragrafo con classe testo? p {color: black;}.testo {color: white;} Queste problematiche possono essere gestite grazie ala concetto di importanza se una dichiarazione viene accompagnata dalla parola chiave!important essa balza al primo posto nell ordine di applicazione.