Ce guide commence là où le guide précédent nous a laissés, avec un champ de texte. Nous avons supprimé tous les styles appliqués à ce champ de texte et allons vous montrer comment utiliser les meilleures pratiques de conception web dans Silex : nous allons styliser les éléments avec des classes CSS réutilisables. Les classes doivent être nommées en suivant la convention BEM pour un site plus facile à maintenir.
Cette version a été générée à partir de l'anglais. Nous avons besoin de contributeurs et de correcteurs pour améliorer cette traduction. N'hésitez pas à participer !
¶ Une nouvelle classe CSS
Cliquez sur le "+" pour ajouter une nouvelle classe CSS.
Tapez un nom de classe : "centered-text."
Appuyez sur Entrée pour créer la nouvelle classe.
¶ Modifier les styles
Définissez la largeur à 1200px.
Définissez les marges hautes et basses à 20px.
Définissez les marges gauche et droite sur "auto."
¶ Stylez une image
Faites glisser et déposez un bloc d’image sur la zone de travail.
Trouvez une image sur votre ordinateur et déposez-la ici.
Sélectionnez cette image nouvellement téléchargée pour qu'elle apparaisse sur la zone de travail.
Voici votre nouvelle image sur la zone de travail.
Ajoutez la même classe CSS à l'image ("centered-text").
Vous pouvez voir que vous éditez ".centered-text."
Et votre image a maintenant les nouvelles dimensions. Elle n'est pas centrée, car les images ont par défaut "display: inline."
Double-cliquez sur le nom de la classe "centered-text" et renommez-la simplement "centered," ce qui convient mieux à notre exemple maintenant que le style centrerait aussi des images.
Dans "général," définissez "display" sur "block." Cela appliquera les marges "auto" à l'image.
Comme vous pouvez le voir, l'image est maintenant centrée.
¶ Utiliser plusieurs classes CSS
Ajoutez un nouveau champ de texte.
Appliquez à nouveau la classe CSS "centered" à ce champ.
Créez une nouvelle classe CSS et appelez-la "highlight."
Dans "typographie," définissez la couleur du texte sur rouge.
Augmentez la taille de la police, par exemple à 40px.
Vous éditez uniquement les styles de la classe "highlight."
Si vous activez la classe "centered" avec sa case à cocher, vous modifierez les styles pour ".centered.highlight."
Ce guide explore le style avancé avec des classes CSS dans l'application Silex. De la sélection des éléments à l'ajout de valeurs spécifiques, vous avez appris à perfectionner vos compétences en conception à travers des instructions précises et engageantes.