Web Design. Media Dream Academy. Stefano Gaborin

Transcript

1 Web Design Media Dream Academy Stefano Gaborin

2 I Fogli di stile: CSS CSS è l acronimo di Cascading Style Sheets, ovvero fogli di stile a cascata. Il CSS designa un linguaggio di stile per i documenti web, seguendo la gerarchia dei TAG coinvolti. I CSS istruiscono un browser o un altro programma su come il documento debba essere presentato all utente.

3 Allegare CSS a pagine HTML Inserendolo nell head della pagina HTML: con il tag <style>contenuto</style> è possibile indicare nella pagina html il CSS relativo ad uno o più elementi html. Collegandolo da file esterni: il CSS può anche risiedere il file esterni, rispetto al file HTML e possono essere collocati sia sullo stesso server, che su server terzi, come CDN. Sono richiamati mediante il tag: <link rel="stylesheet" type="text/css" href= PERCORSO/FILENAME.css"/> Allegandolo al TAG coinvolto (non è un foglio di stile): è possibile inserire proprietà CSS attraverso l attributo STYLE del singolo tag html.

4 Struttura di un CSS Nei CSS è possibile inserire 3 tipi di dichiarazioni: regole, commenti, h1 { color: red; } /* COMMENTO only screen and (min-device-width: 480px) and (max-device-width: 640px) { h1 { color: black; } }

5 Regole CSS La regola css è composta da due blocchi principali: Il selettore: serve a definire la parte del documento cui verrà applicata la regola Il blocco delle dichiarazioni: Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, può essere composto da una o più dichiarazioni.

6 Selettori di base Universale: La sua funzione è quella di selezionare tutti gli elementi presenti in un documento: * { color:#000} Di Tipo: I selettori di tipo sono rappresentati dal nome di uno specifico elemento HTML. Servono a selezionare tutti gli elementi di quel tipo specifico presenti in un documento. h1 {color: red} p {color: green}

7 Selettori di base Di classe: Ad ogni elemento HTML può essere assegnata una classe usando l attributo class e assegnando ad esso un valore a nostra scelta:.cognome { color:#333 } Selettori di ID: A differenza delle classi, però, uno specifico id può essere assegnato solo ad un elemento: #titolo { color:#dd0000 }

8 Selettori combinatori Hanno la funzione di mettere in relazione elementi presenti all interno dell albero del documento. Sono quattro: Selettore di discendenti Selettore di figli (>) Selettore di fratelli adiacenti (+) Selettore generale di fratelli (~)

9 Selettori discendenti Seleziona un elemento HTML o un discendente di esso: header #logo {border:3px solid #000} p span.telefono { color:grey } footer #terms, footer.privacy { text-decoration: underline }

10 Selettori di figli In apparenza simile al selettore di discendenti. La differenza sta nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. <section> <p>primo paragrafo</p> <div> <p>secondo paragrafo</p> </div> <p>terzo paragrafo</p> </section> section > p {color: #dd0000}

11 Selettore di fratelli adiacenti Questo tipo di selettore consente di assegnare uno stile all elemento fratello immediatamente adiacente, ed è indicato con il + <div> <h1>1. Titolo principale.</h1> <h2>1.1 Primo sottotitolo.</h2> <p>...</p> <h2>1.2 Secondo sottotitolo.</h2> <p>...</p> </div> h1 + h2 {color: #dd0000}

12 Selettore generale di fratelli Esso assegna uno stile a tutti gli elementi che sono fratelli. <div> <h1>1. Titolo principale.</h1> <h2>1.1 Primo sottotitolo.</h2> <p>...</p> <h2>1.2 Secondo sottotitolo.</h2> <p>...</p> </div> h1 ~ h2 {color: #dd0000 }

13 Selettori di attributo I selettori di attributo consentono di selezionare gli elementi all'interno di una pagina in base ai loro attributi e assegnare così lo stile desiderato, si dividono in due principali categorie: E [attribute]: tutti gli elementi E che contengono l attributo attribute E [attribute=value]: tutti gli elementi E che contengono l attributo attributo con valore value.