introduzione ai css le regole css applicare i css ad...
TRANSCRIPT
� Introduzione ai CSS � Le regole CSS � Applicare i CSS ad HTML
1 intro ai css - cristina gena
� HTML serve per definire la struttura logica dei documenti.
� I fogli di stile CSS (Cascading Style Sheet) permettono di definire gli aspetti di presentazione dei documenti.
� Quindi: ¡ HTML: struttura ¡ CSS: presentazione
2 intro ai css - cristina gena
3
I CSS (Cascading Style Sheets), sono i fogli di stile comunemente usati con HTML
Un foglio di stile CSS è costituito da un insieme di regole del tipo:
tag {proprietà1:"valore1"; proprietà2:"valore2"}
ogni regola è associata ad un tipo di tag (HTML) ogni regola è formata da due parti: proprietà:valore Per esempio:
p {font-family:”arial"; font-size:10pt; color:blue}
CSS
intro ai css - cristina gena
� Ci sono tre tipi di collegamenti tra CSS e HTML:
¡ CSS esterni ¡ CSS embedded ¡ CSS inline
4 intro ai css - cristina gena
� Le regole CSS si trovano in un file esterno, con estensione .css
� Struttura/contenuto (html) e presentazione(css) sono completamente separate!
5 intro ai css - cristina gena
� Il file CSS è richiamato all’interno del file HTML attraverso un apposito elemento “link” all’interno dell’elemento “head” ¡ <link rel=“stylesheet” type=“text/css”
href=“nomeFile.css”/>
� Esempio: <html> <head> <title>Titolo</title> <link rel=“stylesheet” type=“text/css” href=“style.css”/>
</head> …
6 intro ai css - cristina gena
� Le regole CSS sono contenute in un elemento “style” all’interno dell’elemento “head” del documento HTML.
� Struttura e presentazione non sono completamente separate: si usa solo se ci sono regole specifiche per una sola pagina.
7 intro ai css - cristina gena
� Esempio: <html>
<head> <title>Titolo</title> <style type=“text/css”>
p{ font-size:2em;
}
</style> </head>
… </html>
8 intro ai css - cristina gena
� Le regole CSS sono contenute nell’attributo “style” dell’elemento che si vuole modificare (nel body).
� Struttura e presentazione non sono separate: si usa solo per test e prove rapide!
� Esempio: <html> <head> <title>Titolo</title> </head> <body> <p style=“font-size:3em;”> Il laboratorio di XHTML verra’... </p> ....
9 intro ai css - cristina gena
� Nel caso in cui ci siano definizioni di stile ripetute è sempre quella più interna al codice a prevalere.
� L’ordine di applicazione normale è il seguente: 1. CSS inline 2. CSS embedded 3. CSS esterno 4. CSS di default del browser
10 intro ai css - cristina gena