CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina.

Slides:



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

HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti.
CSS CASCADING STYLE SHEET Alberto Ferrari. Cascading Style Sheet I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per.
CSS CASCADING STYLE SHEET Alberto Ferrari.
A. FERRARI Alberto Ferrari. L'HyperText Markup Language (HTML) (traduzione letterale: linguaggio di marcatura per ipertesti) è un linguaggio usato per.
JavaScript 2. JavaScript nelle pagine web. HTML e XHTML Gli script JavaScript sono utilizzabili sia in pagine HTML che XHTML XHTML impone che il codice.
Introduzione ai CSS. Cosa è successo allHTML Perché usare i CSS Introduzione ai CSS Fondamenti.
XSLT (eXtensible Stylesheet Language Transformation) Laurea Magistrale in Informatica Reti 2 (2005/06) dott. Francesco De Angelis
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione.
G. Mecca – – Università della Basilicata Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Concetti Fondamentali versione.
Storia dei fogli di stile
TW Cascading Style Sheets Fabio Vitali. TW Introduzione Oggi vediamo CSS (Cascading Style Sheet) u L'esigenza di uno stile per HTML u L'introduzione di.
CSS: Cascading Style Sheets Specifiche del formato del documento tramite un linguaggio Come modelli.dot di Word o file di stile.sty per latex Separazione.
Laboratorio di Applicazioni Informatiche II mod. A
Esempi sui CSS.
Fogli stile a cascata Danilo Deana.
Animazioni con le immagini
Ovvero lo stile di Internet TC-WEB Torino, 5 settembre 2012.
Linguaggi per il Web Linguaggi di markup: CSS. Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme.
Dott. Chiara Braghin Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) HTML e i fogli di stile Dott.
Informatica Generale: laboratorio di informatica
I fogli di stile XSL – 2 –. Selezioni multiple : serve per applicare una regola in modo ricorsivo a nodi figli dellelemento contestuale. Attributo select.
CSS : Cascading Style Sheet
HTML, css e XML.
FORMATTARE LE LISTE DI LINK  MENU
Progettazione multimediale
Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli cambiando la loro posizione nel tempo.
Cascading Style Sheet (Fogli di Stile in Cascata)
HTML Lezione 8 I collegamenti ipertestuali (link).
Modifica di fogli di stile in un editor basato su browser: il progetto MarISAWiki Styles Tesi di Laurea di: Relatore: Mariano Diasio Prof. Fabio Vitali.
Applicazioni Web HTTP, HTML e CSS Elaborato da Gianluca Lauteri e Daniele Filannino.
HTML Lezione 3 Stili.
Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli.
Corso di Informatica per la Grafica A.A. 2007/2008 docente Arch. Emilio Di Gristina 07.
Il Linguaggio HTML “Profe, ma io a casa l’HTML non ce l’ho!“
La gestione dei rifiuti secondo la normativa vigente
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
Informatica Umanistica A.A. 2008/2009 LEZIONE 3 HTML + CSS Il contenuto e la sua visualizzazione: separati finalmente!
I fogli di stile CSS 1 Cristina Gena
Hyper-Text Mark-Up Language
Utilizzo dello spazio tra i qualificatori Nelle regole l’inserimento dello spazio indica: …tutti gli elementi contenuti dentro.. ES:.giocatore td { ….
CSS Cascade Style Sheets.
Alberatura cartelle sito
Pseudoclassi e Pseudoelementi si definiscono con :pseudoclasse possono riferirsi a classi, tag o singoli elementi ci sono pseudoclassi dinamiche, pseudoclassi.
Corso Web CSV – Andiamo on-line 1 Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web.
Sintassi e regole dei CSS
TAG e CSS Ricalcare la grgilia di impaginazione. UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti),
HTML I tag HTML (parte 1). I tag HTML  I comandi che il browser interpreta  Etichette per marcare l’inizio e la fine di un elemento HTML  Formato e.
La struttura del documento
CORSO Di WEB DESIGN prof. Leonardo Moriello
1 Liste e Combo Liste e combo (lista chiusa) hanno una struttura simile: utilizzano gli stessi due tag: e Il primo tag contiene il secondo. deve essere.
Impostare i caratteri. Le prime versioni del linguaggio HTML così come le prime versioni dei browser consentivano unicamente la scelta tra due tipi di.
Tecnologie di InternetDocument Type Definition Dott. Nicola Dragoni Document Type Definition  Document Type Definition (DTD)  Documento XML valido 
Lezione 19 Riccardo Sama' Copyright  Riccardo Sama' Access.
HTML HTML e il web.
HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.
CSS Cascading Style Sheet
Tesi di Laurea di: Relatore: Mariano Diasio Prof. Fabio Vitali
Fogli di stile CSS. Allegare un CSS a un documento XML
I tag di intestazione. I tag di intestazione sono: e.
Laboratorio di XHTML e CSS
Tecnologia per la comunicazione
Introduzione ai fogli di stile Brevi note a cura di Emanuele Lana
Il Fogli di Stile - CSS.
PHP.  HTML (Hyper Text Markup Language)  CSS (Cascading Style Sheets)  Javascript (linguaggio di programmazione client)  PHP ( Hypertext Preprocessor.
Javascript. HTML per definire il contenuto delle pagine web CSS per specificare il layout delle pagine web JavaScript per definire il comportamento delle.
INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti.
Linguaggi per il Web Linguaggi di markup: CSS. Fogli di stile Cascading Style Sheets Fogli di stile sovrapposti DEFINIZIONE Il CSS è l’insieme delle regole.
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.
CSS ( Cascading Style Sheets) Fogli di Stile Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata.
Transcript della presentazione:

CSS CASCADING STYLE SHEETS : CASCADING STYLE SHEETS : Fogli di stile a cascata Definisce il modo in cui verranno visualizzati gli elementi di una pagina html (o XML) in un browser. Definisce il modo in cui verranno visualizzati gli elementi di una pagina html (o XML) in un browser. Permette di gestire il layout di una pagina indipendentemente dal contenuto. Permette di gestire il layout di una pagina indipendentemente dal contenuto. Permette di aggiornare il layout di piu pagine modificando un solo file di estensione.css Permette di aggiornare il layout di piu pagine modificando un solo file di estensione.css Permette la sovrapposizione a cascata di stili diversi per elementi annidati. Permette la sovrapposizione a cascata di stili diversi per elementi annidati. Uno foglio di stile Uno foglio di stile:

INSERIMENTO IN UN DOCUMENTO E POSSIBILE ALLEGARE UN FOGLIO DI STILE ESTERNO : html: attraverso il tag ed i suoi attributi attraverso il tag ed i suoi attributi: XML: Attraverso listruzione XML: Attraverso listruzione:

SINTASSI Un foglio di stile è un documento costituito da un insieme di regole di stile: La sintassi per una regola di stile è: Selettore {proprietà1: valore; proprietà2: valore} E anche possibile raggruppare più selettori che condividono le stesse proprietà: Selettore1, Selettore2 {prop1: val;prop2: val}

Elementi a cui applicare regole Elementi a cui applicare regole E possibile specificare allargamenti o restrizioni ulteriori utilizzando: E possibile specificare allargamenti o restrizioni ulteriori utilizzando: Pseudoelementi: Pseudoelementi: Classi Classi Selettore.Classe Selettore.Classe Pseudocalssi Pseudocalssi ID ID Selettori contestuali Selettori contestuali Il selettore specifica a quale elementi saranno applicate le regole di stile impostate nelle {}

Pseudoelementi Pseudoelementi : Esistono 4 pseudoelementi definiti nelle specifiche CSS2: Sintassi: selettore:pseudolemento {prop1: val} Sintassi: selettore:pseudolemento {prop1: val} first-letter Solo alla prima lettera del contenuto elemento first-line Solo alla prima linea del contenuto elemento before Solo al contenuto elemento precedente after Solo al contenuto elemento successivo

CSS: Classi di stile CSS: Classi di stile Tutti gli elementi a cui e applicata la classe avranno Il layout definito in { }: Sintassi definizione:.nomeclasse: {prop1: valore } Applicazione ad un tag: bla bla Applicazione ad un tag: bla bla

Restrizioni su applicazione classi Restrizioni su applicazione classi E possibile limitare i tipi di elementi che potranno ricorrere alla classe definita utilizzando la sintassi: classe definita utilizzando la sintassi: selettore.classe {prop: val} selettore.classe {prop: val} In tal caso solo gli elementi selettore potranno richiamare lo stile di classe

Pseudoclassi Pseudoclassi : Nelle specifiche CSS sono definite anche diverse pseudoclassi: Nelle specifiche CSS sono definite anche diverse pseudoclassi: Sintassi: selettore:pseudoclasse {prop1: val} :focus Rif Elemento attivo :first-child Rif.Primo elemento figlio. :link :visited etc. Collegamenti ipertestuali :lang Elementi che utilizzano lingua specificata

Selezione per ID Selezione per ID E possibile differenziare gli elementi dello stesso tipo utilizzando Un ID con le sue specifiche proprietà: selettore.#nomeID {prop: val} selettore.#nomeID {prop: val} In tal caso solo uno tra gli elementi selettore potrà richiamare lo stile di #nomeID (L ID e univoca allinterno del documento XML o html)

Selettori contestuali Selettori contestuali E possibile differenziare lo stile che gli elementi dello stesso tipo Devono adottare a seconda delc ontesto in cui appaiono selettore elementofiglio {prop: val} In tal caso elementofiglio utilizzerà lo stile specificato solo se si troverà allinterno dellelemento selettore

Stili inline Stili inline E possibile creare stili direttamente nel documento che deve utilizzarli con lattributo style Es. bla bla bla Es. bla bla bla In tal caso lo stile sarà applicato solo allelemento p

Ereditarietà Ereditarietà Gli elementi figli ereditano gli stili adottati dai loro elementi genitori Per tanto le proprietà definite negli elementi figli si aggiungeranno a quelle dei genitori. Tali proprietà potranno anche essere modificate dagli elementi figli le cui proprietà di stile avranno priorità in caso di difformità. figli le cui proprietà di stile avranno priorità in caso di difformità. E possibile impedire ad un elemento figlio dimodificare lo stile stabilito dal genitore utilizzando la parola chiave !important: paragrafo { color: red !important; ….}