#CSS3 secondo il W3C

Descrizione delle regole #CSS3

Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 02 Novembre 2020
Categoria: Web Marketing Costruzione siti web CSS3

Regole CSS3
#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.

Sommario CSS3

CSS interni ed esterni

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 aprire una graffa si può usare la combinazione da tastiera 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.
Esempio regola CSS3

Esempio regola CSS3
Nell’esempio soprastante tutti il tag h1 ha 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

Proprietà del testo

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à CSS3 del testo

Proprietà CSS3 degli elenchi


Proprietà CSS3 delle tabelle

Proprietà CSS3 del box-model

Proprietà CSS3 dello sfondo

Proprietà CSS3 del cursore

Proprietà CSS3 dei link

Alcune regole CSS avanzate

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 decine e decine di risoluzioni: 240, 320, 480, 768, 1024, 1200, 1366, 1600, 1920, … , 7680 per i televisori 8K UltraHD).

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

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


Se vuoi approfondire alcuni dei temi trattati, visita la pagina con le mie pubblicazioni cartacee e online.

Se l'articolo ti è piaciuto, condividilo!

Segui l'hashtag #AndreaPacchiarotti