Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
La struttura del documento
L'Xhtml definisce una struttura gerarchica del documento In modo generico un documento può essere costituito da diversi aree come intestazione, titolo, menu, sezioni specifiche, ecc. Ogni area conterrà sottoaree o elementi specifici (es: all'interno di una sezione ci saranno diversi paragrafi, ecc.) Si possono distinguere elementi a blocchi ed elementi in linea Gli elementi a blocchi possono contenere altri elementi a blocchi e in linea Gli elementi in linea possono contenere altri elementi in linea
2
CSS - I Fogli di stile migliorano l'aspetto estetico
facilitano la creazione e la manutenzione di siti separano aspetto grafico da contenuto tre tipi di fogli di stile in linea (attributo style) incorporati (tag <STYLE>) esterni: <LINK rel="stylesheet" type="text/css" href="file.css"> url(file.css);</style>
3
CSS - I Fogli di stile - (in linea)
I fogli si stile permettono, dato un elemento, di impostare varie caratteristiche con questa sintassi: nomeCaratteristica: valore; es: <p style="font-size:50px; text-transform: capitalize; text-indent: 12px;">abc</p> Si ha accesso a molte proprietà non controllabili con l' html L'utilizzo estensivo di fogli di stile in linea non migliorà la manutenibilità del sito e la lettura del codice.
4
CSS - I Fogli di stile - (classi)
E' possibile definire un insieme di proprietà da applicare a diversi oggetti (es: colore di sfondo,font, spaziatura, ecc.). Questo insieme si chiama classe e si definisce in questo modo <STYLE> .nomeClasse { caratteristica: valore; } </STYLE> Il tag style conviene utilizzarlo nella testata (<head>) del documento attenzione al puntino prima del nome della classe. Ogni elemento può avere l'attributo class: <p class="nomeclasse"> (senza puntino)
5
Fogli di stile applicati (classe di marcatori)
E' possibile definire le proprietà di un generico marcatore, senza dover modificare il contenuto del body. Ad esempio posso individuare caratteristiche generali per body,i paragrafi, le celle, i link, ecc.. <STYLE> H1 { text-align: center; font-Family: fantasy; font-size: 44px; font-weight: medium; font-style: italic; color: #FFFF00; background: #0000FF;} </STYLE>
6
Fogli di stile applicati (singola istanza)
E’ possibile definire lo stile di un preciso oggetto specificando il suo ID preceduto da un # (diesis) <STYLE> #titolo { text-align: center; font-Family: fantasy; font-size: 44px; font-weight: medium; font-style: italic; color: #FFFF00; background: #0000FF;} </STYLE>
7
Fogli di stile incorporati ed esterni
Il tag <style> ...</style> può contenere qualsiasi dichiarazioni di oggetti e di nuove classi, che saranno applicate al documento corrente. In questo caso di parla di foglio di stile incorporato, in quanto lo stesso documento html contiene tutte le informazioni sullo stile. Nel caso in cui si voglia applicare uno stesso stile ad un intero sito, è bene utilizzare un foglio di stile esterno. In questo caso, eventuali modifiche saranno fatte su un unico file e saranno applicate a tutto il sito. Per richiamare un foglio di stile esterno (estensione consigliata .css) utilizzare nell'<head> il tag <LINK rel="stylesheet" type="text/css" href="file.css">) Il foglio di stile esterno NON deve contenere il tag style.
8
Fogli di stile: esempi BODY { color: Black; background: White; font-family: Garamond, serif; H4 { font-family: Arial, sans-serif; } PRE, TT, XMP { font-family: Courier, monospace; } A:link { color: Teal; background: White; } A:visited { color: Blue; background: White; } A:active { color: Red; background: White; } A:hover { color: Red; background: White; } BLOCKQUOTE { margin-top: 23px; margin-bottom: 12px; margin-left: 24; padding: 12px; border-top: dashed; border-bottom: dashed; border-left: outset; border-right: ridge;
Presentazioni simili
