css, programmazione web, w3c, web

Cos’è il CSS? seconda parte

css logo w3cIl codice CSS

Inserire il codice

L’inserimento di codice CSS nelle pagine web può essere effettuato in tre modi:

  • Inserendo nel tag <head> della pagina in codice HTML un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall’estensione .css come negli esempi seguenti, tramite il tag link o tramite la direttiva import, che può essere utilizzata anche negli stessi file .css per collegare più file tra loro:
<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>
</head>

oppure

<html>
<head>
<title>Esempio</title>
<style type="text/css">
@import url(foglio_di_stile.css);
</style>
</head>
  • Inserendo, sempre all’interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css.
<html>
<head>
 <title>Esempio</title>
 <style type="text/css">
 codice css
 </style>
 </head>
  • Inline all’interno degli elementi
<tag style="dichiarazioni CSS">...</tag>

Una regola CSS

Le regole CSS sono strutturate secondo il seguente schema (gli spazi sono tutti facoltativi):

selettore {
 proprietà1 : valore1;
 proprietà2 : valore2, valore3;
 }

Selettori

Selettori di tipo

I selettori di tipo applicano la regola a tutti gli elementi della pagina del tipo determinato. Esempi:

body {
 istruzioni css[...]
 }

o

p {
 istruzioni css[...]
 }

Classi

Le classi applicano la regola a tutti gli elementi della pagina che presentano la proprietà. La sintassi CSS è la seguente:

.nome_classe {
 istruzioni css[...]
 }

Identificatori

Gli identificatori (comunemente ID) applicano la regola a quell’elemento della pagina che presenta la proprietà id=”nome_identificatore”. Gli ID contraddistinguono elementi unici. La sintassi CSS è la seguente:

#nome_identificatore {
 istruzioni css[...]
 }

Pseudoclassi

Le pseudoclassi identificano elementi in base alle loro proprietà.

first-child individua un elemento solo se è il primo figlio dell’elemento padre. Così quindi

p:first-child {
 istruzioni css[...]
 }

individuerà nel codice (X)HTML sottostante solo il primo paragrafo.

<body>
 <p>Lorem ipsum</p>
 <p>Lorem ipsum</p>
 <p>Lorem ipsum</p>
 </body>

Link e visited si applicano ai collegamenti.

La prima identifica i collegamenti non visitati, la seconda quelli visitati. La sintassi CSS è:

a:link {
 [...]
 }

Active, focus e hover identificano gli elementi solo in particolari condizioni, la prima se l’elemento è attivo, la seconda se è selezionato, la terza se il puntatore è sopra di lui. Quindi

p:hover {
 [...]
 }

si applicherà solo se il puntatore del mouse andrà sopra un paragrafo e solo per il tempo che vi rimarrà.

Pseudoelementi

Gli pseudoelementi identificano solo una parte di un elemento, senza la necessità di utilizzare la marcatura (X)HTML.

First-line individua solo la prima linea di un paragrafo. Se la finestra del browser cambia dimensione si adatterà automaticamente alla nuova dimensione della linea. La sintassi CSS è la seguente:

p:first-line {
 [...]
 }

First-letter individua solo il primo carattere di un elemento.

Before e after sono due pseudoclassi utilizzate nella creazione dei contenuti generati. Non individuano un elemento, ma una posizione dove creare i contenuti. Sono poco utilizzate, dato il mancato supporto di Internet Explorer.

Selettore di discendenza, figlio e fratello

Identificano solamente gli elementi che si trovino in una particolare condizione di discendenza nella struttura (X)HTML della pagina.

Il selettore di discendenza identifica solo gli elementi contenuti in altri elementi. Così

p span {
 [...]
 }

identifica solo gli elementi <span> contenuti in elementi <p>.

Il selettore figlio identifica invece solo gli elementi che siano contenuti direttamente nell’elemento padre. Così

div > p {
 [...]
 }

individua solo i <p> contenuti direttamente in un <div>.

Il selettore fratello identifica il primo elemento immediatamente successivo ad un altro con cui condivida lo stesso padre. Così

h1 + p {
 [...]
 }

individua solo il primo <p> fratello di <h1>

Selettore di attributi

Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai loro attributi.

a[title=Esempio]{
 [...]
 }

Questa regola si applica solo agli elementi <a> che presentano l’attributo title=”Esempio”. I selettori di attributi sono molti e permetterebbero un controllo eccellente della pagina, ma Internet Explorer non li supporta ed il loro uso è quindi molto limitato.

Proprietà

Le proprietà CSS sono molto numerose, circa 60.

Le più utilizzate sono:

  • Background: definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per background-attachment, background-color, background-image, background-position e background-repeat.
  • Border: definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per ‘border-color, border-style e border-width.
  • Color: definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.
  • Float: questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.
  • Font: definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per font-family, font-size e font-weight.
  • Margin e padding: definiscono lo spazio circostante gli elementi. Margin definiscelo spazio esterno ai bordi, padding quello interno.
  • Text-align: definisce l’allineamento degli elementi, tra cui il testo.

Valori

Se non specificata, una proprietà assume i valori predefiniti di ogni browser, o in seconda istanza lo stile utente scelto, altrimenti può assumere uno dei seguenti:

  • inherit: la stringa inherit specifica che la proprietà deve ereditare il valore dagli elementi da cui l’elemento discende.
  • auto: la stringa auto ha significati molto diversi a seconda della proprietà a cui viene assegnata.
  • numero: se i numeri sono contraddistinti da un’unità di misura è necessario che tale unità sia espressa (tranne che nel caso dello zero). Tra il numero e l’unità non devono esserci spazi, come nell’esempio che segue.
p {
margin : 5px;
border: 1em;
padding: 0;
 }
  • percentuale
  • colore: i colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato con:
#ff6600
 #f60
 rgb(255,102,0)
 rgb(100%,40%,0%)
  • URI: L’URL viene indicato nelle forme:
url(http://esempio.it/file.html)
url("http://esempio.it/file.html")
  • font: i CSS permettono di indicare nella proprietà font-family più di un font, o una famiglia di font (serif e sans). In questo modo il browser utilizzerà il primo che troverà installato sul sistema operativo. La dichiarazione utilizza questa sintassi:
p {
 font-family : "Arial", "Verdana", serif;
 }

Browser e CSS

Il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale. Tuttavia esistono browser che si avvicinano molto a questo risultato ed altri che invece ne sono molto lontani. La lista che segue è di motori di rendering perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS.

Trident (Internet Explorer e AOL Browser): Internet Explorer è attualmente il browser più diffuso e il suo supporto ai CSS è sensibilmente migliorato e dalla versione 9 supporta anche i CSS 3. Strumenti a disposizione dei webdesigner sono i commenti condizionali, una particolare funzionalità di Explorer che consente di inviare istruzioni o bloccarle solo a questo browser.

La sintassi dei commenti condizionali è la seguente:

<!--[if IE]>
 codice esclusivamente per Internet Explorer
 <![endif]-->

poiché <!– introduce di norma un commento, i browser diversi da Explorer 5.0 o superiori non interpretano il codice.

I commenti condizionali permettono di specificare un foglio di stile specifico per Internet Explorer nel modo che segue:

<!--[if IE]>
 <link rel="stylesheet" type="text/css" href="foglio_di_stile_per_IE.css">
 <![endif]-->

Gecko (Firefox e Netscape): Gecko ha un ottimo supporto dei CSS 1 e 2 ed è per questo spesso utilizzato nella verifica della resa delle pagine web.

Presto (Opera): anche Presto offre un ottimo supporto dei CSS 1 e 2. Opera offre inoltre un’opzione che permette all’utente di disattivare i fogli di stile o usarne di propri.

KHTML e WebKit (Safari, Chrome e Konqueror): KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una parziale interpretazione anche dei CSS 3.

Oltre alle differenze di compatibilità, ogni motore di rendering aggiunge ai css standard nuovi elementi o proprietà.

Esempi di queste situazioni sono tutti i css che offre gecko che iniziano con “-moz”, come per esempio : -moz-border-radius(una proprietà per arrotondare i bordi di un elemento) o -moz-grabbing (un valore di cursor che fa apparire il mouse come una manina).
CSS sui diversi dispositivi

Una utilissima funzione dei CSS è la possibilità di essere applicati solo sui dispositivi (media) specificati dall’autore. La sintassi (X)HTML da utilizzare è la seguente.

<link rel="stylesheet" type="text/css" href="foglio.css" media="screen"/>

Il codice precedente associa il foglio di stile solo (in teoria) ai browser standard per computer desktop e portatili.

I valori dell’attributo media sono i seguenti:

  • screen (desktop e laptop)
  • handheld (PDA e smartphone)
  • print (stampanti)
  • braille (browser braille)
  • embossed (stampanti braille)
  • projection (proiezioni)
  • speech o aural (sintetizzatori vocali)
  • tty (telescriventi)
  • tv (televisori)
  • all (qualsiasi dispositivo)

Sebbene il numero dei dispositivi gestibili tramite CSS sia notevole, soltanto i primi tre sono supportati in maniera sufficiente.

Il media screen è quello standard cui si fa riferimento.

Il media handheld è specifico per i palmari, ma alcuni browser per palmari tentano, spesso con scarso successo, di interpretare anche i fogli marcati con screen, per cui si preferisce in genere marcare con handheld sia il foglio per lo schermo che quello per il palmare e poi usare quest’ultimo per sovrascrivere le istruzioni del primo.

Il media print codifica la pagina per la stampa, è supportato discretamente. Un supporto completo è garantito da Opera.

Fogli di stile preferiti e alternativi

Come descritto, ad ogni pagina si possono collegare più fogli di stile.

Tuttavia è anche possibile far scegliere all’utente quali applicare.

Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della pagina, ma disattivabili, aggiungendo l’attributo <title> come nell’esempio che segue:

<link rel="stylesheet" type="text/css" href="foglio_preferito.css" title="Esempio1"/>

A questo punto possiamo specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili dall’utente, come nell’esempio che segue:

<link rel="alternate stylesheet" type="text/css" href="foglio_alternativo.css" title="Esempio2"/>

Per attivare e disattivare i fogli di stile l’utente può ricorrere all’apposito menu del suo browser, tuttavia Internet Explorer non offre questa possibilità quindi è necessario creare uno script Javascript che svolga la funzione di sostituire i fogli.

Il codice è stato pubblicato la prima volta su (EN) A List Apart ed è ora comunemente utilizzato. Tuttavia se questo script è facile da mettere in opera per gli sviluppatori, richiede un browser moderno con un buon supporto del DOM, oltre che avere attivati sia Javascript e i cookie.

Un sistema più complesso ma molto più robusto può essere uno script lato server come PHP. Un esempio è disponibile sempre sullo stesso sito.

 

Fonte:

Wikipedia : http://it.wikipedia.org/wiki/CSS

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...