CSS 1. CSS - Cascading Style Sheets. Introduzione a CSS: Cascading Style Sheets
|
|
- Aloisia Pavone
- 5 anni fa
- Visualizzazioni
Transcript
1 CSS 1 Introduzione a CSS: Cascading Style Sheets CSS - Cascading Style Sheets! Lo stile definisce le regole che guidano il browser nella visualizzazione del contenuto di un tag suggerisce come posizionare, formattare e visualizzare i vari elementi della pagina! Un foglio di stile è una collezione di regole stilistiche che definiscono il look&feel degli elementi Uno stile può essere interno ad un file.html oppure può essere un file di testo esterno con estensione.css) Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 2
2 Fogli di stile a cascata! Il browser fonde insieme le varie definizioni incontrate esaminando in cascata le definizioni incontrate (ecco il significato di cascading) Il termine cascading si riferisce all ordine di applicazioni delle definizioni di stile Hanno priorità minore quelle in un file esterno, maggiore quelle all interno dei tag Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 3 Specifica dello stile! I tag servono per specificare la struttura (semantica) di un documento! La definizione dello stile consiste nell assegnamento di valori a un insieme di proprietà! Lo stile suggerisce al broswer come rendere (disegnare) l elemento a cui lo stile si applica! CSS permette agli autori di siti WEB di separare l aspetto di pagine web dal loro contenuto Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 4
3 Separare il contenuto dall aspetto informazione contenuto aspetto documento HTML collegato a documento CSS browser utente Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 5 Come specificare uno stile?! Esistono tre modi per specificare uno stile All interno di elementi HTML Inline Style All interno del tag style Internal Style Sheet In un file esterno (incluso con link) External Style Sheet Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 6
4 Stile in linea - Inline Style! Lo stile inline lo si definisce all interno di un qualsiasi tag HTML Permette di definire proprietà di un elemento specifico <p style= font-size:120%; > text-align:center; background:red; proprietà valore Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 7 Esempio! Lo stile inline indica la formattazione di un singolo elemento La definizione vale solo per il contenuto del tag <h1 style= color:blue; > la scritta blue</h1> <h1>la scritta normale</h1> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 8
5 Elementi di un foglio di stile 1! Ogni foglio di stile consiste di una serie di istruzioni. Un istruzione fa due cose: Identifica gli elementi (p, body, ul, ) di un documento HTML che lo includono Suggerisce al browser come mostrare il contenuto di questi elementi! La parte dell istruzione che identifica gli elementi è detto selettore. Il selettore seleziona gli elementi di una pagina a cui applicare l istruzione. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 9 Elementi di un foglio di stile 2! La parte dell istruzione che suggerisce al browser come gli elementi dovrebbero essere disegnati (mostrati all utente) è detta dichiarazione! Una dichiarazione può contenere un gran numero di proprietà, le parti individuali di stile da applicare all elemento selezionato. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 10
6 Sintassi delle istruzioni CSS 1 1. Ogni istruzione (statement) deve avere un selettore ed una dichiarazione. La dichiarazione viene subito dopo il selettore ed è contenuta da una coppia di parentesi graffe 2. La dichiarazione consiste di una o più proprietà separate da punto e virgola (;) 3. Ogni proprietà ha un nome seguito da due punti (:) seguiti dal valore di quella proprietà. Ci sono vari tipi di valore, ma ogni data proprietà può assumerne solo alcuni come indicato dalla specifica CSS. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 11 Sintassi delle istruzioni CSS 2 4. Se una proprietà può assumere più valori contemporaneamente (e.g., font-family), allora valori nella lista devono essere separati da virgola e da uno spazio 5. Se un valore assume un unità di misura come valore attuale (e.g., font-size), allora non si deve mettere uno spazio tra il valore e l unità di misura 6. Se un valore è costituito da più parole, allora è necessario circondare il valore con le virgolette 7. Come per HTML, si possono aggiungere spazi bianchi per rendere i fogli di stile più facili da leggere e da scrivere Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 12
7 Anatomia di un istruzione selettore dichiarazione body { parentesi graffa di apertura font-family: Verdana, Minion Web, sans-serif; font-size: 1em; text-align: justify; valore nomi di proprietà } parentesi graffa di chiusura Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 13 Commenti in CSS! Per indicare un commento in un foglio di stile esterno si usa la stessa sintassi del C Inizio commento /* Fine commento */! Per indicare un commento in un foglio di stile interno si usa la stessa sintassi di HTML Inizio commento <!-- Fine commento --> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 14
8 Internal Style Sheet! Lo stile è incorporato nel documento HTML. Le definizioni vanno all interno del tag style In genere contenuto nel tag head! L elemento style permette di definere regole CSS all interno del documento! Attributi locali type media scoped <style type="text/css"> p { background-color: grey; color: white; } </style> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 15 <!DOCTYPE HTML> <html> <head> <title>elemento style</title> <style type="text/css"> p { } background-color: grey; color: white; </style> </head> <body> <p> Paragrafo con stile </p> </body> </html> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 16
9 Attributo locale media di style! Specifica il dispositivo per cui lo stile è stato progettato. Valori predefiniti: all (default) aural braille handheld projection print screen tty tv Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 17 <style media="screen" type="text/css"> a { } </style> background-color: grey; color: white; padding: 0.5em; <style media="print" type="text/css" > </style> a{ } color:red; font-weight:bold; font-style:italic Esempio Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 18
10 <body> <p> Ecco alcuni link utili per il corso: </p> </body> <a href=" Sito del corso</a> <a href="media.html">questa pagina</a> Anteprima di stampa Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 19 Specificità attributo media <style media="screen AND (max-width:500px)" type="text/css"> </style> a { background-color: grey; } color: white; padding: 0.5em; Se lo schermo è grande al più 500 pixel <style media="screen AND (min-width:500px)" type="text/css"> </style> a {color:red; font-style:italic} Se lo schermo è grande almeno 500 pixel Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 20
11 Cosa possiamo controllare! width, max-widht, min-width! height, max-height, min-height! device-widht, max-device-widht, min-device-width! device-height, max-device-height, min-device-height! resolution, max-resolution, min-resolution! orientation Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 21 Applicazione dello stile > 500px < 500px Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 22
12 Attributo locale scoped di style! booleano! Non supportato (CONTROLLARE)! Possiamo usare style in qualsiasi punto del documento. Se aggiungiamo scoped, allora lo stile vale nell elemento dove abbiamo usato style ed in tutti gli elementi in esso contenuti Se scoped non è presente è come se avessimo dichiarato lo stile nell elemento head Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 23 External Style Sheet! Sono definiti in un altro documento con estensione.css! Esistono due modi per includere uno stile esterno Con il tag link Attraverso la Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 24
13 Inclusione attraverso link! Ricordiamo la sintassi di link <link rel="stylesheet" type="text/css" href="nomefilestile.css" media=".. " > L attributo media ha lo stesso significato dell attributo media dell elemento style Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 25 La può essere usata come " Un URL può essere sia relativo (locale al server web) sia assoluto (come negli esempi deve essere inserita all inizio di un foglio di stile esterno Funziona anche con i fogli di stile interni Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 26
14 La 2! Lo stile importato è utilizzato in congiunzione al corrente foglio di stile! Un foglio di stile con una regola discende a cascata dal foglio di stile importato Se ci sono regole in comune tra i due fogli di stile, allora le regole specificate nel foglio di stile corrente sovrascrivono le regole del foglio di stile importato Prof. Carlo Blundo Tecnologie di Sviluppo per il secondo.css. regole CSS. primo.css Le regole in secondo.css presenti anche in primo.css sono sovrascritte (o fuse insieme) da (a) quelle in primo.css Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 28
15 <!DOCTYPE HTML> <html> <head> <titleimportedmedia</title> <meta charset="utf-8"/> <style media="screen" "imported.css"; p { } </style> </head> <body> color: red; <p> Un esempio di stile importato </p> </body> </html> imported.css p { background-color: blue; color: white; } Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 29 Note Possiamo avere più una di seguito all altra! In genere si preferisce usare l elemento link per includere fogli di stile esterni Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 30
16 Browser style (user agent style)! Ogni browser ha un proprio foglio di stile Insieme di regole che vengono applicate di default quando nessun altro stile è stato definito! Ad esempio Il contenuto del tag p è allineato a sinistra Il tipo di carattere usato per il testo è Times New Roman Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 31 Stile utente (user defined setting)! Ogni utente può definire uno stile da applicare ai documenti HTML che scarica dalla rete Ogni browser ha il suo modo per settare tale stile Chrome crea un file nella cartella del profilo dell utente chiamato Default\User StyleSheets\Custom.css Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 32
17 Con Safari! Si sceglie Preferenze dal menu Safari, poi Avanzate e poi Foglio di stile Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 33 Quale stile vale per l elemento?! Lo stile da associare ad un elemento dipende dal posto dove lo stile è stato definito da un eventuale stile definito negli elementi che contengono l elemento considerato Gli antenati dell elemento! Dobbiamo considerare L effetto a cascata L ereditarietà Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 34
18 Priorità degli stili Stile del browser Stile dell utente Stile dell autore Default Browser Settings User-Defined Settings External Styles Internal Styles Inline Styles HTML Tag Attributes Maggiore priorità Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 35 Priorità e stili! Il valore di una proprietà definita in un stile a priorità inferiore viene sovrascritto da un valore per quella proprietà definita in uno stile a priorità superiore <head> <style type="text/css"> h2 { color: red; } </style> </head> <body> <h2 style='color:blue;'> Di che colore è l'intestazione?</h2> <h2>e questa intestazione?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 36
19 La regola può essere infranta! Usare!important Quando una regola (tipicamente una regola utente) è seguita da!important, essa sopravanza un analoga regola di senso diverso dell'autore della pagina! Ad esempio P { font-size: 18pt!important ; } imporrà un font di 18 punti anche se in uno stile a priorità maggiore è indicata una dimensione differente Se si usa nuovamente!important. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 37 <!DOCTYPE HTML> <html> <head> <title>!important</title> <style type="text/css"> h2 { color: red!important ; } </style> </head> <body> <h2 style='color:blue;'> Di che colore è l'intestazione?</h2> <h2>e questa intestazione?<h2> </body> </html> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 38
20 Effetto a cascata 1! Tutte le proprietà definite in uno stile a priorità inferiore sono valide anche negli stili a priorità superiore A meno di ridefinizioni <head> <style type="text/css"> h2 { color: red; font-family: Arial; } </style> </head> <body> <h2 STYLE='color:blue;'> Di che colore è l'intestazione?</h2> <h2>e questa intestazione?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 39 Effetto a cascata 2 Browser User External L effetto a cascata fluisce in questo verso Internal Inline Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 40
21 Ereditarietà! Se si applica uno stile a un elemento, allora tale stile sarà ereditato automaticamente dagli elementi in esso contenuti! Se non specificato diversamente, le caratteristiche di un elemento rimangono Quelle predefinite (stile del browser o dell utente) Quelle definite in uno stile ereditato Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 41 Note 1! Se non viene specificata una proprietà, CSS assume un valore di default! A parte pochi casi, il valore di default è sempre "inherit". Questo significa che la proprietà assume lo stesso valore che ha nell elemento genitore dell'elemento in questione! Ad esempio il contenuto dell'elemento em sarà colorato di rosso <p style="color:red;"> Qui il testo è <em>in corsivo</em> e qui no. </p> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 42
22 Note 2! Tra i valori non ereditati ci sono: display è sempre il valore naturale dell'elemento block (block level) per p, h1, div, inline (text level) per b, i, a, span, background sempre transparent Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 43 Albero del documento (document tree)! Possiamo rappresentare un qualsiasi documento HTML attraverso un albero! Gli elementi (tag) sono i nodi dell albero! In questo modo possiamo mettere in relazione i tag di un documento HTML come mettiamo in relazione nodi di un albero Figlio, discendente, antenato, fratello,! Questa rappresentazione ci sarà utile in seguito quando analizzeremo i selettori Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 44
23 Document tree In questo esempio, il testo contenuto in b e quello contenuto in em ereditano le head impostazioni dell elemento p che contiene gli elementi em e b. L elemento p, a sua volta, eredita le impostazioni del tag body html b p body em p Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 45 Stili in conflitto! Può succedere che ad uno stesso elemento potrebbero essere applicati stili differenti definiti allo stesso livello (internal, external) Gli stili sono in conflitto! Quando gli stili sono in conflitto, allora sarà applicato quello con maggiore specificità! Esiste un algoritmo per calcolare la specificità! A parità di specificità si applicano tutti gli stili, l ultimo definito nel foglio di stile sovrascrive le proprietà comuni! Maggiori dettagli sull algoritmo per il calcolo della specificità quando analizzeremo i selettori Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 46
24 Esempio 1 <style type="text/css"> h2.bianco { color: white; } h2 { color: red; background: grey; }.classe1 { color: red; background: grey; }.classe2 { color: white; } </style>specificita </head> <body> <h2 class="bianco">quale stile applichiamo?<h2> <h2 class="classe1 classe2">quale stile applichiamo?<h2> <h2 class="classe2 classe1">quale stile applichiamo?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 47 Esempio 2 <style type="text/css"> h2.bianco { color: white; } h2 { color:red; background: grey; } </style>.classe2 { color: white; }.classe1 { color: red; background: grey; } </head> <body> <h2 class="bianco">quale stile applichiamo?<h2> <h2 class="classe1 classe2">quale stile applichiamo?<h2> <h2 class="classe2 classe1">quale stile applichiamo?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 48
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
DettagliCSS 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
DettagliSistemi 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
DettagliLinguaggi 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
DettagliAnno 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
DettagliIntroduzione 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
DettagliINSERIMENTO. 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
Dettagli4 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/
DettagliTecnologie 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
DettagliServe 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
DettagliI 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
DettagliCSS 2. Tipi di selettori. Raggruppamento di selettori. Selettore generale. I selettori e le classi
CSS 2 I selettori e le classi Tipi di selettori Selettore generale Selettori tipo (quelli singoli) Selettori di gruppo (raggruppamento) Selettori contestuali Selettori figli Selettori fratelli adiacenti
DettagliPrimi 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
DettagliSommario. 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
DettagliElementi 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
DettagliCSS 2. I selettori e le classi
CSS 2 I selettori e le classi Tipi di selettori Selettore generale Selettori tipo (quelli singoli) Selettori di gruppo (raggruppamento) Selettori contestuali Selettori figli Selettori fratelli adiacenti
DettagliAnno 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
DettagliCSS 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
DettagliCascading 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
DettagliElementi 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
DettagliAppunti 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
DettagliLinguaggi 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
DettagliWeb 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
DettagliCorso di Informatica
Corso di Informatica Modulo L2 1.1-Concetti generali 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità si inizia a presentare la tecnologia CSS, un evoluzione del codice
DettagliI 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
DettagliJavaScript 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
DettagliLaboratorio 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
DettagliIntroduzione 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
DettagliCSS 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
DettagliCorso 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
DettagliIntroduzione. 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
DettagliCSS / 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.
DettagliI fogli di Stile. Il Problema dello Stile di Presentazione. I tag in HTML consentono di specificare
Programmazione Web 1 I fogli di Stile Il Problema dello Stile di Presentazione 2 I tag in HTML consentono di specificare la struttura logica del documento (paragrafi, titoli, ecc.) alcuni aspetti della
DettagliIntroduzione 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)
DettagliCSS 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
DettagliFogli 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,
DettagliSTILE 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
DettagliCosa 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)
DettagliStruttura 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();
DettagliINFORMATICA CSS Roberta Gerboni
2017 - Roberta Gerboni Un documento HTML può essere visto come un insieme di blocchi (contenitori) sui quali si può agire con stili diversi. Ogni tag HTML definisce un blocco. Si ha quindi una gerarchia
DettagliCSS / PRIORITA E CASCADING. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / PRIORITA E CASCADING INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / PRIORITA E PRECEDENZA NELLE DEFINIZIONI CSS Gli stili CSS si dicono a cascata perché lo stile
DettagliAlcune 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
DettagliCSS 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
DettagliCSS: 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
DettagliSelettori. 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;
DettagliProgettazione di siti web a.a. 2015/16
HTML e stili Progettazione di siti web a.a. 2015/16 Fogli di stile: introduzione Maria Simi Marzo, 2016 [Learning web design,, J. Niederst Manuale di riferimento del W3C] All'inizio del web solo annotazioni
DettagliCSS. 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
Dettaglilayout 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
DettagliCSS (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
DettagliCSS. <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
DettagliDare stile al testo significa impostare con i CSS:
1 Dare stile al testo significa impostare con i CSS: Il tipo di font Il colore del font La dimensione del font Grassetto e corsivo del font Allineamento Sottolineatura Ombre Spaziature, bordi, margini
DettagliLaboratorio 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
DettagliINSERIMENTO. 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
DettagliCSS: 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
DettagliArchitettura 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
DettagliCSS. 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
DettagliCSS 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
Dettagli<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
DettagliI 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
DettagliArchitettura 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
DettagliProf. 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.
DettagliIntroduzione ai Cascading Style Sheets
Introduzione ai Cascading Style Sheets Università di Pisa pievatolo@dsp.unipi.it 6 aprile 2014 Sommario 1 2 CSS esterni CSS interni CSS inline 3 4 Confondere fra struttura e presentazione Il mega
Dettagli<style type="text/css" "stile.css"; </style>
1 Ci sono tre modalità valide, ognuna caratterizzata da alcuni aspetti: Fogli collegati (il classico tag oppure l attributo @import all interno del tag )
DettagliCSS 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
DettagliHTML 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.
DettagliPolitecnico 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
DettagliCSS Cascading Style Sheets
CSS Cascading Style Sheets il linguaggio er modificare lo stile delle agine web Servono er facilitare la creazione di agine HTML con un asetto uniforme ermettono di searare il contenuto di un documento
DettagliLinguaggi 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
DettagliCSS 4. Tipi di dati in CSS. Numeri <number> Lunghezze <length> Tipi di dati, lunghezze ed unità di misura. Esistono i seguenti tipi di dati
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati 2 Numeri Interi Cifre comprese
DettagliDivisions e spans. Esercizio. <html> <head> <title>esempio uso del tag span</title> <style> <!--
Divisions e spans L applicazione degli stili può essere eseguita anche su sezioni di testo tramite i tag div e span. Div suddivide il testo analogamente a come si suddivide un articolo in titolo, sottotitolo,paragrafi,
Dettaglie 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
DettagliGuida 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,
DettagliHTML 4.01 Seconda lezione
HTML 4.01 Seconda lezione A cura di Ivano Stranieri 0 Lezione precedente Cos è internet browser editor di testo HTML: cos è e cosa non è i marcatori i tag di struttura: DOCTYPE HTML HEAD TITLE META BODY
DettagliCSS: 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
DettagliMetodologie 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
DettagliHTML. Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file.
Con la sigla HTML si intende: HYPER TEXT MARKUP LANGUAGE HTML Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file. Iper testo Un documento o pagina puo essere collegato ad
DettagliWEB 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
DettagliCSS = Cascading Style Sheets o Fogli di stile Serve a definire la formattazione di una pagina web
CSS CSS = Cascading Style Sheets o Fogli di stile Semplici file di testo separati dalla pagina HTML ma collegati ad esse mediante link oppure regole scritte all interno della pagina Serve a definire la
DettagliAnno 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
DettagliDispensa 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
DettagliCorso di CSS. Prerequisiti. Modulo L2. 3-Border e list. Conoscenza di base linguaggio HTML. M.Malatesta 3-CSS-Border e list-13 16/02/ /02/2014
Corso di CSS Modulo L2 3-Border e list 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo alcune delle proprietà CSS relative ai bordi (border-styling) e alle
DettagliCome progettare un layout web responsive con le media queries?
Come progettare un layout web responsive con le media queries? Dopo le prime due lezioni introduttive sul Responsive Web Design, oggi ci addentreremo nel codice CSS attraverso le nuove istruzioni messe
DettagliWeb 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
DettagliESEMPIO 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
DettagliCSS: 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
DettagliBASI di HTML e CSS (primo incontro)
CoderDojo Firenze BASI di HTML e CSS (primo incontro) HTML Concetto di tag Il tag è una parola chiave che indica al browser come interpretare e rappresentare il testo a cui è riferito. È composto da una
DettagliSommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
DettagliCSS. cascading style sheet
CSS cascading style sheet Introduzione CSS (Cascadin style sheet) Prima specifica ufficiale nel 1996 CSS1 http://www.w3.org/tr/rec-css1 Seconda specifica nel 1998 CSS2 http://www.w3.org/tr/rec-css2 Specifica
DettagliIstruzioni 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
DettagliHTML. 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
DettagliINTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET 1 Aspetto delle pagine Web miglioriamo la rappresentazione su browser - Definizione dello STILE- Colore, dimensione e stile del font, colore sfondo,
DettagliResponsive Web Design
Responsive Web Design Università di Pisa pievatolo@dsp.unipi.it 26 aprile 2015 Sommario Griglie fluide, immagini flessibili, e oltre 1 Griglie fluide, immagini flessibili, e oltre Che cosa significa responsive?
DettagliCascading Style Sheet
I fogli di stile Cascading Style Sheet Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione e Culture (si ringrazia il dott. Claudio Schifanella, che ha concesso l uso del materiale)
DettagliII 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
DettagliElementi 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
DettagliUniversità degli Studi di Padova Facoltà di Lettere e Filosofia Elementi di programmazione per la presentazione di contenuti Web A.A.
Indice: Università degli Studi di Padova Facoltà di Lettere e Filosofia Elementi di programmazione per la presentazione di contenuti Web A.A. 2009/2010 Marco Dussin Docente Argomenti del laboratorio Introduzione
DettagliCSS (Cascading Style Sheets) HTML (Hyper Text Markup Language) HTML: stili. A.Lioy - Politecnico di Torino ( ) F.1
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