CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }
|
|
|
- Aureliana Ricci
- 8 anni fa
- Visualizzazioni
Transcript
1 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 { proprietà : valore } Vedi 3 Anatomia delle Regole 4 Qualche esempio Proprietà Valore h1 { color : green; } H1 { color : green } ul { font-style : italic; } h2 { border-color : gray; } Selezionatore Dichiarazione ul { list-style-type: disc; } E il link tra il documento HTML e il foglio di stile E la parte della regola che definisce l effetto desiderato body {background: #AAAAAA; } 5 Struttura documento <html> <head> <title>home page</title> <style> </head> <body> </body> </html> 6 Riferimenti ai fogli di stile Riferimento Esterno <style> <link rel="stylesheet" type="text/css href="mystyle.css" /> Riferimento Interno <style type="text/css"> H1 { color : green }
2 7 Raggruppamenti: Multi-Selezionatore 8 Raggruppamenti: Multi-Dichiarazione h1 { font-weight: bold } h2 { font-weight: bold } h3 { font-weight: bold } h1 { color: green } h1 { font-style: italic } h1 { text-align: center } h1, h2, h3 { font-weight: bold } h1{color:green; font-style:italic; text-align:center; } 9 Ereditarietà 10 Ereditarietà cont. Gli elementi HTML ereditano dai loro antenati proprietà stilistiche title head HTML body h1 p ul HTML head body title h1 p ul li li li Per l ereditarietà si ha che h1, p, li { color : green } equivale a body { color : green } li li li Body è un selettore molto utile per impostare regole per l intero documento 11 Conflitto di regole 12 Proprietà che non si ereditano <style type= text/css > body { color : green } h1 {color : navy } <style type= text/css > h1 {color : navy } body { color : green } La regola più specifica prevale su quella più generale L ordine è irrilevante! body { background : url(texture.gif) white; color : black; } background non viene ereditato: l immagine copre tutta la pagina, mentre i singoli elementi hanno background trasparente (a meno di dichiarazione esplicita diversa)
3 13 Problema Supponiamo di dover scrivere un documento su come maneggiare il plutonio. Avremo bisogno di introdurre in vari punti degli avvertimenti (warning) su cose da fare o da non fare. Vogliamo che tali avvertimenti siano in grassetto per essere ben visibili. Tuttavia non sappiamo a quale porzione di testo (paragrafo, titolo, lista, ) l avvertimento si riferirà: non possiamo definire una semplice regola che faccia riferimento ad un unico elemento HTML. Abbiamo bisogno di applicare un particolare stile alle porzioni del documento etichettate in un certo modo, indipendentemente dagli elementi HTML coinvolti. 14 Selezionatori Class Definiscono stili indipendentemente da specifici elementi del documento. Permettono così di applicare quel particolare stile a qualunque elemento del documento se etichettato opportunamente 15 Selezionatori di tipo Class Nel foglio di stile inseriamo la regola:.warning {font-weight: bold;} il. dice al browser che si tratta di un selezionatore di tipo class Nel documento HTML si dovrà precisare l attributo warning dove necessario <p class= warning >While handling plutonium, care must be taken to avoid the foramtion of a critical mass</p> <p>during this step, <span class= warning > the possibility of implosion is very real, and must be avoided at all costs</span>. This can be accomplished by keeping the varous masses separate </p> 16 Selezionatori di tipo Class E possibile definire anche selezionatori riferiti ad un solo particolare elemento HTML: p.warning { font-style: italic; } Questo permette di applicare lo stile warning solo a paragrafi che specificano tale attributo Può essere specificato unitamente alla regola generale:.warning {font-weight: bold;} Questo permette di aggiungere una specifica allo stile generico warning: tutti i warning sono in grassetto e in più i paragrafi con attributo warning sono in italico. 17 Selezionatori Pseudo-Class Permettono di assegnare uno stile in funzione dello stato del documento. Nel foglio di stile avremo: a:link { color : silver;} a:visited{ text-decoration : none} a:active{ text-size : 2em } a:hover { background : cyan} Nota: i : individuano le pseudo-class Nota: nel documento HTML non dovremo precisare nessun attributo corrispondente: lo stile dipende dallo stato del documento e non da proprietà statiche date a priori 18 I colori Nomi: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow h1 {color : maroon } Percentuali: rgb(100%,0%,0%) /*rosso puro*/ rgb(0%,100%,0%) /*verde puro*/ rgb(0%,0%,100%) /*blu puro*/ rgb(20%,20%,20%) /*grigio scuro*/ rgb(80%,80%,80%) /*grigio chiaro*/ rgb(100%,40%,0%) /*arancione*/ rgb(100%,80%,0%) /*oro*/
4 19 Colori cont. 20 Unità di misura Numeri: rgb(255,0,0) /*rosso puro*/ rgb(0,255,0) /*verde puro*/ rgb(0,0,255) /*blu puro*/ rgb(255,102,0) /*arancione*/ Esadecimali: # /*nero*/ #FF0000 /*rosso*/ #00FF00 /*verde*/ #0000FF /*blu*/ Assolute: in inches cm centimetri mm millimetri pt punti (in un inch ci sono 72 punti) Relative: em 1 em corrisponde alla dimensione del font a cui si fa riferimento % fa riferimento alla dimensione di riferimento h1 { font-size : 24pt } h1, h2, p { margin-left : 1em} h1 { line-height : 150% } Text-indent <lunghezza> <percentuale>* Valore iniziale: 0 Si applica a: elementi di tipo block-level p {text-indent : 0.25in;} * la percentuale si riferisce alla larghezza dell elemento padre Text-align Valore iniziale: Ereditarietà: Si applica a: left center right justify UA specific sì elementi di tipo block-level h1.first {text-align : center;} p {text-align : justify;} Line-height <lunghezza> <percentuale>* <numero> normal Valore iniziale: normal p {line-height : 1.2em;} * la percentuale si riferisce alla dimensione del font dell elemento stesso. Word-spacing <lunghezza> normal Valore iniziale: normal p {word-spacing : 0.2em;}
5 25 26 Letter-spacing <lunghezza> normal Valore iniziale: normal p {letter-spacing : 0.2em;} Text-decoration none [ underline overline line-through blink ] Valore iniziale: none p.emph {text-decoration : underline;} p.old {text-decoration : line-through;} 27 Font Font-family [[<family-name> <generic-family>] n ] Family-name: times, garamond, verdana, arial, helvetica, Generic-family: serif-f., sans serif f., monospace f., cursive f., fantasy f. (f.=fonts) Valore iniziale: UA specific p {font-family : Verdana, Arial, sans-serif;} NB: indicando più font e la famiglia generica si garantisce che, se un browser non dovesse avere a disposizione il font scelto, cercherà di usare il secondo, o i successivi, e nel caso nessuno sia disponibile sceglierà quello che ha a disposizione appartenente alla famiglia indicata 28 Font-weight Font normal bold border lighter * Valore iniziale: normal p {font-weight : 100;} /*equivale a normal*/ p.emph {font-weight : border;} /*equivale a 700*/ * i nove livelli di peso sono progressivamente più pesanti 29 Font-size Font 30 Font-style Font xx-small x-small small medium large x-large xx-large smaller larger <lunghezza> <percent.>* Valore iniziale: medium Valore iniziale: Ereditarietà: Si applica a: italic oblique normal normal sì tutti gli elementi p {font-size : xx-small;} /*dimensione assoluta*/.ridotto {font-size : smaller;} /*dimensione relativa*/.aumentato { font-size : 130%,} /*dimensione relativa*/ * la percentuale si riferisce alla dimensione del font dell elemento padre p {font-style : normal;}.emph {font-style : italic;} * la percentuale si riferisce alla dimensione del font dell elemento padre
![old {text-decoration : line-through;} 27 Font Font-family [[<family-name> <generic-family>] n ] Family-name: times, garamond, verdana, arial, helvetica, Generic-family: serif-f., sans serif f.](/docs-images/52/15802792/images/page_5.jpg ", monospace f., cursive f., fantasy f. (f.")
6 31 Font tutto insieme 32 Colore Font Color <font-style> <font-weight> <font-size> <font-family> Valore iniziale: vedi le singole proprietà Valore iniziale: Ereditarietà: Si applica a: <colore> UA specific sì tutti gli elementi h1 { font : italic bold 36pt garamond;} body {color : black;} p {color : gray;}.warning {color : #FF0000;} /* equivale a red*/ Background-color Background-image Valore iniziale: Ereditarietà: Si applica a: <colore> transparent transparent no tutti gli elementi p {background-color : gray;} p {background-color:gray; padding:1em} /*Meglio*/ <url> none Valore iniziale: none } background-color : gray;} /*Meglio*/ p.stelle {background-image : url(stelle.gif);} 35 Background-repeat 36 Background-position repeat repeat-x repeat-y no-repeat Valore iniziale: repeat background-repeat : repeat;} h1 {background-image: url(greca.gif); background-repeat : repeat-y;} /*ripete verticalmente ma non orizzontalmente */ [top center bottom] [ left center right] Valore iniziale: top left Si applica a: elementi di tipo block-level background-repeat : no-repeat; background-position : top right;} background-repeat : no-repeat; background-position : center center;} /*per ottenere lo stesso effetto si può anche scrivere center una sola volta */
7 37 Background-attachment scroll fixed Valore iniziale: scroll background-repeat : no-repeat; background-position : top right; background-scroll : fixed;} /* muovendo la barra di scorrimento si muove il testo ma non l immagine che resta fissa */ 38, tutto insieme Background <background-color> <background-image> <background-repeat> <background-attachment> <background-position> Valore iniziale: vedi le singole proprietà body {background-color: white; background-image : url(texture.jpg); background-repeat : no-repeat; background-position : top right; background-scroll : fixed;} /*equivale a:*/ body { background : white url(texture.jpg) top right no-repeat fixed; } 39 Box 40 Box Tutti gli elementi html generano una scatola rettangolare intorno ad essi, detta element box. Tre proprietà permettono di modificare l aspetto delle element box : Width e Height: fanno riferimento rispettivamente alla larghezza e all altezza fisicamente occupata dall elemento in questione (quindi da testo, immagini, ) Padding: è un imbottitura che si aggiunge all interno dell element box Margin: è un imbottitura che si aggiunge all esterno dell element box Il testo sta nella parte definita da width e height L element box include anche il padding Il margin è esterno all element box Margin Padding Width, Height 41 Larghezza e altezza Width e Height <length> <percentage> auto Valore iniziale: auto Si applica a: elementi di tipo block-level 42 Margini Margin- top/right/bottom/left <length> <percentage>* auto Valore iniziale: 0 p { width : 10cm ; } ul{ width : 3in ; } h2 { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em;} * la percentuale si riferisce alla larghezza dell elemento padre
8 43 Margini tutto insieme Margin [ <length> <percentage>* auto] {1,4}** Valore iniziale: non definito 44 Padding Padding [ <length> <percentage>* auto] {1,4}** Valore iniziale: non definito p { margin : 10% ; } ul{ margin : 1em 0em 1em 0em } h1{ margin : 0.5em 10% 0.5em 10% ;}/*Anche mischiati*/ p { padding : 10% ; } ul{ padding : 1em 0em 1em 0em } h1{ padding : 0.5em 10% 0.5em 10%;}/*Anche mischiati*/ * la percentuale si riferisce alla larghezza dell elemento padre ** si può mettere o un solo valore che verrà applicato a tutti i lati della box oppure i 4 diversi valori, partendo dal margine superiore e procedendo in senso orario. * la percentuale si riferisce alla larghezza dell elemento padre ** si può mettere o un solo valore che verrà applicato a tutti i lati della box oppure i 4 diversi valori, partendo dal margine superiore e procedendo in senso orario. 45 Background a porzioni di testo Blockquote { margin: 1em 0em 1em 0em; background: #EDB; padding: 0.5em; } NOTA: in questo caso lo sfondo risulta troppo stretto intorno al titolo. Conviene aggiungere la dichiarazione legata alla proprietà padding 46 Bordi Border-style none dotted dashed solid double groove ridge inset outset Valore iniziale: none h2 { border-style : dashed; } p.aside {border-style : solid dashed dotted solid;} /*Anche Multi-style*/ 47 Bordi Border-width [thin medium thick <length>]{1,4} Valore iniziale: non definito 48 Bordi Border-color <color>]{1,4} Valore iniziale: colore dell elemento h2 { border-width : thick; } h2 { border-color : gray; } p.aside {border-width : thick thick thin thin;} /*Anche Multi-style*/
9 49 Bordi tutto insieme Border <border-width> <border-style> <color> Valore iniziale: vedi le singole proprietà h21 { border : thick solid gray; } 50 Liste List-style-type disc circle square decimal upper-alpha loweralpha upper-roman lower-roman none Valore iniziale: disc Si applica a: elementi di tipo lista ul {list-style-type: disc;} ul ul {list-style-type: circle;} ul ul ul {list-style-type: square;} /*dato che questa proprietà si eredita, se non si precisasse un valore diverso per liste annidate si avrebbe lo stesso valore della lista padre*/ ol { list-style-type : decimal;} li.off {list-style-type : none;} 51 Liste List-style-image <url> none Valore iniziale: none Si applica a: elementi di tipo lista 52 Liste List-style-position inside outside Valore iniziale: outside Si applica a: elementi di tipo lista ul {list-style-image: url(sole.gif);} ul {list-style-image: inside;} 53 Liste tutto insieme List-style <list-style-type> <list-style-image> <liststyle-position> Valore iniziale: vedi le singole proprietà Si applica a: elementi di tipo lista li.norm {list-style: url(img.gif) disc inside;} /*La priorità ce l ha l immagine, ma se non dovesse essere raggiungibile il browser visualizzerà il disc */
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
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
2.3 Cenni sui fogli di stile CSS per XML
Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE
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:
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
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
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
Introduzione ai fogli di stile CSS
CdL in Ingegneria Elettronica e Informatica Modulo di Fondamenti di Informatica D Introduzione ai fogli di stile CSS Ing. Maurizio Vincini a.a. 2000/2001 Programmazione CGI - 1 Fogli di stile CSS Il Web
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
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.
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
UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.
UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui
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
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
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
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
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
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
Coder Dojo Tutorial 3
Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire
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
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)
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.
I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come
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,
(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
Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II
Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente
HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS.
CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale
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)
CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale
LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... La struttura di una pagina web intestazione Qui si dichiara il titolo del documento
APPUNTI DI HTML (SECONDA LEZIONE)
APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà
Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:
Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:
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
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 4 Tabelle 4.1 La struttura di una tabella Elementi principali
SOMMARIO. INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5. 1.1 Linee guida CSS1 5 1.2 Linee guida CSS2 5. CAPITOLO 2 7 Fogli di stile 7
Sommario SOMMARIO INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5 1.1 Linee guida 1 5 1.2 Linee guida 2 5 CAPITOLO 2 7 Fogli di stile 7 2.1 La sintassi 7 2.2 Ereditarietà degli attributi 7 2.3 Regole di cascading
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
La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
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
HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto
HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La
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 font-size: pt, px o em? Che unità di misura utilizzare?
CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di
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
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
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
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 passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
Guida alla realizzazione di un layout fluido
Guida alla realizzazione di un layout fluido I siti Web possono essere realizzati secondo due diversi schemi di layout: layout fissi e fluidi. La differenza tra i due tipi di layout consiste in una diversa
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
.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C. Introduzione ai CSS
.ConStile Tutorial Introduzione ai CSS : Indice.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C [H] Home > Tutorial > Introduzione
Comandi principali del linguaggio HTML (Hyper Text Markup Language)
Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per
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
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:
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
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
Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96
Panoramica del capitolo Creare classi e ID per applicare gli stili, pagina 93 Applicare gli stili a collegamenti ipertestuali, pagina 96 Creare e collegare fogli stile esterni, pagina 98 6 Introduzione
Grafica: creare pulsanti con i css.
Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.
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
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
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,
HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento
HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare
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
LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,
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
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie
Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis <demis@dimi.uniud.it>
Introduzione Guida ai fogli di stile (Standard CSS 2) Demis Ballis Questo documento è liberamente tratto dalla guida ai CSS di base di Cesare Lamanna, disponibile nella sua versione
Brescianet.com Sito didattico - Prof. Sechi Marco. II Modulo - Classe 3O. Accoda qui le risposte. differenze per aree sovrapposte.
Brescianet.com Sito didattico - Prof. Sechi Marco FAQ Cerca Lista degli utenti Gruppi utenti Registrati Profilo Entra per controllare i messaggi privati Entra II Modulo - Classe 3O Indice del forum ->
CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A.
Corso di Laurea Magistrale in Ingegneria Informatica Corso di Linguaggi e Tecnologie Web A. A. 2012-2013 LINGUAGGI E TECNOLOGIE WEB CSS Floriano Scioscia 1 CSS CSS (Cascading Style Sheets, fogli di stile
Introduzione al Linguaggio HTML
Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la
Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language
Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized
Oreste Signore, <oreste@w3.org> Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa
http://www.w3c.it/education/2012/upra/css/#(1) 1 of 63 Oreste Signore, Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa Master in Comunicazione e New
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
Cos è un word processor
Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei
lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000
Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,
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
HTML per tu+ Chiara Pere+
HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo
I Tag dell html. Parte quarta
I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:
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
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
Utilizzo dei CSS: regole
Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte
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
1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.
Sommario CSS 1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.... 1 1.1 Fogli di stile "in linea"... 2 1.2 Fogli di stile "interni"... 2 1.3 Fogli di stile "esterni"... 2 1.4 Che tipo di
Javascript. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori
Javascript Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi
Il linguaggio HTML - Parte 4
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto
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)
I link e l'ipertestualità
I link e l'ipertestualità I link sono "il ponte" che consente di passare da un documento all altro. In quanto tali, i link sono formati da due componenti: il contenuto che "nasconde" il collegamento (può
CSS 4. Tipi di dati in CSS. Numeri <number> Lunghezze <length> Tipi di dati, lunghezze ed unità di misura. Esistono i seguenti tipi di dati
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati 2 Numeri Interi Cifre comprese
jt - joetex - percorsi didattici
jt - joetex - percorsi didattici Corso dreamweaver lezione 1 Sommario 1. Creare un sito in locale 2. creare la prima pagina Creare un sito in locale Un sito va creato tutto all'interno di un'unica cartella.
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
HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>
FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare
Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online.
www.icoarena.com Costruisci il tuo sito web da solo! Un pratico tutorial per imparare velocemente a scrivere pagine HTML e pubblicarle online. Ico Arena 01. PREMESSA Sviluppare un sito web è costoso Per
Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1
Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta
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
Come creare un modulo
Come creare un modulo Aggiungi moduli al tuo sito per registrare le informazioni dei tuoi clienti su un database, o per riceverle via e- mail. Trascina un widget Modulo sulla tua pagina Nel pannello Widget
Corso di CSS. Prerequisiti. Modulo L2. 1-Background e font. Conoscenza di base linguaggio HTML. M.Malatesta 1-CSS-Background e font-08 23/01/2014
Corso di CSS Modulo L2 1-Background e font 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo l utilità dei CSS applicati ai vari elementi di una pagina web.
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;
XSL: extensible Stylesheet Language
XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono