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
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

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

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

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

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).

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:


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