CSS CASCADING STYLE SHEET Alberto Ferrari. Cascading Style Sheet I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per.

Slides:



Advertisements
Presentazioni simili
CSS (Cscading Style Sheet Fogli di stile a cascata)
Advertisements

HYPER TEXT MARK-UP LANGUAGE
CSS CASCADING STYLE SHEET Alberto Ferrari.
HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER.
HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER.
Il linguaggio HTML.
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione.
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Concetti Fondamentali versione.
TW Cascading Style Sheets Fabio Vitali. TW Introduzione Oggi vediamo CSS (Cascading Style Sheet) u L'esigenza di uno stile per HTML u L'introduzione di.
CSS: Cascading Style Sheets Specifiche del formato del documento tramite un linguaggio Come modelli.dot di Word o file di stile.sty per latex Separazione.
HTML e CSS Concetti base Comunicazione Multimediale.
Laboratorio di Applicazioni Informatiche II mod. A
CSS Cascading Style Sheet CSS2 – CSS/P. The goal: see this site
Cascading Style Sheet CSS2 – CSS/P
Caratteri Danilo Deana. Caratteri2 Identificare un tipo di carattere Quando il browser trova l'indicazione di un a famiglia di caratteri, deve stabilire.
Esempi sui CSS.
Fogli stile a cascata Danilo Deana.
Unintroduzione a HTML (II). 4-2 Includere figure con i tag immagine Le immagini possono essere usate come link utilizzando i tag àncora Formato del tag.
Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012.
Linguaggi per il Web Linguaggi di markup: CSS. Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme.
Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) HTML e i fogli di stile Dott.
Informatica Generale: laboratorio di informatica
CSS : Cascading Style Sheet
IL BOX MODEL Ogni box è caratterizzato da 1.Larghezza dello spazio per i contenuti ( width ) 2.Altezza dello spazio per i contenuti ( height ) 3.Spazio.
FORMATTARE LE LISTE DI LINK  MENU
Tecniche di accessibilità web Lezione 2 - Tecniche di layout avanzate Box model.
Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli cambiando la loro posizione nel tempo.
Cascading Style Sheet (Fogli di Stile in Cascata)
Paragrafi e allineamenti
HTML per iniziare Gianpaolo Cecere. 29 aprile Sintassi HTML I tag HTML sono direttive per i browser I tag sono contenitori per porzioni di documento.
HTML Lezione 3 Stili.
Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli.
HTML Lezione 7 Il modello dei contenitori. Gestire lo spazio tra gli elementi Lo spazio tra gli elementi della pagina o allinterno del contenuto di un.
Il linguaggio HTML Le pagine web sono file di testo scritte utilizzando il linguaggio HTML. I documenti HTML vanno racchiusi dentro una coppia di TAG.
CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina.
Tabelle HTML Le tabelle in HTML permettono di formattare del testo, delle immagini, altre tabelle … in righe e colonne. Per poter affiancare due immagini.
Il Linguaggio HTML “Profe, ma io a casa l’HTML non ce l’ho!“
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
Informatica Umanistica A.A. 2008/2009 LEZIONE 3 HTML + CSS Il contenuto e la sua visualizzazione: separati finalmente!
I fogli di stile CSS 1 Cristina Gena
CSS Cascade Style Sheets.
Intro CSS e tag DIV. INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita.
Floating div. IL FLUSSO I diversi box sono inseriti nel così detto “flusso” I box a livello di blocco (compresi i box anonimi) si dispongono uno di seguito.
Corso Web CSV – Andiamo on-line 1 Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web.
Sintassi e regole dei CSS
TAG e CSS Ricalcare la grgilia di impaginazione. UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti),
La struttura del documento
Note sull’esame L’esame è composto da due parti:
Tabelle in HTML Le tabelle permettono di creare una struttura matriciale (un foglio con tanti quadretti) Vengono utilizzate non solo per presentare dei.
Tag TABLE. Oltre ad avere la funzione di rappresentare dati di ogni genere allineati in righe e colonne, le tabelle in HTML si utilizzano per costruire.
Internet e HTML Diffusione di informazioni mediante la rete Internet.
HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag SintassiEsempi:
HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.
Tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: ; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata.
PROGETTO… Internet Providers, registrazione del dominio Costruire una home page … e renderla visibile sul Web.
Lezione 2: Formattazione del testo.  (X)HTML è una versione di HTML basata sul metalinguaggio XML e ha una sintassi rigorosa. Serve per definire la struttura.
CSS Cascading Style Sheet
Master in Telemedicina HTML per iniziare Maria Simi, dicembre 2004 [da un tutorial di Rigget]
Introduzione ai fogli di stile Brevi note a cura di Emanuele Lana
Il Fogli di Stile - CSS.
Riprendendo Il tag il tag Div rappresenta un contenitore. Tutto quello che è incluso fra il tag iniziale e quello di chiusura reagisce secondo gli stili.
INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti.
Una pagina HTML non è altro che un insieme di box rettangolari e che il flusso dell’informazione è sempre verticale. Gli elementi si dispongono sempre.
Linguaggi per il Web Linguaggi di markup: CSS. Fogli di stile Cascading Style Sheets Fogli di stile sovrapposti DEFINIZIONE Il CSS è l’insieme delle regole.
Float - ripresa. Float left: dispone a pila tutti i div sulla sinistra.
HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language.
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.
LEZIONE 04 Riepilogo CSS. SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera.
Linguaggi di markup: CSS
Formattazione visual font –caratteri –tabelle
Transcript della presentazione:

CSS CASCADING STYLE SHEET Alberto Ferrari

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 dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione. Wikipedia

Separazione contenuto/layout I tag html erano stati in origine studiati per definire il contenuto di un documento html Il layout del documento doveva essere preso in carica dal browser, senza usare tag di formattazione

Sintassi Css La più semplice regola css è composta di tre parti: un selettore, una proprietà ed un valore: selettore{proprietà: valore} Il selettore può essere lelemento html che si vuole definire La proprietà è lattributo che si vuole cambiare Alla proprietà è associato un valore La proprietà e il valore sono separati da due-punti e racchiusi tra parentesi graffe body {color: black}

Come inserire un foglio di stile Fogli di stile esterni Fogli si stile interni Stile inline

Fogli di stile esterni Foglio esterno: ideale se lapplicazione ha molte pagine Si può cambiare laspetto di un intero sito modificando un solo file Ogni pagina deve essere collegata al foglio di stile Tag allinterno della sezione head Il browser leggerà le definizioni di stile dal file miostile.css, e formatterà il documento di conseguenza

Scrivere fogli di stile Un foglio di stile esterno può essere scritto in qualsiasi editor di testo Il file non deve contenere alcun tag html Il foglio di stile deve essere salvato con estensione.css Un esempio di foglio di stile: body {background-image: url(immagini/miosfondo.gif")} p {margin-left: 20px}

Fogli di stile interni Un foglio di stile interno può essere usato quando un documento html ha uno stile unico Si definisce nella sezione head con il tag Si definisce nella sezione head con il tag <head> hr {color: red} p {margin-left: 20px} body {background-image: url("imagini/foto.jpg")} </style></head>

Stile inline Uno stile inline fa perdere molti dei vantaggi dei fogli di stile, mischia il contenuto con la presentazione Metodo da usare quando uno stile deve essere applicato ad una sola occorrenza di un elemento in un documento Per definire uno stile inline si usa lattributo style dellelemento da formattare Lattributo style può contenere qualsiasi proprietà css Testo del paragrafo Testo del paragrafo

Ordine di priorità (cascata) Gli stili possono essere specificati in un singolo elemento html, nella sezione di una pagina html, o in un file css esterno Quale stile sarà usato quando è specificato più di uno stile per un elemento html? Tutti gli stili vengono raccolti a cascata in un nuovo foglio di stile virtuale secondo le seguenti regole Default del browser (priorità più bassa) Foglio di stile esterno Foglio di stile interno (nella sezione ) Stile inline (nellelemento html – priorità più alta)

Sintassi Css - Regole Se il valore è composto da più parole, bisogna racchiuderlo tra virgolette doppie Se si vuole specificare più di una proprietà, bisogna separarle con un punto-e-virgola Lesempio mostra come definire un paragrafo con allineamento centrato e colore del testo rosso p { text-align: center; color: red; font-family: "sans serif"; }

Sintassi Css - Raggruppare i selettori Si possono raggruppare i selettori: bisogna separare i selettori con una virgola Nellesempio gli elementi di titolo sono raggruppati; ogni elemento di titolo sarà verde h1, h2, h3, h4, h5, h6 { color: green; }

Selettore di classe Con il selettore di classe si possono definire stili diversi per uno stesso tipo di elemento html Es. due tipi di paragrafo: uno allineato a destra e uno allineato al centro p.firma {text-align: right} p.importante {text-align: center}

Use dei selettori di classe Bisogna impostare lattributo class nel documento html Paragrafo che sarà allineato a destra Paragrafo che risulterà centrato. Paragrafo che sarà allineato a destra Paragrafo che risulterà centrato.

Classe Si può omettere il nome del tag nel selettore per definire uno stile da applicare a tutti gli elementi html di una certa classe Es. Allineare al centro tutti gli elementi di classe importante.importante {text-align: center} Sia lelemento h1 che p sono di classe importante Entrambi gli elementi seguiranno le regole del selettore.importante Titolo centrato Anche questo paragrafo centrato Titolo centrato Anche questo paragrafo centrato

Selettore id Il selettore id è diverso dal selettore class, mentre un selettore class può applicarsi a molti elementi su una pagina, il selettore id si applica ad un solo elemento Un attributo id deve essere unico allinterno del documento La regola di stile qui sotto sarà applicata ad un elemento p che ha il valore di id posto a para1 p#para1 { text-align: center; color: red; } La regola di stile qui sotto sarà applicata all elemento avente come id il valore xyz #xyz {color: green} Esempio testo Esempio testo

Commenti I commenti vengono ignorati dal browser Un commento comincia con /* e termina con */ /* commento*/ p { text-align: center; /* altro commento */ color: black; font-family: arial; }

Sfondo background-color – Imposta il colore di sfondo di un elemento background-image – Imposta una immagine come sfondo – url(…) background-repeat – Imposta la ripetizione di una immagine di sfondo – repeat, repeat-x, repeat-y, no-repeat background-attachment – Immagine di sfondo fissa o che scorre con il testo – scroll, fixed background-position – Posizione di partenza di una immagine di sfondo – top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x- pos y-pos background – Imposta tutte assieme le proprietà dello sfondo

Testo color – Colore del testo direction – Direzione del testo – ltr, rtl text-align – Allineamento – left, right, center, justify text-decoration – Decorazione – none, underline, overline, line- through, blink text-indent – Indentazione della prima riga – length, % text-shadow – Ombra text-transform – Controlla le lettere – none, capitalize, uppercase, lowercase

Font font-style – Stile, corsivo – normal, italic font-variant – Maiuscoletto o normale – normal, small-caps font-weight – Peso, grassetto – normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-size – Dimensione – xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, % font-family – Lista con priorità di nomi di famiglie di font e/o nomi di famiglie generiche – family-name, generic-family (serif, sans-serif, cursive, fantasy, monospace) font – Imposta tutte le proprietà del font

Font - dimensioni px: misura in pixel (fissa rispetto a preferenze utente e risoluzione monitor) pt: punti tipografici, 1/72 pollice (fissa rispetto a preferenze utente) em: rispetto alla dimensione di font attuale per lelemento %: rispetto alla dimensione di font dellelemento genitore

Box model

Bordi border-width – Ampiezza dei quattro bordi – 1-4 valori () border-width – Ampiezza dei quattro bordi – 1-4 valori () border-style – Quattro bordi – 1-4 valori – none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-style – Quattro bordi – 1-4 valori – none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color – Colore – 1-4 valori – color border-color – Colore – 1-4 valori – color border – Imposta tutte le proprietà (uguali) per i quattro bordi border – Imposta tutte le proprietà (uguali) per i quattro bordi.important { border: 2px dashed red; }.important { border: 2px dashed red; } border-top, border-right, … – Imposta tutte le proprietà per il bordo superiore, destro, … border-top, border-right, … – Imposta tutte le proprietà per il bordo superiore, destro, … blockquote { border-left: 2px solid black; } blockquote { border-left: 2px solid black; } I bordi top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate: es. border-top- width I bordi top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate: es. border-top- width

Margini esterni e interni margin – Spazio attorno agli elementi – 1-4 valori margin – Spazio attorno agli elementi – 1-4 valori È possibile usare valori negativi per sovrapporre il contenuto È possibile usare valori negativi per sovrapporre il contenuto I margini top, right, bottom, left possono essere cambiati indipendentemente usando propietà separate, es. margin-top I margini top, right, bottom, left possono essere cambiati indipendentemente usando propietà separate, es. margin-top Possibile usare scorciatoia margin per impostare tutti i margini Possibile usare scorciatoia margin per impostare tutti i margini padding – Spazio tra il bordo e il contenuto degli elementi – 1-4 valori padding – Spazio tra il bordo e il contenuto degli elementi – 1-4 valori Non sono ammessi valori negativi Non sono ammessi valori negativi I padding top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate, es. padding-top I padding top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate, es. padding-top Possibile usare la scorciatoia padding per impostare tutti i padding Possibile usare la scorciatoia padding per impostare tutti i padding Alberto Ferrari

Dimensioni width – Ampiezza – auto, length, % height – Altezza – auto, length, %

Posizione bottom – Distanza del limite inferiore di un elemento rispetto allelemento che lo contiene – auto, %, length bottom – Distanza del limite inferiore di un elemento rispetto allelemento che lo contiene – auto, %, length left – Sinistra … – auto, %, length left – Sinistra … – auto, %, length right – Destra … – auto, %, length right – Destra … – auto, %, length top – Superiore – auto, %, length top – Superiore – auto, %, length vertical-align – Allineamento verticale – top, middle, bottom, baseline, sub, super, text-top, text-bottom, length, % vertical-align – Allineamento verticale – top, middle, bottom, baseline, sub, super, text-top, text-bottom, length, % position – Modalità di posizionamento – static, relative, absolute, fixed, inherit position – Modalità di posizionamento – static, relative, absolute, fixed, inherit float – Elementi posizionati a lato, circondati da testo – left, right, none, inherit float – Elementi posizionati a lato, circondati da testo – left, right, none, inherit

Visibilità z-index – Ordine nello stack (rilievo, valori più alti sono in primo piano) – auto, number overflow – Impostazione per contenuto più ampio dellarea disponibile – visible, hidden, scroll, auto visibility – Visibilità – visible, hidden (occupa spazio) display – Visualizzazione – none (non occupa spazio), block, inline, …