1. Casa
  2. Iniziamo
  3. Nozioni di base sulle classi personalizzate
  1. Casa
  2. utilizzando Blocs
  3. Progettazione
  4. Nozioni di base sulle classi personalizzate

Nozioni di base sulle classi personalizzate

Una delle funzionalità più potenti di Blocs è la capacità di utilizzare classi personalizzate all'interno dei tuoi progetti. Se provieni da uno sfondo di progettazione grafica, pensa alle classi personalizzate come stili di livello che puoi assegnare a qualsiasi elemento in Blocs per dargli un aspetto e una sensazione specifici. Le regole di queste classi possono essere regolate per apparire diverse su desktop, tablet e dispositivi mobili, il che significa che hai la possibilità di mettere a punto ogni dettaglio di un elemento specificamente per il dispositivo su cui viene visualizzato. Il video seguente copre le basi delle classi personalizzate e come possono essere utilizzate nei tuoi progetti.

Video di presentazione della classe personalizzata

Applicazione di una classe personalizzata

Per applicare una classe personalizzata a un elemento all'interno di Blocs, seleziona prima l'elemento nell'area di disegno principale di Clic sinistro esso. Ora nelle opzioni della barra laterale individua il campo etichettato Classi e fare clic all'interno di questo campo per attivarlo.

classe-campo

Una volta attivato, utilizzando la tastiera digita il nome che desideri dare alla tua classe o il nome di una classe già esistente nel tuo progetto e poi premi Invio. Questo creerà un tag di classe personalizzato nel campo delle classi, questo significa che questa classe è ora assegnata a questo elemento. Puoi ripetere questo processo per aggiungere più classi allo stesso elemento.

tag di classe

Accesso ai valori di una classe personalizzata

Esistono diversi modi per accedere ai valori di una classe personalizzata all'interno di Blocs. Il modo più semplice è farlo tasto destro del mouse una voce che mostrerà il menu contestuale. Da questo menu, seleziona Classi personalizzate e poi Clic sinistro la classe che desideri visualizzare dal menu a discesa. Questo aprirà la classe selezionata nell'editor di classi in modo da poter visualizzare e modificare i suoi valori.

modifica-custom-class

È inoltre possibile accedere ai valori di una classe personalizzata tramite Clic sinistro su uno dei tag di classe che si trovano all'interno del campo della classe, situato nelle opzioni dell'ispettore della barra laterale principale.

Modifica di una classe personalizzata

Blocs viene fornito con un potente editor di classi integrato che ti consente di modificare facilmente le classi visivamente.

editor di classi

L'editor di classi è suddiviso in Sezioni 9 per rendere la modifica di diversi tipi di regole e valori più gestibili e chiari.

sezioni di classe

1. metrica

Questo insieme di opzioni contiene i controlli di misurazione, ad esempio larghezza, altezza.

2. Scatola

Questo insieme di opzioni contiene i controlli della casella, ad esempio margin, padding, border.

3. Tipografia

Questo insieme di opzioni contiene i controlli tipografici, ad esempio la dimensione del carattere, la spaziatura delle lettere.

4. Sfondo

Questo insieme di opzioni contiene i controlli dello sfondo, ad es. Immagine di sfondo, gradiente.

5. Posizionamento

Questo insieme di opzioni contiene i controlli di posizionamento, ad esempio float, display, clear.

6. Ombre

Questo insieme di opzioni contiene i controlli dell'ombra, ad esempio l'ombreggiatura del testo, l'ombra del riquadro.

7. filtri

Questo insieme di opzioni contiene i controlli del filtro CSS, ad esempio sfocatura, saturazione, contrasto.

8.SVG

Questo insieme di opzioni contiene i controlli SVG, ad esempio il colore del tratto, il limite di riga.

9. Flettere

Questo insieme di opzioni contiene i controlli flessibili, ad esempio direzione, allineamento.

All'interno di ciascuna delle quattro sezioni, sono presenti una serie di elementi dell'interfaccia utente etichettati che consentono di applicare valori specifici per le regole CSS3 standard.

Modifica di una classe per un punto di interruzione specifico

In Blocs è possibile regolare i valori di qualsiasi classe in base al punto di interruzione in cui è visualizzata. Questo è estremamente utile in quanto ti consente di creare un'esperienza completamente unica per i tuoi utenti a seconda del dispositivo che stanno utilizzando quando visitano il tuo sito web.

Per modificare i valori di una classe in un punto di interruzione specifico, è sufficiente passare a quel punto di interruzione utilizzando il vista punto di interruzione opzioni che si trovano nel file centro della barra degli strumenti principale delle app e quindi modificare i valori di quella classe personalizzata.

selettore del punto di interruzione

Controlli del punto di interruzione

Puoi trovare ulteriori informazioni su come funzionano i controlli della vista dei punti di interruzione qui.

Ti consigliamo inoltre di guardare la lezione video di seguito che copre le basi del lavoro con classi reattive.

Lezione video sulle classi reattive

Stati di classe

Oltre a poter impostare lo stile di visualizzazione di un elemento in base al dispositivo su cui viene visualizzato, il file Blocs L'editor di classi consente inoltre di impostare lo stile di un elemento in base al suo stato corrente. Ci sono tre stati disponibili all'interno Blocs.

Normale

Lo stato predefinito di un elemento.

Librarsi

Le : hover lo stato viene visualizzato quando il cursore del mouse si trova sull'elemento.

Attivo

Le :attivo selector viene utilizzato per selezionare e definire lo stile del collegamento attivo.

Focus

Le :messa a fuoco selector viene utilizzato per selezionare l'elemento che ha il focus.

Visitato

Le : visitato selettore viene utilizzato per selezionare i collegamenti visitati.

Sfruttare questi stati significa che puoi fare cose come, cambiare il colore di un pulsante quando il mouse è sopra di esso o cambiare la dimensione del testo di un collegamento quando viene cliccato. L'utilizzo degli stati ti consente di modificare dinamicamente l'aspetto di qualsiasi elemento della tua pagina web quando viene interagito da un utente, può essere eccezionalmente utile quando devi trasmettere un messaggio sull'usabilità.

Cambiare gli stati

Per modificare i valori per uno stato specifico di una classe personalizzata, è sufficiente Clic sinistro il pulsante del menu a discesa situato a sinistra del campo del nome della classe principale e selezionare lo stato che si desidera modificare.

classe-stato

Rimozione di una classe personalizzata

Per rimuovere una classe personalizzata da qualsiasi elemento, seleziona semplicemente l'elemento e quindi dalle opzioni della barra laterale, vai al campo della classe personalizzata e Clic sinistro il piccolo x simbolo situato a destra del tag di classe che desideri rimuovere. Questo rimuoverà la classe dall'elemento selezionato.

rimuovere-classe

Suggerimento per principianti

La rimozione di classi da un oggetto non eliminerà completamente la classe personalizzata dal progetto a meno che non sia un file lezione a mano libera, puoi ottenere ulteriori informazioni sull'eliminazione di classi personalizzate da questo articolo sul Gestore di classe.

Aggiornato il 18 novembre 2020

questo articolo è stato utile?

Articoli Correlati