CSS (Cascading Style Sheets) è un linguaggio di fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML. Questo articolo introduttivo ha lo scopo di aiutare i commercianti PrestaShop a comprendere le basi dei CSS, tra cui come utilizzare i selettori, come identificare questi selettori sul suo sito tramite l'ispettore elementi e le proprietà fondamentali dei CSS.
Passo 1 Capire i selettori CSS
I selettori CSS sono modelli che identificano gli elementi a cui verranno applicati gli stili. Ecco i tipi più comuni di selettore:
-
Selettori di tipo: puntano agli elementi in base al nome del loro tag, come ad esempio
pper i paragrafi. -
Selettori di classe: si rivolgono agli elementi con un attributo di classe specifico, preceduto da un punto. Per esempio,
.menusi rivolgerà a tutti gli elementi che hannoclass="menu". -
Selettori ID: si rivolgono agli elementi con un attributo ID specifico, preceduto da un segno di cancelletto. Per esempio,
#headerpunterà all'elemento conid="header". -
Selettori di attributi: indirizzano gli elementi in base alla presenza di un attributo o al valore di un attributo. Per esempio,
[type="text"]selezionerà tutti gli elementi con un elementotypecon il valore "testo". -
Selettori di pseudo-classe: elementi di destinazione in stati specifici. Per esempio,
:hoverapplica uno stile quando l'utente passa sopra un elemento con il cursore.
Passo 2 comprendere la natura specifica dei selettori CSS
La caratteristica specifica dei selettori CSS è un sistema di punti utilizzato dai browser per determinare quali regole CSS si applicano in caso di conflitto tra diverse regole che riguardano lo stesso elemento. Ecco come funziona la specificità:
-
Selettori ID: un ID (
#id) ha la massima specificità. Ha segnato 100 punti. -
Selettori di classe, pseudo-classe e attributo: questi selettori (
.classe,:hover,[type="text"]) hanno una specificità media. Ogni selezionatore ottiene 10 punti. -
Selettori di tipo: selettori che puntano agli elementi in base al nome del loro tag (
h1,div) hanno la specificità più bassa. Ogni selezionatore ottiene 1 punti. -
Il selettore universale (``), i combinatori (
+,>, ,~) e la negazione della pseudo-classe (:not()) non influiscono sulla specificità (0 punto). -
Stili in linea (non raccomandato): inserire gli stili direttamente in un attributo
styledi un elemento HTML (per esempio,<div style="color: red;">) ha una maggiore specificità rispetto a qualsiasi selettore, ricevendo 1000 punti.
Verrà applicata la regola con la maggiore specificità totale. In caso di parità, l'ultima regola definita nel CSS avrà la precedenza. Per forzare uno stile nonostante la specificità, può usare!important anche se il suo uso è generalmente sconsigliato, in quanto può rendere più complesso il debug del codice CSS.
Passo 3 Identificare i selettori sul suo sito utilizzando l'ispettore elementi
Per modificare efficacemente gli stili del suo negozio PrestaShop, deve essere in grado di identificare i selettori utilizzando l'ispettore elementi del browser:
-
Clicchi con il tasto destro del mouse sull'elemento che desidera stilizzare e selezioni "Ispeziona".
-
L'ispettore elementi aprirà una finestra in cui sarà evidenziato il codice HTML dell'elemento.
-
Nel pannello Stili accanto, può vedere il CSS applicato a questo elemento. Può anche modificare temporaneamente questi stili qui, per vedere come le modifiche influiscono sulla sua pagina (le modifiche apportate qui saranno solo temporanee e andranno perse la prima volta che la pagina viene ricaricata; servono essenzialmente per testare le modifiche CSS prima di inviarle al server).
Esempio: qui viene modificato il colore di sfondo dell'elemento
Passo 4 Proprietà e valori CSS di base
Per applicare gli stili, utilizza le proprietà CSS assegnate a valori specifici. Ecco alcune proprietà di base:
- colore: definisce il colore del testo.
- background-color: definisce il colore di sfondo di un elemento.
- font-size: definisce la dimensione del carattere.
- margin e padding: controllano lo spazio intorno e all'interno degli elementi, rispettivamente.
- bordo: definisce il bordo intorno agli elementi.
Esempio di sintassi CSS :
selector {
property: value;
}
Per esercitarsi, provi a cambiare il colore di sfondo e la dimensione del carattere di un elemento del suo sito.
Domande frequenti
Come posso annullare una regola CSS applicata per errore?
Può eliminare o commentare la regola CSS nel suo file, oppure sovrascriverla aggiungendo una nuova regola più specifica o utilizzando la funzione!important dopo il valore della proprietà.
Le modifiche al CSS sono immediatamente visibili?
Per vedere le modifiche, deve aggiornare la pagina, cancellare la cache del negozio da Impostazioni avanzate / Prestazioni e talvolta cancellare la cache del browser affinché le nuove regole CSS abbiano effetto.