Sei in » Home  » Guide
Scritto da G. Meneghelli - Letto 5262 volte  -   Ultimo aggiornamento  16/12/2023




Una guida alle risorse in rete sui fogli di stile.

image article



Indice pagina




» Introduzione
» Cosa sono i fogli di stile
» Sintassi essenziale
» Dove provare in real time e online il codice
» Framework e script utili
» Web links sull'argomento
» Conclusione
» Risorse selezionate dal web





Introduzione




Una breve guida alle istruzioni CSS che integrano ed estendono il codice HTML nella creazione del layout di una pagina web.

Troverai anche risorse in rete sui fogli di stile e stumenti per la personalizzazione del layout dei siti web.



Cosa sono i fogli di stile




Il foglio di stile o CSS (acronimo di Cascading Style Sheets) è uno strumento che permette di estendere le funzionalità del semplice HTML nella formattazione delle pagine web.

Il CSS è un file testuale dove vengono inseriti tag con una determinata sintassi che consentono di personalizzare l'aspetto della pagina senza agire direttamente sul codice HTML.

Grazie ai CSS puoi, per esepmio, definire i font e la grandezza dei caratteri, dare formattazioni particolari ai tag HTML, definire formattazioni di interi paragrafi, definire i margini del documento, dare allineamenti al testo, creare effetti di transizione, gestire lo sfondo della pagina o di singoli elementi, gestire elementi testuali e immagine, creare effetti di transizione, etc.

Il contenuto è separato dalla sua rappresentazione con i CSS ed è possibile creare più layout per vari dispositivo (pc desktop, smarthphone, etc.).

I CSS danno maggiore flessibilità al codice HTML nella visualizzazione delle informazione ed offrono maggiori possibilità per creare pagine accessibili per far superare le barriere alle persone diversamente abili.

» Inizio pagina



Sintassi essenziale CSS




Una breve guida alla sintassi CSS.

p {color: blue;} dove p sta per dichiarazione, color per proprietà e blue per valore.

Il tag da usare nel codice HTML nel caso della classe, è il seguente

<DIV class="prova">
...</DIV>

mentre per l'identificativo dobbiamo usre l'istruzioneAbbiamo la classe

<DIV ID=nome_id>
...</DIV>


Esempio di sintassi:
.prova
{
color: black;
margin: 0;
}

oppure

nome_id {
color: black;
}

La differenza tra i due elementi è che l'ID deve essere usato una sola volta in una pagina, mentre CLASS può essere riutilizzato più volte.

Le parentesi graffe, indispensabili per racchiudere i tag di CSS, si fanno premendo il tasto [alt] + il numero 123 sul tastierino numero oppure [alt] + 125 e avrai le parentesi { }.

È possibile crare un file CSS esterno da includere con le seguenti istruzioni:

<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
...
</head>
<body>

oppure

<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
...
</html>

Questo è il metodo consigliato.

Possiamo includere le istruzioni all'intergo dei tag HEAD del nostro file HTML:

<html>
<head>
<style type="text/css">
body {background: grey;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>

oppure semplicemente inserendo il tag CSS all'interno del nostro HTML:

<A HREF="link.html" STYLE="color:red">Link rosso</A>

Questo è solo un esempio dei tanti selettori che è possibile utilizzare.


Viewport ti permette di crare un layout per il mobile.

Puoi inserire i stessi selettori utilizzati nel file CSS ma con valori diversi. Questi valori saranno validi solo per risoluzioni che arrivano al valore definito, in questo caso 800 pixel.

/* *** mobile *** */
@media only screen and (max-width:800px)
{
.class { }
/* seletteri che saranno utilizzati fino alla risoluzione indicata */
}

Tutto ciò racchiuso trai i caratteri /* e */ sono commenti.

Maggiori info nell'articolo di Wikipedia .

Per scoprire tutti i selettori ti consiglio la pagina W3School CSS.
Qui troverai tutte le istruzioni selettori CSS con esempi pratici.

Con l'avvento di nuovi standard HTML e CSS, è importante sapere se un determinato tag CSS/selettore è compatibile con tutti i browser.

Il sito CanIuse ti aiuta a capire se un selettore CSS è compatibile con una dterminata versione di browser



Dove provare in real time e online il codice




Per provare in real time la sintassi di un CSS, Javascript, HTML ti consiglio alcuni siti:

Codepen.io
Jsfiddle.net
Jslint
Dabblet.com
Jsbin
Hshint

Con questi siti operi in una sorta di Sandbox (ambiente isolato) per sperimentare e vedere i risultati a video di una serie di istruzioni CSS.

» Inizio pagina




Framework e script utili




call_made Meyerweb reset tool
Un toll di pubblico dominio che ha l'obiettivo di reimpostare è ridurre le incoerenze del browser in elementi come altezze delle linee predefinite, margini e dimensioni del carattere delle intestazioni e così via nella visualizzazione dei stili CSS. Infatti, non tutti i browser, mostrano alcuni in maniera aderente alle specifiche stabilite dal consorzio W3C.

» Inizio pagina




Web links sull'argomento




call_made Guida ai CSS di Mrw.it
Da MrWebmaster.it

call_made W3C - CSS
Il sito di riferimento, da dove nascono le raccomandazioni ufficiali del Web Consortium. All'interno anche links a siti, programmi e risorse utili.

call_made W3Schools - CSS (in inglese)
Sito interessante in cui potrai trovare numerosi documenti introduttivi ed avanzati sull'argomento.

call_made Guida ai fogli di Stile
Da Html.it guide, tutorial molto completi.

call_made Introduzione ai CSS
(Constile.org)

call_made Cascading Style Sheets home page
(W3.org)

call_made Template by Constile
Elenco di template pubblicati da Constile.org: pagine zoomabili, menu verticali con css, layout a tre colonne, ecc. Uno di questi template mi è servito per uno dei primi layout CSS di Lidweb.it

call_made Ten CSS tricks you may not know
Questo articolo in inglese dove propone 10 interessanti trucchi per l'utilizzo dei CSS fogli di stile.

call_made Tabelle, stili e modalità d’uso
(Webaccessibile.org)

call_made Porteapertesulweb
Comunità di pratica per l’accessibilità dei siti scolastici – USR Lombardia

» Inizio pagina




Conclusione




I file CSS sono indispensabili per creare un layout piacevo e usabile ad un sito web. Arrichiscono il codice HTML di funzioni visive molto importanti. Inoltre permettono di creare opzioni dinamiche e interattive ai menu, ai pulsanti ed a molte altre istruzioni HTML.




Altri articoli consigliati




  Modelli gratuiti per siti web (web templates)
  Download: editor e generatori di codice CSS



Giampietro Meneghelli
Lidweb.it
Ultimo aggiornamento: 16/12/2023


Tags: CSS, Guide on-line, Programmazione





  Articolo precedente


Guida al posizionamento nei motori di ricerca

  Articolo successivo


Glossario informatico di Lidweb.it - Parte 1