Il foglio di stile - CSS

Visita anche Risorse per i webmaster
archivio di risorse per la creazione di pagine web
Sommario:
Questa pagina è parte della guida Come creare un sito da zero
Il foglio di stile o CSS (Cascading Style Sheets, che, in italiano, significa fogli di stile a cascata) merita una pagina dedicata, dato che su di esso si basa tutta la grafica del sito web.
Grazie al CSS possiamo stabilire gli spazi, le distanze, i colori, le dimensioni e tutto quello che è necessario per l'aspetto che vogliamo dare alle nostre pagine web.

DA SAPERE: per il foglio di stile esiste il validatore online W3C che ne verifica la corretta compilazione: CSS Validation Service.

Metodi di implementazione dello stile

Cominciamo subito con il dire che ci sono tre modi per implementare le regole di stile in una pagina.
  1. Regole inline applicate a uno o più elementi nella zona body
  2. Regole caricate nella zona head della singola pagina
  3. Regole richiamate nella zona head tramite il collegamento con un file css esterno
Vediamo la stessa regola applicata nelle tre diverse maniere. Supponiamo di dover inserire alcune caratteristiche per il testo di un div contenitore ....

Regola inline
<div style="text-color: black; test-size: 1.2em">Testo</div>


Stessa regola caricata nella zona head, applicando al div una classe a nostra scelta per identificarlo, per esempio la classe "test":
<style>
.test {
text-color: black;
test-size: 1.2em;
      }
</style>


Stessa regola posta in un file esterno che chiameremo "style.css":
.test {
text-color: black;
test-size: 1.2em;
      }

Il file esterno style.css deve essere richiamato nella zona head con questa stringa:
<link rel="stylesheet" type="text/css" href="style.css">


Il metodo inline è il metodo più diretto e viene utilizzato per applicare piccole regole ad un determinato elemento della pagina, o per sovrascrivere una regola generale impostata nel CSS.

Il metodo di caricamento delle regole di stile nella zona head della pagina viene utilizzato quando le regole non sono molte e riguardano esclusivamente quella data pagina. Da notare che in questo caso le regole devono essere racchiuse tra i tag <style></style>.

Sia le regole inline che quelle caricate nella zona head, sovrascrivono sempre eventuali regole applicate al medesimo elemento e contenute nel foglio di stile esterno.

Il metodo del foglio di stile esterno è largamente utilizzato, perchè porta molteplici vantaggi, sia per un discorso di ordine e pulizia del codice html, sia perchè permette di effettuare molto facilmente le modifiche che interessano una pagina, o l'intero sito.

Leggi più sotto "Sovrascrivere le regole di stile".

Elementi contenitori

Abbiamo imparato a conoscere i contenitori principali della pagina che sono:

head
body
header
nav
aside
footer

Possiamo, però, anche creare altri contenitori secondari. Esistono diversi tipi di elementi contenitori: Per identificare un contenitore a cui applicare determinate regole di stile, si usa un id, o una class.

Approfondimento per i titoli (title) h1, h2, h3 ecc.

I titoli (h1, h2, h3 ecc.) non sono messi a caso, ma hanno una loro gerarchia che andrebbe rispettata. Giusto, quindi, che nella pagina ci sia sempre un titolo h1, seguito da uno o più titoli h2, a loro volta seguiti da titoli h3 ecc. Non rispettare la gerarchia e passare, per esempio, da un titolo h1 direttamente ad un titolo h3, omettendo il titolo h2, può non creare problemi, apparentemente, nella visualizzazione della pagina, ma i problemi si possono presentare implementando funzionalità aggiuntive.

Differenza tra id e class

La differenza tra id e class sta nel fatto che l'id identifica un solo elemento in maniera univoca e solo a lui verranno applicate determinate regole, mentre la class identifica una categoria di elementi che possiedono le stesse regole di stile.
Se vogliamo, quindi, definire delle regole di stile comuni a determinati elementi di una o più pagine del sito, utilizzeremo una class.

Nel codice html, scriveremo per esempio, così:

<div class="pippo">contenuto del div</div>

Nel codice del file css esterno scriveremo così:

.pippo {
   color: black;
}

"Da notare il puntino prima della parola pippo"

Cosa abbiamo stabilito? Abbiamo stabilito che il testo contenuto all'interno di qualunque div identificato con la classe "pippo" deve essere di colore nero (i colori possono essere definiti con il loro nome inglese o con il loro codice web. Es: black=#000).
Così come al div, possiamo attribuire una classe anche a immagini, o titolo, o paragrafi ecc..
Esempio:
<img class="pippo" src="qui il percorso dell'immagine">

Se avessimo voluto dare la stessa regola ad un div specifico e unico e non ad una categoria, avremmo usato l'ID, in questo modo:

<div id="pippo">contenuto del div</div>
....e nel codice css del file esterno avremmo scritto:

#pippo {
   color: black;
}

Come vedete, al posto del puntino inziale ora c'è un cancelletto. Nel foglio di stile, quindi, il puntino identifica una classe e il cancelletto identifica un id.

Cosa abbiamo stabilito? Che il div "Pippo" e solo lui in quella pagina deve avere il testo di colore nero.
(Io sto usando una sola regola come esempio, ma, naturalmente, è possibile inserire quante regole si desidera alla stessa classe, o allo stesso id).

Gli id e le classi possono essere applicati a qualunque elemento (span, p, img, a, ul, li, h1, h2, ecc).
È possibile anche applicare più classi allo stesso elemento. Esempio:

<div class="pippo carlo mario">

A che serve? Serve ad unire insiemi di regole differenti. Per esempio, se la classe "pippo" stabilisce che il colore del testo deve essere nero e la classe "carlo" dice che deve essere di dimensione 1.4em, mettendo insieme le due classi avremo il testo nero e di dimensione 1.4em.
In ogni contenitore padre è possibile, inoltre, applicare regole specifiche agli elementi figli. Per esempio, se vogliamo che solo i titoli h2 contenuti in un determinato div abbiano un certo colore, scriveremo la regola, nel foglio di stile, in questo modo:

#pippo h2 {
color: red;
}

Elementi, o classi e ID a cui vogliamo applicare una o più regole comuni possono essere raggruppati separandoli con una virgola.

Esempio:
nav, #tizio, .pippo {
color: red;
}
Abbiamo indicato che il testo contenuto nell'elemento principale nav e il testo nel contenitore con id="tizio" e il testo in tutti i contenitori con class="pippo" sarà di colore rosso.

NOTA: classi e ID non possono essere identificati usando solo numeri.
È bene, per praticità e chiarezza, che le regole contenute nel foglio di stile rispecchino l'ordine delle sezioni del codice html dall'alto verso il basso. Inizieremo, quindi, con le regole del body, per poi passare all'header, ai vari div e via di seguito fino al footer.

Gli elementi contenitori utilizzati come generici, possono essere considerati dei selettori. Per esempio, la regola:
div {
color: red
}

Indica che il testo contenuto in tutti i div della pagina deve essere di colore rosso.
Le classi e gli id possono essere resi più specifici facendoli precedere dal tag a cui si riferiscono.
Per esempio:
div.pippo{}
div#pippo{}
A lato pratico, questo serve per indicare che le regole devono essere applicate solo ai div con tale classe, o id e non ad altri tipi di elementi con quella stessa classe, o id.
Può servire anche quando è necessario sovrascrivere delle regole, vedi più avanti.

I selettori

I selettori, come dice il termine, servono per selezionare gli elementi HTML delle pagine web che vogliamo modificare. Esistono molti selettori CSS che permettono di selezionare gli elementi con precisione per applicare lo stile in modo mirato.
Vediamo quali sono:

Asterisco * 

Selettore universale. Le regole indicate con questo selettore verranno applicate, indistintamente, a tutti gli elementi della pagina.
Esempio:
*{
color: #000;
font-size: 2.0rem;
}

Selettore di attributo

Consente di definire una regola di stile per tutti gli elementi che posseggono un determinato attributo.
Mettiamo, per esempio di voler dare il colore rosso a tutti i link che si aprono in una nuova scheda del browser e posseggono, quindi, l'attributo target="_blank".
Esempio:
[target="_blank"] {
  color: red;
}

<a href="" target="_blank">prova attributo</a>

Risultato: prova attributo

NOTA: al selettore di attributo possono essere applicate impostazioni più specifiche. Per approfondimento:
CSS Attribute Selectors

Selection Selector

Il selettore ::selection imposta proprietà stabilite alla parte di un elemento selezionata dall'utente.
Solo le seguenti proprietà possono essere applicate a questo selettore: Esempi di applicazione:

Generale:
::selection {
  background: green;
  color: white;
}

Classe specifica:
.custom-text::selection {
  background: green;
  color: white;
}

<p class="custom-text">Select some of this text</p>

La selezione avrà sfondo verde e testo di colore bianco.

Prova a selezionare questo testo

Pseudo classe

È una parola chiave, preceduta da un "due punti", che definisce uno stato dell'elemento e che si aggiunge ad un selettore, o ad un id, o ad una classe per impostare delle regole valide solo quando l'elemento si trova in quello stato. Per esempio, si vuole dare un certo stile all'elemento quando si passa il mouse, oppure quando è selezionato, oppure se è il primo figlio di un elemento genitore.

Esempio 1:
a:visited {
  color: blue;
}

Colore dei link già visitati.

Esempio 2:
a:hover {
  color: red;
}

Colore dei link al passagio del mouse.

Esempio 3:
li:first-child {
  color: red;
}

Il primo list-item di ogni lista avrà il testo di colore rosso.
Risultato:
Elenco di tutte le pseudo classi e approfondimento:
CSS Pseudo-classes

Pseudo elemento

È una parola chiave preceduta da una "coppia di due punti" che viene aggiunta ad un selettore per modellare le parti specificate di un elemento.
Gli pseudo elementi sono questi:

::before
Esempio:
p::before {
content: "prima ";
color: red;
}

La parola "prima" verrà aggiunta prima del testo di ogni paragrafo e sarà di colore rosso.
Risultato:
prima testo del paragrafo

::after
Esempio:
p::after {
content: "dopo ";
color: red;
}

La parola "dopo" verrà aggiunta dopo il testo di ogni paragrafo e sarà di colore verde.

Risultato:
testo del paragrafo dopo

NOTA: sia con before che con after, è possibile lasciare vuoto il valore di "content" per definirlo solo attraverso le regole di stile.


::first-letter
Esempio:
p::first-letter {
color: red;
}

La prima lettera del testo di ogni paragrafo sarà di colore rosso.

Risultato: Testo del paragrafo

::first-line
Esempio:
p::first-line {
color: red;
}

La prima riga del testo di ogni paragrafo sarà di colore rosso.

Risultato:
Prima riga
Seconda riga

::selection
Esempio:
p::selection {
color: red;
background: yellow;
}

Quando l' utente selezionerà il testo di un paragrafo, la selezione avrà sfondo giallo e il testo diventerà di colore rosso.
Omettendo la p di paragrafo e scrivendo solo ::selection, la regola verrà applicata a tutta la pagina.

Selettori di elementi figli

Consentono di scegliere come target elementi specifici in base al loro ordine.
Nell'esempio lavoriamo sugli elementi figli <p> del div contenitore padre .container
Nota: :nth-child (ennesimo) è utilizzato per abbinare gli elementi; n è un calcolatore e rappresenta i numeri interi, non negativi, a partire da 0..
Esempio:
<style>
/* Testo del primo elemento del gruppo, colore = rosso*/
.container p:first-child {
color:red;
}
/* Testo dell'ultimo elemento del gruppo, colore =  verde*/
.container p:last-child {
color:green;
}
/* Testo di un elemento ogni 3 del gruppo, colore =  blu*/
.container p:nth-child(3n) {
color:blue;
}
/* Testo di ogni elemento del gruppo, partendo dal quarto, = sottolineato*/
.container p:nth-child(n + 4) {
text-decoration: underline;
}
/* Testo di un elemento ogni 3 del gruppo, partendo a contare dal secondo, = grassetto*/
.container p:nth-child(3n + 2) {
font-weight: bold;
}
</style>

<div class="container">
<p>uno</p>
<p>due</p>
<p>tre</p>
..................
</div>

Risultato:

uno

due

tre

quattro

cinque

sei

sette

otto

nove

dieci

undici

dodici

tredici

quattordici

quindici

sedici


È possibile usare l'esclusione allo stesso modo, utilizzando :not.
Esempio:
.container p:not(:first-child){
color: green;
}

In questo caso, il testo di tutti gli elementi figli sarà di colore verde, eccetto il primo.

È possibile unire due selettori.
Esempio:
.container p:not(:first-child):not(:last-child) {
color: green;
}

In questo caso, il testo di tutti gli elementi figli sarà di colore verde, tranne nel primo e nell'ultimo.

I simboli nei selettori

> figlio diretto, indica che le regole devono essere applicate solo all'elemento figlio diretto dell'elemento contenitore.
Esempio:
div > p { 
color: red;
}

Il primo paragrafo p figlio diretto del contenitore #container avrà il testo di colore rosso.

+ fratelli adiacenti, ci devono essere due elementi figli dello stesso contenitore padre, che non devono essere necessariamente dello stesso tipo (due div, o due paragrafi, oppure un div e un paragrafo ecc), purchè uno di seguito all'altro. Al secondo elemento si applicheranno le regole di stile.
Esempio:
<style>
div + p {  
  color: green;
}
</style>

<div>  ->contenitore padre
  <div>  ->div primo figlio
         uno
  </div>
  <p>due</p> ->p secondo figlio
</div>

Risultato:
uno
due

~ combinatore di fratelli adiacenti, come il precedente, ma le regole saranno valide non solo per il secondo fratello, ma anche per i fratelli successivi, purchè seguano immediatamente il primo fratello a cui vengono applicate.
Esempio:
<style>
div ~ p {  
  color: green;  
}
</style>

<div> ->contenitore padre
  <div> ->div primo figlio
    uno
  </div>
  <p>due</p> ->p secondo figlio
  <p>tre</p> ->p terzo figlio
</div>


Risultato:
uno
due
tre

Lang selector

Il selettore :lang() viene utilizzato per selezionare gli elementi che hanno un attributo lang con il valore specificato.
Questo valore è dato da un codice di due lettere che corrisponde alla lingua relativa.
I codici possono essere semplici (es: lang="fr" per il francese), oppure combinati (es: lang="fr-ca" per il francese canadese).
Esempio di implementazione:
p:lang(it) {
   background-color: #ffff66;
 }

Il font

Se non impostate il tipo di font il browser del visitatore utilizzerà il font di default del computer in uso. Per evitare che questo accada ed essere certi che tutti visualizzino il sito con il font che scegliete per il vostro layout, dovete scaricarlo ed includerlo, oppure importarlo.
Ecco i due metodi:

Metodo con il font scaricato e implementato nel sito:
Premessa: questo metodo garantisce lo stesso aspetto dei caratteri in tutti i browser. Pe questo motivo, dopo aver scaricato il font da Google font ( o da altri siti, ce ne sono diversi), è necessario procedere ad una conversione per ottenere i diversi formati supportati dai vari browser. Il procedimento è quello che segue:
  1. Scelgo il font da Google font e lo scarico:
    https://fonts.google.com/

    verificato su segnalazione in data 15 agosto 2021
  2. Scelgo un convertitore online che dia un risultato completo, come:
    https://transfonter.org

  3. Carico il font da convertire (in formato TTF).
  4. Scarico il pacchetto ottenuto.
  5. Apro lo zip.
  6. Copio e incollo la cartella contenente i formati del font nella stessa cartella che contiene il file CSS del sito.
Collego il font come segue:

Nella prima riga del foglio di stile (.css) incollo le impostazioni fornite dal programma, che, per essere complete, devono essere come queste:
@font-face {
    font-family: 'examplefont';
    font-display: swap;
    src: local('Examplefont'),
         url('fonts/examplefont.eot'),
         url('fonts/examplefont.eot?#iefix') format('embedded-opentype'),
         url('fonts/examplefont.woff2') format('woff2'),
         url('fonts/examplefont.woff') format('woff'),
         url('fonts/examplefont.ttf') format('truetype'),
         url('fonts/examplefont.svg#examplefont') format('svg');
}

Per approfondimento:
https://www.w3.org/TR/css-fonts-4/

NOTA: Per una corretta visualizzazione delle pagine web su tutti i browser, è consigliato usare sempre i CSS Web Safe Fonts.
Se viene fornita la funzione local(), viene cercato il carattere locale, se presente, nel computer dell'utente. In caso contrario, viene scaricata e utilizzata la risorsa font specificata tramite la funzione url(). In pratica, in "local" bisogna indicare il nome del font così come scritto usualmente nei font di sistema.

La regola "font-display: swap;" è consigliata da Google per rendere immediatamente visibile il testo e non rallentarlo aspettando il caricamento del font.
Per maggiori informazioni su font-display:
Controlling Font Performance with font-display

Infine, richiamo il font come descritto più sotto per entrambi i metodi.

Metodo con font importato:

Vado su Google font (o altro sito di propria scelta).
Prelevo la stringa di importazione simile a quella che segue e la incollo nella prima riga del foglio di stile (.css):

@import url('https://fonts.googleapis.com/css?family=Droid+Sans');

In alternativa, è possibile richiamare il font nella sezione head della singola pagina utilizzando questa stringa:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Droid+Sans">

In questo caso, naturalmente, l'impostazione avrà valore solo per quella pagina e non per l'intero sito.

Richiamo del font valido per entrambi i metodi:

Per indicare il font di default del sito, nelle impostazioni di "body" del foglio di stile (.css) incollo questo comando:

font-family: 'Droid Sans';

Il testo contenuto in tutte le pagine del sito collegate a questo foglio di stile verrà letto e riprodotto dal browser utilizzando il font "Droid Sans".
È possibile importare più font e impostare una regola generale a livello di body, per poi applicare regole specifiche per altre sezioni. Se, per esempio, impostassimo un font differente per la sezione header, sarebbe solo il testo contenuto nell'header delle pagine a utilizzare quel font, mentre le altre sezioni continuarebbero ad utilizzare quello di default impostato nel body. Questo vale per qualunque sezione e anche per qualunque contenitore definito.
La regola specifica di una contenitore "figlio" sovrascrive e annulla quella del contenitore "genitore".

NOTA: il metodo di importazione è più semplice, ma penalizza le pagine del sito in velocità di caricamento.

Per le dimensioni del font, leggi: "Il testo e il font".

Gestione del testo

Regole per la visualizzazione e disposizione del testo in un elemento di blocco (div, p, span ..).
Per comprendere queste regole, dovete immaginare il vostro testo come lo scrivete manualmente nel codice di una pagina html. Quando si parla di spazi bianchi, si intendono gli spazi che lasciate tra le parole con la spaziatrice della tastiera mentre scrivete e non definiti da tag html. Quando si parla di interruzioni di riga, si intendono gli spazi che lasciate tra due righe di testo con il tasto a capo della tastiera mentre scrivete e non definiti da tag html.

word-wrap

Consente alle parole lunghe di essere in grado di spezzarsi e continuare nella riga successiva.
Valori:
word-wrap: normal : Interrompe le parole solo nei punti di interruzione consentiti. Questa è l'impostazione predefinita
word-wrap: break-word : Permette di spezzare parole, anche in modo arbitrario, per impedire l'overflow di un elemento di blocco.

word-break

Word-break funziona come word-wrap, ma con qualcosa in più. Fornisce altri due valori: break-all e keep-all.
Valori:
normal : Valore di default. Utilizza le regole di interruzione di riga predefinite.
word-break: break-all : La parola può essere spezzata in qualsiasi carattere per evitare l'overflow.
word-break: keep-all : Come il valore normal, ma non spezzerà le parole in CJK (cinese/giapponese/coreano). Questo è un valore non supportato da alcuni browser minori.
word-break: break-word : La parola può essere spezzata in modo arbitrario per evitare l'overflow. È un valore non ufficiale supportato da Chrome, Safari e alcuni altri browser. Equivale a word-wrap: break-word.
Un vantaggio è che supporta modifiche dinamiche della larghezza del testo tramite Javascript.

white-space

La proprietà CSS white-space controlla come viene gestito lo spazio bianco tra le parole del testo.
Valori:
white-space: normal : Il numero di spazi bianchi tra due parole collassa in un solo spazio. Il testo va a capo quando necessario. Questa è l'impostazione predefinita.
white-space: nowrap : Il numero di spazi bianchi tra due parole collassa in un solo spazio. Il testo non va mai a capo, ma continua sulla stessa riga finché non incontra un tag <br>.
white-space: pre : Il numero di spazi bianchi tra due parole viene preservato e anche il numero di interruzioni tra due righe. Il testo va a capo solo se incontra un tag <br>. Agisce come il tag <pre> in HTML.
white-space: pre-wrap : Il numero di spazi bianchi tra due parole viene preservato e anche il numero di interruzioni tra due righe. Il testo va a capo se necessario.
white-space: pre-line : Il numero di spazi bianchi tra due parole collassa in un solo spazio, ma viene preservato il numero di interruzioni tra due righe. Il testo va a capo quando necessario .

hyphens

La proprietà hyphens definisce se la sillabazione è consentita per creare più opportunità di ritorno a capo automatico all'interno di una riga di testo.
Segue le regole di partizione di ogni idioma e per questo è necessario definire l'attributo lang del tag html, o dello specifico contenitore, affinché funzioni correttamente.
Valori:
hyphens: none : Le parole non sono sillabate e non vengono interrotte. Le righe andranno a capo solo tra gli spazi bianchi.
hyphens: manual : Predefinito. Le parole sono sillabate, se necessario e vanno a capo seguendo le regole di sintassi corrette.
hyphens: auto : Le parole sono sillabate, se necessario, dove l'algoritmo del browser lo decide. Il browser è libero di spezzare automaticamente le parole nei punti di sillabazione che ritiene appropriati, seguendo qualsiasi regola scelga.

Visualizza l'esempio delle regole applicate

La proprietà display

La proprieà "display" definisce il comportamento di un elemento nella visualizzazione.
Es: display: inline;
I valori principali sono: Per approfondimento: CSS display property

La proprietà position

La proprietà position stabilisce il modo in cui un elemento viene posizionato nel layout della pagina web.
I valori sono:

Vai all'esempio pratico

Regole utili

Regole di interesse generale:

Ci sono alcune regole utili e consigliate che vanno inserite nella parte alta del foglio di stile.

Una regola utile è questa:
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box
}

.... che serve a indicare che qualunque bordo venga applicato agli elementi contenuti nella pagina dovrà restare nelle dimensioni originali dell'elemento stesso e non variarle. Se, per esempio, caricherete un'immagine di 200x200px e vorrete applicare un bordo di 4px, non vedrete le dimensioni diventare 208x208px, ma esse resteranno di 200x200px magrado il bordo aggiunto. Questo si rivela molto utile per mantenere inalterato l'equilibrio tra i diversi elementi che compongono la pagina.

Nelle impostazioni di stile per html e body, importante inserire queste regole:
html, body {
margin: 0;
padding: 0;
}


Per le immagini, importante questa regola:
img {
    max-width: 100%;
    height: auto;
    width: auto;
    /* for ie 8 */
    border: 0;
}

.... affinchè le immagini non superino la larghezza del loro contenitore e non abbiano il bordo intorno che le versioni vecchie di IE mettono di default.

Per riassumere, possiamo dire che il foglio di stile (salvo esigenze particolari) dovrebbe iniziare sempre con queste regole generali:
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
  background-color:#fff;
  font-size:16px;
  font-family:'arial',sans-serif;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -moz-text-size-adjust:100%
}
img {
    max-width: 100%;
    height: auto;
    width: auto;
    /* for ie 8 */
    border: 0;
}


Un'altra regola utile, che potete aggiungere, è questa..
a {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
}

.. che serve ad indicare di "rompere" i link troppo lunghi nella visualizzazione su mobile. Senza questa regola, i link non vengono mai interrotti e, se superano la larghezza dello schermo, escono dallo stesso, causando un'oscillazione orizzontale.

Regole di interesse soggettivo:

Questa regola serve ad impedire l'evidenziazione del testo all'interno di un determinato contenitore.
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Il contrario serve ad evidenziare il contenuto al click:
div {
-webkit-user-select:all;
-moz-user-select:all;
-ms-user-select:all;
user-select:all;
}

Margin e padding

Il margin è lo spazio che separa il contenitore (per es. un div) dalla zona circostante.

Il padding è lo spazio che separa il contenuto dal margine del contenitore. Frequentemente usato, per esempio, per distanziare un contenuto testuale.

margin e padding
Per il margin e per il padding valgono le stesse regole.

Padding e margin si impostano in base alla posizione: top (in alto), bottom (in basso), left (a sinistra), right (a destra).
I valori vengono impostati in questo modo (per gli esempi userò il padding):

-Se ci sono tutti e 4 i valori, si interpretano così:

padding: 10px 20px 15px 5px;
equivale a:

padding top 10px
padding right 20px
padding bottom 15px
padding left 5px

-Se ci sono solo 3 valori, si interpretano così:

padding: 10px 20px 15px;
equivale a:

padding top 10px
padding right e left 20px
padding bottom 15px

-Se ci sono solo 2 valori, si interpretano così:

padding: 25px 50px;
equivale a:

padding top e bottom 25px
padding right e left 50px

-Se c'è un solo valore, tutti i lati dell'elemento avranno lo stesso padding secondo il valore indicato:

padding: 20px;

-Se c'è un solo valore in pixel seguito da uno zero, il padding è equivalente in basso e in alto e ha valore zero lateralmente.

padding: 20px 0;

-Se c'è un solo valore in pixel preceduto da uno zero, il padding è equivalente a destra e a sinistra e ha valore zero sopra e sotto.

padding: 0 20px;

-Solo per il margin: Se il primo valore è seguito da "auto", un elemento contenitore con larghezza definita (anche in percentuale) appare centrato nella pagina.

margin: 0 auto;
margin: 20px auto;

Sovrascrivere le regole di stile

Accade che sia necessario sovrascrivere delle regole prestabilite. Per esempio, se vogliamo modificare una regola soltanto per una determinata pagina.
Ci sono delle criteri precisi che riguardano la sovrascrittura, con una gerarchia che determina la precedenza data dal browser.
Vediamo di spiegarlo bene:
Questa è la prima gerarchia stabilita per la precedenza:
  1. Regole inline
  2. Regole in zona head
  3. Regole in file esterno
Quindi, le regole applicate inline al singolo elemento hanno la precedenza e sovrascrivono qualunque regola diversamente data.
Dopo le regole inline, ci sono, per gerarchia, le regole messe nella zona head della singola pagina, che sovrascrivono sempre le regole caricate tramite file esterno.
Infine, ci sono le regole del file esterno che sono valide unicamente se non ci sono le regole precedenti che le sovrascrivono.

Detto questo, esistono anche altre precedenze, date, per esempio, dalla posizione in cui le regole vengono testualmente scritte, se prima o dopo altre.
Per esempio, se scriviamo:

div {
background-color: white;
}

e sotto scriviamo:

div {
background-color: red;
}

Di che colore sarà lo sfondo dei div della pagina?
La risposta è: rosso, perchè la seconda regola ha la precedenza sulla prima e così vale per eventuali regole successive. La regola scritta dopo sovrascrive sempre quella scritta prima. L'ultima sovrascrive tutte le precedenti.

La precedenza data dalla successione in cui sono scritte le regole vale sia che siano scritte nel file esterno, che nella zona head, che inline, fermi restando i diritti di precedenza di queste posizioni.

Ci sono anche precedenze stabilite dall'importanza dell'identificazione data all'elemento e da quanto è specifica.
Per esempio, se uno stesso elemento ha un id e anche una classe, le regole date all'id avranno la precedenza su quelle date alla classe.
Mettiamo di avere questo div:

<div id="caio" class="tizio"></div>

E queste regole di stile:

#caio {
background-color: white;
}
.tizio {
background-color: red;
}
div {
background-color: blue;
}

La prima regola si applica ad un singolo div con id caio e solo a lui. L'identificazione è quindi molto specifica.
La seconda regola si applica a tutti i div che hanno classe tizio. È meno specifica della precedente, ma più specifica della successiva che si applica genericamente a tutti i div della pagina.

Quindi, di che colore sarà lo sfondo del div in questione?
Lo sfondo del div con id caio sarà bianco, perchè le regole successive, che avrebbero la precedenza come posizione, sono meno specifiche. Tutti i div solo con classe tizio avranno, invece, lo sfondo rosso. Tutti gli altri div generici della pagina avranno lo sfondo blu.

Però, se rendo ancora più definita l'identificazione dell'elemento specificando il tag a cui si riferisce la classe, o l'id, posso nuovamente cambiare le cose.
Per esempio:

div.tizio {
background-color: red;
}

avrà la precedenza su..

.tizio {
background-color: green;
}

e

div#tizio {
background-color: red;
}

avrà la precedenza su..

#tizio {
background-color: green; }

Esempio pratico

La proprietà !mportant

La proprietà !important, scritta così con il punto esclamativo davati e aggiunta ad una regola css, sovrascrive qualunque altra regola, che sia inline, o nella pagina, o nel css esterno.
Es: <div style="background-color: green !important"></div>
Naturalmente, se gli !important dovessero essere più di uno, varrebbero le regole di precedenza prima descritte.

I vendor prefixes

Con vendor prefixes si definiscono le differenti sintassi tramite le quali i vari browser supportano le regole del linguaggio css. Non tutte le regole css devono essere scritte in modo differente per i diversi browser. Per fortuna, la maggior parte delle regolo sono supportate da tutti senza problemi.
In questo articolo, trovate un comodo elenco a riguardo: http://shouldiprefix.com/#min-width.

Ecco l'esempio di una regola che richiede i prefissi:
.example {
 -webkit-transform: rotate(30deg); /* Ch &lt;36, Saf 5.1+, iOS &lt; 9.2, An =&lt;4.4.4 */
 -ms-transform: rotate(30deg); /* IE 9 */
 transform: rotate(30deg); /* IE 10, Fx 16+, Op 12.1+ */
}

Aggiungere manualmente, ogni volta, i prefissi necessari diventerebbe un lavoro non da poco. Per ovviare al problema ci sono due soluzioni. Usando il javascript possiamo dimenticarci dei vendor prefixes, ma è pur sempre uno script che non giova alla velocità del sito e poi dipendere da uno script per le regole basilari della grafica non è il massimo.

Il tool online richiede un pochino di lavoro in più da fare e il codice css viene leggermente allungato dai prefissi ripetuti, ma il risultato è stabile e sicuro.

Posso indicarvi questo servizio:
Autoprefixer CSS online/

Le media queries

Alla fine del foglio di stile si trovano le media queries. Dato che l'argomento è importante e necessita di attenzione, vi rimando alla guida specifica Il sito responsive e le media queries

Forzare il browser a ricaricare il foglio di stile

Non si finisce mai di migliorare il proprio sito e può capitare di dare qualche ritocco all'aspetto anche dopo la pubblicazione.
Per fare in modo che le modifiche siano immediatamente visualizzate dai visitatori, è possibile forzare il browser a ricaricare il foglio di stile invece di utilizzare quello in cache.
Per ottenere questo, basta aggiungere una piccola indicazione al collegamento presente nella pagina, così:

<link rel="stylesheet" type="text/css" href="style.css?V=1.0">

Cambiando, ad ogni modifica, il numero della versione (1.1, 1.2, 1.3 ecc) il css verrà ricaricato e aggiornato dal browser dei visitatori.

(Questo metodo vale anche per i file js)

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.


In questa guida:
Leggi tutto
Torna alla pagina principale:Creare un sito da zero ->>
Continua con....Includere css e js ->>