INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito
|
|
|
- Antonella Conte
- 5 anni fa
- Visualizzazioni
Transcript
1 CSS
2 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 Sheets) definiscono come i vari elementi che compongono un documento verranno resi su un media specifico (schermo, stampante, dispositivo mobile).
3 INSERIMENTO Un foglio di stile può essere esterno e interno: È esterno un foglio di stile definito in un file separato dal documento. Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento. Un foglio esterno si carica: Utilizzando l elemento <LINK>. Usando la direttiva Un foglio interno può essere inserito utilizzando l elemento <style> Utilizzando l attributo style di un singolo elemento
4 FOGLI COLLEGATI Uso dell'elemento <LINK> La dichiarazione va sempre collocata all'interno della sezione <HEAD> del documento (X)HTML: <html> <head>.... <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body>....
5 FOGLI COLLEGATI L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione: Attributo Descrizione rel descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. href serve a definire l'url assoluto o relativo del foglio di stile. È obbligatorio type media identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
6 FOGLI COLLEGATI Un altro modo per caricare CSS esterni è usare la La può essere usata all'interno dell'elemento <style>: url(stile.css); </style> Oppure all interno di un foglio di url(stile.css); In entrambi i casi le regole contenute nel foglio di stile saranno importate, aggiunte a quelle già caricate.
7 FOGLI INCORPORATI I fogli incorporati sono quelli inseriti direttamente nel documento (X)HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>: <html> <head> <title>inserire i fogli di stile in un documento</title> <style type="text/css"> body { background: #FFFFCC; } </style> </head> <body>....
8 STILE IN LINEA L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'. Esso fa parte della collezione di attributi (X)HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente: <elemento style="regole_di_stile">
9 REGOLE Un foglio di stile è costituito da una serie di regole che stabiliscono come un elemento (identificato da un selettore) viene reso su un media. : ; selettore proprietà1 valore : ; proprietà2 valore
10 REGOLE h2{ color:#333333; font-weight: bold; font-size: 40px; }
11 Selettore: definisce a quali elementi si applicano le regole che seguono REGOLE h2{ color:#333333; font-weight: bold; font-size: 40px; }
12 Parentesi graffe: racchiudono l'elenco delle regole REGOLE h2{ } color:#333333; font-weight: bold; font-size: 40px; Parentesi graffe: racchiudono l'elenco delle regole
13 h2{ Regola: è composta REGOLE dal nome di una proprietà e da un valore color:#333333; font-weight: bold; font-size: 40px; }
14 h2{ } Proprietà: indica l'elemento visuale che viene modificato REGOLE color:#333333; font-weight: bold; font-size: 40px;
15 h2{ REGOLE [due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato. color:#333333; font-weight: bold; font-size: 40px; }
16 h2{ REGOLE valore: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato. color:#333333; font-weight: bold; font-size: 40px; }
17 CODIFICA A BASSO LIVELLO codifica automatica elaborazione decodifica
18 CODIFICA AD ALTO LIVELLO codifica automatica codifica ad alto livello interpretazione
19 UTILIZZO DI UN LINGUAGGIO scrittura codice interpretazione
20 h2{ } { LA PUNTEGGIATURA : color # : : ; ; ; font-weight bold font-size 40px
21 Sintassi abbreviata Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. margin-top margin-right margin-bottom margin-left La regola sarebbe questa: div { margin-top: 10px; } margin-right: 5px; margin-bottom: 10px; margin-left: 5px; Sintassi abbreviata: div {margin: 10px 5px 10px 5px;}
22 SELETTORI
23 SELETTORI SEMPLICI Selettore] Es. pref. Descrizione CSS elemento p Selezione tutti gli elementi <p> 1 id #nome # Seleziona l'elemento con id="nome" 1 * * Seleziona tutti gli elementi 1 classe.intro. Seleziona tutti gli elementi con class="intro" 1 attributo [title] Seleziona tutti gli elementi che hanno l'attributo title 2 attributo=valore [title="rosa"] Seleziona tutti gli elementi che hanno l'attributo title="rosa" 2 attributo~=valore [title~="rosa"] Seleziona tutti gli elementi in cui l'attributo title contiene "rosa" 2 attributo =valore [title ="rosa"] Seleziona tutti gli elementi in cui l'attributo title inizia con "rosa" 2
24 SELETTORI COMPOSTI Selettore] Es. Descrizione CSS el1, el2, el3 h1, h2, h3 Seleziona tutti gli elementi <h1>, <h2> e <h3> 1 el1 el2 div p Seleziona gli elementi <p> contenuti in un elemento <div> 1 el1 > el2 div > p Seleziona gli elementi <p> il cui parent è un elemento <div> 2 el1 + el2 h2 p Seleziona gli elementi <p> che seguono immediatamente un elemento h2 2.calsse el.intro p Seleziona gli elementi <p> contenuti in un elemento con class="intro" 1 #id el #nome p Seleziona gli elementi <p> contenuti nell'elemento con id="nome" 1 ecc.
25 PSEUDO- CLASSI Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo. In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni. A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore. a:link {color: blue;} La regola vuol dire: i collegamenti ipertestuali (<a>) che non siano stati visitati (:link) avranno il colore blue.
26 PSEUDO- CLASSI Selettore] Es. Descrizione CSS :link a:link Stato di link non visitato 1 :visited a:visited Stato di link visitato 1 :hover a:hover Aspetto quando il mouse è sopra l'elemento 1 :focus input:focus Aspetto quando l'elemento ha il focus 1 :first-letter p:first-letter Prima lettera del testo contenuto nell'elemento 2 :first-line p:first-line Prima riga del testo contenuto nell'elemento 2 :first-child ul:first-child Primo figlio di una elemento contenitore 2 :before e :after div:after Contenuto prima e dopo ad un elemento 2
27 CLASSI In questa pagina abbiamo assegnato al paragrafo l attributo class="testorosso": <p class="testorosso">...</p> Possiamo ora creare un regola e assegnargli il nome testorosso:.testorosso { } font: 12px arial, Helvetica, sans-serif; color: #FF0000; In un documento potrò avere senza problemi questa situazione: <p class="testorosso">...</p> <div class="testorosso">...</div> <table class="testorosso">...</table> <p class="testorosso">...</p> E l elemento seguirà la regola definita nella classe testorosso
28 DETTAGLI
29 PROPRIETÀ
30 CSS BOX MODEL
31 formule brevi: BOX MODEL margin: top right bottom left margin: top&bottom right&left padding: top right bottom left padding: top&bottom right&left
32 DIMENSIONI Prprietà Descrizione Valori height Sets the height of an element auto, length, %, inherit max-height Sets the maximum height of an element auto, length, %, inherit max-width Sets the maximum width of an element auto, length, %, inherit min-height Sets the minimum height of an element auto, length, %, inherit min-width Sets the minimum width of an element auto, length, %, inherit width Sets the width of an element auto, length, %, inherit
33 DIMENSIONI Prprietà Descrizione Valori bottom Fissa il margine inferioredi un blocco posizionato auto, length, %, inherit clip Clips un elemento posizionato in modo assoluto shape, auto, inherit cursor Specifica il tipo di cursore da visualizzare url o uno dei nomi riservati left Fissa il margine sinistro di un blocco posizionato auto, length, %, inherit overflow Specifica che cosa accade se il contenuto supera le dimensioni di un elemento auto, hidden, scroll, visible, inherit position Specifica il tipo di posizionamento di un elemento absolute, fixed, relative, static, inherit right Fissa il margine destro di un blocco posizionato auto, length, %, inherit top Fissa il margine superiore di un blocco posizionato auto, length, %, inherit z-index Determina l'ordine di sovrapposizione degli elementi
34 margin border padding FLOAT height width margin border padding float:none height width margin border padding float:none height width
35 FLOAT margin border padding margin border padding margin border padding width height width height height width float:left float:left
36 FLOAT margin border padding width height width margin border padding height margin border padding float:none height width float:left
37 margin border padding margin border padding FLOAT width height width height float:none; clear:both; margin border padding float:left height width
38 background-color BACKGROUND Definisce il colore di sfondo di un elemento. selettore {background-color: #FFF;} selettore {background-color: transparent;} background-image Definisce l'url di un'immagine da usare come sfondo di un elemento. selettore { background-image: url(valore); } selettore { background-image: none} background-repeat Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. selettore {background-repeat: valore;} Valori: repeat, repeat-x, repeat-y, no-repeat background-attachment selettore {background-attachment: valore;} Valori: scroll, fixed.
39 BACKGROUND background-position Definisce il punto in cui verrà piazzata un'immagine di sfondo. selettore {background-position: valoreoriz valorevert;} Valori: valori in percentuale, valori espressi con unità di misura, parole chiave top, left, bottom, right, center. background Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo. selettore { background: background-color background-image background-repeat background-attachment background-position; }
40 radius DISPLAY Valore inline block flex inline-block inline-flex inline-table list-item table Descrizione Valore predefinito. Visualizza un elemento come un elemento inline (es.: <span>) Visualizza un elemento come un elemento block (e.: <p>) Visualizza un elemento come un contenitore secondo il modello box-flex. Nuovo in CSS3 Visualizza un elemento come un contenitore di tipo inline block. Gli elemnti contenuti all'interno si comportano come in un blocco, ma l'elemento stesso si comporta come elemento inline Visualizza un elemento Ma che si posiziona come inlinecome un contenitore secondo il modello boxflex. L'elemento viene visualizzato come una tabella inline L'elemento si comporta come un elemento<li>. L'elemento si comporta come un elemento<table>.
41 DISPLAY Valore table-caption table-column-group table-header-group Descrizione L'elemento si comporta come un elemento <caption>. L'elemento si comporta come un elemento<colgroup>. L'elemento si comporta come un elemento<thead>. table-footer-group L'elemento si comporta come un elemento <tfoot>. table-row-group table-cell table-column table-row none L'elemento si comporta come un elemento <tbody>. L'elemento si comporta come un elemento <td>. L'elemento si comporta come un elemento <col>. L'elemento si comporta come un elemento <tr>. L'elemento non viene visualizzato.
42 VALORI
43 VALORI Valore parola riservata Esempi display: none; margin-left: auto; numero line-height: 1.3; font-weight: 300; misura margin-top: 20px; line-height: 24px; percentuale width: 80%; margin-top: 2%; url più valori background-image: url(img/sfondo.jpg); background: url(img/sfondo.jpg) no-repeat center; margin: o auto;
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
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
LEZIONE 04. Riepilogo CSS
LEZIONE 04 Riepilogo CSS SELETTORI SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile. Prova il codice ELEMENTO
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
CSS: CASCADING STYLE SHEETS MODULO 8
CSS: CASCADING STYLE SHEETS MODULO 8 CSS È il linguaggio standard per la stilizzazione di documenti HTML Assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel
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
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
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L
Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2007 2008 Corso di Tecnologie Web CSS http://www lia.deis.unibo.it/courses/tecnologieweb0708/ HTML e Cascading Style Sheets > L
e il Giardino di Zen CSS ESTERNI CSS INTERNI
e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS
4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi
Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/
Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte
Piano triennale regionale 2016-2018 Rete Politecnica PO FSE 2014/2020 Regione Emilia Romagna - Obiettivo Tematico 10 - Asse III Istruzione e formazione Priorità di Investimento 10.4 Obiettivo specifico
Primi elementi di... Cascading Style Sheet (o Fogli di Stile)
ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del
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
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Tabella 2.2 Indice delle proprietà Nome Valori Pr El Er Cp
Tabella 2.2 Indice delle background ['background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position'] background-attachment scroll fixed scroll background-color
CSS / BOX MODEL e PSEUDOCLASSI. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / BOX MODEL e PSEUDOCLASSI LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 CSS: RIPRESA DELLA SCORSA LEZIONE CSS: servono per separare il contenuto dal visual per questo è preferibile
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
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
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
CSS. Cascading Style Sheet
CSS Cascading Style Sheet CSS Il CSS è un linguaggio, di tipo dichiarativo, che serve per definire lo stile di presentazione degli elementi presenti in un documento HTML. Esso è inglobato all interno dell
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
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
Gli stili. Lo stile si può applicare in quattro modi diversi ad un elemento HTML: I. Fuori tag La sintassi per lo stile fuori tag è la seguente:
Gli stili Lo strumento degli stili sta piano piano soppiantando tutta una serie di attributi non solo per la formattazione del testo ma anche per l'aspetto estetico di tutti gli elementi di HTML, dalle
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
CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
Linguaggi ed Applicazioni mul1mediali
Linguaggi ed Applicazioni mul1mediali 06.07- CSS. Cascading Style Sheet Maurizio Maffi ISTI Informa1on Science and Technology Ins1tute A cosa servono I CSS vengono usati per definire la rappresentazione
Dispensa CSS (estratto da HTML.it)
Dispensa CSS (estratto da HTML.it) Separare il layout dal contenuto L'HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio
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:
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in Turismo e ICT
CSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
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
Riassunto CSS Tutorial
Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat
Silvia Likavec. Lezione 6
Silvia Likavec Lezione 6 2 ! Le principali proprietà che permettono di manipolare le immagini agiscono sul box model: " Border (o border-style; border-width; bordercolor); " Padding; " Margin; " Width;
Principali tipi di layout. Approfondimento sul box model
Principali tipi di layout. Approfondimento sul box model 1 Il layout stabilisce il modo in cui le varie parti (immagini, paragrafi, elenchi, intestazioni ) che compongono un documento ipertestuale devono
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
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,
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
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
CSS (Cascading Style Sheets)
Foglio di stile CSS (Cascading Style Sheets) Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Vedi http://www.w3schools.com/css/demo_default.htm
Cosa vuol dire HTML? Hyper Text Markup Language
IMPARIAMO Cosa vuol dire HTML? Hyper Text Markup Language PROGRAMMIAMO IN HTML? NO! L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout)
Alcune definizioni HTML CSS. Introduzione a HTML. November 13, HTML+CSS+Javascript
Introduzione a November 13, 2016 ++Javascript Outline 1 2 3 ++Javascript Internet vs Web Internet : rete fisica di dispositivi interconnessi. (ARPANET 1970) Web : applicativo di alto livello relativo a
Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
CSS in pratica Politecnico Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS & HTML 1/4 Quattro modi
Laboratorio di Informatica (Chimica)
Laboratorio di Informatica (Chimica) HTML: Cascading Style Sheet (CSS). Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter
Lezione del corso CSS - Web Design ed Accessibilità secondo il W3C con CSS ed XHTML
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.03. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
CSS: Cascading Style Sheet
CSS: Cascading Style Sheet Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it Corso di
Struttura Layout Monolitico Fisso con Menu Orizzontale
Struttura Layout Monolitico Fisso con Menu Orizzontale BODY Body { margin: 0px; padding:0; font-family: arial,sans-serif; font-size: 76%; text-align: center; background-color: #FC3; background-image: url();
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
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
Introduzione a CSS. Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna
Introduzione a CSS Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it Web Style Sheets Fogli di stile per il Web Scopi descrivere
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
Prof. Pagani Corrado FOGLI DI STILE CSS
Prof. Pagani Corrado FOGLI DI STILE CSS INTRODUZIONE L acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e rappresenta un linguaggio per definire lo stile degli ipertesti del web.
Guida ai CSS. Introduzione
Guida ai CSS Introduzione... 1 Sintassi... 1 Stile in linea... 1 Stile incorporato... 2 Stile esterno... 2 Classi... 3 Selettori ID... 4 Grafica... 4 Link... 5 Attributi testo... 6 Attributi carattere...
Anno Accademico ANT Html e Css
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 ANT Html e Css F. Pizza fpizza@deis.unibo.it cos'è ANT tool di build indipendente dalla piattaforma, scritto in java
CSS 3. Pseudoclassi e pseudoelementi
CSS 3 Pseudoclassi e pseudoelementi Pseudoclassi e pseudoelementi In CSS2 lo stile normalmente è collegato ad un elemento in base alla sua posizione nell albero del documento (document tree) In alcuni
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
CSS Cascading Style Sheet Parte 2 (b)
CSS Cascading Style Sheet Parte 2 (b) Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it
Appunti sui fogli di stile
Appunti sui fogli di stile CSS ( Cascading Style Sheets): Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata. Può aggiornare lo stile di un
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
Linguaggi e tecnologie per il Web. Parte 5 CSS
Sapienza Università di Roma corso di laurea in Ingegneria informatica e automatica Linguaggi e tecnologie per il Web a.a. 2016/2017 Parte 5 CSS Riccardo Rosati Fogli di stile In HTML non c è separazione
CSS 3. Pseudoclassi 2. Pseudoclassi 1. Pseudoclassi e pseudoelementi
CSS 3 Pseudoclassi e pseudoelementi Pseudoclassi e pseudoelementi In CSS2 lo stile normalmente è collegato ad un elemento in base alla sua posizione nell albero del documento (document tree) In alcuni
CSS / FLOATING e POSITIONING. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / FLOATING e POSITIONING LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 CSS / TAG E CSS Ricalcare la griglia d impaginazione grazie ai tag DIV e al CSS LABORATORIO DI COMUNICAZIONE
Principali proprietà dei CSS Box Model e proprietà di base del testo
Principali proprietà dei CSS Box Model e proprietà di base del testo Sviluppo di siti web UD10 Fablab Design Il BOX MODEL Il BOX MODEL Se si vuole usare i CSS per scopi che vadano oltre la semplice gestione
Laboratorio di Tecnologie Web CSS: Introduzione Dott. Stefano Burigat
Laboratorio di Tecnologie Web CSS: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat Cascading Style Sheets (CSS) è uno standard W3C che definisce gli aspetti di presentazione dei documenti
Introduzione ai Fogli di Stile Cascading Stile Sheet (CSS) logica e sintassi
Introduzione ai Fogli di Stile Cascading Stile Sheet (CSS) logica e sintassi UD09 Fablab Design Cascading Style Sheet - CSS Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata)
Web Design. Media Dream Academy. Stefano Gaborin
Web Design Media Dream Academy Stefano Gaborin stefano.gaborin@above.company www.above.company I Fogli di stile: CSS CSS è l acronimo di Cascading Style Sheets, ovvero fogli di stile a cascata. Il CSS
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
Corso di CSS Modulo L2 1.2-CSS e HTML 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità vediamo come si collegano i fogli di stile con il codice contenuto in una pagina
Elementi blocco e Elementi in linea
Elementi blocco e Elementi in linea Sostanzialmente il box model di una pagina Internet basata su markup (x)html è composto da due tipologie di elementi: gli inline elements e i block-level elements. Rientrano
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 8. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di
CSS: stili e layout BOX MODEL. Prof.ssa Cristina Gena
CSS: stili e layout BOX MODEL Prof.ssa Cristina Gena Box model In questa lezione vedremo la differenza tra gli elementi blocco e gli elementi in linea e scopriremo le caratteristiche del box model. In
STILE E CSS. classi sezioni. tag
Perchè occorre lo stile? HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni. Un sito web deve avere uniformità di colori, di font e dimensioni
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
JavaScript 5. CSS e JavaScript
JavaScript 5 CSS e JavaScript CSS e JavaScript Attraverso JavaScript è possibile controllare proprietà CSS Possiamo controllare lo stile di un singolo elemento HTML o di un tag in generale Possiamo aggiungere
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
HTML e CSS Qual è il tag che permette di inserire un immagine in una pagina HTML? A. <img> B. <jpg> C. <p> D. <table>
HTML e CSS Qual è il tag che permette di inserire un immagine in una pagina HTML? A. B. C. D. Qual è il tag che permette di inserire una lista ordinata in una pagina HTML? A.
Principali proprietà dei CSS Margini, bordi e posizionamento degli elementi
Principali proprietà dei CSS Margini, bordi e posizionamento degli elementi UD11 Fablab Design Margini e bordi Proprietà singole per i margini Le proprietà margin-bottom, margin-left, margin-top, margin-right
prof. Giovanni Borga Unità Didattica UD03: applicazioni di JQuery Fablab Design prof. Giovanni Borga
Interactive Web Design & Development Prototipazione di pagine e interfacce web interattive con programmazione in Javascript. Utilizzo della libreria JQuery Unità Didattica UD03: applicazioni di JQuery
CSS. <html> <body bgcolor="blue"> <html> <body bgcolor= red"> <html> <body bgcolor="blue"> <html> <body bgcolor="red "> </body> </html>
I fogli di stile 1 Css CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare i vari elementi che
Istruzioni per la creazione delle pagine Contratto e Scheda
Istruzioni per la creazione delle pagine Contratto e Scheda Indice 1 Introduzione 3 2 Strumenti di aiuto per la creazione delle pagine 3 3 Inserimento codice HTML creato esternamente 5 2 1 INTRODUZIONE
Guida alla modifica di un layout
Guida alla modifica di un layout Abbiamo realizzato il sito web di Hexagon Tours utilizzando HTML e CSS, impostando una struttura formata da header, barra di navigazione, contenuti principali e laterali,
I fogli di stile Inline si specificano usando l attibuto style dei tag xhtml <p style= color: red; >esempio</p>
CSS Cascading Style Sheets Inne, Internal I fog di stile Inne si specificano usando l attibuto style dei tag xhtml esempio I fog di stile Internal si specificano usando il tag
II LINGUAGGIO HTML...1
Indice 1 II LINGUAGGIO HTML...1 1.1 INTRODUZIONE AL WWW...1 1.2 IL DOCUMENTO HTML...2 1.2.1 Elementi...3 1.2.2 Attributi...4 1.2.3 Riferimenti a caratteri...4 1.2.4 Commenti...4 1.3 STRUTTURA GLOBALE DI
I Fogli di Stile CSS ultima revisione 03/03/2016 1
I Fogli di Stile CSS ultima revisione 03/03/2016 1 I CSS Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del W3C.
Selettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS Sintassi valore valore h1 { color: blue;
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
CSS / CASCADING STYLE SHEETS. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / CASCADING STYLE SHEETS INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 INFORMAZIONE: CONTENUTO + PRESENTAZIONE Lo scopo di una pagina web è la trasmissione di un informazione.
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 Alpi Docenti: Viviana Patti e Claudia Picardi Appendice B Proprietà CSS B.1 Font me della famiglia serif
Tecnico della Produzione Multimediale per la Valorizzazione della Cultura e dell'arte
Piano triennale regionale 2016-2018 Rete Politecnica PO FSE 2014/2020 Regione Emilia Romagna - Obiettivo Tematico 10 - Asse III Istruzione e formazione Priorità di Investimento 10.4 Obiettivo specifico
Web design/1. prof. Marco Pagano
Web design/1 prof. Marco Pagano m@accademiabellearti.fr.it Questo documento è pensato come supporto alle lezioni frontali e non è quindi da considerarsi come «testo d esame» o sostitutivo della frequenza
Web Coding Prototipazione di ipertesti e siti web in HTML ed introduzione alla creazione di stili grafici con fogli di stile CSS.
Prototipazione di ipertesti e siti web in HTML ed introduzione alla creazione di stili grafici con fogli di stile CSS. Unità Didattica UD03: Introduzione ai fogli di stile CSS: box model, colori e sfondi
CSS 1 CSS. In breve. Fogli di stile a cascata. Introduzione a CSS: Cascading Style Sheets
CSS 1 Introduzione a CSS: Cascading Style Sheets CSS CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare
CSS / GESTIONE DEL COLORE E DEI BACKGROUND. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / GESTIONE DEL COLORE E DEI BACKGROUND INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB Modello Additivo del colore Le lunghezze
Applicazione Ipermediali 2007/2008
Applicazione Ipermediali 2007/2008 Cascading Style Sheet Politecnico di Milano Obiettivi Capire l importanza della separazione tra contenuto e layout grafico. Capire l importanza di aderire agli standard.
CSS 1. Introduzione a CSS: Cascading Style Sheets
CSS 1 Introduzione a CSS: Cascading Style Sheets CSS CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare
CSS. Massimo Martinelli.
CSS Massimo Martinelli Massimo.Martinelli@isti.cnr.it Consiglio Nazionale delle Ricerche -CNR Istituto di Scienza e Tecnologie della Informazione - ISTI Cosa è CSS? Cascading Style Sheets = Fogli di Stile
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