I fogli di stile Inline si specificano usando l attibuto style dei tag xhtml <p style= color: red; >esempio</p>
|
|
|
- Daniele Monaco
- 6 anni fa
- Visualizzazioni
Transcript
1 CSS Cascading Style Sheets Inne, Internal I fog di stile Inne si specificano usando l attibuto style dei tag xhtml <p style= color: red; >esempio</p> I fog di stile Internal si specificano usando il tag style all interno dei tag head <head> <title>un titolo qualsiasi</title> <style type= text/css > p {color: red;} </style> </head> 1
2 External I fog di stile External si specificano in un file separato ed aggiungendo un collegamento con il tag nk tra i tag head <head> <title>un titolo qualsiasi</title> <nk rel= stylesheet href= filechecontienelostile.css type= text/css /> </head> Regole Le regole di stile hanno la forma proprietà: valore; Se la regola di stile appare nell attibuto style di un tag xhtml, allora si appca solo a quello specifico tag. <p style= color: red; >Questo paragrafo sarà rosso</p> <p>questo no.</p> 2
3 Regole Le regole di stile Internal ed External hanno la forma: selettore { proprietà: valore; } Il selettore indica il tag a cui va appcata la regola di stile Esempio: con questa regola tutti i tag p saranno di colore rosso <style type= text/css > p {color: red;} </style> Albero del documento html head body title h2 p ul p em em 3
4 Selettore di discendente Il selettore e f seleziona tutti i tag f discendenti del tag e Esempio 1: ul em Esempio 2: body em head title h2 html body p em ul em p Selettore di figo Il selettore e > f html seleziona tutti i tag f fig del tag e head body Esempio 1: ul > em non seleziona nulla Esempio 2: > em title h2 p em ul em p 4
5 Selettore di adiacente Il selettore e + f html seleziona tutti i tag f immediatamente preceduti dal tag e head title h2 p body ul p Esempio 1: h2 + p em Esempio 2: + em Altri selettori * è il selettore universale, ovvero seleziona tutti i tag g[foo] seleziona tutti i tag g con attibuto foo g[foo= abc ] seleziona tutti i tag g con attributo foo di valore abc Infine, i selettori di una regola possono essere raggruppati usando la virgola p, em, a[href] {color: red} 5
6 Selettore di classe e id Tutti i tag xhtml possono avere g attributi class id class identifica una classe di tag il cui nome può apparire più volte nel documento. Non ci possone essere invece due tag con id uguale. <p class= esempio id= primopar > NO! del testo </p><p id= primopar > del testo<em class= esempio >del</em> testo </p> e.abc seleziona tutti i tag e di classe abc e#abc seleziona il tag e con id abc Selettori specia a:nk seleziona i collegamenti ipertestua non visitati a:visited seleziona i collegamenti ipertestua già visitati a:hover seleziona i collegamenti ipertestua quando il puntatore del mouse sta sopra e:first-ne seleziona la prima nea di testo contenuta nel tag e e:first-letter seleziona la prima lettera del testo contenuto nel tag e 6
7 Raggruppare tag e testo I tag div e span servono per raggruppare altri tag o testo per appcare una regola di stile <div style= color:red; > <h3>studente</h3> <p>anno di corso: primo</p> <ul> <>Nome <span style= color:blue; >Mario</span> </> <>Cognome <span style= color:green; >Rossi</span> </> </ul> </div> Box model 7
8 Margini margin-top: 3cm; margine alto di 3 centimetri margin-right: 2em; margine destro di 2 volte la dimensione del font margin-bottom: 12pt; margine basso di 12 punti tipografici margin-left: 1.06px; margine sinistro di 1.06 pixel Margini margin: 4mm; tutti i margini di 4 milmetri margin: 2ex 1.2in; margini alto e basso di 2 volte l altezza di una x, margini sinistro e destro di 1.2 polci margin: 10pt 20% auto; margine alto di 10 punti, margini sinistro e destro il 20% della lunghezza del box che contiene l elemento, margine basso calcolato dal browser margin: 1cm 2cm 3cm 4cm; margine alto 1 centimetro, destro 2, basso 3, sinistro 4 8
9 Padding Le proprietà padding-top padding-right padding-bottom padding-left e l abbreviazione padding hanno la stessa sintassi di margin. Dimensione del bordo La dimensione del bordo si esprime con le proprietà border-top-width, border-right-width, border-bottom-width, border-left-width e l abbreviazione border-width Le proprietà border(-...)-width possono assumere i valori thin medium thick oppure una lunghezza 9
10 Stile del bordo Lo stile del bordo si esprime con le proprietà border-top-style, border-right-style, border-bottom-style, border-left-style e l abbreviazione border-style Le proprietà border(-...)-style possono assumere i valori none, hidden, dotted, dashed, sod, double, groove, ridge, inset, outset Colori I colori possono essere espressi nei seguenti modi: con un nome aqua, black, blue, fuchsia, gray, green, me, maroon, navy, ove, purple, red, silver, teal, white, yellow specificando le componenti RGB (rosso, verde, blu) nella sintesi addittiva con 3 o 6 valori esadecima (0-9a-f) Es.: #ff0000 corrisponde al rosso, #00ff00 corrisponde al verde, #ffff00 corrisponde a mischiare rosso e verde e quindi si ottiene il giallo 10
11 Colori I colori possono anche essere espressi specificando le componenti RGB in decimale (0-255) o in percentuale rgb(255,0,0), #f00, #ff0000, rgb(100%,0%,0%), red, sono tutti modi diversi di indicare il colore rosso. questa scritta ha colore rgb(135,203,197) Colore del bordo Il colore del bordo si esprime con le proprietà border-top-color, border-right-color, border-bottom-color, border-left-color e l abbreviazione border-color Le proprietà border(-...)-color possono assumere i valori un colore specificato con un nome o RGB transparent 11
12 Abbreviazione border Le proprietà border-top, border-right, border-bottom, border-left sono abbreviazioni per specificare (in quest ordine) dimensione, stile e colore del bordo, rispettivamente, superiore, destro, inferiore e sinistro Es. border-top: thin double yellow; La proprietà border è un abbreviazione che serve a specificare la stessa dimensione, lo stesso stile e colore per tutti e 4 i bordi. Attenzione! Non funziona come le abbreviazioni margin e padding! Colore ed immagine di sfondo Con riferimento al box model, le proprietà dello sfondo si riferiscono al contenuto ed al padding (i margini sono sempre trasparenti) Il colore dello sfondo si definisce usando la proprietà background-color background-image permette di impostare un immagine di sfondo. Può assumere i valori url(... ) none 12
13 Immagine di sfondo background-repeat specifica se l immagine di sfondo deve essere ripetuta o meno. Può assumere i valori repeat, repeat-x, repeat-y, no-repeat background-attachment specifica se l immagine deve rimanere fissa o no quando si scorre il documento. Assume i valori scroll, fixed Posizione dell immagine di sfondo background-position specifica la posizione dell imagine di sfondo. Assume una coppia di valori che possono essere: due percentua. 0% 0% indica l angolo superiore sinistro, 100% 100% l angolo inferiore destro due lunghezze. se viene specificata una sola percentuale o una sola lunghezza, il valore si riferisce alla posizione orizzontale, mentre la verticale viene impostata a 50%. Quando vengono indicati due valori, il primo si riferisce alla posizione orizzontale, il secondo alla verticale. primo valore tra top, center, bottom secondo valore tra left, center, right 13
14 Abbreviazione background La proprietà background può essere utizzata per specificare con una sola regola tutte le proprietà dello sfondo Esempio: background: repeat-x top left url( pippo.jpg ); è un abbreviazione equivalente a background-repeat: repeat-x; background-position: top left; background-image: url( pippo.jpg ); Proprietà del testo La proprietà color definisce il colore del testo. word-spacing e letter-spacing definiscono la spaziatura tra parole e lettere. Assumono come valori normal una lunghezza text-agn specifica l alneamento del testo. Assume i valori left, right, center, justify Con text-indent si imposta il rientro della prima nea del testo. Il valore può essere una lunghezza o una percentuale 14
15 Testo sottoneato, maiuscolo, etc. text-decoration assume i valori underne overne ne-through bnk none text-transform assume i valori capitaze uppercase lowercase none Set di caratteri La proprietà font-family permette di selezionare il carattere da utizzare Il valore può essere una sta di nomi di font o famige generi che di font separati da virgole Il browser tenterà di visuazzare i caratteri utizzando i font in sequenza (se il primo font non è installato, prova con il secondo e così via) Es.: font-family: verdana, helvetica, arial, sans-serif; 15
16 Famige generiche di font serif (con grazie) Times New Roman, Bookman Old Style, Garamond, Palatino, Century Schoolbook sans-serif (senza grazie) MS Arial, MS Verdana, Helvetica, Comic Sans MS, Microsoft Sans Serif, Lucida Console cursive AdineKirnberg, Exmouth, Willegha fantasy wingdings, ZapfDingbats monospace Courier, MS Courier New Stile, variante e peso dei caratteri font-style può assume i valori normal, obque (incnato), itac (corsivo) font-variant può assumere i valori normal, small-caps (maiuscoletto) font-weight può assumere i valori 100, 200, 300, 400, 500, 600, 700, 800, 900 normal (come 400) bold (come 700) bolder (il valore successivo), ghter (il valore precedente) 16
17 Dimensione del carattere La dimensione del carattere si specifica con la proprietà font-size. I valori possibi sono: xx-small, x-small, small, medium, large, x-large, xx-large larger, smaller una lunghezza o una percentuale ne-height specifica l altezza della nea. Può assumere come valori normal, una lunghezza o una percentuale Abbreviazione font La proprietà font specifica con una sola regola (in ordine) font-style font-variant font-weight fontsize/ne-height font-family font-family deve sempre essere presente se si specifica /ne-height si deve specificare anche font-size Es. font: serif; font: obque 12pt/110% arial, sans-serif; font: small-caps 12pt; NO 17
18 Liste st-style-type permette di specificare il tipo di sta. Assume i valori: disc, circle, square decimal, lower-roman, upper-roman, lower-alpha, upper-alpha st-style-position permette di controllare il rientro deg elementi della sta. I valori possibi sono: inside, outside st-style-image permette di specificare un immagine come per g elementi della sta. I valori possibi sono: url(... ) none st-style è l abbreviazione per le tre proprietà sopra Cursore È possibile modificare l aspetto del puntatore del mouse con la proprietà cursor. I valori possibi sono: auto, crosshair, pointer, move, text, wait, help, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize url(... ) 18
19 Posizionamento La posizione deg elementi di un file xhtml può essere alterata usando le proprietà position per determinare il modo di posizionamento valori possibi sono static, relative, absolute, fixed. Il posizionamento di default è static; con relative l elemento viene spostato dalla posizione normale secondo i valori di left, right, top e bottom; absolute e fixed posizionano in modo assoluto, ma fixed non si muove quando si scorre la pagina. left, right, top, bottom valori possibi sono auto, una percentuale o una lunghezza Dimensioni Le dimensioni di un elemento xhtml possono essere modificate usando le proprietà height e width che possono assumere come valori auto, una percentuale o una lunghezza Se il contenuto di un elemento è più grande delle dimensioni impostate usando height e width, si può far apparire barre di scorrimento oppure ritagare il contenuto usando la proprietà overflow che assume i valori visible, hidden, scroll, auto 19
20 z-index Se due o più elementi si sovrappongono, è possibile impostare l ordine utizzando la proprietà z-index che assume come valore un intero o auto Esempio z-index: 0 primo paragrafo secondo paragrafo z-index: -2 Elementi mobi In alcuni casi, soprattutto con le immagini o le tabelle, è utile permettere che un oggetto sia posizionato tutto a destra o sinistra con il testo che scorre accanto. Per ottenere un tale risultato si utizza la proprietà float che assume i valori left, right, none La proprietà clear specifica quale parte di un elemento non deve essere adiacente ad un elemento mobile. Assume i valori left, right, both, none 20
21 Nascondere elementi display: none; permette di nascondere un elemento visibity: hidden; nasconde anch esso un elemento, ma lascia uno spazio vuoto Tipi di media Con i fog di stile inne ed external è possibile definire regole diverse a seconda del tipo di media Alcuni media possibi sono aural, braille, handheld, print, projector, screen Per mitare alcune regole di stile ad uno specifico media è necessario usare il e raggruppare le regole tra parentesi graffe Es. regole solo per la print { p {text-agn: justified;} em {font-weight: bold;} } 21
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,
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
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 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:
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
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
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...
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
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
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
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
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:
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
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
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
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
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
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
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
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
CSS. Cascading Style Sheets. 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
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
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
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
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
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
* 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
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();
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
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
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
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
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
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
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
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
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
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
Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole
Fogli di stile CSS I fogli di stile permettono la separazione della forma dal contenuto. Il concetto di foglio di stile è quello di creare un documento separato che contenga tutte le informazioni necessarie
CSS 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
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 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
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
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
Cascading Style Sheet
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)
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
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
(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
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:
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
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
<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
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)
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
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
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
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
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
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)
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
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
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 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
CSS - CASCADING STYLE SHEETS. Programmazione Web 1
CSS - CASCADING STYLE SHEETS Programmazione Web 1 CSS Standard W3C Definisce la presentazione del documento HTML (o in generale XML) Cioè come un documento viene visualizzato in cotesd diversi CSS è un
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
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)
Informatica d ufficio
Informatica d ufficio Anno Accademico 2008/2009 Lezione N 3 Microsoft Word - prima parte Microsoft Word E un Word processor,cioè un programma che consente di creare e modificare documenti. Prevede numerose
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
Giuseppe Della Penna. Università degli Studi di L Aquila.
Cascading Style Sheets Giuseppe Della Penna Università degli Studi di L Aquila giuseppe.dellapenna@univaq.it http://www.di.univaq.it/gdellape This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike
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,
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
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
Tabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
<!-- 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
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:
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
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
Lezione 7: Introduzione ai layout
Lezione 7: Introduzione ai layout Principali tipi di layout; Gli strumentidel mestiere: Il box model; Elementi di blocco e in linea; e ; Il posizionamento. Tutorial: un semplice layout a una
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
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
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
CSS: Colori, background, gradienti
Laboratorio di Tecnologie Web CSS: Colori, background, gradienti Dott. Stefano Burigat www.dimi.uniud.it/burigat Colore di foreground Come abbiamo visto in precedenti esempi, è possibile modificare il
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ù
KOMPOZER CONSIGLI E TRUCCHI
KOMPOZER CONSIGLI E TRUCCHI Parte terza DUE MENU' Chi realizza siti web prima o dopo (piuttosto prima) avverte la necessità di avere un menù di navigazione un po' diverso da una serie di semplici link,
DYNAMIC SLIDER NEWS2 PRO
Dynamic Sliders News2 PRO, consente di visualizzare in uno slider le immagini abbinate ai contenuti e loro brevi descrizioni che volete pubblicare nel modulo. Il modulo Dynamic Slider Newse PRO e completamente
Il tag MARQUEE. L opzione ALIGN
Il tag MARQUEE 1 Internet Explorrer offre ai creatori Web un modo facile per inserire una sezione di testo animato in una pagina. In particolare sarà possibile visualizzare una parola o una frase che si
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
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
Frames. Come organizzare le pagine web usando i frames. Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice
Frames Come organizzare le pagine web usando i frames Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice Usare i frame Per poter usare i frame è necessario comunicare
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.
Cimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
Tecniche di buona progettazione di pagine web. Quali font scegliere? Serif contro Sans-serif. A.Lioy - Politecnico di Torino ( ) J.
Tecniche di buona progettazione di pagine web Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Quali font scegliere? non usare mai più di 3 o 4 font diversi per pagina
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
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
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.
Sommario. Cascading Style Sheet - CSS. Obiettivi. Introduzione
Cascading Style Sheet - CSS Cascading Style Sheet 1 Sommario Introduzione Stili Inline Fogli di stile Embedded Gerarchia Collegamenti a stili esterni Validazione di fogli di stile Elementi di posizione
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