Introduzione ai fogli di stile Css

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Css (Cascading Style Sheets) è un linguaggio di formattazione stilistica di un documento Html, o di una serie di documenti in cascata, da qui il loro nome.

In cascata vuol dire che è possibile aggiornare lo stile di parte di un documento o di un documento intero, o di una serie di documenti, lavorando su di una sola fonte.

I limiti di cui soffre l'Html si evincono dalla scarsa possibilità che questo linguaggio offre sul controllo dello stile di un documento, lasciando allo sviluppatore un maggior dispendio di tempo (per formattare ogni singolo elemento) e di risorse (occupando più spazio in termini di byte, dove ogni carattere ne occupa 1).

Riassumendo, i Css nei confronti dell'Html sono:

1. più pratici
2. più potenti
3. dinamici

Esaminiamo punto per punto quest'ultima affermazione.

Praticità dei Css

Esaminiamo il seguente codice Html atto a formattare un semplice testo, impostando il colore rosso ed il grassetto:

<p><font color="#800000"><b>Testo formattato con semplice Html</b></font><p>
Nulla di particolarmente complicato, soluzione ideale per una singola pagina informativa creata al volo, o per un sito di poche, massimo una decina di pagine, senza alcuna pretesa di tipo grafico.

Consideriamo un sito composto da 500 pagine, di portata quindi ancora bassa per un portale o un sito di medio-grandi dimensioni, ed immaginiamo di volerlo formattare completamente con i Tag Html, li dove ci si dovesse rendere conto che il colore rosso ad un testo non va più bene, ci si troverebbe di fronte ad un grosso problema: aprire ogni singolo file e modificare a mano il colore di tutti i testi rossi presi singolarmente.

I Css, vedremo più avanti come, consentono di agire con un solo cambiamento, o comunque con pochi passaggi, su tutte le parti interessate.

Potenza dei Css

I Css, oltre a consentirci di limitare un lavoro altrimenti lungo e faticoso a pochi e semplici passaggi, consentono di effettuare stilizzazioni impossibili da ottenere con semplice codice Html.

Tanto per dire la prima che mi viene in mente, non è possibile con l'Html decidere di posizionare un elemento in un determinato punto della pagina se non creando una serie di tabelle ad hoc, dove comunque non è detto che l'effetto ottenuto sia quello desiderato.

Dinamicità dei Css

La potenza dei Css non si limita alla praticità ed alla versatilità come appena detto, ma anche alla loro dinamicità, data dall'utilizzo concomitante di Javascript e della proprietà style dell'oggetto document, con cui è possibile dare vita a routine importanti nell'ambito di un'applicazione Web, iniziamo quindi a parlare di Dhtml (dynamic Html).

Caratteristiche standard dei Css

Il linguaggio Css è nato grazie alla collaborazione di alcune tra le più famose softwarehouse produttrici di browser, col W3C (World Widw Web Consortium), organizzazione mondiale atta a definire gli standard per lo sviluppo Web, il cui sito è all'indirizzo http://www.w3c.org, ed ovviamente consiglio di consultarlo.

Questa collaborazione, come tutte queste forme di standardizzazione (ove possibile) dei linguaggi per il Web, è atta a definire la compatibilità del linguaggio nei confronti di tutti i browser e software inerenti lo sviluppo e/o la consultazione del Web.

Limiti dei Css

Non sono certo tutte rose e fiori i risultati di tali collaborazioni! ovviamente ogni softwarehouse mira a portare l'acqua al suo mulino, o comunque determinate esigenze limitano il supporto dei Css a parte degli elementi.

Dunque non ci troviamo di fronte ad un linguaggio del tutto crossbrowser, ovvero standard per tutte le piattaforme, quindi è necessario prestare attenzione agli elementi che si desidera utilizzare con la formattazione Css, consiglio quindi di installare sul proprio computer, al fine di effettuare dei test, almeno browser tipo Netscape Navigator ed Opera, oltre ad Internet Explorer, normalmente installato sui sistemi Windows.

Nel corso della guida esamineremo in generale gli elementi compatibili con questi tre browser, con i quali si può lavorare con una certa tranquillità.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (47.859)

:: Referenze dei fogli di stile Css (41.725)

:: Menu ad effetto mouseover con i Css (39.069)

:: Effetti sui link con i Css (29.539)

:: Testo verticale coi Css (19.848)

:: Angoli smussati in un box coi Css (18.827)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.114)

:: Box con effetto ombra con i CSS3 (16.113)

:: Stilizzare i form Html con i Css (15.868)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.516)

IN EVIDENZA
DOWNLOAD