Introduzione ai CSS

Un saluto a tutti gli amici di Tecnocrazia, oggi ci accingeremo ad affrontare un nuovo argomento, i CSS.
Cosa sono questi sconosciuti? Che significato ha suddetta parola? Bene, inizieremo il nostro studio partendo proprio dal significato di suddetta parola.
CSS, o meglio conosciuti come Cascade Style Sheet (Fogli di Stile a Cascata) o semplicemente fogli di stile. Vengono utilizzati per definire le rappresentazioni dei documenti HTML, XHTML e XML. Per utilizzare i CSS (d’ora in poi utilizzeremo questa sigla per riferirci ai fogli di stile) bisogna attenersi a delle regole che sono contenute in un insieme di direttive emanate dalla W3C. L’introduzione hai CSS è stata resa necessaria per esigenze di sintattico-grafico, cioè per dare la possibilità di rendere la formattazione più chiara e con la possibilità di separare i contenuti dei documenti, così da rendere la programmazione più chiara sia per i programmatori che per gli utenti.

Al momento si utilizza una versione dei CSS 2.1, anche se lo standard 3.0 avanza a vista d’occhio, il che sarebbe molto proficuo, in quanto suddetta versione risolverebbe molti dei bug di alcuni browser. (ebbene si, è sempre lui. Maledetto explorer XD)

Adesso è arrivato il momento di spiegarvi come inserire il codice CSS nelle pagine web. Può essere fatto in quattro modi:

  • Inserendo tra i tag <head> </head> della pagina, un collegamento ad un CSS esterno, cioè ad un file con estensione di tipo .css. Ecco un esempio:
    <html>
    <head>
    <title>Esempio foglio di stile </title>
    <link rel=”stylesheet” type=”text/css” href=”foglio_di_stile.css” />
    </head>
  • Usare la specifica @import. Ecco un esempio:
    <html>
    <head>
    <title>Esempio foglio di stile </title>
    <style  type=”text/css”>
    @import: url(foglio_di_stile.css);
    </style>
    </head>
  • Inserendo sempre all’interno dei tag <head> </head> i tag <style> </style>, con all’interno le dichiarazioni dei css. Ecco un esempio:
    <html>
    <head>
    <title>Esempio foglio di stile </title>
    <style  type=”text/css”>
    dichiarazioni_di_codice_css
    </style>
    </head>
  • Inserendo (come si usa nel gergo) i fogli in linea. Cioè specificando le dichiarazioni dei CSS all’interno dei tag HTML. Eccovi un esempio: <tag style=”regole_di_stile”>

Ritorniamo un momento sull’elemento link, avrete notato che vi sono degli attributi vero? e vi sarete chiesti anche, ma a cosa servono? (qualcuno avrà anche detto: e cchi ne fare ri sti cuose!!! :D). Bene, ve lo diciamo subito:

  1. rel: Descrive il tipo di relazione tra il documento e il file collegato, ed è’ obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet (questo secondo valore vi sarà spiegato più avanti);
  2. href: serve a definire l’URL assoluto o relativo del foglio di stile ed è anch’esso obbligatorio;
  3. type: identifica il tipo di dati da collegare. Per i CSS l’unico valore possibile è text/css. Come sempre è obbligatorio;
  4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Quest’ultimo è opzionale (anche questo attributo sarà trattato più avanti).

Per poter utilizzare le regole dei CSS abbiamo bisogno dei selettori. Un selettore è una semplice dichiarazione che viene utilizzata per definire la parte o le parti di un documento soggette ad una specifica regola. Vi sono diversi tipi di selettori, e cercheremo di darvi spiegazione su di essi.

  • Selettore di elementi (type selector): è il più semplice degli elementi, ed è costituito da uno qualunque dei tag (X)HTML. Questo è un esempio per farvi apprendere la sintassi:
    h1 {color: #000000;}
    p {background: white; font: 12px Verdana, arial, sans-serif;}
    table {width: 200px;}

    Potete visualizzare qui il risultato: Esempio.

È possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola. Il raggruppamento è un’operazione molto conveniente. Pensate di dover utilizzare un attributo uguale per 3 diversi tag, ad esempio lo sfondo bianco per i tag h1, h2, h3. Ci servirebbero tre diversi selettori, seccante vero? Allora ci viene in aiuto la possibilità del raggruppamento. Ecco la sintassi:

h1, h2, h3 {background:white;}

Potete visualizzare qui il risultato: Esempio.

  • Selettore universale: Anche nei CSS abbiamo un jolly. Il selettore universale serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco). La sintassi è la seguente:
    * {color: black;}
  • Selettore del discendente: Serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola. Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello. La sintassi è la seguente:
    div p {color: black;}
    p strong {color: red;}

    Il selettore va letto per chiarezza da destra a sinistra. Nel primo esempio verranno selezionati tutti i paragrafi (<p>) discendenti di elementi (<div>). Nel secondo tutti gli elementi (<strong>)che si trovino all’interno di un paragrafo.

  • Selettore del figlio: Seleziona un elemento che sia figlio diretto di un altro.Il child selector è solo in apparenza simile al descendant selector. La differenza sta nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. Chiariamo con un esempio utile anche per comprendere meglio il significato di descendant selector:
    &lt;body&gt;
    <strong>&lt;p&gt;Primo paragrafo&lt;/p&gt;</strong>
    &lt;div&gt;
    &lt;p&gt;Secondo paragrafo&lt;/p&gt;
    &lt;/div&gt;
    <strong>&lt;p&gt;Terzo paragrafo&lt;/p&gt;</strong>
    &lt;/body&gt;

    Dei tre paragrafi solo il primo e il terzo sono figli diretti di body. Il secondo è invece figlio diretto di un elemento div. Tutti e tre, però, sono discendenti di body. La sintassi è la seguente:

    body &gt; p {color: black;}

    Per capirci meglio potete visualizzare l’esempio: Esempio;

  • Selettore dell’elemento adiacente: Un altro tipo di selettore introdotto con CSS2 è l’adjacent-sibling selector. Seleziona gli elementi che nel codice del documento siano immediatamente vicini (adiacenti) ad un altro. Questa è la sintassi:
    h1 + p {color: red;}

    Provate voi l’esempio.

Dopo questo breve è divertente escursus, passiamo ai selettori che sicuramente saranno più usati da voi tutti. Mi riferisco ai selettroi speciali, gli ID e le Classi.

Per definire una classe si usa far precedere il nome da un semplice punto: .nome_della_classe.

Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML.

Esiste un secondo tipo di sintassi:<elemento>.nome_della_classe. Questo è più restrittivo rispetto a quello generico. Infatti se applichiamo questa regola: p. testoverde{color: green;} lo stile verrà applicato solo ai paragrafi che presentino l’attributo class=”testoverde”.  Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple: p.testoverde.grassetto {color:green; font-weight:bold;} Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. per capirci meglio vi rimandiamo all’esempio: Esempio

Ed adesso passiamo agli ID. La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id. Con questa regola: #testo{color:red;} assegniamo il colore rosso a tutti gli elementi che presentano questa definizione. Come per le classi è possibile usare una sintassi con elemento: p#nome_id
In realtà questa modalità è assolutamente superflua. Se l’id è univoco non abbiamo alcun bisogno di distinguere l’elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile. Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile. Usando la seconda sintassi, invece, sono costretto a rispettare l’elemento definito nel selettore. Quindi è sempre utile riflettere prima di assegnare dei selettori di tipo ID a dei tag specifici. Ovviamente non può mancare l’esempio anche per gli ID. Esempio

Bene, per il momento questo articolo termina qui, ma non temete, torneremo a breve per continuare a parlarvi dei CSS.

Come sempre See U On The Next Post ;)

  • http://www.facebook.com/giuliana.brandi Giuliana Brandi

    credo di aver fatto bene a non leggere l’articolo prima della lezione di oggi.. Avrei ulteriormente confuso le mie già confuse idee :)

  • http://www.abvcomputer.com kakarotssj

    In effetti non hai tutti i torti, il primo approccio con i css può sembrare ostico, ma non appena inizierai a prendere confidenza con loro, capirai che sono di una potenza inaudita.