Skinning School: 1 Lezione - Introduzione al linguaggio CSS

Introduzione al linguaggio CSS

Benvenuti a questa prima lezione del corso di Skinning del World Archive. Come detto nella precedente introduzione al corso, questa prima lezione tratterà il linguaggio CSS e nello specifico le basi e i codici più frequenti che troveremo nel corso e quindi nella nostra parte di codici. Consiglio di andare a vedere questa breve introduzione al linguaggio fatta da .Erik , CSS, che cosa è?.
Dunque inizierei la lezione andando ad analizzare la sintassi del linguaggio CSS. Forse alcuni di voi avranno già avuto a che fare con questo tipo di linguaggio e avrete notato che è caratterizzato spesso da miliardi di righe che hanno generalmente questo contenuto, ad esempio:

.title {color:red; background: black}

Questo è un esempio di semplice codice CSS. Ogni codice CSS è caratterizzato da un selettore, nel nostro caso “.title” e dalle dichiarazioni, nel nostro caso “color:red; background: black”. Il blocco dichiarazioni deve essere obbligatoriamente racchiuso tra due parentesi graffe e ogni dichiarazioni obbligatoriamente dovrà essere divisa dal punto e virgola (esclusa l’ultima che si può anche tralasciare). Dunque possiamo riassumere così:

.selettore {dichiarazione; dichiarazione}

Chiaramente ogni dichiarazione è prestabilita e non possiamo andare a cambiare il nome. Ad esempio la dichiarazione che cambia il colore del nostro testo è “color:” seguito dalla parola del colore in inglese (color:black) o da un colore esadecimale (color:#000 che corrisponde al nero in questo caso).

Essendo Forumfree/Forumcommunity e Blogfree piattaforme dove i nostri selettori sono prestabiliti, dovremmo preoccuparci soltanto di ricordare quali selettori andranno a modificare un determinato elemento, ma questa attenta analisi verrà fatta ad ogni lezione più specificatamente. Per chiarire adesso meglio il concetto vi farò solo qualche esempio:
.menuwrap è il selettore che modificherà il nostro menù utente posto in alto (dove trovate il vostro nick messenger e discussioni). Quindi andando a modificare il selettore in:
.menuwrap {color: #000;background:white} in questo caso il nostro menuwrap avrà le scritte di colore nero e lo sfondo bianco.
ATTENZIONE: Il color modifica solamente il colore delle scritte e non modifica nessun altro colore!

Dichiarazioni
Dopo aver chiarito in parole semplice la struttura della stringa CSS ci possiamo soffermare sulle specifiche dichiarazioni che troveremo quasi sempre durante il coding.
IMPORTANTE: vi ricordo che i selettori possono cambiare, ma le dichiarazioni che si fanno sono sempre le stesse e sono uguali per tutti i selettori, questo è universale in ogni sito web o piattaforma.
Ora andiamo ad elencare le dichiarazioni più diffuse e che useremo spesso:

Bene ora conoscete solo poche delle molte dichiarazioni che il CSS ha, ma diciamo che queste sono quelle più importanti, almeno dal mio punto di vista. Nel caso me ne fosse sfuggita qualcuna (sono umano purtroppo!) non preoccupatevi, durante il corso, andando a studiare le singole stringe, avremo modo di vedere anche altre dichiarazioni.
Capisco che il primo impatto può spaventare, ma più ci farete l’abitudine (più farete coding e vi eserciterete a capire la funzione delle singole dichiarazioni) e più sarà semplice e automatico.
Per questa lezione è tutto qui, lo studio del codice CSS è purtroppo molto più articolato come noterete scrivendo su Google a proposito del tema, ma iniziando piano sarà possibile poi andare sempre più nello specifico e andare a realizzare codici più articolati e importanti.

Comunicazione: Nella prossima lezione inizieremo a guardare da vicino i codici CSS, iniziando a codificare la nostra skin. Sempre nella prossima lezione vi rilascerò un .psd (formato Photoshop) da me creato apposta per il corso. Vi consiglio di iniziare ad aprire un forum di prova e di guardare i CSS presenti (AMMINISTRAZIONE>GRAFICA>COLORI E STILI) per identificare i vari selettori e dichiarazioni in vista della prossima lezione.

Per qualsiasi dubbio potete postare qua sotto e appena possibile vi risponderò