Laboratorio di reti I: Cascading Style Sheets
|
|
|
- Viola Riccardi
- 7 anni fa
- Visualizzazioni
Transcript
1 Laboratorio di reti I: Cascading Style Sheets Stefano Brocchi 10 novembre, 2009 Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
2 Cascading Style Sheets Un Cascading Style Sheets (CSS) è un documento che specifica le impostazioni grafiche di una pagina HTML Nel creare pagine HTML è importante conoscere i CSS in quanto ci permettono di separare la vista grafica (definita nel CSS) dal contenuto (nel codice HTML) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
3 Uso dei CSS I CSS sono attualmente considerati una necessità per la grafica, tanto che tutti i tag fisici che realizzano la grafica direttamente in HTML (come <B>, <I> o <FONT>) sono deprecati Per validare documenti con CSS senza deprecazioni possiamo quindi usare le specifiche HTML più rigide, specificando all inizio della pagina l intestazione <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
4 Vantaggio dei CSS Potendo essere risorse esterne rispetto ad un file HTML, i CSS offrono molte possibilità: Cambiare la grafica senza toccare il codice che descrive il contenuto, e viceversa Modificare la grafica di molte pagine web modificando un unico documento Visualizzare più pagine web scaricando un unico foglio di stile, risparmiando così sull occupazione di banda Cambiare agevolmente la grafica di una pagina, a seconda per esempio di una scelta dell utente o del dispositivo a cui questa è destinata Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
5 Vantaggio dei CSS Usando i CSS quello che dovremo indicare nel codice HTML non è tanto come una determinata zona debba essere graficamente rappresentata, ma cosa rappresenti. Nel CSS verrà specificato come debbano apparire i vari oggetti Grazie ai CSS è possibile impostare non solo gli aspetti grafici più semplici come colori e font, ma modificare caratteristiche più complesse come il posizionamento delle varie parti della pagina Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
6 Importazione di CSS Ci sono due modi per collegare un CSS ad una pagina web Uno è tramite il tag <style>, da inserire all interno del tag <head> del documento, dentro il quale va inserita la specificante l url del CSS, come nell esempio: url(style.css); </style> Al posto della clausola import è possibile specificare il corpo del CSS stesso, imponendo nel tag style il valore dell attributo type uguale a text/css: <style type="text/css">... </style> Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
7 Importazione di CSS L altro modo per collegare ad una pagina un CSS è quello tramite il tag <link>, sempre da specificare nel tag <head>, con del codice come il seguente: <link rel="stylesheet" type="text/css" href="stile.css"> L attributo type è obbligatorio e per i CSS deve contenere il valore text/css L attributo href indica l url del foglio di stile L attributo rel può avere valore stylesheet o alternative stylesheet se si vuole specificare un foglio di stile alternativo, che potrà essere scambiato con quello principale tramite vari mezzi (es. JavaScript) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
8 Importazione di CSS Cascading Style Sheets Nel tag <link> è possibile specificare inoltre l attributo media per specificare che un determinato CSS va utilizzato solo in caso che il dispositivo che legge la pagina sia di un certo tipo. Alcuni possibili valori sono: all Il CSS viene sempre applicato (valore di default) screen Rappresentazione su schermo: valore standard per i browser print Il CSS viene applicato quando viene richiesta la stampa della pagina handheld Per dispositivi portatili come palmari braille Il CSS viene usato per supporti basati sull uso del braille Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
9 Selettori CSS Contenuto di un CSS Un foglio di stile è formato da una serie di dichiarazioni nel seguente formato: selettore { } proprietà: valore; proprietà: valore;... Selettore è una stringa che indica a quali elementi verrà applicata la regola Le coppie proprietà, valore indicano una serie di proprietà grafiche da attribuire agli elementi specificati E possibile inoltre inserire commenti in un foglio di stile con la sintassi /* commento */ Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
10 Selettori CSS Selettori di base Il più semplice selettore da specificare è un tag HTML In questo caso tutto il contenuto di quel determinato tag avrà le proprietà specificate Ad esempio: h3 { color:red; } Imposta che tutto il testo dentro tag h3 sarà in rosso Si possono definire proprietà per più tag elencandoli nel selettore separati da una virgola h2, h3 { color:red; } E possibile specificare, anche nei selettori descritti in seguito, il carattere di wildcard * Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
11 Selettori CSS Selettori del figlio E possibile specificare che ad un tag va applicata la regola solo se questo è contenuto in un altro tag In questo caso usare la sintassi tag-padre tag-figlio {...} Es. li strong { background:yellow; } specifica che tutto il testo in un tag <strong> che sia anche dentro una lista (tag <li>) avrà sfondo giallo Esiste una modalità per specificare che un tag viene considerato se è figlio diretto di un altro: tag-padre > tag-figlio {...} Quest ultima modalità sembra non essere attualmente supportata da explorer Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
12 Selettori CSS Selettori di attributi E possibile selezionare tag che hanno definito uno specifico attributo, o tag per cui un particolare attributo assume un determinato valore. In questi caso la sintassi da usare è la seguente: tag-padre [attributo] {...} tag-padre [attributo = valore] {...} Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
13 Selettori CSS Uso di attributi class ed id Per poter definire liberamente caratteristiche di un determinato tag, esistono due attributi che è possibile specificare per ogni tag HTML: class e id Tramite l attributo class si specifica che l attributo appartiene ad una determinata classe di oggetti. Sarà possibile selezionare tutti gli attributi di questa classe con la sintassi.nomeclasse {... } Per esempio tramite la dichiarazione.in-evidenza { background:yellow; } si specifica che tutto lo sfondo del contenuto dei tag di classe in-evidenza sia giallo Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
14 Selettori CSS Selettori di classi E possibile specificare più classi per un singolo tag, separandole con uno spazio In questo caso il tag avrà le caratteristiche di entrambe le classi specificate Es. <p class="in-evidenza enfatizzato"> Vedremo in seguito come vengono risolti eventuali conflitti di attributi Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
15 Selettori CSS Selettori di id L attributo id permette funzionalità simili all attributo class. La differenza è che per ogni documento un solo tag deve contenere un determinato id Per selezionare un tag con un determinato identificativo usare la sintassi #nomeid {... } Es. (nell HTML) <p id="intestazione"> (nel CSS) #intestazione {color:red;} Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
16 Selettori CSS Combinare i selettori I vari selettori possono essere combinati fra loro per ottenere condizioni di selezione più complesse. Vediamo degli esempi: p.importante seleziona tutti i paragrafi di classe importante li.enfatizzato.importante seleziona tutti gli elementi di una lista (<li>) che appartengono sia alla classe enfatizzato che alla classe importante #intestazione strong seleziona tutti i tag strong all interno del tag con id intestazione div * seleziona tutti i tag all interno di tag <div> Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
17 Selettori CSS Pseudo classi Esiste una particolare sintassi per indicare la selezione di elementi con un determinato stato In questo caso si parla di pseudo-classi e la sintassi da utilizzare è la seguente: nometag:pseudo-classe {... } Alcune delle pseudo-classi più comuni sono quelle per distinguere i collegamenti visitati o no. Le quattro pseudo classi sono: A:link per i collegamenti non visitati A:visited per i collegamenti già visitati A:hover per i collegamenti sui quali è posizionato i mouse A:active per i collegamenti nel momento in cui vengono cliccati Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
18 Selettori CSS Ereditarietà nei CSS In un foglio di stile la maggior parte delle caratteristiche di un tag vengono ereditate da tutti i tag figli Per sapere con precisione quali vengano ereditate e quali no è necessario consultare la documentazione dei CSS. In linea di massima tuttavia le uniche caratteristiche non ereditarie sono quelle legate al contenitore che vedremo in seguito (es. dimensioni o caratteristiche del bordo) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
19 Selettori CSS Selezione di regole Nel definire un foglio di stile è possibile che alcune regole siano in conflitto tra loro Il visualizzatore selezionerà la regola che risulta essere la più specifica Per la selezione, vengono eseguiti i seguenti passi a cascata (da qui il Cascading di Cascading Style Sheets): La regola a prevalere è quella che contiene il maggior numero di identificativi (#nometag) In caso di parità di identificativi, viene selezionata la regola con il maggior numero di classi e pseudo-classi In caso di ugual numero di identificativi e classi viene applicata la regola con maggior numero di tag Se nessuna delle precedenti è applicabile, prevale semplicemente l ultima regola dichiarata Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
20 Selettori CSS Selezione di regole Nel caso siano definiti più fogli di stile, sono definite delle regole di precedenza anche tra i vari CSS Ad esempio, il foglio di stile definito dall autore avrà chiaramente la precedenza su quello di default presente nel browser. Per le caratteristiche non definite dal programmatore, si farà comunque riferimento a quest ultimo documento Per specificare che una regola deve essere selezionata prima delle altre si può specificare la clausola!important Es. h1 {color: red!important;} Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
21 Attributi CSS Impostazione del colore di primo piano Vediamo ora alcuni degli attributi impostabili con le regole CSS ed i possibili valori che questi possono assumere Per modificare il colore di primo piano (cioè quello del testo) usare l attributo color I colori da assegnare all attributo si possono specificare o come stringhe, per 16 colori predefiniti, o come coppie di valori esadecimali Es. color: silver; color: #AAAA00; Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
22 Attributi CSS Impostazione dello sfondo Similarmente si può impostare il colore di sfondo tramite l attributo background-color E possibile impostare un immagine di sfondo utilizzando la sintassi background-image: url(urlimmagine); Altri attributi per la gestione dello sfondo sono background-attachment e background-repeat Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
23 Attributi CSS Impostazione di caratteristiche del testo Vediamo vari attributi per la gestione del testo ed i valori che questi possono assumere: font-family per definire il tipo di font da usare. Alcuni suoi valori possono essere Times new roman, Arial o Courier font-weight per il peso del testo (più o meno in grassetto). Specificare un valore numerico da 100 a 900 o una keyword fra lighter, normal, bold o bolder font-size per la dimensione del testo. Indicare un numero di pixel seguito da px (es. font-size: 20px;), una dimensione in un altra unità di misura (es. 2cm, vedere documentazione CSS) o una keyword predefinita (es. x-small, large) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
24 Attributi CSS Impostazione di caratteristiche del testo Altri attributi per lo stile del testo: text-decoration per varie decorazioni del testo: sottolineato (underline), barrato (line-throught), con una riga sopra (overline), lampeggiante (blink) o senza decorazioni (none) text-align per specificare l allineamento del testo nel suo contenitore. Valori possibili: right, left, center e justify Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
25 Box model di HTML e posizionamento HTML box model Il linguaggio HTML esegue il posizionamento dei vari oggetti tramite un modello detto box model In una pagina ogni tag che rappresenta un contenitore (img, p, table) viene associato ad un box che definisce come verrà posizionato il contenuto nella pagina Il primo contenitore considerato è la zona dove viene rappresentata pagina stessa, e tutti gli altri box definiti nel codice HTML vi saranno contenuti Per definire un contenitore generico in HTML, usare il tag <div> Similarmente, si può usare il tag <span> per definire contenitori all interno di zone di testo detti inline Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
26 Struttura di un box Cascading Style Sheets Box model di HTML e posizionamento La struttura di un box HTML è mostrata nella figura di seguito: Margin Border Area di padding Contenuto del box Contenuto del box Contenuto del box C ontenuto del box Contenuto del box Contenuto del box Co ntenuto del box Contenuto del box Contenuto del box Con tenuto del box Contenuto del box Contenuto del box Cont enuto del box Contenuto del box Contenuto del box Conte nuto del box Contenuto del box Contenuto del box Conten uto del box Contenuto del box Contenuto del box Contenu height width Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
27 Box model di HTML e posizionamento Struttura di un box I due valori width e height rappresentano la larghezza e l altezza della zona con il contenuto del box La zona di padding è quella che distanzia il contenuto dai bordi del box Il bordo del box è rappresentato da un oggetto detto border I margini del contenitore definiscono la distanza minima che deve intercorrere tra il box e quelli adiacenti. Possono essere utilizzati per definire il posizionamento di un oggetto all interno del suo contenitore Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
28 Box model di HTML e posizionamento Struttura di un box: area contenuto L altezza e la larghezza della zona con il contenuto possono essere definiti tramite gli attributi height e width Come per gli altri parametri che richiedono una misura, specificare una dimensione in punti o una percentuale che sarà relativa al box padre che contiene questo box Es. width: 50%; height: 400px; Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
29 Struttura di un box: padding Box model di HTML e posizionamento La dimensione dell area di padding può essere specificata, per quanto riguarda i quattro lati del box, con gli attributi padding-top, padding-right, padding-bottom e padding-left Esiste l attributo di comodo padding che permette di specificare con una sola dichiarazione tutti e quattro i valori separati da uno spazio, partendo da quello in alto e procedendo in senso orario Per esempio padding: 10px 20px 30px 40px; è equivalente a padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; Se per padding viene specificato un unico valore, tutti e quattro i lati vengono impostati a quel valore. Definiti comportamenti di default per due o tre valori specificati Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
30 Box model di HTML e posizionamento Struttura di un box: bordi Per quanto riguarda i bordi è possibile specificare tre proprietà riguardanti lo stile del bordo, il suo spessore ed il suo colore Gli attributi da utilizzare sono border-lato -color, border-lato -style e border-lato -width dove lato indica a quale dei bordi ci si sta riferendo (left, right, bottom o top) Del tutto analogamente alla proprietà di comodo padding, si possono utilizzare le proprietà border-style, border-width e border-color per impostare contemporaneamente più bordi Il valore di border-width deve essere una misura. Alcuni stili utilizzabili per border-style sono none, dotted, dashed, solid, double, inset e outset Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
31 Box model di HTML e posizionamento Struttura di un box: margini Le dimensioni dei margin sono impostabili tramite le proprietà margin-left, margin-right, margin-top, margin-bottom o tramite l attributo di comodo margin E possibile specificare per i margini il valore auto. Questo imposterà un valore di default se riferito al margine in cima o in fondo al box, mentre centrerà il contenitore rispetto al contenitore padre se riferito ai due margini laterali Essendo il margine definito come la distanza minima tra due elementi, l effettiva distanza nella visualizzazione tra due box adiacenti sarà data dal maggiore dei due margini e non dalla loro somma Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
32 Box model di HTML e posizionamento Attributo float Vedremo ora una serie di attributi utilizzabili per definire il posizionamento dei vari box Normalmente, i box vengono posizionati nella pagina dal browser nello stesso ordine in cui vengono incontrati nel codice Tramite l attributo float è possibile scorrere un elemento alla lato sinistro o destro del contenitore padre. I tre possibili valori per l attributo float sono left, right e none Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
33 Box model di HTML e posizionamento Attributo clear Si può specificare che determinati box definiti con float siano posizionati nel lato indicato solo se non ci sono altri elementi già accostati a quel lato alla stessa altezza In questo caso, il browser scorrerà il box verso il basso fino a trovare una posizione dove il lato sia libero Per questo scopo utilizzare l attributo clear con valore none, (valore di default) left, right o both (per attendere che siano liberi entrambi i lati) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
34 Float e clear: esempio Cascading Style Sheets Box model di HTML e posizionamento Vediamo un esempio con due box con attributo float: left;. A destra, vediamo il diverso posizionamento se definiamo l attributo clear: left; nel box 2. Box 2 Box 1 Box 1 Box 2 clear: left; Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
35 Box model di HTML e posizionamento Attributo position Per definire il posizionamento di un determinato box, si può usare l attributo position Il valore di default per position è static, che significa che l elemento andrà piazzato normalmente nella pagina a seconda della sua posizione nel codice Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
36 Box model di HTML e posizionamento Attributo position: absolute Se l attributo position viene invece impostato a absolute, l elemento viene rimosso dal normale flusso e riposizionato La posizione di destinazione si specifica tramite gli attributi top, bottom, left e right Tramite questi si indica la distanza dai margini rispetto al primo contenitore parente non statico che lo contiene Se il box non è contenuto in alcun altro box statico, le coordinate si riferiscono ai margini della pagina stessa Tramite questo riposizionamento il browser non tiene conto di eventuali sovrapposizioni; fare attenzione quindi a non coprire il contenuto di un altro box Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
37 Box model di HTML e posizionamento Attributo position: absolute Vediamo un esempio di posizionamento assoluto. Consideriamo il box detto Box 4 contenuto in un box detto Box 3 a sua volta contenuto nel Box 1 Specifichiamo il seguente codice per il box considerato: #box4 { position: absolute; width: 80px; height: 20px; top: 10px; left: 20px; background-color: silver; } Vediamo dove il box viene posizionato a seconda delle caratteristiche dei suoi box contenitori Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
38 Attributo position: absolute Box model di HTML e posizionamento Se il box 3 (il parente più vicino) non ha posizionamento statico, il box 4 è posizionato in funzione di quest ultimo Pagina web Contenuto box 2 Contenu to box 2 Contenuto box 2 Box 1 Box 2 20px 10px Box 4 Box 3 (non static) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
39 Box model di HTML e posizionamento Attributo position: absolute Se il box 3 è dichiarato static, ma il box 1 non lo è, il box 4 verrà posizionato rispetto al box 1 Pagina web Box 4 10px 20px Contenuto box 2 Contenu to box 2 Contenuto box 2 Box 1 (non static) Box 2 Box 3 (static) Notare che se lo spazio indicato non è libero, il box viene sovrapposto ad altri contenuti Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
40 Attributo position: absolute Box model di HTML e posizionamento Infine se nessun box parente di box 4 ha l attributo position diverso da static, il posizionamento avverrà rispetto alla finestra contenente la pagina web 20px 10px Pagina web Box 4 Contenuto box 2 Contenu to box 2 Contenuto box 2 Box 1 (static) Box 2 Box 3 (static) Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
41 Box model di HTML e posizionamento Attributo position: relative Un altro valore per l attributo position è relative Si indica così di posizionare il box in un determinata posizione relativa a dove il box sarebbe se fosse dichiarato statico La quantità e la direzione dello spostamento saranno specificati con i soliti attributi top, bottom, left e right Questo spostamento non ha effetto sul posizionamento degli altri box. I margini dei box circostanti, per esempio, faranno riferimento alla posizione originaria del box Può essere utile definire box con posizionamento relativo ma con uno spostamento di zero punti in tutte le direzioni per indicare che il box deve essere posizionato come se fosse dichiarato static, ma i box absolute in esso contenuti devono far riferimento alle sue coordinate Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
42 Box model di HTML e posizionamento Attributo position: fixed L ultimo valore possibile per position è fixed Questo valore indica che il box deve essere posizionato ad una determinata distanza dai margini della pagina stessa (specificare dove sempre tramite top, bottom, left e right) Questo attributo specifica inoltre che il contenuto del box non scorrerà con il resto della pagina ma resterà fisso nei confronti della finestra Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
43 Box model di HTML e posizionamento Nascondere box Impostando l attributo CSS display a none, è possibile specificare che un blocco non deve essere visualizzato Questo si rivela utile nella manipolazione dinamica degli attributi CSS per far apparire o scomparire box a seconda di vari eventi Impostando invece display a block, si impone che l elemento venga visualizzato normalmente Esiste analogamente il possibile valore inline che specifica che un elemento debba venir visualizzato come parte del testo e non come blocco La visibilità può essere manipolata anche tramite l attributo visibility che può assumere valori visible o hidden. In questo caso però il layout della pagina si comporterà come se il box ci fosse anche nei casi in cui questo non è visibile Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
44 Esercizio Esercizio Creare tramite l uso di CSS un sito che realizza un forum Per ora, creare delle pagine statiche che facciano da modello per le pagine dinamiche che saranno implementate in seguito Progettare in anticipo l aspetto del sito, ed assicurarsi alla fine che questo abbia l aspetto desiderato Alcune pagine del sito potrebbero essere le seguenti: Una pagina di login Una pagina di navigazione dei vari thread Una pagina di navigazione dei vari post di un thread Pagine per la creazione di un nuovo post o di un nuovo thread Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
45 Esercizio Esercizio Nelle varie pagine, inserire vari box annidati a piacere contenenti: Un menu di navigazione del forum (contenente per es. lista thread, lista post di questo thread, logout ) Una serie di link esterni (per es. banner pubblicitari) Un box personalizzabile da utente, contenente per esempio link o immagini relative a dei siti da lui indicati Un box dovrà contenere il contenuto vero e proprio della pagina A seconda del tipo di pagina, altri box per raggruppare i vari contenuti (es. i vari thread o post) La struttura dei vari box dovrà essere uguale nelle varie pagine ad eccezione di quella di login Inserire inoltre nei CSS alcune specifiche per l aspetto del testo Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, / 45
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
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
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
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
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
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
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: 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
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
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;
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
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
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: 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
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
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
Principali tipi di layout. Approfondimento sul box model
Principali tipi di layout. Approfondimento sul box model 1 Il layout stabilisce il modo in cui le varie parti (immagini, paragrafi, elenchi, intestazioni ) che compongono un documento ipertestuale devono
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
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
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 / 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
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
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
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
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
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
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
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,
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
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
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
DREAMWEAVER CS6: STILI CSS
DREAMWEAVER CS6: STILI CSS Durante la progettazione di siti, una parte cruciale del progetto è il layout. CSS (Cascading Style Sheets) è la principale tecnologia che permetterà di posizionare e disporre
Lezione del corso CSS - Web Design ed Accessibilità secondo il W3C con CSS ed XHTML
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.03. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
CSS. 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
Principali proprietà dei CSS Margini, bordi e posizionamento degli elementi
Principali proprietà dei CSS Margini, bordi e posizionamento degli elementi UD11 Fablab Design Margini e bordi Proprietà singole per i margini Le proprietà margin-bottom, margin-left, margin-top, margin-right
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
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
CSS: CASCADING STYLE SHEETS 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
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
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
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:
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
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
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)
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
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
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
Fogli di stile 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
CSS / FLOATING e POSITIONING. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / FLOATING e POSITIONING LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 CSS / TAG E CSS Ricalcare la griglia d impaginazione grazie ai tag DIV e al CSS LABORATORIO DI COMUNICAZIONE
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
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
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
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
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
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 / 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.
Elementi blocco e Elementi in linea
Elementi blocco e Elementi in linea Sostanzialmente il box model di una pagina Internet basata su markup (x)html è composto da due tipologie di elementi: gli inline elements e i block-level elements. Rientrano
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
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
Web design/1. prof. Marco Pagano
Web design/1 prof. Marco Pagano m@accademiabellearti.fr.it Questo documento è pensato come supporto alle lezioni frontali e non è quindi da considerarsi come «testo d esame» o sostitutivo della frequenza
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
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
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in Turismo e ICT
CSS 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 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
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
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
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
Struttura Layout Monolitico Fisso con Menu Orizzontale
Struttura Layout Monolitico Fisso con Menu Orizzontale BODY Body { margin: 0px; padding:0; font-family: arial,sans-serif; font-size: 76%; text-align: center; background-color: #FC3; background-image: url();
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
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
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
CSS = 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
CSS / 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
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: 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
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
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
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
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
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:
Sommario. Introduzione 1. 1 Scrivere in HTML con efficacia 7. 2 Formattazione standard del testo Aggiungere i colori 43. iii
Sommario Ringraziamenti Informazioni sull autore Introduzione 1 Finalità del libro 1 Introduzione a HTML 4 1 Nuove funzionalità di HTML 4 2 Come utilizzare questo libro 2 Struttura del libro 3 1 Scrivere
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,
HTML Sesta lezione. 29 Marzo di Ivano Stranieri
HTML 4.01 Sesta lezione 29 Marzo 2004 di Ivano Stranieri 0 Lezione precedente Costruire una tabella Raggruppare righe (e colonne) Unire righe e colonne Attributi di e Come utilizzare
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
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
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
Realizzare un semplice layout a due colonne. Esempio base (fisso) Alternative posizionamento colonne Lavorare con le percentuali.
Realizzare un semplice layout a due colonne Esempio base (fisso) Alternative posizionamento colonne Lavorare con le percentuali. 1 Tutorial 2 Di cosa abbiamo bisogno? intestazione contenitore (non indispensabile)
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
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
Tutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 7 Utilizzo avanzato di Style Sheets 7.1 Applicare stili
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.
Come 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
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
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
Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06
Corso di HTML Modulo L2 B4 - Le tabelle 1 Prerequisiti Concetto di tabella Coordinate di cella in una tabella 2 1 Introduzione In questa Unità illustriamo il concetto e l uso delle tabelle in HTML. Le
Divisions 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,
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