Introduzione al CSS

© 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?


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


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>


Nonostante la semplicità,non è una tecnica molto diffusa, perchè non

validabile dal consorzio


<html> <head> <title>Esempio</title> <style type="text/css"> @import url(foglio_di_stile.css); </style> </head>


Infine, il seguente è, oltre ad uno dei metodi piùusati, anche il peggiore, in quanto non favorisce

il riutilizzo del codice e la manutenibilità.


<html> <head> <title>Esempio</title> <style type="text/css"> codice css </style> </head>


Il linguaggio CSS è caratterizzato da poche esemplici regole ed elementi:

Regole


●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


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;}


Gli pseudoelementi identificano solo una partedi un elemento, senza la necessità di utilizzare

la marcatura (X)HTML.

Pseudo-elementi

p:first-line {dichiarazioni;}


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


Proprietà

Le proprietà CSS sono numerose,

circa 60.


● 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


"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


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


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à


È 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


●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


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/