Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole
|
|
|
- Dino Carlucci
- 8 anni fa
- Visualizzazioni
Transcript
1 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 per la formattazione o la trasformazione di qualsiasi tipo di dati a cui si decida di applicarlo. Fogli di stile (2) Fogli di stile (3) Vantaggi: Risparmio di tempo e maggior praticità di gestione del sito (se si desidera infatti modificare l'aspetto di un sito web non è necessario effettuare le correzioni in ogni pagina ma è sufficiente modificare il foglio di stile per rendere effettivi i cambiamenti). Personalizzazione grafica, in quanto è l aspetto degli elementi è modificabile. Utilizzo di un unico foglio di stile per formattare più documenti. Possibilità di adattare la formattazione al tipo di utente e device che ha accesso ai dati. I fogli di stile oggi utilizzati sono essenzialmente di tre tipi: CSS (Cascading Style Sheet), utilizzati soprattutto per HTML. XSL (Extensible Stylesheet Language), utilizzati per formattare un documento XML destinato alla stampa. XSLT (Extensible Shylesheet Language Transformation), utilizzati per la trasformazione di un documento XML. Introduzione ai CSS Regole I CSS (Cascading Style Sheets) sono i fogli di stile più comunemente utilizzati per formattare pagine HTML o XHTML. Sono stati inventati da Bert Bos e Hakon Lie del W3C. La prima versione, rilasciata nel 1996 dal W3C conteneva specifiche relative all apparenza dei font, ai colori, al background di un documento. La seconda versione (CSS2), risalente al 1998, incorpora funzioni più avanzate per controllare il layout della pagina, la stampa, il supporto per lo scaricamento dei font. I fogli di stile CSS definiscono regole di visualizzazione. Ogni regola è costituita da un elenco di proprietà, ciascuna formata da due parti proprietà:valore Le regole vengono associate ai tag tag { proprietà1:valore1; proprietà2:valore2;... } 1
2 Differenze con HTML Sili interno o esterni? Gli attributi sono inseriti tra parentesi graffe { } Al posto del segno = vengono usati i due punti : Gli argomenti consecutivi sono separati dal segno ; Gli attributi composti da più termini sono separati da un trattino Se il valore dell attributo è composto da più parole sono necessarie le virgolette: p {font-family: "sans serif "} P {font-family: san serif,verdana} I fogli di stile possono essere posizionati: all interno del documento: <head> <style type= text/css > H1 {font-size:medium; color:#ff00ff} </style> </head> all interno di un singolo tag: <h1 style="color:red; texttransform:capitalize;"> Prova CSS per H1 </h1> in un file esterno con estensione.css. Stili esterni File CSS L utilizzo di un foglio di stile esterno è l unico modo per poter modificare un intero sito senza dover variare tutte le pagine HTML. Si inserisce nella sezione <head> del codice HTML, utilizzando il tag <link>. Il tag <link> ha come attributi: rel, che indica il tipo di risorsa a cui ci si collega. Nel nostro caso:rel= stylesheet type, che indica il tipo di foglio di stile. Nel nostro caso type= text/css href, che indica l URL del file.css. Esempio: <link > rel="stylesheet" type="text/css" href="stile.css" Un file CSS avrà la sintassi: body {background-color:white; color: black; fontfamily: Verdana, Arial, Helvetica; font-size: x- small; font-style: normal; text-align: left} a:link {background-color:white; color:#000066; font-family: Verdana, Arial, Helvetica; fontsize: small; font-style: normal; textdecoration: none; font-weight: bold} h1 {font-family:verdana, Arial, Helvetica; textalign: center; font-size:large; color:#000000;; font-style: normal} h2 {font-family: "Dungeon", Arial; color:#000000; text-align: left; font-size:medium; } ul {list-style-image: url(media/freccia.gif)} Ereditarietà Esempio di ereditarietà Il principio base di CSS è l ereditarietà delle proprietà. Ogni elemento innestato in un altro eredita le proprietà dell elemento che gli è padre. Esempio: se un paragrafo è scritto in carattere Times New Roman, colore blu, una parola in grassetto al suo interno resterà comunque sempre blu e in Times New Roman, oltre ad essere in grassetto. Nel codice CSS: P {color:blue, font-family:times New Roman; fontsize:200%} Nel codice HTML <p>prova per foglio di <b>stile </b> </p> 2
3 Ordine di ereditarietà Definizione di regola In un documento HTML gli stili possono essere definiti a diversi livelli. In caso di ripetute definizioni di stile, l ordine in cui vengono applicate è: 1. Browser default 2. External Style Sheet 3. Internal Style Sheet (all interno del tag <head>) 4. Inline Style (all interno dell elemento HTML) Per definire una regola la si associa a uno o più marcatori presenti all interno del codice HTML. p { text-align: center; color: black; font-family: arial } Nel caso i tag a cui si applica la regola siano più di uno devono essere separati da una virgola. h1,h2,h3,h4,h5,h6 { color: green } Classi Utilizzare una classe Le classi servono a definire degli stili astratti che possono: essere associati a diversi marcatori all interno di un documento definire diversi stili per un unico marcatore. Quando si crea una classe si usa la sintassi.nomeclasse.testocentrato {text-align: center} Nomemarcatore.nomeclasse p.testodestra {text-align: right} p.testosinistra{text-align: left} Quando una classe è stata definita in un foglio di stile può essere richiamata utilizzando l attributo class all interno di un marcatore, avente come valore il nome della classe che si desidera utilizzare. <p class= testodestra"> allineato a destra. </p> <p class= testocentrato"> allineato al centro. </p> Background Background (2) Per impostare un colore di background si utilizza il comando background-color che può avere come valori: Un codiceesadecimale Un nome di colore Per impostare un immagine di sfondo si utiliza l elemento background-image: url(stars.gif) che ha come valore il pathname di un immagine. background-position permette di definire la posizione di un immagine di background. Può avere come valori: top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% 3
4 Background (3) Background (4) background-repeat permette di impostare un eventuale ripetizione di un immagine di sfondo. repeat: ripetizione repeat-x: ripetizione orizzontale repeat-y: ripetizione verticale no-repeat: nessuna ripetizione background-attachment indica se il background (un immagine) si sposti o meno in relazione allo scrolling della pagina. scroll fixed Testo Testo (2) Color permette di settare il colore di un testo. Un codiceesadecimale Un nome di colore text-align permette di definire l allinemento di un testo. left: sinistra right: destra center: centrato justify : giustificato (è l unico modo standard di creare un testo giustificato!) text-decoration permette di stabilire un eventuale decorazione per un testo. None: nessuna Underline: sottolineato Overline: linea sopra line-through: linea sopra il testo Blink: lampeggiante text-indent permette di fissare un indentamento per un testo. Ha come valore una lunghezza in pixel o percentuale (anche negativa). Testo (3) Caratteri text-transform permette di trasformare il testo. none capitalize: parola con prima lettera maiuscola uppercase: lettere tutte maiuscole lowercase: lettere tutte minuscole word-spacing permette di settare uno spazio normale o esteso tra le lettere. normal : lunghezza in pixel o percentuale font-family permette di stabilire quale famiglia di font si vuole utilizzare. Generalmente ha come valore una lista di tre famiglie: P{font-family: arial, "lucida console",sans-serif} 4
5 Caratteri (2) Caratteri (3) font-size permette di definire la grandezza del carattere: xx-small x-small small medium large x-large xx-large smaller larger (grandezza fissa in punti) (grandezza in percentuale) font-stylepermette di definire lo stile di un carattere. normal italic oblique font-weight permette di definire le dimensioni di un carattere. normal bold bolder lighter Liste Liste (2) list-style -image permette di definire un marcatore (immagine) per una lista. Ha come valore il pathname dell immagine. list-style-image: url(blueball.gif); list-style -position permette di definire la posizione degli elementi della lista. inside: lista indentata outside: lista non indentata list-style-type permette di definire il tipo di marcatore che si vuole utilizzare: Ha come valori, tra gli altri: disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin Bordi Bordi (2) border-color permette di definire un colore per il bordo. Un codice esadecimale Un nome di colore. border-style permette di definire lo stile di un bordo. hidden dotted dashed solid double groove ridge inset outset border-width permette di definire la grandezza del bordo. thin medium thick 5
6 Margini Padding margin-bottom, margin-top, margin-left, marginrightpermettono di definire le dimensioni dei margini. Hanno come valore: auto (dimensione automatica fissata dal browser) padding-bottom, padding-left, padding-right, padding-top permettono di definire lo spazio tra il bordo e il contenuto di un elemento. Hanno come valori: Dimensioni Visualizzazione Height permette di definire l altezza di un elemento. auto width permette di definire la larghezza di un elemento. auto Cursorspecifica il tipo di cursore da utilizzare. url Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize Andres Baravalle w-resize Vitaveska Lanfranchi Text Visualizzazione (2) Visualizzazione (3) Displaydefinisce come un elemento verrà visualizzato. Ha come valori, tra gli altri: none inline block list-item run-in compact marker table Position fissa la posizione di un elemento. static relative absolute fixed 6
7 Allineamento Link vertical-align permette di definire l allineamento verticale di un elemento. baseline sub super top text-top middle bottom text-bottom Sono presenti alcune pseudoclassi per definire particolari visualizzazioni dei link. Link non visitati: a:link {color: #FF0000} Link visitati: a:visited {color: #00FF00} Mouse sopra un link: a:hover {color: #FF00FF} Link selezionato: a:active {color: #0000FF} L ordine delle pseudoclassi deve essere rispettato perché le opzioni abbiano effetto. Altre pseudoclassi Altre pseudoclassi (2) :first-child, applica un particolare stile al primo elemento figlio di un altro. a:first-child { text-decoration:none } <p> Visit <ahref=" and learn CSS! Visit <ahref=" and learn HTML! </p> :first-line applica una particolare formattazione alla prima riga di un testo. :first-letter applica una particolare formattazione alla prima lettera di una parola Livelli Livelli (2) Usare i fogli di stile permette di definire livelli nelle pagine. I livelli sono introdotti in HTML dal tag <div> L utilizzo dei livelli permette di: porre blocchi di informazioni in un determinato punto della pagina Porre blocchi di informazioni davanti o dietro ad altri I principali attributi utilizzabili per definire i livelli: Width: larghezza Height: altezza Left: distanza da sinistra Right: distanza da destra Bottom: distanza dal margine inferiore Top: distanza dal margine superiore Position (relative absolute): se il posizionamento dipende dalla posizione in cui è inserito il codice o dall origine della pagina. Z-index: posizione del livello rispetto agli altri 7
8 Livelli (3) Esempi di livelli: <div id="right" style="position:absolute; left:500px; top:95px; width:150px; height:450px; z-index:2"></div> <div id="right" style="position: relative; top: -12px; color: red"></div> 8
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
Indice delle proprietà. Valori speciali. Compatibilità
CSS: sintassi, e valori 29 Valore: 'fontstyle'? 'fontsize' [ /'lineheight' ]? Valore: Valori speciali Nei valori, caratteri come, e / devono essere riportati letteralmente.
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
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
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:
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
Copyright (c) 2008, 2009, 2010 Fabio Proietti
Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version
Corso di 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
e il Giardino di Zen CSS ESTERNI CSS INTERNI
e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS
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
- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.
I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come
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
(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
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
APPUNTI DI HTML (QUINTA LEZIONE)
APPUNTI DI HTML (QUINTA LEZIONE) Cascade style sheets II Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente dei contenuti che diffondeva, piuttosto che allo stile con il quale esso venivano
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
Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
Tabella 2.2 Indice delle proprietà Nome Valori Pr El Er Cp
Tabella 2.2 Indice delle background ['background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position'] background-attachment scroll fixed scroll background-color
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
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
Primi elementi di... Cascading Style Sheet (o Fogli di Stile)
ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del
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
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
Coder Dojo Tutorial 3
Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire
Tutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpi Docenti: Viviana Patti e Claudia Picardi Appendice B Proprietà CSS B.1 Font me della famiglia serif
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
SOMMARIO. INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5. 1.1 Linee guida CSS1 5 1.2 Linee guida CSS2 5. CAPITOLO 2 7 Fogli di stile 7
Sommario SOMMARIO INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5 1.1 Linee guida 1 5 1.2 Linee guida 2 5 CAPITOLO 2 7 Fogli di stile 7 2.1 La sintassi 7 2.2 Ereditarietà degli attributi 7 2.3 Regole di cascading
CASCADING STYLE SHEETS. Prof. Rocco Ciurleo - ITIS "M. M. Milano" Polistena
CASCADING STYLE SHEETS I fogli di stile o CSS (acronimo di Cascading Style Sheets) sono uno strumento di formattazione delle pagine web che consente di personalizzare l'aspetto della pagina senza agire
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,
.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C. Introduzione ai CSS
.ConStile Tutorial Introduzione ai CSS : Indice.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C [H] Home > Tutorial > Introduzione
LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,
Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II
Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta
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
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini
STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)
I Tag dell html. Parte quarta
I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:
XSL: extensible Stylesheet Language
XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono
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
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
Tutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali
Riassunto CSS Tutorial
Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat
CSS. 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
HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS.
CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale
APPUNTI DI HTML (SECONDA LEZIONE)
APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà
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
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:
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:
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...
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale
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
Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96
Panoramica del capitolo Creare classi e ID per applicare gli stili, pagina 93 Applicare gli stili a collegamenti ipertestuali, pagina 96 Creare e collegare fogli stile esterni, pagina 98 6 Introduzione
HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento
HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare
CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A.
Corso di Laurea Magistrale in Ingegneria Informatica Corso di Linguaggi e Tecnologie Web A. A. 2012-2013 LINGUAGGI E TECNOLOGIE WEB CSS Floriano Scioscia 1 CSS CSS (Cascading Style Sheets, fogli di stile
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L
La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
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
Javascript. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori
Javascript Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi
HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
Oreste Signore, <oreste@w3.org> Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa
http://www.w3c.it/education/2012/upra/css/#(1) 1 of 63 Oreste Signore, Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa Master in Comunicazione e New
CSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
jt - joetex - percorsi didattici
jt - joetex - percorsi didattici Corso dreamweaver lezione 1 Sommario 1. Creare un sito in locale 2. creare la prima pagina Creare un sito in locale Un sito va creato tutto all'interno di un'unica cartella.
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
4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi
Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/
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
Selettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS Sintassi valore valore h1 { color: blue;
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
Grafica: creare pulsanti con i css.
Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.
HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto
HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La
Primi passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
Guida pratica ai CSS
Massimiliano Carnevale http://www.maniegrafiche.it Guida pratica ai CSS Come usare da zero i fogli di stile con stile. Alcuni diritti riservati. E' consentita la riproduzione, la distribuzione, l'esposizione
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
Cosa vuol dire HTML? Hyper Text Markup Language
IMPARIAMO Cosa vuol dire HTML? Hyper Text Markup Language PROGRAMMIAMO IN HTML? NO! L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout)
CSS: Colori, testo, caratteri, liste e link
CSS:, testo, caratteri, liste e link Università di Pisa pievatolo@dsp.unipi.it 13 aprile 2014 Sommario 1 2 Famiglia Dimensioni Corsivo e maiuscoletto Peso: quanto dev essere grasso il grassetto? 3 4 5
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
Fogli di stile: introduzione. Fabio Fioravanti
Fogli di stile: introduzione Fabio Fioravanti Introduzione dei fogli di stile 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1) Dal 1996 al 2000: scarso supporto da parte dei
Applicazioni web. Sommario DHTML - CSS CSS. Elementi di raggruppamento Markup semantico. Sintassi Proprietà. Applicazioni web.
Applicazioni web Parte 2 DHTML - CSS Sommario DHTML Elementi di raggruppamento Markup semantico CSS Sintassi Proprietà 1 DHTML Dynamic HTML Dynamic Html non è uno standard definito dal World Wide Web Consortium
WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa
WWW.ICTIME.ORG NVU Manuale d uso Cimini Simonelli Testa Cecilia Cimini Angelo Simonelli Francesco Testa NVU Manuale d uso EDIZIONE Gennaio 2008 Questo manuale utilizza la Creative Commons License www.ictime.org
HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>
FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare
XML INVITO ALLO STUDIO EUROPEAN NETWORK OF INNOVATIVE SCHOOLS
XML INVITO ALLO STUDIO EUROPEAN NETWORK OF INNOVATIVE SCHOOLS CSS e XML Per formatare i documenti XML è possibile seguire due strade: Quando non c è bisogno della potenza elaborativa di XSL, l utilizzo
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie
Il linguaggio HTML - Parte 4
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2007 2008 Corso di Tecnologie Web CSS http://www lia.deis.unibo.it/courses/tecnologieweb0708/ HTML e Cascading Style Sheets > L
Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005
Appunti sugli Elaboratori di Testo D. Gubiani Università degli Studi G.D Annunzio di Chieti-Pescara 19 Luglio 2005 1 Cos è un elaboratore di testo? 2 3 Cos è un elaboratore di testo? Cos è un elaboratore
Utilizzo dei CSS: regole
Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte
CSS - Elementi di base
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.02. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.
I TEMI PREDEFINITI (TEMPLATE) Scelta del tema I temi predefiniti di wordpress sono la base di un sito che usa un utente che per ragioni pratiche o per incapacità non può creare un sito usando solo codice
Formattazione e Stampa
Formattazione e Stampa Formattazione Formattazione dei numeri Formattazione del testo Veste grafica delle celle Formattazione automatica & Stili Formattazione dei numeri Selezionare le celle, poi menu:
lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000
Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,
CSS font-size: pt, px o em? Che unità di misura utilizzare?
CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di
HTML HyperText Markup Language:
HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto
Anno Accademico ANT Html e Css
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 ANT Html e Css F. Pizza fpizza@deis.unibo.it cos'è ANT tool di build indipendente dalla piattaforma, scritto in java
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET 1 Aspetto delle pagine Web miglioriamo la rappresentazione su browser - Definizione dello STILE- Colore, dimensione e stile del font, colore sfondo,
Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1 I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle
Concetti Fondamentali
EXCEL Modulo 1 Concetti Fondamentali Excel è un applicazione che si può utilizzare per: Creare un foglio elettronico; costruire database; Disegnare grafici; Cos è un Foglio Elettronico? Un enorme foglio
Personalizza. Page 1 of 33
Personalizza Aprendo la scheda Personalizza, puoi aggiungere, riposizionare e regolare la grandezza del testo, inserire immagini e forme, creare una stampa unione e molto altro. Page 1 of 33 Clicca su
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