Regole CSS3 secondo W3C

Descrizione delle principali regole CSS

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 12 Gennaio 2023
Categoria: Web Marketing Costruzione siti web CSS3

Regole CSS3

Il W3C, attraverso il CSS (Cascading StyleSheeet o Fogli di stile a cascata), elenca le regole e le descrizioni per formattare le pagine web secondo gli standard ufficiali; nella lista che segue vengono mostrate le regole CSS3 principali.
Un link attinente è quello che esemplifica i codici dei colori web in lingua inglese, in esadecimale e con la terna RGB. Sicuramente ti interessa leggere anche quali sono i tag HTML5 e HTML5.2, ma ora, bando alle ciance e parliamo di CSS3: regole CSS per costruire pagine secondo W3C.

Sommario CSS3

CSS interni ed esterni
- CSS Esterno
- CSS Interno
- CSS in linea
Proprietà delle Regole CSS3 del TESTO
Proprietà delle Regole CSS3 degli ELENCHI
Proprietà delle Regole CSS3 delle TABELLE
Proprietà delle Regole CSS3 del BOX-MODEL
Proprietà delle Regole CSS3 dello SFONDO
Proprietà delle Regole CSS3 del CURSORE
Proprietà delle Regole CSS3 dei LINK
Alcune regole CSS avanzate
Regole CSS3 per sito responsivo

CSS interni ed esterni

CSS Esterno
va all'interno del tag head e formatta tutte le pagine che lo richiamano, è dunque potentissimo
<head> <link rel="stylesheet" href="nomefile.css"> </head>
Le regole CSS vanno scritte nel file nomefile.css
CSS Interno
va all’interno del tag head e formatta la pagina in cui si trova
<head> <style> Qui vanno le regole CSS </style> </head>
CSS in linea
va nel body, all'interno del singolo tag HTML e formatta quanto contenuto in quest'ultimo
<span style=”Regole CSS”>testo</span> (in caso manchi un tag d’appoggio il selettore da usare è span) oppure
<nometag style=”Regole CSS”>testo</nometag> (nometag è un tag qualsiasi) oppure
<nometag class="nomeclasse">testo</nometag> (class va richiamato nel CSS esterno o Interno tramite la sintassi .nomeclasse{Regole CSS}

Spesso i 3 CSS vengono usati contemporaneamente.
Per aprire una graffa si può usare la combinazione da tastiera Alt+123Tn (Tn significa che i numeri vanno premuti nel tastierino numerico a destra della tastiera).Per chiudere una graffa si può usare la combinazione Alt+125Tn

La dichiarazione di una regola CSS è formata da un selettore e dalle proprietà con il relativo valore:
selettore{proprietà:valore;proprietà:valore}
dove selettore rappresenta l'elemento HTML da formattare, mentre proprietà è il tipo di formattazione da applicare con un certo valore.
Regola CSS3 - Esempio

Esempio regola CSS3

Nell’esempio soprastante tutti i tag h1 hanno colore del testo blu e allineamento a destra

All’interno delle graffe sono inutili spazi e punto e virgola finale (ogni spazio e ; occupano 1 byte ciascuno in memoria)

Per commentare una regola CSS si usa:
/*regola CSS da commentare*/

Per risparmiare codice CSS si possono raggruppare i comandi

Per selettore
h1{color:green}
h1{font-weight:bold}
diventa
h1{color:green;font-weight:bold}
Per proprietà e relativo valore
h1{font-weight:bold}
h2{font-weight:bold}
diventa
h1,h2{font-weight:bold}

Quando in un esempio trovi il simbolo | (pipe) significa che devi usare uno o l'altro valore della proprietà; ad esempio se leggi la regola CSS3
p{text-align:left|right|center|justify}
dovrai usare left o right o center o justify.

Proprietà delle regole CSS3 del testo

font-style
Corsivo (normal è il default)
p{font-style:italic}
font-weight
Grassetto (normal è il default)
p{font-weight:bold}
text-decoration
Sottolineatura (none è il default)
p{text-decoration:underline}
font-size
Dimensione (12px è il default)
p{font-size:16px}
font-family
Tipo di carattere (il default dipende dal device)
p{font-family:Arial}
Forme contratte
p{font:16px Arial}
p{font:bold 16px Arial}
color
Colore (black|#000000|#000 è il default)
p{color:red|#ff0000|#f00}
text-align
Allineamento (left è il default)
p{text-align:left|right|center|justify}
line-height
Interlinea ovvero distanza verticale tra righe (1em è il default)
body{line-height:1em}
font-variant
Maiuscoletto
p{font-variant:small-caps}
text-indent
Indentazione ovvero rientro prima riga del paragrafo
p{text-indent:10px}
text-transform
Maiuscola, minuscola, iniziale di ogni parola maiuscola (none è il default)
p{text-transform:uppercase|lowercase|capitalize}
text-shadow
Ombreggiatura
spostamento orizzontale, spostamento verticale, sfocatura, colore ombra
p{text-shadow:1px 1px 5px red}
letter-spacing
Spazio tra le lettere di una parola
p{letter-spacing:.2em}
word-spacing
Spazio tra le parole
h2{word-spacing:.3em}

Proprietà delle regole CSS3 degli elenchi

list-style-image
Specifica un'immagine come punto elenco
ul li{list-style-image:url(percorsofile)}
list-style-position
Posizione del punto
ul li{list-style-image:url(percorsofile);list-style-position:inside}
list-style-type
Specifica il tipo di elenco (disc e decimal sono i default rispettivamente per ul e ol)
ul li{list-style-type:none|disc|circle|square}
ol li{list-style-type:none|decimal|upper-alpha|lower-alpha|upper-roman|lower-roman}

Proprietà delle regole CSS3 delle tabelle

border-collapse
Unisce i bordi delle celle creando un unico bordo
table{border-collapse:collapse}
border-spacing
Distanza dei bordi delle celle
table{border-spacing:10px}
caption-side
Didascalia della tabella
caption{caption-side:bottom}
empty-cells
Visualizzazione delle celle vuote
table-layout
La tabella si adatta (auto) o meno (fixed) al contenuto
table{table-layout:auto|fixed}
vertical-align
Allineamento verticale del testo all'interno della tabella
td{vertical-align:baseline|top|middle|bottom}
Esempio
CSS
table{background:green;width:600px;table-layout:fixed} table,td{border:2px solid red;border-collapse:separate;border-spacing:20px;border-radius:20px;margin:auto} td{background:yellow;padding:40px;text-align:center} th{background:purple;padding:10px;text-align:center;color:white}
HTML
<table> <tr><th>Intestazione 1</th><th>Intestazione 2</th></tr> <tr><td>HTML</td><td>CSS</td></tr> <tr><td>SQL</td><td>PHP</td></tr> <tr><td colspan="2" style="font-size:40px;padding:10px">2017</td></tr> </table>

Proprietà delle regole CSS3 del box-model

width
Lunghezza
article{width:80%}
height
Altezza
article{height:20em}
box-sizing
Proprietà del box-model
div{width:50%;height:20%;border:1px solid #f00;box-sizing:border-box}
max-width e min-width
Misura massima e minima per la larghezza
main{min-width:640px;max-width:960px}
max-height e min-height
Misura massima e minima per l'altezza
main{min-height:400px;max-height:900px}
padding, padding-top, padding-right, padding-bottom, padding-left
Spaziatura tra il contenuto dell'elemento e il suo perimetro
- un valore: tutti i quattro lati
- due valori: primo per top e bottom, secondo per right e left
- tre valori: primo per top, secondo per right e left, terzo per bottom
margin, margin-top, margin-right, margin-bottom, margin-left
Spaziatura tra elementi
- un valore: tutti i quattro lati
- due valori: primo per top e bottom, secondo per right e left
- tre valori: primo per top, secondo per right e left, terzo per bottom
border, border-top, border-right, border-bottom, border-left, border-color, border-style, border-width, border-radius
Formattazione dei bordi (border-radius è l'arrotondamento degli angoli)
div{border:1px dotted blue}
div{border-left:1px solid;border-right:.2em dashed;border-top:5px groove;border-bottom:5px ridge}
div{border-left-width:3px;border-style:double;border-color:red;border-radius:10px}
box-shadow
Ombreggiatura
overflow
Controlla il contenuto che fuoriesce dall'elemento
- hidden: taglia il contenuto non rendendolo visibile
- visible: valore predefinito che consente al contenuto che fuoriesce dall'elemento contenitore, di essere visibile
- auto: forza il browser ad applicare al box una barra di scorrimento quando e dove serve, orizzontale o verticale o entrambe
- scroll: forza il browser ad applicare barre di scorrimento orizzontale e verticale al box il cui contenuto fuoriesce
- overflow-x: consente al browser di creare una barra di scorrimento sul lato orizzontale
- overflow-y: consente al browser di creare una barra di scorrimento sul lato verticale

Proprietà delle regole CSS3 dello sfondo

background o background-color
Colore (white è il default)
body{background-color:white|#ffffff|#fff}
background-image
Immagine
body{background-image:url(percorso del file immagine)}
background-attachment
Stabilisce se l'immagine di sfondo scorre (scroll) insieme all'elemento o se resta ancorata nella posizione definita (fixed)
background-attachment:scroll|fixed
background-position
Stabilisce la posizione dell'immagine
background-position:left|center|right (orizz) e top|center|bottom (vert), ad esempio background-position:right top posiziona l'immagine in alto a destra
background-repeat
Stabilisce la ripetizione dell'immagine
background-repeat:repeat|no-repeat|repeat-x (orizz)|repeat-y (vert)
Esempio
body{background-image:url(percorso del file immagine); background-attachment:scroll; background-position:center top; background-repeat:no-repeat}

Proprietà delle regole CSS3 del cursore

cursor
Stabilisce la forma del puntatore del mouse
a{cursor:default|help|pointer|crosshair|move|progress}
a{cursor:url(percorso del file immagine),pointer}

Proprietà delle regole CSS3 dei link

Va rispettato il seguente ordine:
a:link{} link non visitato
a:visited{} link visitato
a:hover{} link quando ci passo sopra il mouse
a:active{} link quando ci tengo premuto il tasto sinistro del mouse
Vi dichiaro all’interno specialmente color, text-decoration e background (mai cambiamenti di dimensione del testo, grassetto compreso).
Di default i link sono di colore blu e sottolineati e diventano viola sottolineati quando sono stati visitati.
Per rendere più contratti gli stati dei link posso adottare la seguente tecnica (a patto che link, visited e active abbiano la stessa formattazione):
a{} link non visitato, link visitato, link quando ci tengo premuto il tasto sinistro del mouse
a:hover{} link quando ci passo sopra il mouse

Alcune regole CSS avanzate

display
Specifica se e come un elemento è mostrato. Ogni selettore ha un valore predefinito di visualizzazione:
in linea come ad esempio span, a, img
blocco: come ad esempio div, h1 - h6, p, ol, ul, form, header, footer, section
Attraverso display si può agire su questi valori predefiniti trasformando, ad esempio, un elemento inline in uno di tipo block o viceversa:
span{display:block}
div,p{display:inline}
display:block|inline|inline-block|none
block - elemento visualizzato come un blocco
inline - elemento visualizzato come un in linea
inline-block - è come inline, ma posso specificare delle dimensioni
none - l'elemento non viene visualizzato nella pagina e non occupa spazio all'interno del documento

float
Imposta il posizionamento di un elemento permettendo di creare elementi affiancati (none è il default)
float:none|left|right
Left - l'elemento si sposta sulla sinistra dell'elemento accanto
Right - l'elemento si sposta sulla destra dell'elemento accanto
Esempio
div{width:200px;float:left;background-color:orange;color:white}
img{float:right}
<div>Ciao</div>
<img src="foto.jpg">
Se non mettessi il CSS la foto andrebbe sotto il div

clear
Elimina eventuali impostazioni di posizionamento dell'elemento float. Visto che float sposta un elemento dal flusso normale del documento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati: clear risolve questo problema tramite la sintassi:
selettore{clear:valore}(none è il default)
clear:none|left|both
left - l'elemento non può avere elementi flottanti affiancati a sinistra
right - l'elemento non può avere elementi flottanti affiancati a destra
both - l'elemento non può avere elementi flottanti affiancati né a destra né a sinistra
Normalmente si fa uso del seguente comando per ripulire eventuali float ereditati:
<div style="clear:both"></div>

z-index e position
La proprietà z-index stabilisce l’ordine di elementi sovrapposti che appaiono tali ad es. a causa della proprietà position unito a top e/o left e/o right e/o bottom.
Position assume i seguenti valori e in linea generale lavora così:
static default, gli elementi della pagina seguono il normale flusso sequenziale
absolute con top, left, right, bottom posiziona l’elemento rispetto all’area del browser
fixed con top, left, right, bottom come absolute ma l’elemento non scrolla con la pagina
relative con top, left, right, bottom posiziona l’elemento in relazione a un altro
inherit ereditata, scomodo e quindi inutilizzato
z-index assume valori:
auto: default
intero negativi e positivi: un numero più grande indica che l’elemento, se sovrapposto, sarà sopra l’elemento con valore più piccolo
inherit: ereditato

CSS3 per sito responsivo

Per rendere un sito responsivo e dunque ben visibile su tutti i devices, oltre a usare il meta viewport, implodere i link di navigazione utilizzando il trigramma e adoperare la regola per resposivizzare le immagini, ovvero:
img{max-width:100%;height:auto}
vanno usati uno o più breakpoint (punto in cui avviene una modifica del layout: decido io quanti breakpoint creare tenendo conto che tra modalità portrait e landscape di tutti i device -watch, smartphone, phablet, tablet, netbook, notebook, desktop- esistono centinaia di risoluzioni: 240, 320, 480, 768, 1024, 1200, 1366, 1600, 1920, … , 7680 per i televisori 8K UltraHD).

@media only screen and (max-width:480px){selettore{regole CSS}}
Esegue le regole CSS solo per risoluzioni fino a 480px inclusi ovvero non li esegue per risoluzioni superiori a 480px
@media screen and (min-width:480px){selettore{regole CSS}}
Esegue le regole CSS solo per risoluzioni a partire da 480px
@media screen and (min-width:480px) and (max-width: 768px){selettore{regole CSS}}
Esegue le regole CSS solo per risoluzioni da 480px a 768px

L’only è facoltativo e dopo l’and è necessario uno spazio, ma il costrutto funzionerebbe anche scrivendo solo @media senza screen and.

Mi auguro sia stato utile imparare CSS3: regole CSS per costruire pagine secondo W3C.

Per saperne di più sul Web Marketing potrebbero interessarti questi libri: