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.
NOTA BENE: Le regole di stile di recente sviluppo che non sono ancora standard, anche se corrette, possono venire momentaneamente segnalate come errore perchè non ufficialmente valide.
I vendor prefixes (prefissi specifici per ogni browser) e gli hack CSS (codifica per nascondere/mostrare il markup CSS a seconda del browser) non rientrano nelle specifiche W3C, ma sono specifici dei singoli browser, per questo motivo vengono elencati negli avvisi quando si esegue la convalida W3C.
Metodi di implementazione dello stile
Cominciamo subito con il dire che ci sono tre modi per implementare le regole di stile in una pagina.
- Regole inline applicate a uno o più elementi nella zona body
- Regole caricate nella zona head della singola pagina
- 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:
- div (da divide=separatore), contenitore di blocco (ritorno a capo)
- p (paragrafo), contenitore di blocco (ritorno a capo con interlinea vuota)
- span, contenitore inline
- h1, h2, h3, h4, h5 e h6, contenitori di blocco per i titoli (ritorno a capo, grassetto, interlinea).
La dimensione del testo diminuisce con l'aumentare del numero associato al tag.
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 iniziare con un numero, non possono contenere solo numeri e non devono contenere spazi bianchi. Gli ID fanno distinzione tra maiuscole e minuscole.
È 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:
- colore
- sfondo
- cursore
- contorno.
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 rigaSeconda 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:
Apri codice:
<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:
-
Scelgo il font da Google font e lo scarico:
https://fonts.google.com/
-
Scelgo un convertitore online che dia un risultato completo, come:
https://transfonter.org
- Carico il font da convertire (in formato TTF).
- Scarico il pacchetto ottenuto.
- Apro lo zip.
- 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');
}
AGGIORNAMENTO: Dato che WOFF e WOFF 2.0 soddisfano tutte le le richieste dei browser moderni, l'uso di EOT e TTF non è più necessario e può causare segnalazioni di errore nella console degli strumenti di sviluppo, oltre ad allungare i tempi di download dei caratteri.
Per approfondimento sui font:
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" è consigliata da Google per rendere immediatamente visibile il testo utilizzando un carattere di sistema finchè il carattere personalizzato non è pronto. Questo serve a non rallentare il caricamento della pagina 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:
- inline = L'elemento viene visualizzato in linea con gli altri elementi. Le proprietà di altezza e larghezza non hanno effetto. Se lo schermo si restringe, gli elementi rimangono sulla stessa linea.
- block = Il singolo elemento viene visualizzato come elemento di blocco. Occupa una linea da solo e per l'intera larghezza
- inline-block = L'elemento viene visualizzato in linea con gli altri elementi, ma può avere i valori di altezza e larghezza. Se non specificato, occupa la largezza necessaria al contenuto. Se lo schermo si restringe, gli elementi si dispongono su più linee
- none = Il singolo elemento non viene visualizzato e nemmeno lo spazio che occupa.
- flex = Leggi la guida "Impariamo ad usare FLEX"
- grid = Applicato ad un contenitore, dispone gli elementi contenuti secondo una griglia. Deve essere associato alla regola "grid-template-columns" (es: Grid Layout).
- table = Applicato ad un contenitore, dispone gli elementi contenuti come una tabella. Agli elementi contenuti deve essere applicata la regola "display:table-cell;".
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:
- static: predefinita, l'elemento viene posizionato seguendo il normale ordine degli elementi nella pagina.
- relative: l'elemento viene posizionato seguendo il normale ordine degli elementi nella pagina e la posizione può essere regolata con le impostazioni top, right, bottom, left.
- absolute: l’elemento esce dal normale flusso della pagina e non influenza la posizione degli elementi, ma può sovrapporsi agli elementi successivi.
Si posiziona sotto all'elemento statico, o in posizione relativa, precedente più vicino ed è in posizione relativa rispetto al suo contenitore genitore all'interno del quale si posiziona di default nell'angolo in alto a sinistra, ma solo se il contenitore genitore non è in posizione statica.
Se manca l'elemento genitore, o se il genitore è in posizione statica, si posiziona in alto a sinistra rispetto all'elemento <html>.
La posizione absolute può essere regolata con le impostazioni top, right, bottom, left.
- fixed: l’elemento esce dal normale flusso della pagina. Si posiziona sotto all'elemento in posizione statica, o relativa, precedente più vicino.
È in posizione relativa solo rispetto all'elemento <html> e non rispetto ad un genitore e mantiene tale posizione mentre il contenuto della pagina scorre al di sotto. La posizione fixed può essere regolata con le impostazioni top, right, bottom, left.
- sticky: l'elemento assume, nell'ordine, la posizione relative e la posizione fixed. Allo scroll, segue, inizialmente, il flusso della pagina per poi acquisire la posizione fissa ancorandosi al margine superiore. La posizione fixed può essere regolata con le impostazioni top, right, bottom, left.
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:
Apri codice:
*, *: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.
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:
- Regole inline
- Regole in zona head
- 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 <36, Saf 5.1+, iOS < 9.2, An =<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.
- Si può usare un javascript e nello specfico Prefix Free.
- Si può usare un tool online per aggiungere in automatico i prefissi necessari.
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/
NOTA: Alcuni vendor prefixes non rientrano nelle specifiche
W3C, ma sono specifici dei browser. Potranno apparire avvisi eseguendo la convalida W3C del codice CSS.
La stessa cosa vale per qualsiasi regola CSS implementata per la corretta visualizzazione su vecchi browser, o vecchie versioni di browser attuali.
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.
Aiuta il sito! Condividi questa pagina su: