Tutorial di HTML basato su HTML 4.0 e CSS 2

Transcript

1 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpi Docenti: Viviana Patti e Claudia Picardi

2 Appendice B Proprietà CSS B.1 Font me della famiglia serif sans-serif cursive fantasy mospaced sequenza di valori font-family permette di specificare il me di una particolare famiglia di font da utilizzare. il me di una particolare famiglia di font, va specificato tra virgolette un font predefinito di tipo serif un font predefinito di tipo sans-serif un font predefinito di tipo calligrafico. un font predefinito di tipo artistico. un font predefinito a larghezza fissa. si posso dare più valori alla proprietà, separati da virgole, per dare alternative al browser qualora il font specificato n sia disponibile sul computer dell utente. italic oblique font-style permette di specificare se il carattere deve essere o me in corsivo. il carattere n è in corsivo. il carattere è in corsivo il carattere è obliquo. bold lighter bolder 100,200,300,400, 500,600,700,800, 900 font-weight permette di specificare il grado di pesantezza del carattere. il carattere ha una pesantezza e. il carattere è in grassetto il carattere è me pesante di quello ereditato. il carattere è più pesante di quello ereditato. corrispondo a gradi di pesantezza diversi (400=, 700=bold) small-caps font-variant permette di specificare la variante del carattere da utilizzare. il carattere è quello standard. il carattere deve essere in maiuscoletto.

3 xx_small,x_small, small,, large, x-large, xx_large larger, smaller font-size permette di specificare la dimensione del font. dimensioni assolute prefissate. dimensioni relative alle dimensioni del carattere ereditato dal padre. interpretata rispetto alle dimensioni del carattere ereditato dal padre. B.2 Testo aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow codice esadecimale color permette di specificare il colore del testo. colori predefiniti. per specificare un colore qualsiasi. text-indent a blocco permette di specificare il rientro della prima linea del blocco. interpretata rispetto alla larghezza del blocco di testo. center justify text-align a blocco permette di specificare l allineamento del blocco di testo allineamento a sinistra allineamento a destra allineamento centrato allineamento giustificato capitalize uppercase lowercase text-transform permette di specificare una trasformazione da applicare al testo nessuna trasformazione la prima lettera di ciascuna parola viene posta in maiuscolo, le altre in minuscolo il testo viene reso interamente in maiuscolo il testo viene reso interamente in minuscolo 104

4 underline overline line-through blink text-decoration permette di specificare una decorazione da applicare al testo nessuna decorazione il testo appare sottolineato il testo appare soprallineato il testo appare barrato il testo lampeggia (valore n ampiamente supportato) letter-spacing permette di specificare u spazio aggiuntivo da inserire fra le lettere. nessu spazio aggiuntivo. word-spacing permette di specificare u spazio aggiuntivo da inserire fra le parole. nessu spazio aggiuntivo. B.3 Box aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow codice esadecimale transparent background-color (ma il valore predefinito è trasparente ) permette di specificare un colore di sfondo. colori predefiniti. per specificare un colore qualsiasi. trasparente url background-image permette di specificare un immagine di sfondo. l indirizzo di un immagine nessuna immagine

5 repeat repeat-x repeat-y -repeat background-repeat permette di specificare come lo sfondo deve essere piastrellato con l immagine di sfondo. l immagine viene ripetuta in orizzontale e in verticale l immagine viene ripetuta solo in orizzontale l immagine viene ripetuta solo in verticale l immagine n viene ripetuta scroll fixed background-attachment permette di specificare se l immagine di sfondo deve scorrere con il testo o me l immagine scorre con il testo l immagine resta fissa top center bottom background-position a blocco permette di stabilire la posizione dell immagine di sfondo rispetto alla box dell elemento. Prende come argomento due valori separati da u spazio, il primo rappresenta la posizione verticale, il secondo la posizione orizzontale. I due valori devo essere dello stesso tipo (o due percentuali, o due lunghezze, o due parole chiave). La posizione specificata viene considerata relativa all angolo superiore sinistro dell area di padding. la posizione viene determinata in rispetto alla dimensione del box contenitore (si considera sempre l area di padding). la posizione viene espressa come in una delle unità di misura disponibili. limite superiore dell area di padding (solo per la posizione verticale). può essere utilizzato sia per la posizione orizzontale che per quella verticale; indica una posizione centrata (rispettivamente orizzontalmente e verticalmente) rispetto all area di padding. limite inferiore dell area di padding (solo per la posizione verticale). limite sinistro dell area di padding (solo per la posizione orizzontale). limite destro dell area di padding (solo per la posizione orizzontale). margin-top, margin-, margin-bottom, margin- permette di specificare lo spazio che deve essere occupato dal margine del box nelle quattro direzioni. lo spazio è specificato come in una delle unità di misura disponibili. lo spazio è specificato come rispetto alle dimensioni del blocco che contiene il box. padding-top, padding-, padding-bottom, padding- permette di specificare lo spazio che deve essere occupato dal padding del box nelle quattro direzioni. lo spazio è specificato come in una delle unità di misura disponibili. lo spazio è specificato come rispetto alle dimensioni del blocco che contiene il box. 106

6 thin medium thick border-top-width, border--width, border-bottom-width, border--width permette di specificare lo spessore dei bordi che circonda l area di padding del box. lo spessore è specificato come in una delle unità di misura disponibili. un bordo sottile. un bordo di medio spessore. un bordo spesso. aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow codice esadecimale transparent border-top-color, border--color, border-bottom-color, border--color permette di specificare il colore dei bordi che circonda l area di padding del box. colori predefiniti. per specificare un colore qualsiasi. trasparente hidden dotted dashed solid double groove ridge inset outset border-top-style, border--style, border-bottom-style, border--style permette di specificare lo stile dei bordi che circonda l area di padding del box. nessun bordo. nessun bordo, ma in caso di conflitto fra bordi diversi vince su tutti gli altri (mentre perde sempre) bordo a puntini. bordo a trattini. bordo continuo. bordo con una linea doppia. bordo intagliato. bordo in rilievo. tutto il box appare incavato. tutto il box appare in rilievo. B.4 Posizionamento dei box static relative absolute fixed position permette di specificare un sistema di posizionamento per un box. il box è inserito nel flusso del testo, e la sua posizione viene stabilita automaticamente. il box è inserito nel flusso del testo, e quindi spostato orizzontalmente e verticalmente come specificato dalle proprietà top e. il box viene posizionato rispetto al suo box contenitore in modo che le distanze dai margini sia pari a quelle specificate dalle proprietà top,, bottom e. come absolute, ma il box n viene riposizionato quando l utente utilizza le barre di scorrimento.

7 top,, bottom, con position diversa da static in caso di posizionamento assoluto o fisso, stabilisco la distanza che i margini del box da posizionare devo avere dai margini del box contenitore; in caso di posizionamento relativo top e stabilisco lo spostamento verticale ed orizzontale, mentre e bottom vengo igrati. il valore è specificato come in una delle unità di misura disponibili. il valore è specificato come, che viene calcolata rispetto alle dimensioni del box contenitore in caso di posizionamento assoluto o fisso, e rispetto alle dimensioni del box posizionato in caso di posizionamento relativo. float tranne quelli con position diversa da static specifica che il testo deve scorrere intor al box. il testo n scorre intor al box. il box è a sinistra, e il testo scorre alla sua destra. il box è a destra, e il testo scorre alla sua sinistra. both clear a blocco specifica se il blocco deve aspettare che i margini della pagina sia liberi da eventuali box float per poter cominciare. il blocco inizia anche se i margini so occupati. il blocco inizia solo se il margine sinistro n è occupato da box di tipo float. il blocco inizia solo se il margine destro n è occupato da box di tipo float. il blocco inizia solo se entrambi i margini n so occupati da box di tipo float. numero intero z-index con position diversa da static. specifica a quale strato o livello il box deve appartenere il box si trova allo stesso livello del suo box contenitore. il box si trova al livello specificato dal numero (i livelli parto da 0; un numero negativo rende il box invisibile). 108