#CSS3 secondo il W3C
Descrizione delle regole #CSS3
Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 02 Gennaio 2021
Categoria: Web Marketing Costruzione siti web 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
- CSS Esterno
- CSS Interno
- CSS Interno in linea
- 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
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" type="text/css" 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 type=”text/css”>
Qui vanno le regole CSS
</style>
</head> - CSS Interno 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) oppure
<nometag style=”Regole CSS”>testo</nometag>
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.
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}
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
- 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} - vertical-align
Apice e pedice
span{vertical-align:super|sub}
Proprietà 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à CSS3 delle tabelle
- border-collapse
Collassa i bordi delle celle in 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à 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à 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à 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à 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 decine e decine 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.
Per saperne di più sul Web Marketing potrebbero interessarti questi libri: