I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)"

Transcript

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

WEB I FOGLI DI STILE. Gabriele Murara

WEB I FOGLI DI STILE. Gabriele Murara WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento

Dettagli

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

layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding

Dettagli

I CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07

I CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07 I CSS o Fogli di stile Telematica per le arti e lo spettacolo a.a. 2006/07 Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero

Dettagli

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

Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento

Dettagli

Contenuto vs Stile: un esempio

Contenuto vs Stile: un esempio I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle pagine. Molto spesso, invece degli appositi tag, si utilizzano le tabelle per posizionare

Dettagli

Fogli di stile a cascata (CSS)

Fogli di stile a cascata (CSS) Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML,

Dettagli

Sistemi Di Elaborazione Dell informazione

Sistemi Di Elaborazione Dell informazione Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets

Dettagli

Valori e unità di misura (1)

Valori e unità di misura (1) Valori e unità di misura (1) I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio:

Dettagli

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

Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole Fogli di stile CSS I fogli di stile permettono la separazione della forma dal contenuto. Il concetto di foglio di stile è quello di creare un documento separato che contenga tutte le informazioni necessarie

Dettagli

Laboratorio di reti I: Cascading Style Sheets

Laboratorio di reti I: Cascading Style Sheets Laboratorio di reti I: Cascading Style Sheets Stefano Brocchi brocchi@dsi.unifi.it 10 novembre, 2009 Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, 2009 1 / 45 Cascading Style Sheets Un Cascading

Dettagli

Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine

Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare

Dettagli

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style

Dettagli

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

CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green } 1 2 Foglio di stile Cascading Style Sheets CSS Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Regola: selezionatore

Dettagli

CASCADING STYLE SHEETS. Prof. Rocco Ciurleo - ITIS "M. M. Milano" Polistena

CASCADING STYLE SHEETS. Prof. Rocco Ciurleo - ITIS M. M. Milano Polistena CASCADING STYLE SHEETS I fogli di stile o CSS (acronimo di Cascading Style Sheets) sono uno strumento di formattazione delle pagine web che consente di personalizzare l'aspetto della pagina senza agire

Dettagli

Copyright (c) 2008, 2009, 2010 Fabio Proietti

Copyright (c) 2008, 2009, 2010 Fabio Proietti Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version

Dettagli

Indice delle proprietà. Valori speciali. Compatibilità

Indice delle proprietà. Valori speciali. Compatibilità CSS: sintassi, e valori 29 Valore: 'fontstyle'? 'fontsize' [ /'lineheight' ]? Valore: Valori speciali Nei valori, caratteri come, e / devono essere riportati letteralmente.

Dettagli

Linguaggi per il Web Linguaggi di markup: CSS

Linguaggi per il Web Linguaggi di markup: CSS Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto

Dettagli

APPUNTI DI HTML (QUINTA LEZIONE)

APPUNTI DI HTML (QUINTA LEZIONE) APPUNTI DI HTML (QUINTA LEZIONE) Cascade style sheets II Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente dei contenuti che diffondeva, piuttosto che allo stile con il quale esso venivano

Dettagli

Corso di Web Programming

Corso di Web Programming Corso di Web Programming 5. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica

Dettagli

Come inserire un foglio di s=le

Come inserire un foglio di s=le Cascading Style Sheet CASCADING STYLE SHEET I fogli di s=le a cascata (de? anche semplicemente fogli di s=le) vengono usa= per definire la rappresentazione di documen= HTML, XHTML e XML. L'introduzione

Dettagli

Corso di CSS. Prerequisiti. Modulo L2. 1-Background e font. Conoscenza di base linguaggio HTML. M.Malatesta 1-CSS-Background e font-08 23/01/2014

Corso di CSS. Prerequisiti. Modulo L2. 1-Background e font. Conoscenza di base linguaggio HTML. M.Malatesta 1-CSS-Background e font-08 23/01/2014 Corso di CSS Modulo L2 1-Background e font 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo l utilità dei CSS applicati ai vari elementi di una pagina web.

Dettagli

Introduzione ai fogli di stile CSS

Introduzione ai fogli di stile CSS CdL in Ingegneria Elettronica e Informatica Modulo di Fondamenti di Informatica D Introduzione ai fogli di stile CSS Ing. Maurizio Vincini a.a. 2000/2001 Programmazione CGI - 1 Fogli di stile CSS Il Web

Dettagli

APPLICAZIONI WEB E INTRANET CON PHP

APPLICAZIONI WEB E INTRANET CON PHP APPLICAZIONI WEB E INTRANET CON PHP Novembre 2005 Dott. Ing. Bianchini Stefano CSS Concetti di base Cascatine Syle Sheets (CSS) è uno degli standard del W3C che consentono di controllare l aspetto visivo

Dettagli

Basi di Dati. Programmazione e gestione di sistemi telematici

Basi di Dati. Programmazione e gestione di sistemi telematici Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini Introduzione CSS Cascading Style Sheets

Dettagli

<tag style= dichiarazioni css >

<tag style= dichiarazioni css > CSS 1. FOGLI DI STILE Per permettere di separare la forma dal contenuto, si usano i Fogli di Stile. Essi descrivono dettagliatamente lo stile di ogni elemento contenuto nel foglio html. I nomi dei fogli

Dettagli

Applicazioni web. Sommario DHTML - CSS CSS. Elementi di raggruppamento Markup semantico. Sintassi Proprietà. Applicazioni web.

Applicazioni web. Sommario DHTML - CSS CSS. Elementi di raggruppamento Markup semantico. Sintassi Proprietà. Applicazioni web. Applicazioni web Parte 2 DHTML - CSS Sommario DHTML Elementi di raggruppamento Markup semantico CSS Sintassi Proprietà 1 DHTML Dynamic HTML Dynamic Html non è uno standard definito dal World Wide Web Consortium

Dettagli

HTML. Hyper Text Markup Language

HTML. Hyper Text Markup Language HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento

Dettagli

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

OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel) ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia

Dettagli

Introduzione ai Fogli di stile. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni

Introduzione ai Fogli di stile. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Introduzione ai Fogli di stile Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Fogli di Stile CSS Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire

Dettagli

Riassunto CSS Tutorial Colori e sfondi

Riassunto CSS Tutorial Colori e sfondi Proprietà Esempio Descrizione color background-color background-image background-repeat background-attachment background-position h1 { color: #ff0000; body { background-color: #FFCC66; body { background-image:

Dettagli

7 Posizionare. gli elementi sulla pagina con i fogli di stile CSS

7 Posizionare. gli elementi sulla pagina con i fogli di stile CSS 7 Posizionare gli elementi sulla pagina con i fogli di stile CSS Posizionare gli elementi sulla pagina in modo relativo Posizionare gli elementi in modo assoluto Impostare il posizionamento 3D (Z-Order)

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets il linguaggio per modificare lo stile delle pagine web 1 Fogli di stile (CSS) Servono per facilitare la creazione di pagine HTML con un aspetto uniforme Permettono di separare

Dettagli

Tecnologie di Sviluppo per il Web

Tecnologie di Sviluppo per il Web Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione 1.2 G. Mecca mecca@unibas.it Università della Basilicata CSS >> Sommario Dettagli e Approfondimenti Sintassi

Dettagli

Fogli di stile: introduzione. Fabio Fioravanti

Fogli di stile: introduzione. Fabio Fioravanti Fogli di stile: introduzione Fabio Fioravanti Introduzione dei fogli di stile 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1) Dal 1996 al 2000: scarso supporto da parte dei

Dettagli

Coder Dojo Tutorial 3

Coder Dojo Tutorial 3 Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire

Dettagli

ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag.

ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 1

Dettagli

Introduzione ai CSS. CSS esterni e interni. Proprietà di base. selettore { proprietà: valore } selettore { proprietà1: valore1; proprietà2: valore2 }

Introduzione ai CSS. CSS esterni e interni. Proprietà di base. selettore { proprietà: valore } selettore { proprietà1: valore1; proprietà2: valore2 } Introduzione ai CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS

CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti

Dettagli

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

HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS. CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale

Dettagli

CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione

CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola I cascading style sheet I CSS permettono

Dettagli

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale

Dettagli

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

CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A. Corso di Laurea Magistrale in Ingegneria Informatica Corso di Linguaggi e Tecnologie Web A. A. 2012-2013 LINGUAGGI E TECNOLOGIE WEB CSS Floriano Scioscia 1 CSS CSS (Cascading Style Sheets, fogli di stile

Dettagli

CSS esterni e interni

CSS esterni e interni Introduziione aii CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei

Dettagli

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

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

Introduzione dei fogli di stile

Introduzione dei fogli di stile Corso di Laurea in Scienze della Formazione Continua e Tecnologie dell Istruzione Parte V Fogli di stile - Css Corso: Computer Graphics Docente: Ing. Ivan Bruno E-mail: ivanb@dsi.unifi.it Introduzione

Dettagli

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

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

Creazione di tabelle.

Creazione di tabelle. Creazione di tabelle. Argomenti trattati: - Premessa: Cosa sono le tabelle in HTML. - Costruiamo una tabella: Come realizzare semplici tabelle con i tag principali ed i loro attributi. - Personalizziamo

Dettagli

Tabelle HTML. Tabelle Un po di notazione.

Tabelle HTML. Tabelle Un po di notazione. Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 7 Utilizzo avanzato di Style Sheets 7.1 Applicare stili

Dettagli

1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.

1 Cascading Style Sheets, meglio noti come CSS o fogli di stile. Sommario CSS 1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.... 1 1.1 Fogli di stile "in linea"... 2 1.2 Fogli di stile "interni"... 2 1.3 Fogli di stile "esterni"... 2 1.4 Che tipo di

Dettagli

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. 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 SOMMARIO INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5 1.1 Linee guida 1 5 1.2 Linee guida 2 5 CAPITOLO 2 7 Fogli di stile 7 2.1 La sintassi 7 2.2 Ereditarietà degli attributi 7 2.3 Regole di cascading

Dettagli

Sommario. Nozioni di base su HTML

Sommario. Nozioni di base su HTML Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................

Dettagli

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

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

IMMAGINI INTRODUZIONE

IMMAGINI INTRODUZIONE IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer

Dettagli

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

CSS font-size: pt, px o em? Che unità di misura utilizzare? CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di

Dettagli

PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5

PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5 PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5 Unità didattica 1 - Architettura di pagina statica HTML Dimostrazione 1-1: Visualizzazione del sito Unità didattica 2 - Prime operazioni Introduzione a Dreamweaver

Dettagli

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito

INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style

Dettagli

Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis <demis@dimi.uniud.it>

Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis <demis@dimi.uniud.it> Introduzione Guida ai fogli di stile (Standard CSS 2) Demis Ballis Questo documento è liberamente tratto dalla guida ai CSS di base di Cesare Lamanna, disponibile nella sua versione

Dettagli

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

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

Tecnologie per il web e lo sviluppo multimediale. Il World Wide Web e (alcuni de)i suoi linguaggi

Tecnologie per il web e lo sviluppo multimediale. Il World Wide Web e (alcuni de)i suoi linguaggi Tecnologie per il web e lo sviluppo multimediale Il World Wide Web e (alcuni de)i suoi linguaggi Luca Pulina Corso di Laurea in Scienze della Comunicazione Università degli Studi di Sassari A.A. 2015/2016

Dettagli

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

Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta

Dettagli

2.3 Cenni sui fogli di stile CSS per XML

2.3 Cenni sui fogli di stile CSS per XML Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE

Dettagli

APPUNTI DI HTML (QUARTA LEZIONE)

APPUNTI DI HTML (QUARTA LEZIONE) APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW

INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW 1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML

Dettagli

Indice generale. Introduzione...xiii. Gli standard e i CSS...1

Indice generale. Introduzione...xiii. Gli standard e i CSS...1 Introduzione...xiii Capitolo 1 Capitolo 2 Capitolo 3 Gli standard e i CSS...1 Contenuti e formattazione: due oggetti distinti... 1 Le zuppe di codice... 2 L introduzione dei CSS... 4 I vantaggi degli standard...

Dettagli

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455)

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Il linguaggio HTML Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Oggi la tecnologia del World Wide Web consente il trasferimento di documenti qualsiasi

Dettagli

Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.

Le tabelle vengono usate quando hai bisogno di mostrare dei dati tabulari cioè informazioni presentate logicamente in righe e colonne. Le tabelle Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne. E' difficile? All'inizio costruire le tabelle in HTML

Dettagli

Applicazioni Web 2013/14

Applicazioni Web 2013/14 Applicazioni Web 2013/14 Lezione 5: Cascading Style Sheets Matteo Vaccari http://matteo.vaccari.name/ matteo.vaccari@uninsubria.it (cc) Matteo Vaccari. Published in Italy. Attribution Non commercial Share

Dettagli

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

.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C. Introduzione ai CSS .ConStile Tutorial Introduzione ai CSS : Indice.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C [H] Home > Tutorial > Introduzione

Dettagli

CSS E FOGLI DI STILE Guida Css di base

CSS E FOGLI DI STILE Guida Css di base 2017 CSS E FOGLI DI STILE Guida Css di base Progetto di Alternanza Scuola-Lavoro Anno scolastico 2016-2017 Istituto Tecnico Enrico Fermi, Siracusa Eleonora SikeWEB 01/01/2017 Introduzione ai fogli di stile

Dettagli

Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma. Fondamenti di Informatica. Reti di calcolatori e Internet

Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma. Fondamenti di Informatica. Reti di calcolatori e Internet Agent and Object Technology Lab Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma Fondamenti di Informatica Reti di calcolatori e Internet Michele Tomaiuolo Reti di calcolatori

Dettagli

Oreste Signore, <oreste@w3.org> Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa

Oreste Signore, <oreste@w3.org> Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa http://www.w3c.it/education/2012/upra/css/#(1) 1 of 63 Oreste Signore, Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa Master in Comunicazione e New

Dettagli

Linguaggi di programmazione PC server-client CSS

Linguaggi di programmazione PC server-client CSS Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language

Dettagli

CSS 4. Tipi di dati, lunghezze ed unità di misura

CSS 4. Tipi di dati, lunghezze ed unità di misura CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati Tecnologie di Sviluppo per il WEB 2 Numeri

Dettagli

Lezione 7: Introduzione ai layout

Lezione 7: Introduzione ai layout Lezione 7: Introduzione ai layout Principali tipi di layout; Gli strumentidel mestiere: Il box model; Elementi di blocco e in linea; e ; Il posizionamento. Tutorial: un semplice layout a una

Dettagli

CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09

CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 Selettori class e id! Sono due attributi fondamentali applicabili a tutti gli elementi! Consentono di superare le limitazioni intrinseche

Dettagli

Progettazione multimediale

Progettazione multimediale Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo

Dettagli

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

Realizzare il layout di un sito web senza utilizzare frame e tabelle Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera

Dettagli

Grafica: creare pulsanti con i css.

Grafica: creare pulsanti con i css. Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Dettagli

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

HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La

Dettagli

Creare un portale personalizzato

Creare un portale personalizzato 1 Creare un portale personalizzato Passi da seguire 1) Aprire la pagina: http://www.term-minator.it/modello.html 2) Scaricare modello : 2) Aprire il file modello con blocco note : 1 2 3) Modificare il

Dettagli

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

Copiare le caratteristiche di formattazione da un testo ad un altro. 112 ECDL Guida facile 3.3.1.6 Copiare le caratteristiche di formattazione da un testo ad un altro. Fra le possibilità offerte da questo programma, esiste anche quella di copiare solo il formato (colore

Dettagli

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

6. Editor Divi. Il layout. Guida Sintetica Wordpress // 6. Editor Divi Divi è un editor visuale che utilizza il sistema drag and drop per creare layout di pagina con facilità. Nella fase di creazione di una nuova pagina o un nuovo articolo, si avrà la possibilità

Dettagli

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

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

APPUNTI DI INFORMATICA IL LINGUAGGIO HTML

APPUNTI DI INFORMATICA IL LINGUAGGIO HTML APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato

Dettagli

L INTERFACCIA GRAFICA DI EXCEL

L INTERFACCIA GRAFICA DI EXCEL Dopo l avvio del foglio elettronico apparirà un interfaccia grafica nella quale verrà aperta una nuova cartella di lavoro alla quale il PC assegnerà automaticamente il nome provvisorio di Cartel1. La cartella

Dettagli

Esportare in formato epub

Esportare in formato epub Capitolo 9 Esportare in formato epub Il documento di InDesgn è pronto. Il testo è stato letto, redazionato e impaginato correttamente. Gli stili sono stati applicati a tutto il documento e le immagini

Dettagli

Aspetto. Lauri Watts Traduzione italiana: Pino Toscano

Aspetto. Lauri Watts Traduzione italiana: Pino Toscano Lauri Watts Traduzione italiana: Pino Toscano 2 Indice 1 Aspetto 4 1.1 Generale........................................... 4 1.2 Carattere........................................... 4 1.3 Fogli di stile.........................................

Dettagli

I Tag dell html. Parte quarta

I Tag dell html. Parte quarta I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:

Dettagli

Applicazione Ipermediali 2007/2008

Applicazione Ipermediali 2007/2008 Applicazione Ipermediali 2007/2008 CSS: esempi pratici Politecnico di Milano Obiettivi Aumentare la confidenza con le regole CSS Dimostrare alcune problematiche relative alla compatibilità tra browser

Dettagli

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

Università degli studi di Verona. Corso di Informatica di Base. Lezione 4 - Parte 2. Rifinitura di un documento Università degli studi di Verona Corso di Informatica di Base Lezione 4 - Parte 2 Rifinitura di un documento In questa seconda parte vedremo le principali rifiniture di un documento. In particolare: 1.

Dettagli

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

3.6.1 Inserimento. Si apre la finestra di dialogo Inserisci Tabella: 3.6.1 Inserimento Per decidere dove collocare una tabella è necessario spostare il cursore nella posizione desiderata. Per inserire una tabella esistono diversi modi di procedere: Menù Tabella Inserisci

Dettagli

Formattare il testo con gli stili

Formattare il testo con gli stili Formattare il testo con gli stili Capita spesso di dover applicare ripetutamente la stessa formattazione, o anche modificare il colore, le dimensioni e il tipo di carattere, per dare risalto a un testo.

Dettagli

Progettazione di siti web a.a. 2015/16

Progettazione di siti web a.a. 2015/16 CSS per la tipografia web Progettazione di siti web a.a. 2015/16 Fogli di stile: tipografia web Maria Simi Marzo, 2016 [Manuale di riferimento del W3C] Gli stili per i caratteri Gli stili per il testo

Dettagli

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

HTML 5. Tabelle. Bordi di una tabella. Il tag <TABLE> Le tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi HTML 5 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Le tabelle Esempi 1 Tecnologie di Sviluppo per il WEB 2 Il tag Una tabella è suddivisa in righe e ciascuna riga è suddivisa

Dettagli

Anno scolastico INFORMATICA. 2. Conoscere e classificare il software

Anno scolastico INFORMATICA. 2. Conoscere e classificare il software ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI Schiaparelli via Settembrini 4, 20124 Milano tel. 02/2022931 fax 29512285 E-mail schiaparelli@libero.it Gramsci L.go Sereni 1, 20133 Milano tel.

Dettagli