I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)

Транскрипт

1 I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti livelli: si possono inserire tutti gli stili in un file separato aumentando la facilità e la velocità di modifica degli stessi su più pagine oppure si possono inserire gli stili in cima a una singola pagina applicandoli solo ad essa; oppure si possono includere gli stili all'interno dei tag stessi tramite l'attributo style. Creare gli stili per la pagina: il tag <style> deve essere incluso fra i tag <head> e </head>. L'attributo type indica il tipo MIME per il foglio di stile: text/css è l'unico valore che si utilizzerà. Il corpo del foglio di stile consiste in una serie di direttive che seguono una precisa struttura: selettore { proprietà: valore; proprietà: valore;... } Ciascuna regola consiste in un selettore seguito da un elenco di proprietà e valori associati ad esse racchiuse tra parentesi graffe e senza limite di numero separate l'una dall'altra da un punto e virgola. I selettori possono coincidere con i normali tag HTML come <h1> <p> <div>... Creare fogli di stile per un intero sito: è possibile registrare tutte le informazioni di stile in un file e applicarle a più file contemporaneamente. Un file CSS è praticamente solo il corpo di un tag < style> separato dal resto della struttura HTML di una normale pagina e salvato con estensione.css. Una volta creato il file con il foglio di stile lo si può inserire in una pagina utilizzando il tag <link> : <link rel="stylesheet" href="url del file di stile.css" type="text/css" /> L'attributo type è lo stesso del tag <type> l'attributo href è lo stesso del tag <a>. E' possibile inserire i collegamenti a più di un foglio di stile in una pagina. I SELETTORI - tag HTML: un tipo di selettori è rappresentato dai tag HTML. Le regole per quel selettore verranno applicate a tutte le istanze di quel tag nella pagina o nelle pagine. tag { proprietà: valore; proprietà: valore;... } E' possibile applicare a più selettori le stesse proprietà. tag tag { proprietà: valore; proprietà: valore;... } - selettori contestuali: vengono usati per applicare gli stili agli elementi solo quando questi sono nidificati all'interno di altri elementi specificati: 1 / 5

2 tag_contenitore tag { proprietà: valore; proprietà: valore;... } In caso di conflitti gli sti li nidificati sovrascrivono gli stili generali. - classi e identificatori: a volte la selezione per tag non è molto specifica ma è necessario creare una propria classificazione da utilizzare con i CSS. Ci sono due attributi supportati da tutti i tag HTML: "class" e "id". L'attributo class serve ad assegnare gli elementi a interi gruppi di tag mentre l'attributo id è utile per assegnare un identificativo a singoli elementi specifici. La sintassi di una regola è:.nome classe { proprietà: valore; proprietà: valore;... } Se si vuole riservare una formattazione solo a un tag della classe specificata è possibile includere il nome dell'elemento HTML oltre quello della classe: tag.nome classe { proprietà: valore; proprietà: valore;... } Per applicare una classe ad un tag nella pagina: <tag class="nome classe"> testo o altri tag </tag> Se si desidera applicare gli stili solo ad un elemento in un foglio di stile è bene assegnargli un id : <tag id="nome id"> testo o altri tag </tag> Le regole CSS da applicare ad un elemento vanno scritte facendo riferimento al suo id: #nome id { proprietà: valore; proprietà: valore;... } E' possibile mescolare diversi tipi di selettori così come è possibile nidificarli. UNITA' DI MISURA Esistono 4 tipi di misure specificabili nei CSS: unità di lunghezza unità percentuali unità di col ore e URL. Esistono due tipi di unità di lunghezza: assolute (corrispondono a unità di misura del mondo reale) e relative (basate su unità di misura più arbitrarie solitamente più utilizzate; fra queste rientra anche l'unità "pixel"). Le unità percentuali devono essere utilizzate in considerazione del fatto che bisogna specificare il contesto affinché possano essere calcolate (nel senso: la percentuale di cosa?). Gli URL si specificano così: url(url del file). PROPRIETA' DEI RIQUADRI DI TESTO Prima di procedere con le proprietà dei riquadri di testo è bene soffermarsi sugli attributi che definiscono gli stili (interni o esterni) del testo: - text-decoration: underline overline line.trough blink none; - font-style: normal italic oblique; - font-weight: normal bold bolder lighter ; - font-family: nome o nomi di carattere; - font-variant: normal small-caps; - text-align: left right center justify; - font-size: valore numerico con relativa unità di misura; - line-height: normal valore con relativa unità di misura. 2 / 5

3 Queste proprietà possono essere inserite all'interno dei tag come <div> o <span> oppure come coppia di proprietà-valore nei fogli di stile. Esistono altre proprietà per il testo. Per i riquadri di testo esistono altre proprietà utilizzate per posizionare gli elementi controllare lo spazio bianco attorno ad essi e applicare loro effetti grafici. Per lavorare sui riquadri di testo è possibile utilizzare il tag <div> perché non modifica assolutamente l'aspetto delle pagine ma è solo un contenitore al quale si può applicare uno stile. - Le dimensioni: la dimensione di un riquadro viene controllata da due proprietà: width e hei ght in termini assoluti o relativi alla finestra del browser. - I bordi: con i CSS è possibile applicare i bordi a qualsiasi elemento. La sintassi delle proprietà del bordo sono le seguenti: border: width style color; Quando si usa la proprietà border da sola ad essa possono essere associate tre variabili. - width è l'ampiezza della linea che disegna il bordo e che può assumere come valori un numero con la sua unità di misura o valori predefiniti (thin medium thick. - style assume i seguenti valori: none (nessuno stile) dottet (a punti) dashed (tratteggiato) solid (solido) double (doppio) groove (scalanatura) ridge (cresta) inset (incavato) outset (in rilievo). - color identifica il colore del bordo. Esistono molte altre proprietà. E' possibile impostare individualmente lo stile di ciascun lato utilizzando: border-top border-right border-bottom border-left. border-top: thin double black; - I margini: la proprietà margin controlla lo spazio bianco tra il bordo e il blocco che lo include..nome classe { margin: 10 px; } - La spaziatura: la proprietà padding controlla lo spazio bianco attorno al bordo..nome classe { padding: 10 px; } 3 / 5

4 - Il posizionamento: per avere pieno controllo sugli elementi è necessario selezionare prima uno schema di posizionamento con al proprietà position. Esistono 4 schemi di posizionamento: static relative absolute e fixed. - static: è lo schema predefinito in virtù del quale gli elementi vengono posizionati da sinistra verso destra e dall'alto verso il basso. Il valore static (statico) è il valore di default e sarebbe uguale alla posizione dell elemento nell esempio del flusso normale. L elemento statico non può essere mosso della sua posizione. - relative: permette di posizionare l elemento in base al suo div contenitore. Contrariamente alla posizione assoluta le dichiarazioni top bottom left e right non rappresentano punti fissi di posizionamento ma sono basate sulla posizione naturale dell elemento indicandone lo spostamento. - absolute: permette di rimuovere l elemento dello flusso normale della pagina per potere posizionarlo tramite le dichiarazioni top bottom left e right in unità di misura. L elemento assoluto è posizionato in rapporto al suo div contenitore solo se lui stesso ha la sua proprietà position impostato con un valore altro che static. - fixed: Come per la posizione assoluta il valore fixed (fisso) permette di rimuovere l elemento del flusso normale della pagina per potere posizionarlo con le dichiarazione top bottom left e right. La differenza tra di loro è che l elemento fisso si posiziona sempre in base a l elemento HTML (l area visiva della finestra del browser) e mai ad un suo eventuale elemento contenitore. Essendo fisso questo elemento rimanerà sempre alla sua posizione anche se il resto della pagina è scorrevole. Un elemento fixed può essere riposizionato usando top bottom left right (come per absolute ) ricordandosi che sarà sempre in relazione alla finestra browser. Una volta scelto lo schema di posizionamento è possibile impostare la posizione degli elementi. Ci sono 4 proprietà per il posizionamento: top left bottom right. Assumono valori 4 / 5

5 corrispondenti alla distanza tra il lato indicato e il lato del blocco che li racchiude..nome classe { position: relative; left: 50 px; top: 50 px; } PROPRIETA' DELLE TABELLE Le proprietà delle tabelle possono essere gestite dai tag <table> <tr> e <td>. Una volta individuata la classe o il tag è possibile applicare gli attributi per il padding border background-color text-align margin border border-left border-top border-righ t border-bottom ecc. PROPRIETA' DI BODY E' possibile applicare qualsiasi stile ad una pagina applicandolo al tag <body>. Per sostituire le informazioni generali finora applicate con l'html è possibile usare il seguente listato come esempio: body { font-family: nome font; color: colore; background-color: colore; margin: valore px; background-image: url (URL del file immagine); background-position: posizione dell'immagine di fondo; background-attachment: scroll o fixed; background-repeat: repeat-x o repeat-y o repeat o no-repeat;... } PROPRIETA' DEI LINK Per i collegamenti è possibile impostare diverse proprietà grazie ai CSS per diversi tipi di link. a: link { color: colore; } a: activate { color: colore; } a: visited { color: colore; } a: hover { color: colore; } E' possibile specificarte una classe per i vari link: a.nome classe: link { color: colore; } All'interno delle proprietà per i font è possibile inserire anche le proprietà normalmente usate per il testo normale (come font-weight text-decoration) o per altri tag (background-color). 5 / 5

I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)

WEB I FOGLI DI STILE. Gabriele Murara

layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto

Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà

Fogli di stile a cascata (CSS)

Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole

CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }

APPUNTI DI HTML (QUINTA LEZIONE)

OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)

CSS. Dott. Nicole NOVIELLI [email protected] http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS

HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS.

CSS (Cascading Style Sheets)

CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A.

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

SOMMARIO. INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5. 1.1 Linee guida CSS1 5 1.2 Linee guida CSS2 5. CAPITOLO 2 7 Fogli di stile 7

Sommario. Nozioni di base su HTML

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

CSS font-size: pt, px o em? Che unità di misura utilizzare?

PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II

2.3 Cenni sui fogli di stile CSS per XML

.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C. Introduzione ai CSS

Oreste Signore, <[email protected]> Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa

Progettazione multimediale

Realizzare il layout di un sito web senza utilizzare frame e tabelle

Grafica: creare pulsanti con i css.

HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto

Copiare le caratteristiche di formattazione da un testo ad un altro.

6. Editor Divi. Il layout. Guida Sintetica Wordpress //

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

L INTERFACCIA GRAFICA DI EXCEL

Esportare in formato epub

I Tag dell html. Parte quarta

Università degli studi di Verona. Corso di Informatica di Base. Lezione 4 - Parte 2. Rifinitura di un documento

3.6.1 Inserimento. Si apre la finestra di dialogo Inserisci Tabella:

Formattare il testo con gli stili

HTML 5. Tabelle. Bordi di una tabella. Il tag <TABLE> Le tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi