Copyright (c) 2008, 2009, 2010 Fabio Proietti
|
|
|
- Livio Orsini
- 7 anni fa
- Visualizzazioni
Transcript
1 Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front- Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License". Authors and contributors Fabio Proietti Feedback Please direct any comments or suggestions about this document to fabio.proietti AT istruzione DOT it Publication date and version , v , v , v.0.6 last modified
2 Indice Introduzione Attributo style (regole css inline) Elemento <style> (regole css internal) Elemento <link> (regole css external) Proprietà dello sfondo Proprietà del testo Proprietà dei collegamenti Box model Flusso del testo Proprietà position Proprietà float Selettore class Selettore id Elementi <span> e <div>
3 Introduzione Quando si usa il linguaggio HTML o XHTML per costruire pagine web, non ci si cura dell'aspetto estetico delle pagine, ma solo dei contenuti. Per personalizzare l'aspetto esteriore della pagina, come è il colore dello sfondo o l'allineamento del testo, esiste uno specifico linguaggio chiamato CSS. Il CSS, come il linguaggio HTML, viene interpretato dal browser. CSS significa Cascade Style Sheet (fogli di stile a cascata) e permette di controllare in modo organico, coerente, semplice ed economico l'aspetto delle pagine. Il linguaggio CSS non è l'unico modo di controllare l'aspetto estetico di una pagina ma chi non lo utilizza, fatica di più ed impiega più tempo. Il CSS, come il linguaggio HTML, ha subito una evoluzione ed è giunto oggi alla versione 3. Nei seguenti paragrafi si vedranno alcuni esempi per comprendere dove si può inserire il codice CSS. Solo successivamente si analizzerà la sintassi del linguaggio e le sue caratteristiche. Attributo style (Inline style) Ci sono alcuni attributi standard che possono essere utilizzati su più tag. Uno di questi è l'attributo title, che può essere usato sia su <img> che su <a>. Ad esempio: <img src="foto.jpg" alt="la mia foto" title="la mia foto" /> <a href="file.mp3" title="scarica il file mp3">clicca</a> L'attributo title="..." non va confuso con il tag <title>, che invece si trova racchiuso entro <head>. Un altro attributo standard è style="..." Questo attributo consente di definire delle regole di stile, ad esempio: <h1 style="color:blue; text-align:center">capitolo 1</h1> <p style="color:green">primo paragrafo.</p> Tra virgolette e separate da punto e virgola, ci sono le regole di stile per h1 e p. Quando le regole di stile sono messe all'interno di un tag sono dette anche "inline styles". Ogni regola è composta da due elementi (proprietà e valore) separati dal simbolo "due punti", inoltre, come detto, la regola termina con un punto e virgola. proprietà:valore; Ad esempio questa regola imposta il colore di un testo in blu: color:blue; Inline style: questo modo di inserire le regole è scomodo perché: si deve ripetere la stessa regola su tutti i paragrafi si deve ripetere la regola su tutte le pagine di un sito web.
4 Elemento <style> (Internal style sheet) Oltre all'attributo style="..." esiste anche il tag <style> che si usa dentro <head> e che va usato come nel seguente esempio: <head> <style type="text/css" > h1 {color:blue; text-align:center; p {color:green; </style> </head> Si ricorda che tutto ciò che si trova dentro gli elementi <head> di solito non viene visualizzato dal browser. Come si può notare, ogni regola è espressa nella seguente forma: selettore { proprietà:valore;... In questo caso le regole sono dette anche "Internal style sheet". Internal style sheet: questo modo di inserire le regole è un po' più comodo perché: non si deve ripetere la stessa regola su tutti i paragrafi. però è ancora necessario ripetere la regola su tutte le pagine di un sito web. Elemento <link> (External style sheet) All'interno del tag <head> è possibile inserire collegamenti ad altri documenti esterni, come file.css (fogli di stile) usando il tag <link>. pagina.html foglio.css Tutto quello specificato dentro <head>, compreso il tag <link>, non viene visualizzato dentro la pagina web. Nel prossimo esempio è possibile leggere il codice html necessario a collegare pagina.html con foglio.css <head> <meta http-equiv="content-type" content="text/html" /> <link rel="stylesheet" type="text/css" href="./foglio.css" /> </head> attributo rel: specifica la relazione tra la pagina web e il documento esterno attributo type: specifica il tipo di contenuto (MIME type) del documento esterno attributo href: specifica il percorso del documento esterno In questo caso le regole vengono chiamate anche "External style sheet". A causa del fatto che si hanno due file di testo, bisogna preoccuparsi della codifica di entrambi i file. Per specificare la codifica del foglio.css si deve "UTF-8"; External style sheet: questo modo di inserire le regole è molto più comodo perché: non si deve ripetere la stessa regola su tutti i paragrafi. non si deve ripetere la stessa regola su tutte le pagine di un sito web.
5 Conclusione Riassumendo ci sono tre modi di controllare lo stile di un elemento (tag) HTML: inline internal external Questi modi possono essere usati anche tutti e tre contemporaneamente, ma in generale valgono i seguenti principi: il primo si usa per controllare lo stile di un solo elemento nella pagina il secondo si usa per controllare lo stile di più elementi simili nella stessa pagina il terzo si usa per controllare lo stile di più elementi in diverse pagine Nei prossimi esempi si utilizzeranno esclusivamente fogli di stili esterni Specificare un colore Si è visto un esempio in cui si modifica il colore del testo, con la seguente regola p { color:green; Un altro qualsiasi colore può essere ottenuto sommando tre componenti di colore: rosso, verde e blu (red, green, blue) L'intensità di ogni colore si esprime con un numero in base dieci (da 0 a 255) oppure in base sedici (da 00 a ff) p { color:rgb(10,119,255); body { color:#0a77ff;
6 Proprietà dello sfondo La seguente regola consente di impostare nell'elemento <body>, un'immagine di sfondo (albero.jpg) allineata in alto a destra, sopra uno sfondo celeste (#ccccff): body { background:#ccccff url('albero.jpg') no-repeat right top; In alternativa possono essere utilizzate le seguenti singole proprietà: body { background-color: #ccccff; background-image: url('albero.jpg'); background-repeat: no-repeat; background-position: right top; Propietà background-attachment background-color background-image Valori permessi scroll fixed VALORE COLORE transparent url(valore URL) none background-position background-repeat left top left center left bottom right top right center right bottom repeat repeat-x repeat-y no-repeat center top center center center bottom x% y% VALOREX VALOREY
7 Proprietà del testo Il seguente gruppo di regole consente di impostare nell'elemento <p>, un testo di colore blu (#0000ff), allineato a destra e sottolineato p { color: #0000ff; text-align: right; text-decoration: underline; Propietà Valori permessi color VALORE COLORE letter-spacing normal VALORE IN PIXEL text-align text-decoration left right none underline center justify overline line-through blink text-indent VALORE IN PIXEL VALORE IN % text-shadow VALORE COLORE VALORE IN PIXEL text-transform vertical-align white-space none capitalize baseline sub super top text-top normal pre uppercase lowercase middle bottom text-bottom VALORE IN PIXEL VALORE IN % nowrap Per esercizio provare a colorare di rosso un testo racchiuso in un paragrafo e poi ad allinearlo a destra? È possibile allineare alcune parole del paragrafo a destra e altre parole a sinistra? Perché?... Per le stesse ragioni, l'allineamento non funziona nemmeno per il testo racchiuso in un ancora <a>. Escludendo l'allineamento, perché si può allineare solo una riga o un paragrafo, le altre decorazioni si possono applicare anche a singole parole, ma per farlo è necessario usare <span> (che si vedrà più avanti). L'allineamento è una proprietà molto utilizzata, ma funziona solo per testi (e nelle immagini) quando sono racchiusi nei paragrafi (o nei titoli). Per allineare al centro una tabella o un box si devono usare altre proprietà, come margin (che si vedranno più avanti). Provare se l'allineamento funziona anche sulle immagini quando sono in <p>.
8 Anche il carattere (o font) utilizzato è una proprietà CSS, ma può accadere che il browser non supporti il font richiesto nella regola o che tale font non sia installato nel sistema di un utente che visualizza la pagina. È necessario quindi specificare dei font generici come "Serif", "Sans-Serif" o "Monospace". Nella seguente tabella sono messi a confronto quattro font: DejaVu Sans DejaVu Serif FreeSans FreeSerif Nel seguente esempio, la regola richiede il font "freesans" o, in alternativa a questo, il font "Arial" o, in alternativa ai primi, un qualsiasi font della generica famiglia "sans-serif" p { font-family: freesans Arial sans-serif; Quando il programmatore deve scegliere il font da utilizzare nella pagina web, deve tenere conto sia della disponibilità e del supporto del font da parte di chi visualizzerà la pagine, sia della licenza d'uso con sui può essere utilizzato il font. La licenza d'uso del font viene fornita da chi ha creato il font, come la licenza di un'immagine viene fornita da chi ha creato l'immagine. La seguente regola modifica lo stile del font (utilizzando il corsivo) e il peso del font (utilizzando il grassetto). p { font-family: freemono "Courier New" monospace; font-style: italic; font-weight: bold; Proprietà font-family font-size font-style font-weight Valori permessi family-name generic-family xx-small x-small small medium large x-large normal italic normal bold bolder lighter xx-large smaller larger VALORE IN PIXEL VALORE IN % oblique
9 Le dimensioni dei font La leggibilità del testo su un monitor è una cosa importante per una pagina web ben riuscita. Tuttavia, specificare le dimensioni del font non è facile perché, specificando questa dimensione in pixel si potrebbe ottenere un effetto visivo diverso a seconda della risoluzione del monitor di chi visualizza la pagina. Per questo motivo è consigliabile specificare la dimensione dei caratteri in percentuale invece che in pixel, in modo che sia proporzionale alla dimensione predefinita dal browser di ogni utente. Tuttavia le impostazioni di un utente potrebbero avere un font più grande rispetto a quello che possiamo immaginare e in tal caso il testo potrebbe finire in una posizione inaspettata, inusuale, poco gradevole o scomoda da leggere. I collegamenti e le pseudoclassi I collegamenti (o link) possono avere le stesse proprietà viste anche per il testo. I link hanno quattro tipi di selettori (che si chiamano anche pseudoclassi): a:link collegamento non visitato a:visited collegamento visitato a:hover collegamento sotto al puntatore del mouse a:active collegamento mentre viene premuto il tasto per selezionarlo in questo esempio i link vengono colorati di rosso e cambiano colore quando si avvicina il puntatore del mouse NOTA: è importante specificare le quattro pseudoclassi sempre nell'ordine indicato a:link { color: #ff0000; a:hover { background-color: #00ff00;
10 Box Model Ogni elemento HTML può essere considerato come un contenitore a cui si possono assegnare caratteristiche diverse (come il bordo, il colore o la posizione). margin border padding testo testo. Proprietà margin auto Valori permessi VALORE IN PIXEL VALORE IN % border-style border-color border-width padding none hidden dotted dashed solid VALORE COLORE transparent thin medium VALORE IN PIXEL VALORE IN % double groove ridge inset outset thick VALORE IN PIXEL Ognuna delle precedenti proprietà (margin, border e padding) può specificare un solo valore per tutti i 4 lati del box, oppure 4 valori diversi per i 4 lati, nel seguente ordine: superiore, destro, basso e sinistro.
11 Nel seguente esempio viene creato un contenitore che ha un bordo più grande sul lato superiore. p { border-style:solid; border-color: black; border-width: ; Nel seguente esempio viene creato un contenitore con un margine di 3 pixel, un bordo rosso di 3 pixel e uno sfondo rosa. p { margin: 5px; border-style: solid; border-color: red; border-width: 3px; background-color: pink; Ogni box ha di solito una dimensione che si adatta al suo contenuto. Esistono comunque delle regole che, oltre al margine e al bordo, possono specificare anche delle dimensioni maggiori (o minori) di quelle che avrebbe avuto automaticamente ng testo height width Proprietà width / height VALORE IN PIXEL VALORE IN % Valori permessi auto
12 Esercizio di riepilogo Provare a racchiudere una singola parola in un paragrafo, considerando il paragrafo come se fosse un box (con il bordo e/o con lo sfondo di un altro colore). Provare ad allineare il testo a detra. Nella successiva immagine si è posto il box al centro mantenendo il testo allineato a destra. M L M Per porre un box al centro della pagina non si agisce sull'allineamento del testo che esso contiene (infatti la parola deve rimanere a destra). Si capisce che si tratta di due diverse proprietà: una per allineare il testo contenuto in un paragrafo (text-align) un'altra per allineare il box del paragrafo (o di un altro elemento HTML). In realtà, in CSS, non esiste nessuna proprietà per centrare il box, ma si può agire solo sul valore dei margini del box (M) e sulla sua larghezza (L). La somma di questi valori valori dovrà restituire la larghezza totale della pagina, secondo la formula: M + L + M = 100%. Nel codice che segue viene posto M = 33% p { background-color:yellow; text-align:right; margin:0% 33% 0% 33%; Il precedente esempio era semplificato dal fatto che il box da centrare era quasi vuoto, e quindi il box ha adattato automaticamente la propria larghezza (L) al valore lasciato libero dai margini, ottenendo L = = 34%. Quando il box al centro ha una propria larghezza (L), non si può fissare M=33%, ma bisogna calcolare il valore di M, a partire da L (la larghezza del box). La formula matematica è M = (L - 100)/2, in modo che la somma di M+M+L sia sempre 100%.
13 Esercizio Provare a fare una tabella di 4 colonne e 3 righe, riempirla con dei dati a piacere, come l'orario dell'autobus, e provare a centrarla nella pagina...
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
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
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
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
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
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. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }
1 2 Foglio di stile Cascading Style Sheets CSS Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Regola: selezionatore
Valori e unità di misura (1)
Valori e unità di misura (1) I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio:
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
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
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
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
CASCADING STYLE SHEETS. Prof. Rocco Ciurleo - ITIS "M. M. Milano" Polistena
CASCADING STYLE SHEETS I fogli di stile o CSS (acronimo di Cascading Style Sheets) sono uno strumento di formattazione delle pagine web che consente di personalizzare l'aspetto della pagina senza agire
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 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
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
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
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. 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
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,
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
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
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
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
Copyright (c) 2008, 2009, 2012 Fabio Proietti
Copyright (c) 2008, 2009, 2012 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version
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
Indice delle proprietà. Valori speciali. Compatibilità
CSS: sintassi, e valori 29 Valore: 'fontstyle'? 'fontsize' [ /'lineheight' ]? Valore: Valori speciali Nei valori, caratteri come, e / devono essere riportati letteralmente.
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
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
Fogli di stile: introduzione. Fabio Fioravanti
Fogli di stile: introduzione Fabio Fioravanti Introduzione dei fogli di stile 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1) Dal 1996 al 2000: scarso supporto da parte dei
Copyright (c) 2008, 2009, 2010 Fabio Proietti
Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version
Applicazioni web. Sommario DHTML - CSS CSS. Elementi di raggruppamento Markup semantico. Sintassi Proprietà. Applicazioni web.
Applicazioni web Parte 2 DHTML - CSS Sommario DHTML Elementi di raggruppamento Markup semantico CSS Sintassi Proprietà 1 DHTML Dynamic HTML Dynamic Html non è uno standard definito dal World Wide Web Consortium
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 / 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
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:
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
Corso di Web Programming
Corso di Web Programming 5. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica
Introduzione ai CSS. CSS esterni e interni. Proprietà di base. selettore { proprietà: valore } selettore { proprietà1: valore1; proprietà2: valore2 }
Introduzione ai CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei
CSS: Colori, testo, caratteri, liste e link
CSS:, testo, caratteri, liste e link Università di Pisa pievatolo@dsp.unipi.it 13 aprile 2014 Sommario 1 2 Famiglia Dimensioni Corsivo e maiuscoletto Peso: quanto dev essere grasso il grassetto? 3 4 5
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
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
Basi di Dati. Programmazione e gestione di sistemi telematici
Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini Introduzione CSS Cascading Style Sheets
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 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
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
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 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
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;
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
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/
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
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
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;
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
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
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
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
Copyright (c) 2008, 2009, 2010 Fabio Proietti
Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version
INTRODUZIONE 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,
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti
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
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
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)
Dare 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
CSS esterni e interni
Introduziione aii CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei
Corso 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
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
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
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
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
HTML. Hyper Text Markup Language
HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento
BASI 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
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
CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
CSS / TIPOGRAFIA WEB. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / TIPOGRAFIA WEB LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 GESTIRE I CARATTERI CON I CSS I CSS hanno dato un notevole impulso alla tipografia web visto che permettono di
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
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
<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
Web Design & Technologies
1 Comunicazione, Innovazione, Multimedialità Web Design & Technologies Cascading Style Sheets Level 2 2 Cosa sono i Cascading Style Sheet? Gli style sheet rappresentano un metodo semplice (ma potente)
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
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 - Elementi di base
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.02. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola I cascading style sheet I CSS permettono
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
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
Applicazioni Web 2013/14
Applicazioni Web 2013/14 Lezione 5: Cascading Style Sheets Matteo Vaccari http://matteo.vaccari.name/ matteo.vaccari@uninsubria.it (cc) Matteo Vaccari. Published in Italy. Attribution Non commercial Share
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
Progettazione di siti web a.a. 2015/16
CSS per la tipografia web Progettazione di siti web a.a. 2015/16 Fogli di stile: tipografia web Maria Simi Marzo, 2016 [Manuale di riferimento del W3C] Gli stili per i caratteri Gli stili per il testo
APPUNTI DI HTML (QUINTA LEZIONE)
APPUNTI DI HTML (QUINTA LEZIONE) Cascade style sheets II Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente dei contenuti che diffondeva, piuttosto che allo stile con il quale esso venivano
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
Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini
STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)
Approfondimento: CSS - Gestione del Testo I (1/16)
Approfondimento: CSS - Gestione del Testo I (1/16) Vediamo prima le proprietà di base che sono anche le più comunemente utilizzate nella manipolazione di testi: font-family* Font da usare font-size La
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
(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
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