Corso di CSS. Prerequisiti. Modulo L2 1.2-CSS e HTML. Conoscenza di base del linguaggio HTML. M.Malatesta 1.2-CSS-CSS e HTML-05 12/01/2014

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Corso di CSS. Prerequisiti. Modulo L2 1.2-CSS e HTML. Conoscenza di base del linguaggio HTML. M.Malatesta 1.2-CSS-CSS e HTML-05 12/01/2014"

Norberto Giannini
5 anni fa
Visualizzazioni

1 Corso di CSS Modulo L2 1.2-CSS e HTML 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1

2 Introduzione In questa Unità vediamo come si collegano i fogli di stile con il codice contenuto in una pagina HTML. Tutti i componenti HTML di una pagina verranno indicati col termine elementi. 3 Il CSS nel codice HTML Il codice CSS può essere immerso nell HTML in 2 modi: fogli di stile esterni fogli di stile interni 4 2

3 - vantaggi I fogli di stile esterni sono codice CSS scritto in un file testo separato rispetto alla pagina web ed avente estensione.css I vantaggi sono molteplici: lo stesso stile può essere applicato a più pagine; modifiche allo stile si effettuano semplicemente modificando il file css. 5 - caratteristiche Un foglio di stile esterno: può essere scritto con un qualunque text editor; non deve contenere tag HTML; deve essere salvato con estensione.css. Esempio (file: stile.css): hr {color:red;} p {margin-left:30px;} body {background-image:url("images/player-30.jpg");} 6 3

4 - richiamo da HTML Il CSS esterno può essere richiamato in una pagina web in diversi modi: (1) <head> <link rel="stylesheet" type="text/css" href= stile.css > </head> (2) url(stile.css); </style> 7 - richiamo da HTML (link) Nel metodo (1): il tag <link> è utilizzato per collegare il foglio di stile stile.css ad una pagina web. l attributo rel nel tag <link> assicura che il collegamento fa riferimento ad un foglio di stile che deve essere applicato al documento. l attributo type specifica il contenuto del collegamento, in questo caso un foglio di stile. l attributo href identifica il nome del file del foglio di stile esterno. 8 4

5 - richiamo da HTML (import) Il metodo (2): è equivalente al metodo (1) è uno dei modi più sicuri per risolvere problemi di compatibilità tra vecchi e nuovi browser. 9 CSS interni - caratteristiche I fogli di stile interni sono quelli in cui il codice CSS è compreso in quello del documento. Caratteristiche: sono applicati alla sola pagina.in cui si trovano possono essere CSS incorporati o CSS inline 10 5

6 CSS interni - incorporati I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l elemento <style>. La dichiarazione va posta all interno della sezione <head>: Esempio: <html> <head><title>inserire i fogli di stile in un documento</title> <style type="text/css"> body { background: #FFFFCC; } </style> </head> <body>. 11 CSS interni - inline I fogli inline sono quelli inseriti direttamente nel documento HTML tramite style come attributo degli elementi HTML e non come tag. La dichiarazione va posta all interno dei tag dei singoli elementi con la sintassi seguente: <elemento HTML style= regola di stile ;>..</elemento HTML> 12 6

7 CSS interni - inline Lo stile, di conseguenza: vale solo per l elemento considerato si usa in genere in fase di prova; Esempi: 1) <h1 style="color:blue;margin-left:40px"> *** Calendario *** </h1> 2) <h1 style="color: red; background: black;">...</h1> 13 Priorità di esecuzione Non si esclude la possibilità di inserire, in uno stesso documento HTML, più modalità di CSS (esterni, incorporati ed interni). Se i CSS fanno riferimento al medesimo elemento, avrà la precedenza lo stile con la massima priorità. Le priorità dei vari tipi di CSS sono (in senso decrescente): inline incorporati esterni 14 7

8 Priorità di esecuzione <html>.. <head> <style type= text/css p.par {color : blue} </style> </head> <body> <p class= par style = color : green > </body> </html> In questo esempio, lo stile applicato è il colore verde, impostato con un CSS inline, al posto di quelle previste da un CSS incorporato, che definisce par. 15 Argomenti Il CSS nel codice HTML vantaggi caratteristiche richiamo da HTM CSS interni caratteristiche incorporati inline 16 8

9 Altri testi di riferimento Internet Flash Galen Grimes HTML 4.0 Paolo S.Asioli Guida in linea di Microsoft Frontpage 2000 Creare siti web in 24 ore Gruppo Editoriale Futura HTML\Html 3.2 Reference\HTML 3_2 ReferenceSpecification.htm

Documenti analoghi

Corso di Informatica

Corso di Informatica Modulo L2 1.1-Concetti generali 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità si inizia a presentare la tecnologia CSS, un evoluzione del codice