CSS

CSS, acronimo di Cascading Style Sheets, in italiano fogli di stile a cascata, è un linguaggio di programmazione interno ai siti web, usato per definire e regolare la formattazione di pagine nel linguaggio HTML, XHTML e XML, come ad esempio per i siti e le pagine web.

Risulta importante sapere come funzionano gli stili CSS, per poter meglio personalizzare le proprie pagine web, e quindi migliorare anche la grafica e la facilitazione nell'uso del proprio sito, sopratutto da parte vostra nella formattazione.

Cercherò di fare una guida che possa essere di facile utilizzo e molto pratica. Sul web, come su html.it, ci sono guide complete ed esaustive che permettono a chiunque di migliorare le proprie conoscenze in materia.

Prendiamo ad esempio un codice CSS:


                         
           
             
body {
 background: black;
 color: white;
}
/* Stili per i titoli h1 */
  
@media print {
 h1 {color: black;}
}


In questa parte ci sono inseriti diversi elementi, Regole, Commenti, Direttive @-rules. Questi codici sono praticamente una serie di regole, alle quali è possibile inserire dei commenti, e delle direttive @-rules, queste ultime due sono facoltative, quindi l'importante è inserire delle Regole chiare che funzionino.

Le Regole CSS

Le regole sono fatte in questa maniera: 

           
                         
SELETTORE { BLOCCO DELLE DICHIARAZIONI }  
           

Ad esempio, nel codice sopra, body è il selettore e quello in mezzo alle parentesi graffe sono le dichiarazioni. Queste sono composte da due parti, Proprietà: valore; 

La proprietà va seguita dai due punti obbligatoriamente, e la regola deve terminare con il punto e virgola. Questo deve sempre avvenire se no la regola non funziona. Tanto per dire, per un valore non si possono avere più proprietà, ma è valido il contrario. Ad esempio:

   
                         
Body {color background: white;}            => ERRATO
Body {font: 12px Verdana, arial;}           => CORRETTO
           

Abbreviazioni di sintassi:

Si tende spesso ad utilizzare i così detti shorthand properties, le italiane scorciatoie. 

Usato correttamente e molto diffusamente, è l'abbreviazione riguardo i margini: ogni elemento ha 4 margini, TOP/ALTO - RIGHT/DESTRA - BASSO/BOTTOM - LEFT/SINISTRA

Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
Ad esempio la regola per il selettore div, potrebbe essere questa:

       
             
 div {
     margin-top: 10px;
     margin--right: 5px;
     margin--bottom: 10px;
     margin--left: 5px;
}  

                 

Usando le scorciatoie, può essere scritta così:

  div {margin: 10px 5px 10px 5px;}    


L'elenco completo delle proprietà dei CSS è in questa pagina,  tuttavia per il momento possiamo utilizzare un elenco minore, che sono quelle principali e più diffuse:


  • background
  • border
  • border-top
  • border-right
  • border-bottom 
  • border-left
  • border-width
  • border-color
  • list-style
  • margin
  • padding
  • outline 


Valori


            
           
Unità di misuraDescrizione
in
(inches – pollici)
classica misura del sistema metrico americano. Praticamente nullo il suo valore su un supporto come un browser web.
cm
(centimetri)
stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta stampata.
mm
(millimetri)
vedi quanto detto per centimetri e pollici.
pt
(points – punti)
unità di misura tipografica destinata essenzialmente a definire la dimensione dei font. Il suo utilizzo è di fatto limitato ai CSS per la stampa.
pc
(picas)
unità poco usata. 1 pica equivale a 12 punti.
em
(em-height)
unità di misura di ampio utilizzo se si desidera impostare le dimensioni dei font o dei box con un unità di misura relativa.
ex
(ex-height)
di fatto inesistente il suo utilizzo. 1ex equivale all’altezza del carattere x minuscolo del font scelto.
px
(pixels)
unità di misura ideale per gli schermi. È quella più usata e facile da comprendere. USA QUESTA !!!

Percentuale

Si esprime il valore in percentuale, tutta attaccata, 33% è corretto, 33 % è sbagliato.

Colori

I colori ne abbiamo parlato già abbastanza in questa pagina.

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...