Post on 19-Jul-2015
transcript
© Paolo Quartarone - CSS
Introduzione al linguaggio CSS
ITIS Zuccante2014/2015
1/20
Il CSS (Cascading Style Sheets),è un
linguaggiousato per definire la
formattazione di documenti
HTML, XHTML e XML come ad esempio per i
siti web e relative pagine.
Introduzione
© Paolo Quartarone - CSS 2/20
L'uso del CSS è necessario per separare
i contenuti dalla formattazione, migliorando la
programmazione. Inoltre favorisce il riuso di
codice ed una sua più facile manutenibilità.
Perchè usare CSS?
© Paolo Quartarone - CSS 3/20
CSS nasce ufficialmente nel 1996, ma fu ideatonel 1993. Nasce dalla esigenza di migliorare lepagine web, perchè all'epoca la formattazione
era decisa dai browser.Da allora sono state pubblicate tre versioni,
CSS1, CSS2 e l'attuale CSS3
Breve Storia
© Paolo Quartarone - CSS 4/20
Il seguente, oltre ad essere il più semplicemetodo per utilizzare un file CSS, è anche ilmigliore, in quanto segue le normative del
consorzio
Utilizzare i CSS (1)
<html> <head> <title>Esempio</title> <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/> </head>
© Paolo Quartarone - CSS 5/20
Nonostante la semplicità,non è una tecnica molto diffusa, perchè non
validabile dal consorzio
Utilizzare i CSS (2)
<html> <head> <title>Esempio</title> <style type="text/css"> @import url(foglio_di_stile.css); </style> </head>
© Paolo Quartarone - CSS 6/20
Infine, il seguente è, oltre ad uno dei metodi piùusati, anche il peggiore, in quanto non favorisce
il riutilizzo del codice e la manutenibilità.
Utilizzare i CSS (3)
<html> <head> <title>Esempio</title> <style type="text/css"> codice css </style> </head>
© Paolo Quartarone - CSS 7/20
Il linguaggio CSS è caratterizzato da poche esemplici regole ed elementi:
Regole
© Paolo Quartarone - CSS 8/20
●Selettore: indicazione dell'elemento della pagina cui verrà applicato lo stile impostato nella dichiarazione●Classe:indentifica in maniera selettiva diversi Elementi●Indentificatore: detto anche id, è usato per identificare in modo univoco un elemento
Selettori, classi e identificatori
© Paolo Quartarone - CSS 9/20
Una pseudo-classe è un particolare selettoreche non definisce la presentazione di un
elemento ma di un particolare stato diquest’ultimo
Pseudo-classi
selettore:pseudo-classe {dichiarazioni;}
© Paolo Quartarone - CSS 10/20
Gli pseudoelementi identificano solo una partedi un elemento, senza la necessità di utilizzare
la marcatura (X)HTML.
Pseudo-elementi
p:first-line {dichiarazioni;}
© Paolo Quartarone - CSS 11/20
Identificano solamente gli elementi che sitrovino in una particolare condizione di
discendenza nella struttura (X)HTML dellapagina.
Selettori
p span { […] } div > p { […] } h1 + p { […] }
selettore di discendenza identifica solo gli
elementi contenuti in altri elementi
selettore figlio identifica invece solo gli elementi
che siano contenuti direttamente nell'elemento
padre
selettore fratello identifica il primo
elemento successivo ad un altro con cui condivida
lo stesso padre
© Paolo Quartarone - CSS 12/20
Proprietà
Le proprietà CSS sono numerose,
circa 60.
© Paolo Quartarone - CSS 13/20
● Background● Border● Color● Float● Font● Margin e
padding● Text-align
14/20
Valori
Se non specificata, una proprietà assume
i valori predefiniti di ogni browser.
© Paolo Quartarone - CSS
● Unherit● Auto● Numero● Percentuale● Colore● Font
È possibile indicare un colore in più di un
modo.
● #ff6600● #f60● rgb(255,102,0)● rgb(100%, 40%, 0%)
Colori
© Paolo Quartarone - CSS 15/20
"Una media query consiste nella
dichiarazione di un tipo di media e di
zero o più espressioni che
verifichino le condizioni di validità o non validità delle caratteristiche di un
certo media"
Media Queries
© Paolo Quartarone - CSS 16/20
Le media queries vengono utilizzate sopratutto
per rendere una pagina web responsiva, ovvero
che si adatta alle dimensioni dello schermo nel
quale viene visualizzata, in maniera non casuale
ma ben precisa e programmata, o per impostare
un layout di stampa.
Utilizzo delle Media Queries
© Paolo Quartarone - CSS 17/20
Purtroppo queste tecnologie non sono semprecompatibili con tutti i browser (come ad esempioInternet Explorer 8 o inferiori), quindi, durante laprogrammazione bisogna tener conto di questo
problema e risolverlo, in quanto il numero di utentiche utilizzano IE8 è ancora circa il 24%
Compatibilità
© Paolo Quartarone - CSS 18/20
È necessario rispettare le normative emanate
dal consorzio per avere la certificazione della
propria pagina, in quanto pagine certificate salgono più in
fretta nella lista dei risultati dei motori di
ricerca
Rispetto delle Normative
© Paolo Quartarone - CSS 19/20
●http://it.wikipedia.org/wiki/CSS●http://www.html.it/articoli/breve-storia-dei-css-1/●http://www.mrwebmaster.it/css/selettore_8563.html●http://www.html.it/pag/14218/le-pseudo-classi/●http://www.html.it/pag/19466/css-media-queriesle-basi/
Fonti
© Paolo Quartarone - CSS 20/20