CSS avancé

• 10 minutes

CSS (feuilles de style en cascade) est un langage qui détermine le style d’une page web en décrivant comment afficher les éléments HTML, y compris le texte, les polices, les couleurs, les arrière-plans, les bordures et les marges.

Modifier le style des pages de votre site web peut être aussi simple que d’appliquer des instructions CSS directement sur une page. Lorsque vous modifiez le contenu de la page à l’aide de Visual Studio Code, CSS est disponible dans un fichier séparé. Ce fichier est inclus dans le contenu de la page et CSS s’applique à cette page. Par exemple, si vous devez augmenter la hauteur de la barre de navigation supérieure d’une page d’accueil pour adapter un logo, vous pouvez modifier le fichier CSS et ajouter une instruction CSS personnalisée.

.navbar-static-top.navbar { min-height: 100px; }

Cette approche permet d’effectuer des ajustements mineurs sur une seule page, mais une meilleure approche consiste à enregistrer les personnalisations dans un ou plusieurs fichiers CSS, puis à les appliquer à l’ensemble du site web ou à des parties de ce dernier.

Thèmes Power Pages

Power Pages utilise l’infrastructure frontale de démarrage Bootstrap contrôler la conception et la disposition du site web. Bootstrap est un package de modèles de conception HTML et CSS pour la typographie, les formulaires, les boutons et la navigation. Il comporte également d’autres éléments, y compris des extensions JavaScript facultatives. Une caractéristique prête à l’emploi intéressante de Bootstrap réside dans sa disposition dynamique ; il ajuste automatiquement votre site web de façon à créer une apparence esthétiquement plaisante sur tous les appareils, des petits téléphones aux grands ordinateurs de bureau.

Un thème détermine l’aspect de toutes les pages de votre site web afin d’en garantir la cohérence visuelle. Il contrôle la structure de navigation, la bannière, les couleurs et les polices, ainsi que d’autres éléments visuels d’une page web.

Vous pouvez implémenter les modèles Power Pages à l’aide de composants Bootstrap standard, avec le moins possible de styles personnalisés. Par conséquent, vous pouvez tirer parti des options de personnalisation fournies par Bootstrap pour personnaliser les thèmes afin qu’ils soient appliqués de manière cohérente à l’ensemble du site web.

Appliquer les personnalisations

Power Pages offre une collection complète de thèmes et d’outils pour la conception de votre site web. Faites votre sélection parmi plusieurs thèmes à appliquer à votre site web et personnalisez-les à l’aide des options de style.

L’espace de travail Styles du studio de conception Power Pages contrôle les styles CSS appliqués au site web et vous permet d’implémenter des conceptions de sites universelles. Vous pouvez incorporer des modifications de personnalisation de la société et afficher les modifications dans l’aperçu de droite de la fenêtre de l’application. L’espace de travail Styles fournit plusieurs thèmes prédéfinis. Pour chacun d’entre eux, vous pouvez modifier le modèle de couleurs, la couleur d’arrière-plan, les types de police, les conceptions de boutons et l’espacement des sections.

Thèmes

Les thèmes créent une apparence et un comportement d’ensemble du site en définissant des styles pour divers éléments de texte, boutons, liens et dispositions de section. Si le site nécessite d’autres personnalisations, vous pouvez utiliser la fonctionnalité Gérer CSS.

L’espace de travail Styles vous permet de faire votre choix parmi les thèmes disponibles. Après avoir sélectionné un thème, vous pouvez personnaliser des éléments individuels pour créer le style souhaité.

Gérer CSS

Pour accéder à la fonctionnalité Gérer CSS, sélectionnez le menu des points de suspension (...), puis choisissez Gérer CSS sur la vignette du thème.

Tous les sites web Power Pages contiennent déjà les fichiers suivants sur toutes les pages : bootstrap.min.css, theme.css et portalbasictheme.css. Ces fichiers définissent les styles pour l’ensemble de votre site web. Vous pouvez charger des fichiers CSS supplémentaires en utilisant le lien Charger, puis en procédant à des modifications dans l’éditeur Visual Studio Code. Pour en savoir plus, consultez Gérer des fichiers CSS dans Power Pages.

Tenez compte des facteurs suivants lorsque vous déterminez comment aborder les modifications de style pour votre site web :

• Créez un style complet pour l’ensemble du site, puis remplacez le contenu d’un fichier CSS. Ce processus fonctionne bien si vous avez accès à de bons concepteurs qui peuvent vérifier la définition de tous les éléments pertinents. Cette approche crée un style contrôlé de manière centralisée et garantit la cohérence sur l’ensemble du site web.

• Redéfinissez uniquement les éléments qui nécessitent une modification, tels que la couleur et la taille de police. Créez et chargez le fichier CSS qui contient uniquement ces ajustements incrémentiels. Ce processus fonctionne bien si votre conception cible est proche de la conception incluse avec le modèle sélectionné et nécessite uniquement des modifications mineures de style. Cette approche permet des modifications incrémentielles que les développeurs peuvent annuler.

Appliquer des personnalisations à des zones de site web spécifiques

Vous pouvez ajouter des personnalisations à des pages ou sections spécifiques de votre site web en ajoutant un enregistrement Fichier web à l’aide de l’application Power Pages Management, avec une pièce jointe à un fichier CSS. Vous devrez spécifier la page parente dans l’enregistrement Fichier web afin que les styles soient appliqués à la page parente et à tous les descendants de cette page. Cette approche vous permet de créer des sections entièrement personnalisées de votre site.

Personnaliser Bootstrap

La méthode standard permettant de créer une version personnalisée de Bootstrap est au moyen du site Bootstrap officiel. Cependant, en raison de la popularité de Bootstrap, de nombreux autres sites ont été créés à cet effet. Ces sites peuvent fournir une interface conviviale pour la personnalisation de Bootstrap ou des versions prédéfinies de Bootstrap à télécharger. Pour en savoir plus sur la personnalisation de Bootstrap, consultez le site officiel de personnalisation de Bootstrap.

Une fois personnalisé, Bootstrap génère un ou plusieurs fichiers que vous pouvez charger en tant que fichiers web. À moins que vous ne souhaitiez complètement remplacer les styles originaux, veillez à ne pas utiliser les fichiers bootstrap.css, bootstrap.min.css, theme.css ou theme.min.css dans vos URL partielles en raison de la façon dont Power Pages gère les fichiers CSS.

CSS pour des ajustements simples

Les développeurs oublient souvent CSS lorsque la page nécessite de simples ajustements tels que le masquage de l’élément ou l’ajustement des marges pour s’adapter à un libellé large. L’infrastructure de Bootstrap est la base du style dans les sites web Power Pages : elle définit de nombreux styles qui contrôlent l’apparence et la disposition dynamique multicolonne. Par exemple, si vous souhaitez masquer une colonne particulière et soumettre une valeur par défaut au lieu de collecter les entrées utilisateur, vous pouvez utiliser les métadonnées de formulaire de table pour la colonne, puis définir les paramètres suivants :

• Définissez Libellé sur un seul espace.

• Définissez CSS Classe sur masquer.

• Définissez la valeur par défaut comme requis.

Au lieu d’employer JavaScript, vous pouvez accomplir cette tâche en utilisant uniquement la configuration. Le fait d’utiliser CSS, dans la mesure du possible, présente certains avantages :

• CSS s’applique dès le chargement, ce qui est plus rapide car vous n’avez pas besoin d’attendre la fin du chargement du document.

• CSS est toujours activé et continue de s’appliquer aux éléments pertinents, même si JavaScript modifie la structure du document et ajoute ou supprime les éléments.

• Pour certaines tâches liées à la visibilité d’un élément et à la disposition dynamique, CSS peut être plus simple à utiliser que JavaScript, avec à la clé une maintenance et une marge d’erreur réduites.