Senza le classi CSS, creare un tema per WordPress che sia flessibile ed estendibile sarebbe virtualmente impossibile. In origine i CSS furono concepiti quando il Web era costituito prevalentemente da siti quasi del tutto statici (1996, 1998 e 2000), e questa caratteristica si riflette nelle scelte di sviluppo di questo standard. Anche se le specifiche CSS 2.1 affermano (nel capitolo dedicato ai selettori) che un uso eccessivo delle classi andrebbe evitato, è altresì vero che senza le classi i CSS perderebbero gran parte della loro capacità di adattarsi ad un ambiente dinamico quale quello di un CMS. Vediamo perché.
In WordPress esistono tre tipi di classi CSS attualmente usate nei temi: classi generiche, classi specifiche e classi cumulative.
Classi generiche
Le classi generiche vengono usate per lo più per creare stili generali da applicare a più elementi senza tener conto del loro tipo. Un esempio:
.alignleft {
float: left;
margin: 0 5px 0 0;
}
Questa classe può ad esempio essere applicata sia alle immagini che ad altri elementi, per esempio per creare l'effetto di un pullquote.
Classi specifiche
Le classi specifiche vengono applicate ad un particolare tipo di elemento:
div.widget {
width: 80%;
margin: 1em auto;
}
In questo caso il widget può comparire sia nella sidebar che nel corpo principale della pagina, mantenendo gli stessi stili.
Classi cumulative
Quando due o più classi non hanno regole di stile in conflitto, possono essere usate in modo cumulativo, ossia contemporaneamente sullo stesso elemento:
.aligncenter {
margin: 0 auto;
}
.mediumsize {
display: block;
width: 350px;
}
Esempio:
<p> <img src="" alt="" class="aligncenter mediumsize"/> </p>
Classi su body
Un esempio della combinazione di classi tra i più evidenti è quello che si ottiene sull'elemento body. Una tecnica diversa sarebbe quella di assegnare un ID diverso a tale elemento, per esempio alle pagine, ma tale tecnica si rivela insufficiente quando il numero delle pagine è elevato.
Tali classi vengono usate in modo cumulativo:
<body class="page single full-width">...</body>
Poi tali classi possono essere usate per selezionare altri elementi:
body.full-width #header {
width: 100%;
}
Cascata e specificità
Classi con maggiore specificità vincono su classi con minore specificità secondo la cascata. Possiamo intervenire in diversi modi:
- usando la dichiarazione
!important - usando selettori più specifici
- spostando le regole alla fine del foglio di stile
Esempio:
.alignright1 {
margin: 0 0 0 5px;
}
.alignright2 {
margin: 5px 0 5px 5px;
}
In questo caso la seconda regola vince sulla prima perchè, a pari specificità , la seconda regola viene dopo nel sorgente.
/https://www.html.it/app/uploads/2023/04/offerta-host-multidominio-Serverplan.jpg)
/https://www.html.it/app/uploads/2024/11/wordpress67-480x300.webp)
/https://www.html.it/app/uploads/2024/05/wordpress.jpeg)
/https://www.html.it/app/uploads/2024/05/wordpress.png)