La guida

Podcast

Guida CSS: tutto quello di cui hai bisogno

L'idea che sta alla base dei fogli di stile è molto semplice: invece di formattare ogni post singolarmente, così come avrai scoperto seguendo magari un corso o una guida HTML, non sarebbe più pratico creare una lista di istruzioni unica che si applichi automaticamente a tutti i contenuti? Le risposte sono in questa completa guida al CSS.

La struttura dei fogli CSS dentro e fuori l'Html

Per creare un foglio di stile occorre innanzitutto un editor di testo. È sufficiente il notepad di Windows, ma sono disponibili on line diversi editor specializzati che facilitano di molto il lavoro.

Scrivere un Css, infatti, richiede una conoscenza base dell'Html, di cui imita la struttura: l'unica differenza è che occorre specificare a quale elemento si applicano le formattazioni descritte.

Dove si trova il CSS? Scopriamolo in questa guida base

Il foglio di stile può trovarsi:

In linea. Ovvero è possibile inserire il comando di stile all'interno dell'html utilizzando il tag <style>. Se vogliamo un testo giustificato e con carattere di grandezza 12, occorrerà scrivere: <p style="text-align: justify; font size: 12"> Testo </p>. In questo caso, la formattazione si estende al solo paragrafo considerato.

A stile incorporato. Si usa quando lo stile si riferisce a più elementi della stessa pagina. Si inserisce il tag <style> con tutte le istruzioni dentro l'<head> in questa maniera:

<style type="text/css">

<!--

p {

text-align: justify;

text-indent: 12px;

}

-->

</style>

Tutti i paragrafi riceveranno le medesime indicazioni.

Foglio di stile esterno. È l'utilizzo migliore dei Css: creare un foglio di stile slegato dalle singole pagine html dove raggruppare tutta la formattazione. Funziona esattamente come lo stile incorporato: l'unica attenzione dev'essere quella di linkare il foglio di stile Css all'interno del codice html della pagina tramite il tag <link rel="stylesheet" href="/nome_assegnato.css" type="text/css"> dove nome_assegnato.css è il nome preciso del foglio Css.

A chi può essere utile una guida ai fogli di stile?

Qualunque redattore (di blog, di portali, di siti di news) si rende facilmente conto delle potenzialità di questo strumento: creando uno o più fogli di stile esterno non occorre più formattare i singoli testi singolarmente, ma ci penserà il foglio di stile a inviare le istruzioni. Così come, se si vogliono apporre modifiche a tutti i post, basterà modificare il singolo foglio di stile.

Come approfondire (ed imparare piccole magie)

Coi fogli di stile non è possibile solo formattare il testo: i Css permettono di gestire le immagini, creare piccole animazioni, modificare tutti gli elementi di una pagina.

Guida alla creazione di un template css

Quando si lavora con il codice si può scegliere tra tre tecniche differenti per creare un template css:

  • il metodo del collegamento ci permette i legare diversi documenti HTML ad un unico foglio di stile
  • il metodo dei fogli di stile css incorporati ci permette di modificare lo stile pagina per pagina
  • attraverso il metodo degli stili in linea abbiamo la possibilità di analizzare tutti gli aspetti di una pagina con un unico carattere di informazione

Il primo problema che incontriamo nel momento in cui decidiamo di creare un nostro template css riguarda sicuramente la compatibilità con i diversi browser. Dobbiamo dunque armarci di tanta pazienza e controllare come reagiscono tutti i browser in commercio al nostro foglio di stile (ricordandoci che la maggior parte degli utenti attualmente utilizza ancora internet explorer).

Esempi di CSS: foglio di stile con il metodo del collegamento

Abbiamo visto come questo metodo ci permetta di controllare diversi documenti HTML con un unico foglio di stile. Per creare il nostro template css dovremmo dunque dichiarare l'elemento a cui vogliamo aggiungere uno stile e appunto assegnarvi una proprietà e un valore. Di seguito è riportato un esempio (nel quale si assegna un colore specifico al tag <h1>). Ovviamente al file che creiamo andrà assegnata l'estensione .css

h1 {

color: #000000;

}

A questo punto, per collegare il template css che abbiamo creato, al nostro documento HTML, non dobbiamo far nient'altro che:

  • entrare nel nostro documento HTML
  • inserire, sotto il tag </title>, la stringa
    <link rel=stylesheet href="/css/miostile.css" type="text/CSS">

CSS incorporati

Come suggerisce la parola stessa siamo di fronte ad una situazione in cui il web master incorpora nella sezione <head>, tramite il tag di apertura <style>, il foglio di stile nel documento HTML. Da notare che i valori attribuiti così facendo avranno la precedenza sulle eventuali informazioni contenute in un template css collegato. Di seguito un esempio:

<html>

<head>

<title> Pagina creata da ElaMedia </title>

<style>

h1 {

color: #000000;

}

</style>

</head>

<body>

</body>

</html>

Guida ai fogli di stile in linea

Solitamente si ricorre a quest'approccio per poter modificare un solo elemento (cosa certamente più utile di modificare l'intero sito). Gli stili css in linea (che utilizzano comunque sempre il tag <style>) hanno precedenza su ogni altro stile applicato al documento precedentemente. La differenza sta nel fatto che essi agiscono direttamente sull'elemento oggetto della nostra attenzione (come nell'esempio riportato di seguito).

<body>

<p style="font-family: arial;"> Pagina creata da ElaMedia </p>

Combinare gli stili

Mettiamo il caso di dover lavorare con tre documenti HTML contemporaneamente (per la gestione e/o creazione dei fogli di stile si faccia riferimento all'articolo Template Css). Di seguito riportiamo una guida pratica all'utilizzo in contemporanea di più stili css (per questi tre documenti):

  • creiamo un foglio di stile css che vada a collegarsi ai tre documenti HTML
  • creiamo un foglio di stile incorporato (nel secondo documento) per modificare una sezione del documento stesso
  • copiamo il foglio di stile incorporato del secondo documento nell'ultimo file HTML che abbiamo a disposizione. A quel punto dovremmo aggiungere una regola in linea (proprio nel terzo documento) che abbia precedenza rispetto alla sezione che si era andata a modificare con il foglio di stile incorporato.

Da tutta quest'analisi appare ancor più chiaro come esista un effetto a cascata che riguardi appunto la precedenza che hanno i vari stili (uno sull'altro). Perfezionando la nostra guida potremmo stilare questa classifica d'importanza: Stili in Linea, Stili Incorporati e Stili Collegati.

Come usare le classi

Le classi sono dei selettori personalizzati che possono essere combinate con parole più o meno descrittive da utilizzare in collegamento con determinati tag. Lo scopo di questa guida è aiutare i web master a personalizzare e ad ottimizzare i propri fogli di stile. Vediamo passo dopo passo come sfruttare queste competenze:

  • in un foglio di stile (collegato o incorporato) creiamo una classe digitando un punto seguito dal nome che si vuole associare.

<style>

h1 .elamedia {

color: #000000;

}

</style>

  • a questo punto occorre individuare, nel documento HTML oggetto del nostro lavoro, l'elemento a cui si desidera associare questa classe.

<body>

<h1 class="elamedia">Web Agency</h1>

</body>

Il metodo del raggruppamento

La tecnica consiste nel raggruppare appunto diverse dichiarazioni cha apparterranno ad una determinata classe. Nel raggruppamento l'ordine è essenziale. Prendendo come spunto la famiglia che riguarda i font, possiamo dire, ad avere precedenza nell'ordine è l'attributo font size, seguito da quello della line height e infine da quello relativo alla font-family. Dunque, per raggruppare le dichiarazioni dovremmo associarle ad una classe in questo modo:

<style>

.elamedia {

font: 12pt/12pt Arial; (rispettivamente per font size, line height e font-family)

}

</style>

Posizioni relative e absolute

Il posizionamento convenzionale degli elementi in un documento è in grado di potenziare l'efficacia del linguaggio html. Tuttavia quest'approccio mostra ancora oggi diverse limitazioni non facilmente superabili; altra storia quella legata al posizionamento basato sui fogli di stile css.

Questo tipo di posizionamento infatti consente ai diversi elementi di sovrapporsi tra loro (creando per certi versi degli effetti 3D), o di sparire e ricomparire. Tutto ciò si basa sull'inserimento degli elementi all'interno di una casella (che prende il nome di casella di associazione), che varrà a sua volta collocata nel documento html. Le caselle vengono create con il css utilizzando i tag <div> e <span>.

Position relative

Per gestire un posizionamento relativo, occorre combinare la proprietà position con il valore relative. Come aggiunta è poi possibile selezionare più attributi di posizionamento,  come top (in alto), bottom (in basso), left e right (specificando ovviamente un valore numerico seguito da un'unità di misura). L'esempio di cui sotto ci mostra il tutto:

<style>

.h1      {

position: relative;
top: 10px;
left: 20px;

}

</style>

Quest'approccio può essere utilizzato anche con le immagini anche se una principale limitazione sta nel fatto che alcuni browser tendono a non riconoscere perfettamente e in maniera uniforme questi schemi.

Position absolute

Il posizionamento assoluto risulta importante perché più complesso rispetto a quello relativo. Se infatti abbiamo utilizzato un foglio di stile css per definite la posizione del selettore h1, tutte le intestazioni di quel livello verranno inserite nella stessa posizione assoluta. A questo scopo occorre combinare la proprietà position con il valore absolute, concludendo la dichiarazione specificando un valore per l'attributo style. Per creare un ID occorre inserire il simbolo # e una descrizione (come si fa per le classi). L'esempio di cui sotto specifica per l'appunto quanto detto:

<style>

#offset           {

position: relative;
top: 10px;
left: 20px;

}

</style>

Successivamente occorrerà individuare il tag che si desidera associare alla posizione e aggiungere l'attributo ID che si è creato in precedenza (come mostrato nell'esempio sotto):

<body>

<div id="offset">

</body>

si possono dunque utilizzare gli ID come base di uno stile in linea che sarà poi richiamato utilizzando la proprietà ID.

Posizionamento 3d (Z-Order)

Il posizionamento è un processo geometrico, esportabile nel web design. L'asse orizzontale è indicato come asse x mentre quello verticale come asse y. Con il codice HTML (grazie al posizionamento assoluto dei fogli di stile css) si rende disponibile un terzo asse, quello z, che posiziona gli elementi lungo una terza dimensione che offre un senso di altezza, larghezza e profondità.

Il posizionamento Z-Order

Il posizionamento lungo l'asse z è reso possibile tramite i fogli di stile css, combinando la proprietà z-index con un valore numerico. L'esempio sotto mostra come una determinata classe sia stata definita attraverso le tre dimensioni.

<style>

.front  {

posizion: absolute;
top: 200px;
left: 300px;
z-index: 2;
}

</style>

Ricordiamo che i fogli di stile ci consentono di utilizzare diverse unità di misura (pixel, punti, percentuali, pollici o centimetri). Molti sviluppatori preferiscono puntare sui pixel in quanto anche la risoluzione dello schermo adotta la medesima convenzione.

Utilizzare la classe in un documento HTML

Una volta definita la classe, essa andrà utilizzata nel documento HTML su cui stiamo lavorando, seguendo lo schema che riportiamo di sotto.

<body>

<div class="front">
Testo di esempio
</div>

</body>

A questo punto, visualizzando il documento tramite un browser, noteremo che il nostro testo di esempio risulterà leggermente più "vicino" all'utente che osserva lo schermo, proprio perché fa riferimento ad una classe css che sfrutta un posizionamento su tre dimensioni.

Ritagliare e nascondere gli elementi nel css

Il ritaglio è un effetto speciale del posizionamento. Tramite quest'effetto è possibile creare una casella di associazione più grande delle informazioni in essa contenute (per esempio creando una cornice invisibile e dunque dello spazio attorno ad un'immagine). Il tutto avviene tramite la proprietà clip (che ovviamente avrà delle dimensioni maggiori rispetto alle informazioni che contiene). Nell'esempio viene messo in pratica quanto detto:

<style>

.front  {

posizion: absolute;
top: 20px;
left: 20px;
clip: rect (25px, 125px, 125px, 25px)
}

</style>

Immaginiamo che le informazioni eccedano i confini della casella di associazione: possiamo gestire la cosa attraverso la proprietà overflow. I valori disponibili sono visible (che consente la normale visualizzazione delle informazioni contenute nella casella), hidden (che invece nasconde la loro visualizzazione) e scroll (che invece crea delle barre di scorrimento che consentono all'utente di visualizzare tutto il contenuto della casella di associazione. Nascondere gli elementi è altrettanto intuitivo: basta utilizzare la proprietà visibility associata al valore hidden.

Il colore giusto per lo sfondo

Può capitare, lavorando con un semplice documento HTML (o più in generale con un complesso progetto sul web) di dover impostare un colore particolare (oppure un'immagine che abbiamo precedentemente selezionato) per il nostro sfondo. Oggi vedremo passo dopo passo come compiere queste operazioni su fogli di stile CSS precedentemente collegati ai nostri lavori in HTML.

Colore di sfondo

È bene sottolineare come sia importante utilizzare questa possibilità con parsimonia. Se infatti è vero che l'utilizzo di un colore di sfondo dono alla pagina un'dentità ben definita, è altrettanto vero che, abusare di colori di sfondo per il css, è sinonimo di confusione e superficialità estetica. Occorre prima di tutto:

  1. analizzare in maniera dettagliata la pagina
  2. capire cosa si vuole mettere in evidenza con un colore di sfondo (sezioni e/o paragrafi)
  3. utilizzare, in associazione con un particolare selettore, la proprietà background-color
  4. associare a questa proprietà un numero esadecimale, un valore RGB o il nome di un colore specifico

es:

body   {

background-color: #000000;

}

Immagine di sfondo

Le immagini di sfondo sono in grado di far risaltare una struttura ben definita in un insieme di altre più semplici. È bene chiarire che utilizzare nel css un'immagine di fondo che non crei il dovuto contrasto può essere fonte di problemi dal punto di vista della leggibilità. Occorre dunque:

  1. capire quale sezione si vuole mettere in evidenza con un'immagine di sfondo
  2. fare in modo che ci sia un discreto contrasto tra i due colori (immagine e resto dell'ambiente)
  3. utilizzare, in associazione con un selettore, la proprietà background-image
  4. associare a questa proprietà una URL (che identifica, per esempio all'interno del nostro sito web, la posizione fisica dell'immagine che vogliamo utilizzare come sfondo nel css)

es:

body   {

background-image: URL (images/elamedia.gif);

}

Si consiglia l'utilizzo di GIF o JPEG per alleggerire il peso della pagina che ospita l'immagine.

Sfondi affiancati

Con lo standard HTML le immagini vengono affiancate sullo sfondo. Per controllare con più precisione e raffinatezza l'affiancamento di queste immagini occorre utilizzare la proprietà background-repeat con i seguenti valori:

  • repeat -> le immagini si dispongono normalmente
  • norepeat -> le immagini si ripetono solo una volta
  • repeat-x -> le immagini si ripetono lungo l'asse x
  • repeat-y -> le immagini si ripetono lungo l'asse y

es:

body   {

background-image: URL (images/elamedia.gif);

background-repeat: norepeat;

}

Gestire i font

Per quanto riguarda il font per il web, è importante ricordare di evitare il testo in movimento e prediligere l'uso dei testi statici. Infine, per alleggerire la lettura sul monitor del pc è consigliabile dividere il testo in paragrafi brevi ed elenchi puntati.

È possibile gestire, tramite l'elemento Font, la visualizzazione del testo nel nostro documento HTML, andando a modificare di conseguenza quello che viene mostrato a schermo dai vari browser. Sappiamo già (lo abbiamo visto nell'articoloTemplate) che i fogli di stile aiutano proprio a personalizzare maggiormente la gestione grafica delle nostre pagine; quello che risulta interessante analizzare è che, nello standard HTML 4.0, l'elemento font è stato completamente rimosso (per favorirne l'uso nel css).

Aggiungere font nel css

Prima di tutto chiariamo una cosa: la visualizzazione di un determinato font è consentito solamente se l'utente ha installato questo carattere nel computer da cui tenta di visualizzarlo (gli unici caratteri che troviamo sia su piattaforme PC che Mac sono Times e Courier). Per aggiungere un determinato carattere occorre utilizzare il tag <font> e l'attributo face come nell'esempio riportato sotto (da notare come nell'esempio vengano specificati appositamente due tipi di caratteri differenti in modo che il computer del visitatore abbia più scelte):

<body>

<font face="arial, helvetica">
ElaMedia è una Web Agency di Roma.
</font>

</body>

In un foglio di stile occorre aggiungere la classe a cui si vuole assegnare un determinato carattere. Nell'esempio che riportiamo ci riferiamo ad un ipotetico foglio di stile collegato:

p {

font-family: arial, helvetica;

}

Nell'esempio che riportiamo qui sotto invece ci riferiamo ad un ipotetico foglio di stile incorporato (dove per altro vengono raggruppate diverse informazioni per quel che riguarda lo stile):

<html>
<head>
<title>ElaMedia</title>

<style>

font {font: 12pt verdana;}

</style>

</head>

Dimensione del font

Abbiamo la possibilità di lavorare con dimensioni relative e assolute (le dimensioni dei caratteri infatti dipendono da diversi fattori, come la piattaforma del computer e la risoluzione dello schermo). Nel caso dei caratteri la dimensione si può scegliere in base alla scala 1-6 (dove uno rappresenta il valore minimo). Basterà dunque utilizzare l'attributo size come nell'esempio sotto riportato (il valore di default è 3 e dunque non è necessario indicarlo):

<body>

<font face="arial,helvetica" size="4">
ElaMedia è una Web Agency di Roma.
</font>

</body>

Nei fogli di stile abbiamo la possibilità di controllare la grandezza dei nostri caratteri facendo riferimento ad unità di misura differenti (punti, pixel, pollici e centimetri). Lo schema è quello riportato di seguito. Negli stili, le dimensioni sono sempre assolute (l'impiego di px impedirebbe agli utenti di modificare nel browser la dimensione dei caratteri).

h1 {

font-size: 14pt;

}

Colore font

Per quanto riguarda il colore basterà utilizzare l'attributo color come nell'esempio sotto riportato:

<body>

<font face="arial,helvetica" size="4" color="#000000">
ElaMedia è una Web Agency di Roma.
</font>

</body>

Per quanto riguarda i fogli di stile sappiamo la differenza tra quelli collegati, incorporati e quelli in linea. In definitiva possiamo dire che lo schema da utilizzare è questo:

h1 {

color:"#000000";

}

Quando utilizziamo uno stile in linea, è bene ricordarsi si separare le dichiarazioni con un punto e virgola come nell'esempio:

<p style"color: "#000000"; font: 12pt;> ElaMedia </p>

Specificare il peso di un foglio di stile

Il peso di un testo si riferisce allo spessore di un carattere. Esistono alcune ipostazioni quali: normal (a cui corrisponde il numero 400), bold (700), bolder (900) e light (100). Per assegnare questi attributi occorre specificare la proprietà font-weith. Gli attributi italic e oblique possono essere specificati tramite la proprietà font-style.

Attributi e valori di interlinea

Descrivendo il mondo dei fogli di stile abbiamo più volte ricordato l'importanza che rivestono soprattutto per quel che riguarda la gestione dell'ordine e della pulizia all'interno della pagina. Logico dunque che l'attributo che regola l'interlinea nel css sia molto importante per tutti i web master che vogliono fornire al proprio lavoro un certo tipo di fascino.

Impostare l'interlinea

Prima di tutto chiariamo che è possibile attribuire una spaziature tra le linee di una pagina utilizzando diverse unità di misura. Si può infatti ricorrere ad un numero, a una percentuale rispetto alla pagina oppure semplicemente ad un valore corrispondente ovviamente ad un'unità di misura (si consiglia di utilizzare la stessa unità di misura impiegata per la gestione dei font). Nel foglio css occorre inserire un selettore e specificarne la proprietà line-height.

P         {

line-height: 12pt;

}

L'interlinea viene applicata ad ogni riga di testo. Se si desidera farla iniziare da un punto diverso, occorre inserire il tag <span> nella riga in cui si desidera applicare la spaziatura tra le righe.

I valori dell'interlinea

Come detto abbiamo la possibilità di gestire l'interlinea del nostro documento HTML tramite i fogli di stile css; possiamo avvalerci di diversi valori con cui gestire la distanza tra le righe del nostro testo. Di seguito riportiamo le possibilità che il web master ha in serbo per gestire questo tipo di attività:

  • normal: utilizzando questo valore istruiremo il browser a dividere le righe con uno spazio per l'appunto gestibile nella norma
  • valore numerico: utilizzando questo schema (1.4, 1.6, 1.7) l'altezza della nostra riga di testo sarà uguale alla dimensione del font moltiplicata per questo valore
  • unità di misura: l'interlinea sarà uguale alla dimensione specificata
  • percentuale: l'interlinea viene misurata come percentuale del font

A questo punto non ci resta che individuare il selettore da modificare e aggiungere il nostro valore di line-height. Per individuare nel css (in maniera dinamica e automatica) il selettore a cui assegnare un diverso valore di interlinea, consigliamo di utilizzare il componente Firebug, installabile sul browser Firefox (sicuramente uno dei migliori da questo punto di vista: permette infatti di compiere delle modifiche simulate per verificare il corretto utilizzo di determinati attributi). Di seguito un video tutorial per l'utilizzo di Firebug.

Free CSS Toolbox, la risposta per navigare al top

Free CSS Toolbox nasce come risposta al desiderio di navigare nel web in modo più ottimale, mettendosi in contatto con la gente spalmata nei vari angoli del pianeta. Questo software è il frutto dell’aspettativa di voler soddisfare desideri e impellenti necessità degli “smanettoni”, per i quali le software house hanno messo brillantemente alla prova il proprio ingegno, dando vita a sistemi matematico-informatici in grado di rendere più gradevoli i cyber viaggi.

Le proprietà dell'editor

Free CSS Toolbox è un editor gratuito che aiuta nella creazione di fogli di stile CSS, nella compilazione sintattica dei codici informatici, alla base del design di ogni sito web. Propriamente denominato “Cascading Style Sheets o Fogli di stile”, il CSS permette la formattazione di diversi linguaggi di programmazione, rendendo più fluida e scorrevole la sintassi ai programmatori di HTML e ai suoi fruitori.

I componenti del programma

Gli elementi di questo innovativo editor hanno diverse specifiche, indispensabili per i fini ultimi del linguaggio e sono: i selettori, le classi, gli identificatori, le pseudo classi, gli pseudo elementi, il selettore di discendenza, quello di figlio e di attributi. Ha inoltre diverse proprietà, circa 60, tra le quali si identificano le principali:

  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Color definisce il colore del testo di un elemento, font incontrato già nei fogli di testo più comuni, indica la proprietà del carattere e il suo stile e text-aligne, stabilisce l'allineamento degli elementi, tra cui il testo.

Un CSS editor da sogno per gli informatici

Free CSS Toolbox è dunque un programma creato per far sognare gli informatici, garantendo loro un utilizzo sbalorditivo e innovativo di internet e della macchina.

Tra le novità: la riduzione di caricamento delle pagine dei siti, già provate in casi di scarsa connessione, il controllo sulla corretta compilazione del foglio, la verifica di compatibilità del browser utilizzato e l’auto completamento del codice. Tutto ciò si traduce in risparmio di tempo prezioso al web designer, già impegnato nell’offrire una grafica sempre più perfetta e gratificante all’occhio dell’utente.

Molti browser, soprattutto quelli installati su tecnologie mobili, non supportano ancora determinati valori, al di fuori di Internet Explorer migliorato con la sua ultima versione e di Opera.

Compatibile con molti sistemi operativi questo editor renderà straordinaria la comunicazione che ogni webmaster trasmetterà ai suoi naviganti, così da avere in termini di costi-benifici, innumerevoli vantaggi.

- -

      
Via Dino Penazzato 87
00177 Roma

Scrivici o contattaci
telefonicamente:

Telefono: 06 99.922.584
Email: info@elamedia.it


In alternativa puoi utilizzare il form che trovi 
in Home per comunicare con la nostra Web Agency 

Copyright 2011 - ElaMedia Group SRLS - Partita IVA 12238581008. Seguici su Google + Local