1. Accueil
  2. Commencer
  3. Principes de base des classes personnalisées
  1. Accueil
  2. Utiliser Blocs
  3. Design
  4. Principes de base des classes personnalisées

Principes de base des classes personnalisées

L'une des fonctionnalités les plus puissantes de Blocs est la possibilité d'utiliser des classes personnalisées dans vos projets. Si vous venez du milieu de la conception graphique, considérez les classes personnalisées comme des styles de calque que vous pouvez Blocs pour lui donner un aspect et une sensation spécifiques. Les règles de ces classes peuvent être ajustées pour apparaître différentes sur le bureau, la tablette et le mobile, ce qui signifie que vous avez la possibilité d'affiner chaque détail d'un élément spécifiquement pour l'appareil sur lequel il est affiché. La vidéo ci-dessous couvre les bases des classes personnalisées et comment elles peuvent être utilisées dans vos conceptions.

Vidéo d'introduction à la classe personnalisée

Application d'une classe personnalisée

Pour appliquer une classe personnalisée à un élément dans Blocs, sélectionnez d'abord l'élément sur le canevas de conception principal en Clic gauche il. Maintenant, dans les options de la barre latérale, localisez le champ intitulé Cours et cliquez à l'intérieur de ce champ pour l'activer.

champ de classe

Une fois activé, à l'aide de votre clavier, tapez le nom que vous souhaitez donner à votre classe ou le nom d'une classe qui existe déjà dans votre projet, puis appuyez sur retour. Cela créera une balise de classe personnalisée dans le champ classes, cela signifie que cette classe est maintenant affectée à cet élément. Vous pouvez répéter ce processus pour ajouter plusieurs classes au même élément.

balise-classe

Accéder aux valeurs d'une classe personnalisée

Il existe plusieurs façons d'accéder aux valeurs d'une classe personnalisée dans Blocs. Le moyen le plus simple est de faites un clic droit un élément qui affichera le menu contextuel. Dans ce menu, sélectionnez Classes personnalisées et alors Click gauche la classe que vous souhaitez afficher dans la liste déroulante. Cela ouvrira la classe sélectionnée dans l'éditeur de classe afin que vous puissiez afficher et modifier ses valeurs.

modifier-classe-personnalisée

Vous pouvez également accéder aux valeurs d'une classe personnalisée en Clic gauche sur l'une des balises de classe qui se trouvent dans le champ de classe, situé dans les options de l'inspecteur de la barre latérale principale.

Modification d'une classe personnalisée

Blocs est livré avec un puissant éditeur de classes intégré qui vous permet d'éditer facilement les classes visuellement.

éditeur de classe

L'éditeur de classe est divisé en 9 sections pour rendre la modification de différents types de règles et valeurs plus facile à gérer et plus claire.

sections-classes

1. Métrique

Cet ensemble d'options contient les commandes de mesure, par exemple la largeur, la hauteur.

2 Boîte

Cet ensemble d'options contient les contrôles de boîte, par exemple la marge, le remplissage, la bordure.

3. Typographie

Cet ensemble d'options contient les commandes de typographie, par exemple la taille de la police, l'espacement des lettres.

4. Contexte

Cet ensemble d'options contient les contrôles d'arrière-plan, par exemple l'image d'arrière-plan, le dégradé.

5. Positionnement

Cet ensemble d'options contient les commandes de positionnement, par exemple float, display, clear.

6. Ombres

Cet ensemble d'options contient les contrôles d'ombre, par exemple l'ombre du texte, l'ombre de la boîte.

7. Les filtres

Cet ensemble d'options contient les contrôles de filtre CSS, par exemple le flou, la saturation, le contraste.

8. SVG

Cet ensemble d'options contient les contrôles SVG, par exemple la couleur du trait, la casquette de ligne.

9. Fléchir

Cet ensemble d'options contient les commandes flex, par exemple direction, alignement.

Dans chacune des quatre sections, il existe un certain nombre d'éléments d'interface utilisateur étiquetés qui vous permettent d'appliquer des valeurs spécifiques pour les règles CSS3 standard.

Modification d'une classe pour un point d'arrêt spécifique

In Blocs il est possible d'ajuster les valeurs de n'importe quelle classe en fonction du point d'arrêt auquel elle est affichée. Ceci est extrêmement utile car cela vous permet de créer une expérience complètement unique pour vos utilisateurs en fonction de l'appareil qu'ils utilisent lorsqu'ils visitent votre site Web.

Pour modifier les valeurs d'une classe à un point d'arrêt spécifique, basculez simplement vers ce point d'arrêt à l'aide de la touche vue du point d'arrêt options qui se trouvent dans le centre de la barre d'outils principale des applications, puis modifiez les valeurs de cette classe personnalisée.

sélecteur de point d'arrêt

Contrôles des points d'arrêt

Vous pouvez en savoir plus sur le fonctionnement des commandes de la vue des points d'arrêt ici.

Nous vous recommandons également de regarder la leçon vidéo ci-dessous qui couvre les bases du travail avec des classes réactives.

Leçon vidéo sur les classes réactives

États de classe

En plus de pouvoir définir le style visuel d'un élément en fonction de l'appareil sur lequel il est visualisé, le Blocs L'éditeur de classes vous permet également de définir le style d'un élément en fonction de son état actuel. Il y a trois états disponibles dans Blocs.

Normal

L'état par défaut d'un élément.

Flotter

En XNUMX, le :flotter l'état s'affiche lorsque le curseur de la souris se trouve sur l'élément.

Actif

En XNUMX, le :actif sélecteur est utilisé pour sélectionner et styliser le lien actif.

Focus

En XNUMX, le :concentrer sélecteur est utilisé pour sélectionner l'élément qui a le focus.

Visité

En XNUMX, le :a visité le sélecteur est utilisé pour sélectionner les liens visités.

Profiter de ces états signifie que vous pouvez faire des choses comme, changer la couleur d'un bouton lorsque la souris est dessus ou changer la taille du texte d'un lien quand on clique dessus. L'utilisation d'états vous permet de modifier dynamiquement l'apparence d'un élément de votre page Web lorsqu'il interagit avec un utilisateur, cela peut être extrêmement utile lorsque vous devez transmettre un message concernant la convivialité.

Changer les états

Pour modifier les valeurs d'un état spécifique d'une classe personnalisée, il suffit Click gauche le bouton du menu déroulant situé à gauche du champ du nom de la classe principale et sélectionnez l'état que vous souhaitez modifier.

état de classe

Suppression d'une classe personnalisée

Pour supprimer une classe personnalisée de n'importe quel élément, sélectionnez simplement l'élément, puis dans les options de la barre latérale, accédez au champ de classe personnalisé et Click gauche le petit x symbole situé à droite du étiquette de classe vous souhaitez supprimer. Cela supprimera la classe de l'élément sélectionné.

supprimer-classe

Astuce pour les débutants

La suppression de classes d'un objet ne supprimera pas entièrement la classe personnalisée de votre projet, sauf s'il s'agit d'un cours à main levée, vous pouvez obtenir plus d'informations sur la suppression des classes personnalisées, à partir de cet article sur la Gestionnaire de classe.

Mis à jour le 18 mars 2020

Cet article a-t-il été utile?

Articles Relatifs