Fogli di stile a cascata (CSS)
|
|
|
- Marcello Barone
- 7 anni fa
- Visualizzazioni
Transcript
1 Fogli di stile a cascata (CSS) November 25, Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML, impostando: tipi di carattere (font), sfondi, colori, layout, etc.... Una singola informazione di formattazione è detta stile. Gli stili permettono di gestire globalmente il formato delle pagine, e sono una valida alternativa all impostazione degli stili mediante gli attributi dei tag. Gli stili sono definiti da una sequenza di coppie {nome : valore;... ; nome : valore; } dove il nome si riferisce a una proprietà di stile ed è una parola in minuscolo o più parole in minuscolo separate da un trattino (-). Una definizione di stile si applica ad un insieme di marcatori determinato da un espressione detta selettore CSS che viene premessa a una lista di stili. Ecco due esempi: p {color : blue; font family : times; font style : italic; } h2 {font weight : bold; text align : center; }. Il primo applica a tutti i paragrafi il colore blu, il font times e il corsivo, mentre il secondo centra nella pagina i titoli h2 a cui è anche applicato il grassetto. Gli stili CSS si dicono a cascata perché lo stile di una pagina web è stabilito nell ordine da: 1. le definizioni dell autore della pagina, 2. le impostazioni e preferenze definite dall utente, 3. le impostazioni di default del browser. Gli stili si applicano secondo tre modalità: 1
2 stili in linea stili a livello di documento stili esterni 1.1 Stili in linea Gli stili in linea determinano il formato di un singolo tag e sono definiti usando l attributo style all interno del marcatore. Nel tag <h1 style= font-family:times ; font-style:italic; > Titolone </h1> il font e lo stile dei caratteri è determinato dall attributo style. 1.2 Stili a livello di documento Gli stili a livello di documento stabiliscono il formato globale dei tag HTML di un documento e si definiscono all interno di una coppia di tag <style> nell intestazione del documento: e.g., il testo <head>... <style> h1 {color: red; font-family: Arial,Helvetica, sans-serif; font-weight:bold; font-size: 24pt;} h2 {color: black; font-family: serif; font-size: 18pt; font-style: italic} </style>... </head> definisce lo stile dei tag h1 e h2 del documento. 1.3 Definizioni di stile esterne Mentre le due modalità precedenti si impiegano per applicare uno stile a un singolo documento, per applicare gli stessi stili in più documenti, si usano i fogli di stile esterni, scrivendo le impostazioni di stile in un file a parte, con estensione.css. Ogni documento HTML che vuole utilizzare le impostazioni definite nel file deve contenere nella propria intestazione il marcatore link: <link rel = stylesheet type= text/css href= miostile.css > </link> Nel file miostile.css sono contenuti gli stili CSS, omettendo i tag <link>. 2
3 2 I selettori, l attributo class e l attributo id Analizziamo ora altri tipi di selettori CSS. Ad esempio: 1. si può definire uno stesso stile per più tipi di marcatori, 2. si possono definire più stili applicabili a uno stesso tipo di marcatore, 3. si possono definire degli stili da applicare a qualsiasi marcatore, 4. si può definire uno stile a uno specifico marcatore. Il primo caso si risolve semplicemente raggruppando i tag. La dichiarazione h2,h3 {color: black; font-family: serif; font-size: 18pt; font-style: italic} assegna ai tag h2 e h3 lo stesso stile. Il secondo e il terzo caso si risolvono usando l attributo class dei tag. I tag con un uguale valore dell attributo class ricevono lo stesso stile. Per definire più stili applicabili a uno stesso tipo di marcatore si impiegano le classi regolari: <style> p.level1 {color: red; font-family: serif; font-size: 24pt;} p.level2 {color: black; font-family: sans serif; font-size: 18pt; font-style: italic ; text-align: justify; } </style> definisce le classi level1 e level2 per il tag <p>. Successivamente, si stabilisce a quale classe appartiene un tag <p>: <body> <p class= level1 > questo è il livello 1 </p> <p class= level2 > questo è il livello 2 </p> </body> Al primo paragrafo è applicato lo stile level1 mentre al secondo lo stile level2. Invece una classe generica non è associata ad alcun tag specifico e pertanto si può applicare a marcatori diversi: e.g. definiamo la classe highlight : <style>.highlight {color: yellow; font-family: Arial,sans-serif; background: blue;} </style> La classe highlight si usa in marcatori diversi per applicare lo stesso stile (sono scritte in giallo su sfondo blu con il font Arial) a un titolo h1 e a un paragrafo. 3
4 <h1 class= highlight > Titolone evidenziato </h1> <p>questo codice contiene due esempi di classe generica. Il primo, nel titolo.</p> <p class= highlight >Il secondo, in questo paragrafo.</p> Il quarto caso invece fa uso dell attributo id: #granderigaverde {color: green; font-family: arial; font-size: 24 pt;} L identificatore granderigaverde diventa il nome di un unico tag a cui si applica lo stile: <p id= granderigaverde > lo stile granderigaverde si applica solo a questa riga. </p> Il marcatore id consente di identificare i tag HTML; infatti, marcatori distinti devono avere (se definiti) valori distinti dell attributo id. Tutti i marcatori dispongono dell attributo id e dell attributo class. 3 I tag SPAN e DIV Per applicare lo stesso stile a più marcatori, questi vengono inseriti entro il tag <span>... </span> oppure entro il tag <div>... </div> Questi tag funzionano come contenitori di altri marcatori a cui applicare uno stile uniforme. La differenza tra i due marcatori è che il secondo provoca un ritorno a capo automatico. Così, gli elementi seguenti si troveranno sotto il contenuto del tag div. Lo stile da applicare è definito solo per il marcatore contenitore (span o div). Il codice seguente applica il colore verde ai tag h3 e p: <span style= color: green > <h3>introduzione</h3> <p>prima riga </p> </span> 4 Ereditarietà delle impostazioni di stile Un tag può acquisire automaticamente (ereditare) lo stile dei tag antenati, ovvero quei tag che lo contengono (ad es. un tag <li> può ereditare le proprietà di stile del tag <ul> in cui è contenuto). Questo non vale in generale, ma solo per certe proprietà di stile.per sapere se e quando l ereditarietà si applica occorre consultare la documentazione. 4
5 5 Alcune proprietà di stile significative Di seguito sono elencate alcune delle proprietà di stile più comuni. Nei fogli di stile, una lunghezza può essere espressa in: pixel, px; punti, pt; pica, pc; pollici, in; millimetri, mm; centimetri, cm; em square, cioè l altezza del font in uso, em; ex height, cioè l altezza della lettera x del font corrente, ex; oppure tramite percentuali, ad es. 50%, riferite all elemento contenitore. Le ultime tre unità di misura sono relative, perché dipendono da proprietà di alcuni elementi della pagina, mentre le altre unità di misura sono assolute. L uso di unità di misura relative garantisce il mantenimento delle proporzioni degli elementi di una pagina quando si ridimensioni la finestra del browser o si ingrandisce/riduce il contenuto della pagina. Visualizzazione display Colore e sfondo color descrive la modalità di visualizzazione. Può assumere i valori inline : l elemento è visualizzato sulla linea senza ritorni a capo; block : l elemento è preceduto e seguito da un ritorno a capo; none: l elemento non è visualizzato; altri valori per tag specifici. descrive il colore di un elemento. Il valore si esprime con un nome, ad es. green (solo per 16 colori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow); in esadecimale, ad es. #00ff00; in decimale, ad es. rgb(0,255,0). L attributo può assumere anche il valore: inherit : l elemento eredita il colore dell elemento contenitore; background-color descrive il colore di sfondo di un elemento. La specifica del colore è la stessa della proprietà color (nome, esadecimale, decimale, inherit). background-image descrive l URL di un immagine usata come texture per lo sfondo di un elemento. La sintassi dell URL è url(percorso), ad es. url(mypict.jpg). background-repeat descrive la modalità di ripetizione dell immagine di sfondo. L attributo può assumere i valori: repeat : l immagine è ripetuta sia in orizzontale che in verticale; 5
6 repeat-x : l immagine è ripetuta solo in orizzontale ; repeat-y : l immagine è ripetuta solo in verticale ; no-repeat : l immagine non è ripetuta. background-position descrive la posizione di partenza dell immagine di sfondo. L attributo può assumere una serie di valori predefiniti oppure le coordinate di un punto specifico. Font font-style descrive le possibili varianti di corsivo. L attributo può assumere i valori normal, italic, oblique. font-variant abilita l uso del maiuscoletto. L attributo può assumere i valori normal e small-caps. font-weight descrive le possibili varianti di grassetto. L attributo può assumere i valori lighter, normal, bold, bolder, e i multipli di 100 compresi tra 100 e 900. font-size descrive la dimensione dei caratteri. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura, oppure uno dei valori xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. line-height descrive la posizione di partenza dell immagine di sfondo. L attributo può assumere una serie di valori predefiniti oppure le coordinate di un punto specifico. font-family descrive il font usato. L attributo può assumere una lista di nomi di font separati da virgole. I nomi di font possono essere nomi di font reali oppure nomi di font generici (detti anche da alcuni logici) : serif, sans-serif, cursive, fantasy, monospace. A un font generico corrisponde un font determinato dal browser o dall utente con caratteristiche simili a quelle del font generico. Ad esempio, font-family: Arial, Helvetica, sans-serif stabilisce che il font da utilizzare è Arial; se questo è assente, Helvetica; oppure, in caso di un ulteriore assenza, il font corrispondente al font generico sans-serif. L esempio appena visto indica una pratica molto comune per risolvere il problema della scelta di un font che sia visualizzabile, se non allo stesso modo, in modo accettabile su un qualsiasi sistema. font descrive tutte le proprietà precedentemente elencate. L attributo può assumere come valore una sequenza di valori delle proprietà sopra elencate, separate da spazi. 6
7 Testo letter-spacing descrive la spaziatura dei caratteri. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura, oppure il valore normal. word-spacing descrive la spaziatura delle parole. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura, oppure il valore normal. text-align descrive l allineamento del testo. L attributo può assumere i valori left,right,center,justify. text-decoration descrive la decorazione del testo. L attributo può assumere i valori none,underline,overline,line-through, blink. text-transform descrive l uso del maiuscolo e del minuscolo. L attributo può assumere i valori capitalize,uppercase,lowercase,none. Box model Ogni elemento (X)HTML occupa un area rettangolare detta box, costituita da: un area più esterna, detta margine, che gira attorno al confine esterno del box e lo separa dai box adiacenti; un area più interna detta bordo, un area di separazione tra il bordo e l area occupata dal contenuto dell elemento detta padding, nella zona più interna, il contenuto dell elemento. margin-top, margin-right, margin-bottom, margin-left descrivono le dimensioni dei quattro lati del margine. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura. Si può anche assegnare un singolo valore alla proprietà margin per assegnarlo a tutti i quattro lati. padding-top, padding-right, padding-bottom, padding-left descrivono le dimensioni dei quattro lati del padding. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura. Si può anche assegnare un singolo valore alla proprietà padding per assegnarlo a tutti i quattro lati. width, height descrivono le dimensioni del contenuto. L attributo assume come valore una lunghezza espressa in una qualsiasi unità di misura. 7
8 border-width descrive lo spessore del bordo. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura o uno dei valori thin, medium, thick. Si possono anche impostare separatamente gli spessori dei quattro lati con le proprietà border-top-width, border-right-width, border-bottom-width, border-left-width. border-style descrive lo stile del bordo. L attributo può assumere uno dei valori none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Si possono anche impostare separatamente gli stili dei quattro lati con le proprietà border-top-style, border-right-style, border-bottom-style, border-left-style. border-color descrive il colore del bordo. L attributo può assumere uno dei valori none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Si possono anche impostare separatamente gli stili dei quattro lati con le proprietà border-top-style, border-right-style, border-bottom-style, border-left-style. border Posizionamento position References descrive l insieme delle proprietà del bordo, così come avviene per la proprietà font. descrive la regola di posizionamento di un elemento. L attributo può assumere i valori static: è il valore predefinito. Gli elementi sono posizionati in base al loro ordine nel codice (X)HTML e alle loro dimensioni; relative: in questo caso, un elemento è spostato rispetto alla posizione che avrebbe nel caso in cui il valore di position fosse static. Lo spostamento è determinato dalle proprietà top, left, right, bottom che possono assumere come valore una lunghezza oppure il valore auto; absolute : la posizione dell elemento è determinata dai valori delle proprietà top, left, right, bottom che esprimono la distanza rispetto al primo elemento contenitore con valore di position uguale a static. In caso di assenza di un tale elemento, le distanze si riferiscono ai margini del documento. fixed : la posizione dell elemento è determinata dai valori delle proprietà top, left, right, bottom che esprimono la distanza rispetto alla finestra del browser. L elemento apparirà sempre nella stessa posizione, anche quando si scorre la pagina. [1] V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione web lato server, Apogeo,
9 [2] D. Raggett, Adding a touch of style, 9
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
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
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
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
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
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
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
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
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
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
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:
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
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
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
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
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
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...
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
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
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();
Contenuto vs Stile: un esempio
I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle pagine. Molto spesso, invece degli appositi tag, si utilizzano le tabelle per posizionare
CSS. Cascading Style Sheets. 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
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
I CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07
I CSS o Fogli di stile Telematica per le arti e lo spettacolo a.a. 2006/07 Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero
CSS 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
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
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
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
* 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
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
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
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
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
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
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
<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
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:
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
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 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
(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
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)
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
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
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
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
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
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
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
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
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
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
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
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)
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
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
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:
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
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
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
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.
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,
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
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
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
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
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...
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
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
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
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
<!-- 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
APPLICAZIONI WEB E INTRANET CON PHP
APPLICAZIONI WEB E INTRANET CON PHP Novembre 2005 Dott. Ing. Bianchini Stefano CSS Concetti di base Cascatine Syle Sheets (CSS) è uno degli standard del W3C che consentono di controllare l aspetto visivo
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.
Tabelle. Esempio 20. Inserire righe e colonne. Dimensioni delle tabelle. Attributi del tag TABLE INFO WEB LEZIONE N.6
Tabelle INFO WEB LEZIONE N.6 RAVENNA, 2 APRILE 2008 In HTML le tabelle vengono largamente utilizzate per organizzare i dati in tabelle creare il layout della pagina servendosi di tabelle nascoste Si definiscono
HTML Guida di riferimento
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici
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)
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ù
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
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
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
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
MACROSTRUTTURA DEL DOCUMENTO HTML. Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO
MACROSTRUTTURA DEL DOCUMENTO HTML Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO Denominazione Nome del marcatore Descrizione Documento All'inizio e alla
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
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
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
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
Informatica di Base. Programma Lezioni
Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi
Introduzione al Linguaggio HTML
Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la
Un introduzione a HTML
Fluency Un introduzione a HTML Capitolo 3 HTML HyperText Markup Language Tag descrivono il formato della pagina Web Formattare con i tag Parole o sigle racchiuse tra parentesi angolari Si usano a coppie
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
Copiare le caratteristiche di formattazione da un testo ad un altro.
112 ECDL Guida facile 3.3.1.6 Copiare le caratteristiche di formattazione da un testo ad un altro. Fra le possibilità offerte da questo programma, esiste anche quella di copiare solo il formato (colore
ELEMENTI GENERICI. Programmazione Web 1
ELEMENTI GENERICI Programmazione Web 1 Elemen/ generici Se nessun elemento descrive il vostro contenuto block element generic divisione di contenuto come inline element generico iden:fica
Anno scolastico INFORMATICA. 2. Conoscere e classificare il software
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI Schiaparelli via Settembrini 4, 20124 Milano tel. 02/2022931 fax 29512285 E-mail schiaparelli@libero.it Gramsci L.go Sereni 1, 20133 Milano tel.