Cascading Style Sheet
|
|
|
- Evangelista Agostini
- 6 anni fa
- Visualizzazioni
Transcript
1 I fogli di stile Cascading Style Sheet Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione e Culture (si ringrazia il dott. Claudio Schifanella, che ha concesso l uso del materiale) Distinguere tra il contenuto del documento (struttura testo, elementi multimediali inseriti) Presentazione del contenuto del documento (indicazioni di stile interpretate dal browser) Idea generale raccomandata dal W3C: I tag devono essere usati solo come marcatori strutturali per specificare la struttura/funzione logica dei contenuti del documento, non per produrre effetti di stile Per gestire la presentazione del documento si usa un altro linguaggio di specifica, i fogli di stile: specifiche per il controllo della presentazione/stile di una pagina web: colori, layout ecc. I fogli di stile I fogli di stile vengono specificati in un linguaggio standard: CSS, interpretato da (quasi) tutti i browser CSS è un linguaggio diverso da ; non è un linguaggio di markup Con l introduzione dei fogli di stile tutti i tag e attributi legati all aspetto grafico della pagina sono diventati deprecati: queste informazioni non andranno più specificate utilizzando all interno del documento, ma dovranno essere fornite negli spazi dedicati agli stili, utilizzando il linguaggio CSS I fogli di stile Un documento e il relativo foglio di stile sono entità concettualmente separate: da un lato, il documento specifica il contenuto del documento dall altro, i fogli di stile descrivono come il contenuto deve essere visualizzato CSS I fogli di stile I fogli di stile È possibile creare layout complessi CSS Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 1
2 Vantaggi dell uso dei fogli di stile Separazione stile-contenuto: Contenuto con il minimo di struttura necessario Stili specificati a parte Possibilità di applicare lo stesso stile a più contenuti Possibilità di riutilizzo di uno stesso contenuto con stili diversi Aderenza agli standard: Maggiore durata nel tempo del progetto Maggiore compatibilità Facilità di manutenzione Maggiore controllo stilistico Regole di stile Ogni foglio di stile è composto da un insieme di regole che rispettano la sintassi: selettore { proprietà: valore; proprietà: valore; h1 { color:red; background-color:#ff0000; Regole di stile NOTA: è possibile inserire le parentesi graffe con una tastiera italiana premendo contemporaneamente: i tasti AltGr, Shift (cioè ), è (per { ) i tasti AltGr, Shift (cioè ), + (per ) Regole di stile Tipi di proprietà singole a sintassi abbreviata div { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; div {margin: 10px 5px 10px 5px; Esempio body { background-color: yellow; color: blue; font-family: Arial, sans-serif; h1 { background: orange; font-weight: bold; Imposta il corpo del documento (tag body) con colore di sfondo giallo scritte blu e font Arial (o, in alternativa, un altro senza grazie) e i titoli di primo livello (tag h1) con sfondo arancione scritte in grassetto Regole di stile ogni regola è associata ad uno o più selettori che specificano a quali elementi del documento si desidera applicare la regola ci sono diversi modi di specificare un selettore Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 2
3 Integrazione dei fogli di stile Un foglio di stile può essere integrato in una pagina web come Foglio di stile interno Foglio di stile esterno Foglio di stile in linea Fogli di stile interni Le regole di stile scritte nel linguaggio CSS sono definite all interno dell elemento HEAD del singolo documento Utilizzo del tag <style> </style> <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>primo esempio</title> <style type="text/css"> p { color:#0000cc; background-color:#ff0000 </style> </head> <body> </body></html> Fogli di stile esterni Le regole di stile sono definite in un file esterno separato che viene richiamato -attraverso l inserimento di un apposito collegamento- all inizio di ogni pagina a cui viene applicato (molto utile se si vuol definire uno stile uniforme per tutto il sito) creazione di un documento separato (file.css) dal file.html di cui definisce lo stile Il file.css contiene le informazioni relative all'aspetto della pagina Principale vantaggio: più facile e veloce la gestione dello stile del sito: se vogliamo modificare l'aspetto di un intero sito di molte pagine non dobbiamo modificare tutte le pagine una per una; è sufficiente modificare il file.css che contiene le regole di stile Fogli di stile esterni Utilizzo del tag <link> all interno del tag <head> <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 Transitional//EN" " File: pagina.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>primo esempio</title> <link rel="stylesheet" type="text/css" href="miostile.css"/> </head> <body> </body></html> CSS File: miostile.css p { color:#0000cc; background-color:#ff0000 Fogli di stile in linea Consente di specificare la formattazione di un singolo tag all interno di una pagina html Si utilizza l attributo style, disponibile per ogni tag html <!DOCTYPE PUBLIC "-//W3C//DTD 4.01 Transitional//EN" " TR/html4/loose.dtd"> <html> <head> </head> <body bgcolor="white"> <h1 align="center" >Angus Young</h1> <h2>life and career</h2> <p align="justify" style="color:#0000cc;background-color:#ccff33"> Angus Young, the youngest of eight children </p> <h2>formation of AC/DC</h2> <p align="justify">as a teenager, Young played in </p> </body></html> Regole di precedenza Ogni elemento stilistico può essere ridefinito (anche più volte) e prevale sempre la definizione più specifica A parità di specificità, gli stili definiti su un elemento prevalgono su quelli definiti precedentemente In particolare esiste la seguente precedenza: Stili definiti inline nel corpo del documento (BODY o tramite l'attributo STYLE di altri tag come H*, DIV, P,...) Stili definiti nella sezione <HEAD> del documento: Stili definiti nel tag STYLE Stili definiti in file esterni riferiti tramite LINK Se nello stesso foglio di stile definisco due volte lo stesso elemento vale la definizione più recente. Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 3
4 Regole di precedenza: un esempio Regole di precedenza: un esempio I selettori L albero del documento Un documento (X) può essere visto come un albero i cui nodi sono rappresentati dai tag <html> <head> <title>my home page</title> </head> <body> <h1>my home page</h1> <p>welcome to my <em>home page</em>! let me tell you about my favorite composers:</p> <div> <ul> <li> elvis costello </li> <li> johannes brahms </li> <li> georges brassens </li> </ul> </div> </body> </html> I selettori BODY H1 P DIV EM UL LI LI LI Legame padre-figlio Tag fratelli Discendenti del tag div Ereditarieta e ordine di precedenza delle regole Gli elementi discendenti ereditano le proprietà stilistiche degli antenati a meno che non siano definite per loro regole più specifiche, che hanno la precedenza N.B.: alcune proprietà non sono ereditate guardare il manuale di riferimento! I selettori Un selettore definisce l elemento della pagina al quale si applica una determinata regola Diverse tipologie Universale Selettore di tipo Selettori di discendenti Selettori di figli Selettori di adiacenti Selettori di classe Selettori di ID Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 4
5 Selettore universale Identificato da un * seleziona ogni tipo di elemento o ogni singolo elemento nell albero del documento Esempio * { color:#0000cc; background-color:#ff0000 Selettore di tipo Seleziona un tipo di elemento (tag) del documento. Un selettore di tipo seleziona ogni istanza di un tipo di elemento nell'albero del documento Esempio: la seguente regola seleziona tutti gli elementi H1 nell'albero del documento: h1 { font-family: sansserif; È possibile specificare anche un elenco di tag h1,p { font-family: sansserif; Altro esempio Selettore di discendente Selettori di discendenti Un selettore di discendente è costituito da due o più selettori separati da uno spazio bianco. Un selettore di discendente della forma "A B" seleziona quando un elemento B è un arbitrario discendente di un elemento antenato A. Per esempio, si considerino le seguenti regole: La terza regola selezionerà EM nel seguente frammento: H1 { color: red; EM { color: red; H1 EM { color: blue; <H1>This <SPAN class="myclass">headline is <EM>very</EM> important</span></h1> La regola imposta il colore del testo sul blu ogni volta che un EM ricorre all'interno di un H1 (provate a pensare alla rappresentazione ad albero) Esempio Selettore di figlio Utilizzato quando un elemento è il figlio di qualche altro elemento. Un selettore di figlio è costituito di due o più selettori separati da ">". La seguente regola imposta lo stile di tutti gli elementi P che sono figli di BODY: Il seguente esempio combina i selettori di discendenti e i selettori di figli: Seleziona un elemento P che è un discedente di un elemento LI; l'elemento LI deve essere il figlio di un elemento OL; l'elemento OL deve essere un discendente di un DIV Esempio BODY > P { line-height: 1.3; DIV OL > LI P { line-height: 1.3; Selettore di adiacenti (fratelli) I selettori di fratelli adiacenti hanno la seguente sintassi: E1 + E2, dove E2 è il soggetto del selettore. Il selettore seleziona i casi in cui E1 ed E2 condividono lo stesso genitore nell'albero del documento e E1 precede immediatamente E2 La seguente regola afferma che quando un elemento P segue immediatamente un elemento H1, non dovrebbe essere indentato: H1 + P { text-indent: 0; Selettore di classe Supponiamo che il nostro documento contenga alcuni paragrafi importanti, che vogliamo vengano visualizzati in modo diverso dagli altri Non è possibile realizzare questa specifica con quanto detto sinora: abbiamo visto come impostare la visualizzazione relativa ad un elemento associato ad un tag (ad esempio <P>): i paragrafi importanti sono associati al tag <P> esattamente come quelli normali, possiamo dire che ne costituiscono una classe speciale abbiamo bisogno di strumenti flessibili per distinguere classi di elementi Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 5
6 Selettore di classe Obiettivo Vorrei potere definire delle classi speciali di paragrafi (o di qualsiasi altro tag) etichettati come importanti e per essi delle regole di stile diverse Soluzione È possibile definire un insieme di regole di stile per una classe, etichettate con un selettore che prende il nome "astratto della classe. Le regole verranno applicate, nel file html, a vari elementi (tag) etichettati opportunamente come membri della classe Selettore di classe Per definire una classe è necessario seguire la sintassi:.nomeclasse.titolo { font-weight:bold; color: #FF0000; La classe titolo formatterà il testo associato in grassetto e lo colorerà in rosso Selettore di classe Per applicare la classe ad un particolare tag utilizzare l attributo class <h1 align="center" >Angus Young</h1> <h2>life and career</h2> <p align="justify" class="titolo"> Angus Young, the youngest of </p> <h2>formation of AC/DC</h2> <p align="justify">as a teenager, Young </p> Al testo contenuto nel paragrafo saranno applicate le regole definite dallo stile titolo Selettore di classe Uno stile definito con un selettore di classe Può essere applicato più volte all interno del documento Può essere applicato a tag differenti all interno del documento Per ogni suo utilizzo, è sufficiente specificare il nome della classe all interno dell attributo class Selettore di classe È possibile combinare il selettore di tipo con il selettore di classe Esempio1, esempio2, esempio3 La classe titolo è selezionata solamente se applicata al tag <p> (attraverso l uso dell attributo class) p.titolo { font-weight:bold; color: #FF0000; <p align="justify" class="titolo"> Angus Young, the youngest of </p> <h1 class= titolo >Fans</h1> Selettore di pseudoclasse Le pseudoclassi servono per aggiungere effetti particolari ad alcuni selettori Es.: a:link {color:#ff0000; link non visitato a:visited {color:#00ff00; link visitato a:hover {color:#ff00ff; link con sopra il puntatore del mouse a:active {color:#0000ff; link selezionato Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 6
7 Selettore di ID Servono per definire regole da associare ad uno ed un solo elemento (tag) all interno della pagina (stile individuale) Sintassi: #nomeid Nell, lo stile individuale si associa attraverso l attributo id, disponibile per ogni tag Esempio Cascading style sheet Le proprietà principali #titoloprincipale { color:red; <h1 id= titoloprincipale > La mia pagina web </h1> Inserire un commento I commenti sono racchiusi tra /* e */ /* stile per i titoli */ p.titolo { font-family:arial, Helvetica, sans-serif; font-size: 10px; Valori e unità di misura dimensioni in (inches pollici) cm (centimetri) mm (millimetri) pt (punti) pc (picas): 1 picas=12 punti em (em-height): 1 em è l altezza media di un carattere per un dato font. Unità di misura relativa ex (ex-height): 1 ex è l altezza del carattere x minuscolo px (pixels) percentuale font-size: 5in; font-size: 5pc; width: 50%; font-size: 5pt; font-size: 5ex; font-size: 5cm; Valori e unità di misura colori parole chiave: black, navy, blue, maroon, purple, green, red, teal, fuchsia, olive, gray, lime, aqua, silver, yellow, white #RRGGBB color: red; #RGB color: #FF3C67; rgb(rrr%, ggg%, bbb%) rgb(rrr, ggg, bbb) stringhe uri racchiuse tra virgolette url(percorso) font-family: Times New Roman, Times, serif background-image:url(immagini/claudio.jpg); Valori e unità di misura angoli deg grad rad tempo s (secondi) ms (millisecondi) Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 7
8 Proprietà color Per ogni elemento si possono definire almeno 3 colori Foreground Background Border color definisce il colore di primo piano (e del bordo se non espressamente definito) Valori Un colore secondo la sintassi espressa precedentemente inherit: eredita le proprietà dell elemento parente Gestione dello sfondo background-color Qualunque colore o transparent background-image background-repeat repeat, repeat-x, repeat-y, no-repeat p { background-color: #FFFFFF; Esempio selettore { color: <valore> body { background-image: url(sfondo.gif); background-repeat: no-repeat; Gestione dello sfondo background-attachment Decide se lo sfondo deve scorrere con il documento scroll, fixed background-position Coordinate del punto di inizio dell immagine di sfondo Valori in percentuale, unità di misura o (bottom, center, inherit, left, right, top) body { background-image: url(back_400.gif); background-repeat: no-repeat; background-position: center center; Esempio 1 Esempio 2 Esempio 3 Esempio 3b Esempio 4 Esempio 5 Gestione dello sfondo Proprietà a sintassi abbreviata: background selettore { background: background-color background-image background-repeat background-attachment background-position; body { background: white url(sfondo.gif) repeat-x fixed; Gestione del testo font-family Possibilità di impostare una serie di caratteri alternativi Il browser verifica la presenza del primo font nella lista. Se non lo trova passa alla verifica del secondo e cosi via. Gestione del testo font-size Valori assoluti Valori relativi Misura relativa calcolata a partire dal valore della grandezza del font definita in quel punto del documento p {font-family: arial, Verdana, sans-serif; p {"Courier New", Courier, monospace p {font-family: "Times New Roman", Times, serif p {font-size: 12px; div.titolo {font-size: 50%; #div1 {font-size: large; h2 {font-size: 1.2em; Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 8
9 Gestione del testo font-weight Indica il peso visivo del testo Valori Numerici: 100, 200,, 900 normal (400), bold (700), bolder, lighter Gestione del testo font-style normal, italic, oblique line-height p {line-height: 1.5; imposta l interlinea body {line-height: 15px; Sintassi abbreviata: font p {font-style: italic; p {font-weight: 900; div {font-weight: bold; p {font: bold 12px/1.5 Georgia, "Times New Roman", serif; Gestione del testo text-align left, right, center, justify text-decoration none, underline, overline, linethrough, blink selettore { text-align: <valore>; p {text-decoration: none; a {text-decoration: underline; Gestione del testo Proprietà avanzate font-size-adjust font-stretch font-variant text-indent text-shadow text-transform white-space letter-spacing word-spacing Esempio 1 Esempio 2 Gli elenchi Tutte le proprietà si riferiscono al tag <LI> list-style-image Sostituisce il punto elenco con una immagine sintassi: <selettore> {list-style-image: url(<url_immagine>); valori: un URL assoluto o relativo che punti ad un immagine none list-style-position sintassi: <selettore> {list-style-position: <valore>; valori: inside outside: (default) l immagine è posta all esterno del testo Gli elenchi list-style-type Imposta il punto elenco di una lista sintassi <selettore> {list-style-type: <valore>; valori (i più importanti) disc, circle, square, decimal, decimal-leading-zero, lowerroman, upper-roman Sintassi abbreviata: list-style esempio <selettore> {list-style: <valore tipo> <valore posizione> <valore immagine>; Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 9
10 Cascading Style Sheet Il box model Classificazione degli elementi Elementi in linea (inline) Vengono inseriti uno di seguito all altro Possono contenere solamente dati o altri elementi in linea Elementi di blocco (block) Vengono inseriti uno sotto l altro, su una nuova linea Possono contenere altri elementi di blocco ed elementi in linea Elementi di lista Testo enfatizzato. Testo dopo. Questo è un paragrafo di testo messo qui per mostrare l interruzione di linea. Testo prima. Il box model Ad ogni elemento è associato un riquadro, o box, che lo contiene Il box model Il box-model è uno degli elementi-cardine dei CSS L'insieme di regole che gestisce l'aspetto visuale degli elementi blocco è in genere riferito a questo modello Gli elementi chiave di questo modello sono l'area dei contenuti: area in cui trova spazio il contenuto vero e proprio, testo, immagini... il padding: è uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento il bordo: è una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto il margine: è uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti Gestione dell altezza height specifica la distanza tra il bordo superiore e il bordo inferiore di un elemento non è ereditata sintassi selettore {height: <valore>; valori valore numerico valore in percentuale auto (valore di default) overflow, min-height, max-height esempio Gestione della larghezza width specifica la larghezza dell area del contenuto non è ereditata sintassi selettore {width: <valore>; valori numerico percentuale auto (valore di default): se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore. min-width, max-width esempio Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 10
11 Gestione dei margini margin-top, margin-right, margin-bottom, margin-left valori numerico percentuale auto (di solito equivale a 0) N.B.: i margini verticali possono collassare (due elementi adiacenti condividono il margine: la distanza tra i due sarà data dal margine maggiore e non dalla somma dei due margini) margin proprietà a sintassi abbreviata valori elencati in ordine orario a partire da top div {margin: 10px 15px 10px 20px; esempio Gestione del padding padding-top, padding-right, paddingbottom, padding-left valori numerici percentuale non è ereditata padding proprietà a sintassi abbreviata valgono le regole esposte per margin esempio Gestione dei bordi Proprietà singole selettore { border-<lato>-color: <valore>; border-<lato>-style: <valore>; border-<lato>-width: <valore>; Sintassi abbreviata selettore { border-<lato>: <valore width> <valore style> <valore color>; Gestione dei bordi Valori color un qualsiasi colore inherit style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset width valore numerico con unità di misura thin, medium, thick Gestione dei bordi Specificare tutti e quattro i lati selettore { border-width: <valori>; border-style: <valori>; border-color: <valori>; Specificare tutto con una sola proprietà Definire sezioni arbitrarie del documento Sino ad ora abbiamo visto come sia possibile cambiare lo stile di uno o più elementi del documento del tag utilizzato della classe a cui appartengono (selettore di classe) del loro identificatore univoco (selettore di id) selettore {border: <valore spessore> <valore stile> <valore colore>; esempio1 esempio2 Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 11
12 Definire sezioni arbitrarie del documento Come affrontare casi in cui la parte di documento a cui vogliamo associare uno stile non corrisponde ad un elemento? Caso 1: vogliamo associare uno stesso stile a un insieme contiguo di elementi blocco <div> </div> Caso 2: vogliamo associare uno stesso stile a una parte di un elemento in linea <span> </span> Definire un elemento di blocco generico Tag <div>: contenitore che serve a raggruppare blocchi contigui di elementi e a definire un nuovo elemento (livello, layer) e trasformare così questo raggruppamento in un blocco omogeneo a cui è possibile associare un unico stile Associato uno stile al nuovo elemento <div>, grazie alla proprietà di ereditarietà, lo stile viene automaticamente applicato a tutti i blocchi che compongono il nuovo elemento <div> Per applicare uno stile ad un nuovo livello definito con <div>, possiamo utilizzare gli attributi class e id Definire un elemento di blocco generico Lo stile notizia si applica a tutti gli elementi contenuti all interno del tag div Se, ad esempio, impongo al livello una larghezza di 500 pixel (width:500px;), anche i blocchi al suo interno occuperanno al massimo la stessa larghezza Lo stesso meccanismo si può applicare a livelli annidati all interno di altri livelli, per creare layout complessi <div class= notizia > <h1>campioni del mondo!</h1> <p> La squadra di Marcello Lippi </p> </div> Definire un elemento di linea generico Supponiamo di voler visualizzare, all interno di un paragrafo, una porzione del testo in un colore differente È possibile definire tale porzione come un nuovo elemento di linea, attraverso il tag <span> </span> Anche il tag span possiede gli attributi class e id Definire un elemento di linea generico.evidenzia { color:red; Cascading style sheet <p> Angus Young, the youngest of eight children of William and <span class="evidenzia">margaret Young</span>, was born </p> Le regole di posizionamento degli elementi Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 12
13 Posizionamento degli elementi La disposizione normale dei box non consente la realizzazione di layout elaborati La sola disposizione possibile per i blocchi per esempio è la loro successione verticale È possibile modificare la disposizione normale dei box per ottenere layout più elaborati Posizionamento degli elementi Esistono diverse tecniche che permettono di modificare il normale posizionamento degli elementi Attraverso l uso della proprietà float Attraverso l uso della proprietà position Attraverso l uso della proprietà display La proprietà float La proprietà float Permette di rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float La proprietà non è ereditata Sintassi: <selettore> {float: <valore>; Valori: left, right, none Questo è un float: left paragrafo di testo che si inserisce a destra per il fatto che il quadrato è stato dichiarato di tipo float left. Questo è un paragrafo di testo che si inserisce a sinistra per il fatto che il quadrato è stato dichiarato di tipo float right. float: right La proprietà float La proprietà clear N.B.: se si utilizza la proprietà float con elementi diversi dalle immagini è obbligatorio impostare esplicitamente la dimensione orizzontale attraverso la proprietà width esempi div {width: 200px; float:right; img.foto {float: left; La proprietà serve a impedire che al fianco di un elemento compaiano elementi float Si applica solo agli elementi blocco e non è ereditata Sintassi: <selettore> {clear: <valore>; Valori: none, right, left, both esempi Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 13
14 La proprietà position Non ereditata Sintassi: <selettore> {position: <valore>; Valori: static absolute Fixed relative static valore di default rappresenta la posizione normale di ciascun elemento La proprietà position absolute l elemento viene rimosso dal flusso del documento e viene posizionato in base alle coordinate fornite con le proprietà top, left, right, bottom Il posizionamento avviene sempre rispetto al box contenitore dell'elemento Il contenitore dell elemento è rappresentato dal primo elemento antenato che abbia un posizionamento diverso da static esempio esempio2 La proprietà position fixed l elemento viene rimosso dal flusso del documento e viene posizionato in base alle coordinate fornite con le proprietà top, left, right, bottom Il posizionamento avviene sempre rispetto al box contenitore dell'elemento Il box contenitore è sempre il viewport, cioè la finestra del browser Il box non scorre con il resto del documento esempio La proprietà position relative L'elemento viene posizionato relativamente alla posizione che avrebbe occupato normalmente, cioè se non avessimo utilizzato il valore relative per la proprietà position Le proprietà top, left, right e bottom indicano lo spostamento relativo dell elemento all interno del blocco contenitore esempio Il posizionamento: visibility Proprietà visibility determina se un elemento debba essere visibile o nascosto si applica a tutti gli elementi e non è ereditata Sintassi <selettore> {visibility: <valore>; Valori visible: valore di default. L elemento è visibile hidden: l elemento è nascosto ma mantiene il suo posto esempio div.box {visibility: hidden; p {visibility: visible; Il posizionamento: z-index Proprietà z-index permette di specificare l'ordine di posizionamento dei vari elementi quando sono sovrapposti (cioè quale elemento è davanti e quale è dietro) Sintassi <selettore> {z-index: <valore>; Valori auto: il valore è uguale per tutti valore numerico: un valore superiore indica un livello superiore div#box1 {z-index: 34; esempio Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 14
15 La proprietà display Permette di definire (e quindi modificare) il trattamento e la presentazione di un elemento Sintassi: <selettore> {display: <valore>; Valori (proprietà ereditata): inline: valore di default. L'elemento assume le caratteristiche degli elementi inline block: l'elemento viene trattato come un elemento blocco list-item: l'elemento si trasforma in un elemento lista esempio Validatori del W3C Per le pagine e X: Per i fogli di stile: Riferimenti CSS level 2 Specification (it) CSS level 1 Specification (it) Guida Base ai CSS (da W3schools: CSS reference W3schools: CSS Examples Libri di testo (non indispensabili): Qualsiasi libro che parli di fogli di stile Per i layout (approfondimento facoltativo): Guida Layout dei siti con i CSS (da Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione E Culture 15
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
CSS (Cascading Style Sheets)
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 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,
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:
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
CSS. Cascading Style 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
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
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
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:
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();
CSS 4. Tipi di dati, lunghezze ed unità di misura
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati Tecnologie di Sviluppo per il WEB 2 Numeri
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
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
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
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
Guida ai CSS. Introduzione
Guida ai CSS Introduzione... 1 Sintassi... 1 Stile in linea... 1 Stile incorporato... 2 Stile esterno... 2 Classi... 3 Selettori ID... 4 Grafica... 4 Link... 5 Attributi testo... 6 Attributi carattere...
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
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
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
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
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
Creare un portale personalizzato
1 Creare un portale personalizzato Passi da seguire 1) Aprire la pagina: http://www.term-minator.it/modello.html 2) Scaricare modello : 2) Aprire il file modello con blocco note : 1 2 3) Modificare il
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
Linguaggi per il Web Linguaggi di markup: CSS
Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto
Introduzione dei fogli di stile
Corso di Laurea in Scienze della Formazione Continua e Tecnologie dell Istruzione Parte V Fogli di stile - Css Corso: Computer Graphics Docente: Ing. Ivan Bruno E-mail: ivanb@dsi.unifi.it Introduzione
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
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
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti
Laboratorio di reti I: Cascading Style Sheets
Laboratorio di reti I: Cascading Style Sheets Stefano Brocchi brocchi@dsi.unifi.it 10 novembre, 2009 Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, 2009 1 / 45 Cascading Style Sheets Un Cascading
CSS Proprietà del box model
Laboratorio di Tecnologie Web CSS Proprietà del box model Dott. Stefano Burigat www.dimi.uniud.it/burigat Box model Abbiamo introdotto in precedenza il concetto fondamentale di box model, in base al quale
JavaScript 5. CSS e JavaScript
JavaScript 5 CSS e JavaScript CSS e JavaScript Attraverso JavaScript è possibile controllare proprietà CSS Possiamo controllare lo stile di un singolo elemento HTML o di un tag in generale Possiamo aggiungere
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 / TIPOGRAFIA WEB. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / TIPOGRAFIA WEB LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 GESTIRE I CARATTERI CON I CSS I CSS hanno dato un notevole impulso alla tipografia web visto che permettono di
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 esterni e interni
Introduziione aii CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei
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,
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
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
CSS 5. Proprietà di CSS. Indentazione del testo. Proprietà del testo. Proprietà
CSS 5 Proprietà Proprietà di CSS Esistono le seguenti sei famiglie di proprietà: Testo Background e colori Font Liste Contenitori (box model) Posizionamento Non sempre il supporto da parte dei browser
CSS / GESTIONE DEL COLORE E DEI BACKGROUND. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / GESTIONE DEL COLORE E DEI BACKGROUND INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB Modello Additivo del colore Le lunghezze
<tag style= dichiarazioni css >
CSS 1. FOGLI DI STILE Per permettere di separare la forma dal contenuto, si usano i Fogli di Stile. Essi descrivono dettagliatamente lo stile di ogni elemento contenuto nel foglio html. I nomi dei fogli
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
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
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
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
<!-- TESTO DEL COMMENTO
Il corpo della pagina: il tag Come abbiamo già avuto modo di osservare, il tag definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento HTML. Avendo
7 Posizionare. gli elementi sulla pagina con i fogli di stile CSS
7 Posizionare gli elementi sulla pagina con i fogli di stile CSS Posizionare gli elementi sulla pagina in modo relativo Posizionare gli elementi in modo assoluto Impostare il posizionamento 3D (Z-Order)
CSS E FOGLI DI STILE Guida Css di base
2017 CSS E FOGLI DI STILE Guida Css di base Progetto di Alternanza Scuola-Lavoro Anno scolastico 2016-2017 Istituto Tecnico Enrico Fermi, Siracusa Eleonora SikeWEB 01/01/2017 Introduzione ai fogli di stile
LEZIONE 04. Riepilogo CSS
LEZIONE 04 Riepilogo CSS SELETTORI SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile. Prova il codice ELEMENTO
Metalinguaggi di marcatura Materiale didattico di supporto. Indice 6. HTML (CONTINUA)...2
Indice 6. HTML (CONTINUA)...2 6.1 FOGLI DI STILE (CSS- CASCADING STYLESHEET)...2 6.1.1 Regole dello stile...6 6.1.2 Classi...6 6.1.3 Esempi di proprietà modificabili e relativi valori....9 6.2 DIVISIONS
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
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
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)
Applicazione Ipermediali 2007/2008
Applicazione Ipermediali 2007/2008 CSS: esempi pratici Politecnico di Milano Obiettivi Aumentare la confidenza con le regole CSS Dimostrare alcune problematiche relative alla compatibilità tra browser
L approccio moderno al Web. Cascading Style Sheets. L approccio moderno al Web. L approccio moderno al Web
L approccio moderno al Web Cascading Style Sheets Claudio Fornaro ver. 2.0 Ogni pagina può essere considerata come composta da tre parti: la struttura (structure) l aspetto grafico (presentation) il comportamento
Linguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
* Le proprieta' dei margini: "margin" che assegnano un bordo esterno al box;
TIPO: CSS ATTRIBUTI DI MARGINI ED ALLINEAMENTO I fogli di stile permettono di giustificare il testo senza l'uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all'interno
Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo
Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1 Introduzione In questa Unità vediamo altri
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
CSS: Formattazione del testo
Laboratorio di Tecnologie Web CSS: Formattazione del testo Dott. Stefano Burigat www.dimi.uniud.it/burigat Proprietà per la gestione dei font CSS definisce un insieme di proprietà che possono essere utilizzate
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
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato
Siti molto ben fatti /1 08
Siti molto ben fatti /1 08 1) Mettiamoci a cucinare Crea la cartella 30 ricette con le sottocartelle css e img. L'obiettivo è di realizzare un sito come questo rappresentato in figura. Cominciamo con l'operare
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
Indice generale. Introduzione...xiii. Gli standard e i CSS...1
Introduzione...xiii Capitolo 1 Capitolo 2 Capitolo 3 Gli standard e i CSS...1 Contenuti e formattazione: due oggetti distinti... 1 Le zuppe di codice... 2 L introduzione dei CSS... 4 I vantaggi degli standard...
Creazione di tabelle.
Creazione di tabelle. Argomenti trattati: - Premessa: Cosa sono le tabelle in HTML. - Costruiamo una tabella: Come realizzare semplici tabelle con i tag principali ed i loro attributi. - Personalizziamo
HTML 2. Il tag BODY. Nota. Esempio. body e i suoi tag
body e i suoi tag HTML 2 Il tag BODY Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK = #rrggbb
body e i suoi tag HTML 2
body e i suoi tag HTML 2 Il tag BODY Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK
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
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
Corso di HTML. Prerequisiti. Modulo L3 2 Formattazione del testo. Formattazione di un testo Stile, dimensioni e font di caratteri
Corso di HTML Modulo L3 2 Formattazione del testo 1 Prerequisiti Formattazione di un testo Stile, dimensioni e font di caratteri 2 1 I colori in HTML I colori in HTML si possono esprimere in due modi:
Progettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo
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
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
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:
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
L'istruzione nei CSS è composta di tre parti: un selettore, una proprietà e un valore: selettore {proprietà: valore}
Manuale di CSS Autore: Ugo Romano Introduzione Introduzione I Cascade Style Sheets (Fogli di Stile a Cascata) sono istruzioni relative alla formattazione, al posizionamento e al rendering di una o più
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 6 Introduzione agli Style Sheets 6.1 Cosa sono gli Style
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
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)
Linguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language
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
(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE
Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA
CSS 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
- 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
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
CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09
CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 Selettori class e id! Sono due attributi fondamentali applicabili a tutti gli elementi! Consentono di superare le limitazioni intrinseche
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
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
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
Ottimizzare i CSS scrivendo meno codice
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.04. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
I PRINCIPALI TAG DEL LINGUAGGIO HTML
Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo
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
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
Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4
Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza , ,, Paragrafi
Guida ai fogli di stile CSS. Materiale tratto da:
Guida ai fogli di stile CSS Materiale tratto da: http://css.html.it/guide/leggi/2/guida-css-di-base/ Come è fatto un CSS: regole e commenti Com'è fatta una regola Figura 1. Struttura di una regola L'illustrazione
Il linguaggio HTML - Nozioni di base (2)
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -
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
Interfaccia di Word. Scheda File: contiene i comandi per intervenire sul documento, come Nuovo, Apri, Salva con nome, Stampa e Chiudi.
Interfaccia di Word Barra del titolo: visualizza il nome di file del documento appena creato o che si sta modificando. Sul lato destro sono visibili i pulsanti Riduci a icona, Ripristina e Chiudi. Barra