martedì 26 marzo 2013

Guida CSS di base

Nella lezione del 15 marzo abbiamo parlato dei fogli di stile, chiamati anche CSS.

COME è FATTO UN CSS: REGOLE E COMMENTI

http://www.html.it/pag/14215/come-fatto-un-css-regole-e-commenti/

Un foglio di stile è un insieme di regole accompagnate da qualche commento.

Struttura di una regola

Questa è una regola e come possiamo vedere dall'immagine sopra, è composta da due parti : un selettore e un blocco della dichiarazione.
Il selettore serve a definire la parte del documento cui verrà applicata la regola, mentre il blocco della dichiarazione è delimitato rispetto al selettore e alle altre regole da due parentesi graffe.
All'interno del blocco ci possono essere più dichiarazioni, e tutte sono formate da una proprietà e un valore, che devono sempre essere separati da due punti.
La proprietà definisce un aspetto dell’elemento da modificare secondo il valore espresso.
Per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

ID E CLASSI: I DUE SELETTORI

http://www.html.it/pag/14217/id-e-classi-due-selettori-speciali/

 In HTML esistono due attributi fondamentali che possono essere applicati a tutti gli elementi: sono class e id. Dichiarare questi attributi indipendentemente dai CSS non ha senso e non modifica in  nessun modo la presentazione della pagina.
Il valore dell’attributo class deve trovare una corrispondenza in un foglio di stile.
Come nell'esempio che viene riportato nella guida, di cui vi ho lasciato qui sopra il link, se  si assegna al paragrafo un attributo class="testorosso" senza però creare un foglio di stile, il valore dell'attributo class non troverà nessuna corrisponda con un CSS e di conseguenza non cambierà nulla.
Ma definendo un CSS incorporato creando un selettore di tipo classe e assegnando ad esso il nome testorosso il testo del nostro paragrafo sarà formattato secondo le nostre indicazioni.
La stessa cosa vale per i selettori di tipo ID, ma con la differenza che se assegno ad un paragrafo l’id “testorosso”, non potrò più usare questo valore nel resto della pagina.
Al contrario di una singola classe che può essere utilizzata per più elementi.
Per definire una classe si usa far precedere il nome da un semplice punto : .nome_della_classe .
La sintassi di un ID è molto semplice, il nome viene preceduto da un cancelletto(#) : #nome_id

INSERIRE I FOGLI DI STILE IN UN DOCUMENTO

http://www.html.it/pag/14211/inserire-i-fogli-di-stile-in-un-documento/

Ci sono due tipi di foglio di stile: uno esterno ed uno interno.
Un foglio di stile è esterno quando è definito in un file separato dal documento, si tratta di semplici documenti di testo ai quali si assegna 'estensione .css .
Un foglio di stile è interno invece quando il suo codice è compreso in quello del documento.
A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.

Noi ci occuperemo principalmente dei fogli di stile collegati.
Per caricare un foglio esterno in un documento esistono due possibilità.
La prima è quella che fa uso dell’elemento <LINK>, quello che noi useremo.
La dichiarazione va sempre collocata all’interno della sezione <HEAD> del documento HTML.

<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>

Come possiamo vedere dall'esempio l'elemento <link> presenta vari attributi:
  • rel = descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
  • type = identifica il tipo di dati da collegare. Per i CSS l’unico valore possibile è text/css.
  • href = serve a definire l’URL assoluto o relativo del foglio di stile.
L'altro modo per caricare CSS esterni è usare la direttiva @import all’interno dell’elemento <style>.


Nessun commento:

Posta un commento