CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
|
|
|
- Basilio Vanni
- 7 anni fa
- Visualizzazioni
Transcript
1 CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it
2 I cascading style sheet I CSS permettono una agevole separazione tra forma e contenuto Per ogni pagina html è possibile specificare le caratteristiche di formattazione di ogni tag Ad esempio è possibile dire che il tag H1 deve apparire in bold, 20pt, blu Tale specifica può essere inserita nello header della pagina o può apparire in un file distinto In tal modo è possibile centralizzare in un unico punto gli aspetti di formattazione relativi a tutte le pagine di un certo sito Il meccanismo del cascading permette di differenziare in maniera agevole tra caratteristiche generali e caratteristiche specifiche di una singola pagina E possibile associare stili diversi a diversi supporti (video, carta, ecc.) Elementi di Informatica e Reti di Calcolatori 2
3 Vantaggi Facilita le modifiche alla presentazione di tutte le pagine Facilita le revisioni dei documenti Rende HTML estensibile in modo consistente Permette la produzione di documenti autodescrittivi Elementi di Informatica e Reti di Calcolatori 3
4 CSS e HTML: Come Style sheet embedded <HTML> Style sheet collegato <HTML> <HEAD> <HEAD> <TITLE>Bach's home page</title> <TITLE>Bach's home page</title> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML> <LINK rel="stylesheet" href="bach.css" type="text/css /> </HEAD> <BODY> <H1>Bach's home page</h1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML> File bach.css h1 { color: red } Elementi di Informatica e Reti di Calcolatori 4
5 Il meccanismo del cascading Una stessa pagina html può fare riferimento a più CSS Uno o più collegati, uno incorporato Se lo stesso elemento e la stessa proprietà sono definiti in più fogli stile fa fede l ultimo ad essere stato definito Nell ordine stabilito dall header della pagina Per ogni elemento, le propretà non definite in un foglio stile si cercano nei fogli stile precedenti In tal modo è possibile avere un foglio stile generale per un intero sito, più alcuni fogli stile per zone diverse del sito (che collegano anche il foglio stile generale ridefinendo solo gli elementi/proprietà utili), più degli stili embedded per la singola pagina Elementi di Informatica e Reti di Calcolatori 5
6 Esempi di proprietà definibili Margini, rientri (esempio con tre regole) <style type="text/css"> body { } h1 { margin-left: 10%; margin-right: 10%; margin-left: -8%; } h2, h3, h4, h5, h6 { } </style> margin-left: -4%; Elementi di Informatica e Reti di Calcolatori 6
7 CSS Sintassi valore valore h1 { color: blue; font-size: 2 px Times..; } Selettore proprietà proprietà dichiarazione Elementi di Informatica e Reti di Calcolatori 7
8 CSS & HTML 1/4 Quattro modi per collegare un CSS con una pagina HTML: Il modo più semplice è inserire le direttive CSS direttamente nel tag che dev essere modificato (inline) <p style= color:red; > testo </p> L attributo <style> è utilizzabile per tutti I tag definiti in HTML 4 e 5 Direttive CSS Elementi di Informatica e Reti di Calcolatori 8
9 CSS & HTML 2/4 Si può sfruttare il tag <style> di HTML: Direttive CSS <html> <head> <style type = text/css >p{color:red;}</style> </head> <body>... </body> </html> In questi primi due metodi il codice del CSS è embedded nella pagina HTML Elementi di Informatica e Reti di Calcolatori 9
10 CSS & HTML 3/4 Se si vuole definire il CSS in un file diverso (consigliato!!) si può usare ancora il tag <style>: <html> <head> url(stile.css);</style> <body>... </body> </html> Il file stile.css deve trovarsi nella stessa directory in cui si trova la pagina HTML che lo usa Elementi di Informatica e Reti di Calcolatori 10
11 CSS & HTML 4/4 Si può collegare un file CSS esterno ad un pagina HTML anche tramite il tag <link>: <html> <head> <link rel = stylesheet type= text/css href = stile.css > </head> <body>... </body> </html> Elementi di Informatica e Reti di Calcolatori 11
12 Esempio css not embedded p { File es1.css text-align: center; color: red; } <html> <head> </head> <body> File es1.html <title> Esempio utilizzo css</title> <link rel= stylesheet href= es1.css type= text/css /> <p>ogni paragrafo apparirà centrato e rosso</p> </body> </html> Elementi di Informatica e Reti di Calcolatori 12
13 Esempio css embedded File es2.html <html> <head> </head> <body> <title> Esempio utilizzo css</title> <style type= text/css > p { text-align: center; color: red; } </style> <p>ogni paragrafo apparirà centrato e rosso</p> </body> </html> Elementi di Informatica e Reti di Calcolatori 13
14 Esempio più pagine <html> <head> File es3-2.html <title> Esempio più pagine</title> </head> <body> <link rel= stylesheet <h1>pagina 2</h1> </body> </html> href= es3.css type= text/css /> <html> <head> File es3-1.html <title> Esempio utilizzo css</title> </head> <body> <link rel= stylesheet <h1>pagina 1</h1> </body> </html> body Elementi di Informatica e Reti di Calcolatori 14 { href= es3.css type= text/css /> File es3.css background-color: yellow; }
15 Elemento DIV Viene utilizzato per organizzare (raggruppare) il contenuto della pagina html Non hanno uno specifico significato <html> <head> <title> Esempio più pagine</title> </head> <body> <h1>esempio div</h1> <div> <h5>titolo paragrafo</h5> <p> paragrafo 1</p> </div> </body> </html> Elementi di Informatica e Reti di Calcolatori 15
16 Uso dell elemento DIV Si può scrivere una regola che si applica solo alle sezioni volute div { border: solid; border-width: thin; } Si applica ad esempio a: <div> </div> testo da contornare con un bordo fine testo da contornare con un bordo fine Elementi di Informatica e Reti di Calcolatori 16
17 L attributo class Esempio di testo HTML: <h2 class="subsection">getting started</h2> Regola di stile applicata solo alle occorrenze di h2 con class=subsection:.subsection { margin-top: 8em; margin-bottom: 3em; } Elementi di Informatica e Reti di Calcolatori 17
18 Uso dell attributo class esempio h2.sport { text-align: center; color: } File es6.css red; <html> <head> </head> <body> File es6.html <title> Esempio utilizzo css</title> <link rel= stylesheet href= es6.css <h2>esempio h2</h2> type= text/css /> <h2 class= sport >Esempio h2 sport</h2> </body> </html> Elementi di Informatica e Reti di Calcolatori 18
19 Class e Div Incoraggiano la sostituzione degli elementi e degli attributi di presentazione con altri meccanismi. Attributo class: Consente di classificare più finemente i tag HTML per applicare formati in modo selettivo Elemento <div> : Il tag HTML <div> può essere usato per delimitare generiche sezioni di contenuto La sezione può essere classificata con l attributo class <div> + class: Permette di definire delle marcature personalizzate per il contenuto Elementi di Informatica e Reti di Calcolatori 19
20 Esempi <h2 class= miotitolo">getting started</h2> Definisce la classe miotitolo come un nuovo sottotipo dell elemento <h2> <div class= contornato"> testo da contornare con un bordo fine </div> Definisce un nuovo marcatore tramite la classe contornato Le proprietà stilistiche delle classi miotitolo e contornato devono essere definite a parte: Fogli di Stile (Style Sheets) Elementi di Informatica e Reti di Calcolatori 20
21 I selettori Gli ID Come le classi ma applicabili ad un solo tag alla volta Usa l attributo id definito da HTML4 per ogni tag #test{color:red; background:black;} Per applicare l ID appena definito: <table id= test >... </table> Si può restringere il campo di applicabilità come per le classi ma non dovrebbe servire Elementi di Informatica e Reti di Calcolatori 21
22 I selettori In un CSS lo sviluppatore deve potersi riferire agli elementi della pagina HTML da modificare Ogni direttiva CSS è composta da una parte sinistra (selettore) e da una parte destra (cambiamenti da applicare) Selettore banale h1,h2,h3 {color:red;} Tutti gli h1,h2,h3 diventano rossi Selettore universale *{color:red;} Tutti i tag HTML diventano rossi Elementi di Informatica e Reti di Calcolatori 22
23 I selettori Le classi 1/2 Raccoglie insieme delle proprietà che possono essere applicati a svariati elementi HTML.test{color:red; background:black;} Nell esempio la classe test che crea element con testo rosso e sfondo nero Per creare una tabella con testo rosso e sfondo nero si usa l attributo class definito per ogni tag in HTML4: <table class= test >... </table> Elementi di Informatica e Reti di Calcolatori 23
24 I selettori Le classi 2/2 Si può restringere l applicazione delle classi solo ad alcuni tag: h1.test{color:red; background:black;} In questo modo la classe test può essere associata solo a tag di tipo <h1> Serve per evitare di applicare delle classi a elementi HTML per cui non sono adatte La sintassi per le classi non ristrette può essere anche scritta come *.test Elementi di Informatica e Reti di Calcolatori 24
25 I selettori Le pseudo-classi Servono per specificare il comportamento di un tag non in assoluto ma solo in uno dei suoi possibili stati P. es. il tag <a> può avere quattro stati: a:link {...} Apparenza normale a:visited{...} Apparenza dopo che è stato visitato a:hover {...} Apparenza al passaggio del mouse a:active {...} Apparenza mentre si clicca sul link Elementi di Informatica e Reti di Calcolatori 25
26 Ereditarietà Le direttive CSS associate ad un tag HTML vengono ereditate sui tag contenuti <body style= color:red > <h1> titolo </h1> <p> paragrafo 1 </p> <p> paragrafo 2 </p> </body> </html> Di che colore saranno i paragrafi e il titolo? Rossi! La direttiva viene ereditata Elementi di Informatica e Reti di Calcolatori 26
27 Ereditarietà - Eccezioni Si può interrompere l ereditarietà: <body style= color:red > <h1> titolo </h1> <p style= color:black > paragrafo 1 </p> <p> paragrafo 2 </p> </body> </html> Il paragrafo sarà rosso o nero? Nero! Vale sempre la direttiva più specifica (vicina) Elementi di Informatica e Reti di Calcolatori 27
28 Cascading Si possono associare contemporaneamente diversi CSS ad una singola pagina HTML Esiste la possibilità che tra CSS diversi esistano direttive in conflitto tra di loro Il meccanisco di cascading fornisce delle regole per risolvere univocamente questi conflitti Elementi di Informatica e Reti di Calcolatori 28
29 Cascading - Esempio <html> <head> url(ext.css); </style> <link rel = "stylesheet" type = "text/css" href ="ext1.css"> </head> <body> <h1> titolo </h1> </body> </html> In ext.css appare: In ext1.css appare: h1 {color:red;} h1 {color:blue;} Il titolo sarà blue perché l inserimento di ext1.css è avvenuto dopo Se si scambiassero ext1 con ext si otterrebbe un titolo rosso Elementi di Informatica e Reti di Calcolatori 29
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
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
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
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.
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
HTML e XML. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
HTML e XML Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola Indice Il linguaggio del Web Cenni di HTML
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
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
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
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/
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 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
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
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 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
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
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
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
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
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
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
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
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
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)
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
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
CSS 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
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;
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
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
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 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
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
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
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
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)
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
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
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
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
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
<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
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
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
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
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
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
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
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
I 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
Introduzione 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
Corso 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
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
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
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
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
- 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
CSS 1. CSS - Cascading Style Sheets. Introduzione a CSS: Cascading Style Sheets
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,
INFORMATICA 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
Progettazione 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
(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
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
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
CORSO DI HTML E CSS CORSO PER LA REALIZZAZIONE DI SITI WEB CON WORDPRESS. ARGOMENTI BASE DEL CORSO
CORSO DI HTML E CSS CORSO PER LA REALIZZAZIONE DI SITI WEB CON WORDPRESS. Grazie al corso di HTML e CSS IkonArt Academy potrai gestire gli elementi che regolano l'impaginazione dei contenuti (HTML) e l'aspetto
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
Metalinguaggi di marcatura Materiale didattico di supporto. Indice 6. HTML (CONTINUA)...2
Indice 6. HTML (CONTINUA)...2 6.1 FOGLI DI STILE (CSS- CASCADING STYLESHEET)...2 6.1.1 Regole dello stile...6 6.1.2 Classi...6 6.1.3 Esempi di proprietà modificabili e relativi valori....9 6.2 DIVISIONS
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.
HTML. 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
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
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.
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
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,
HTML 5 e CSS 3 I LINK. Prof.ssa Cristina Gena
HTML 5 e CSS 3 I LINK Prof.ssa Cristina Gena I link In questa lezione impareremo a inserire i link interni ed esterni e le ancore; infine vedremo come formattare i link con CSS. Come abbiamo detto in precedenza
CSS IN PASSATO ABBIAMO DETTO.. Introduzione. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti
CSS Introduzione CSS3 INTRODUZIONE IN PASSATO ABBIAMO DETTO.. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti Con CSS specificheremo lo stile con il quale
Totale 132. Materiale didattico:
Istituto Statale d Istruzione Superiore Ugo Foscolo PROGRAMMAZIONE Iniziale CLASSE 3BSIA MATERIA: Informatica - Prof. Vendemia Andrea Anno Scolastico 2017-2018 MODULO ORE NOTE 1 Il pensiero computazionale
Università 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
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
Linguaggi Corso M-Z - Laurea in Ingegneria Informatica A.A CSS
Linguaggi Corso M-Z - Laurea in Ingegneria Informatica A.A. 2009-2010 Alessandro Longheu http://www.diit.unict.it/users/alongheu alessandro.longheu@diit.unict.it Esercitazione CSS 1 CSS - Esercizio 1 Redigere
Prof. Maristella Agosti, Ing. Marco Dussin
Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a.a. 2010-11 Indice: Prof. Maristella Agosti, Ing. Marco Dussin
Applicare gli stili CSS
Applicare gli stili CSS Gli stili CSS possono essere applicati nei seguenti modi: Selettore di tipo (o di tag o selettore universale) Lo stile viene applicato a tutti i tag dello stesso tipo di quello
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
Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a. a
Indice: Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a. a. 2010-11 Prof. Maristella Agosti Ing. Marco Dussin
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
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
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,
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
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
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
CSS 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
Linguaggi e Traduttori a.a. 2005/2006 Tesina n 6
Linguaggi e Traduttori a.a. 2005/2006 Tesina n 6 Titolo: HTML programming Descrizione Si vuole realizzare un linguaggio di programmazione che permetta di costruire pagine html. Dato in ingresso un file
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
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
Informatica. Comunicazione & DAMS A.A. 2015/16. Dr.ssa Valeria Fionda
Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda Pagina Web Struttura base pagina Web: (Heading
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
HTML. I tag HTML (parte 1)
HTML I tag HTML (parte 1) I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML Formato e possono essere tag di apertura: tag di chiusura:
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)
Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1 I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle