Comment : utiliser la barre d'outils Application de style directe
Mise à jour : novembre 2007
La barre d'outils Application de style directe vous permet de créer et modifier des styles. Vous pouvez utiliser la barre d'outils Application de style directe avec d'autres outils CSS dans Visual Studio. Cela inclut notamment les fenêtres Propriétés CSS, Gérer les styles et Appliquer des styles.
Si vous créez un élément de page qui n'a pas déjà de règle de style CSS, vous pouvez utiliser la barre d'outils Application de style directe pour générer et appliquer un nouveau style. Par exemple, vous pouvez sélectionner un paragraphe et appliquer la couleur au texte en utilisant la barre d'outils Application de style directe. Dans ce cas, Visual Studio crée une règle de style CSS et l'applique au texte. Si vous mettez en forme une autre propriété du même paragraphe, telle que la famille de polices du paragraphe, Visual Studio ajoute une nouvelle déclaration de propriété à la règle de style générée.
Présentation de la barre d'outils Application de style directe
Vous pouvez utiliser la barre d'outils Application de style directe pour générer et modifier des styles en mode automatique ou en mode manuel. Si vous débutez avec la création de CSS, utilisez le mode automatique pour que Visual Studio génère automatiquement des règles de style. Si vous êtes un auteur CSS expérimenté, vous pouvez utiliser le mode manuel, qui vous donne le meilleur contrôle sur l'écriture d'une règle de style.
En mode manuel, vous pouvez ajouter une nouvelle déclaration de propriété à un style différent, notamment un nouveau style, un style généré différent ou un style que vous avez-vous-même créé. En mode manuel, Visual Studio ajoute des éléments à une page Web, si nécessaire, afin d'assigner le style correctement.
Vue d'ensemble de la barre d'outils Application de style directe
Le table suivante répertorie les éléments de la barre d'outils Application de style directe.
.gif "Remarque") Remarque : |
|---|
Lorsque vous travaillez en mode automatique, la liste déroulante Règle cible est désactivée et le bouton Réutiliser le style existant est désactivé. |
Élément |
Description |
.png) |
La liste déroulante Application de style vous permet de définir le mode dans lequel les styles sont générés et modifiés. Si vous débutez avec la création de CSS, utilisez le mode automatique. Si vous êtes un auteur CSS expérimenté, vous pouvez utiliser le mode manuel pour rationaliser le processus de conception. |
.png) |
La liste déroulante Règle cible affecte de nouvelles propriétés CSS. Vous pouvez l'utiliser pour consulter le nom du style à modifier ou le type de style créé pour l'élément actuel. Par défaut, le style qui a la priorité la plus élevée est ciblé. Si aucun style n'existe, Nouvelle classe automatique devient la valeur par défaut. La liste déroulante Règle cible fournit les options suivantes. L'effet de chaque option dépend de la sélection actuelle.
|
.gif) |
Le boutonRéutiliser des styles existantaffecte les modifications apportées aux styles et propriétés existants. Si le style sélectionné ne contient pas de déclaration pour la propriété que vous mettez en forme, mais qu'un autre style de la sélection actuelle en contient, Réutiliser le style existant détermine le style modifié. Lorsque Réutiliser le style existant est sélectionné, la propriété qui contient déjà une déclaration est modifiée. Lorsque Réutiliser le style existant n'est pas sélectionné, la règle ciblée est modifiée. |
.gif) |
Le boutonAfficher la superposition spécifie si une superposition est montrée sur les éléments auxquels la règle sélectionnée s'applique. Lorsque cette option est sélectionnée, le concepteur affiche un rectangle pointillé autour du contenu sur lequel s'applique le style sélectionné dans la liste déroulante Règle cible. La superposition vous permet de voir quels sont les éléments affectés par les modifications que vous apportez en utilisant la barre d'outils Application de style directe. C'est particulièrement utile lorsque vous appliquez plusieurs règles, parce cela simplifie l'accès à une règle spécifique à modifier. |
Utilisation de la barre d'outils Application de style directe avec les contrôles ASP.NET
Vous pouvez utiliser la barre d'outils Application de style directe pour modifier des styles sur les contrôles serveur ASP.NET qui prennent en charge le style. Vous pouvez utiliser la barre d'outils pour appliquer des styles aux contrôles serveur qui définissent des propriétés pour les styles intralignes et pour l'attribut CssClass, et qui héritent de la classe WebControl. Les contrôles utilisateur n'ont pas ces propriétés définies. Par conséquent, vous ne pouvez pas utiliser la barre d'outils avec les contrôles utilisateur.
Les règles de style basées sur l'ID ne doivent pas être utilisées avec les contrôles serveur. Le nom assigné dans la balise ou dans le code serveur n'est pas nécessairement l'ID de l'élément HTML restitué. Par conséquent, les ID ne sont pas une façon fiable de créer des contrôles serveur.
Utilisation de la barre d'outils Application de style directe
Vous pouvez définir le mode d'application dans la barre d'outils Application de style directe pour déterminer comment les règles de style sont créées.
Pour définir le mode d'application dans la barre d'outils Application de style directe
- Dans la barre d'outils Application de style directe, cliquez sur la liste déroulante Application de style, puis cliquez sur Automatique ou Manuel.
La barre d'outils Application de style directe est une façon rapide de créer des styles ou de modifier des règles de style existantes.
Pour créer des styles en utilisant la barre d'outils Application de style directe
En mode Design ou en mode Source, basculez vers le mode d'application de style Manuel.
Sélectionnez le contenu que vous voulez mettre en forme.
Dans la barre d'outils Application de style directe, cliquez sur la liste déroulante Règle cible, puis effectuez l'une des opérations suivantes :
Pour générer un nouveau style basé sur la mise en forme que vous appliquez, et appliquer le style au contenu actuel, sélectionnez Nouveau style intraligne, Nouveau ID automatiqueou Nouvelle classe automatique, puis mettez en forme le contenu.
Pour concevoir un nouveau style à l'aide de la boîte de dialogue Nouveau style et appliquer facultativement le style à la sélection actuelle, sélectionnez Appliquer le nouveau style.
Vous pouvez modifier une règle de style existante qui s'applique à une sélection, ou vous pouvez créer une nouvelle déclaration de propriété pour une règle de style.
Pour modifier des styles existants à l'aide de la barre d'outils Application de style directe
En mode Design ou en mode Source, basculez vers le mode d'application de style Manuel.
Sélectionnez le contenu que vous voulez mettre en forme.
Dans la barre d'outils Application de style directe, dans la liste Règle cible, cliquez sur le style souhaité.
Si le style sélectionné ne contient pas de déclaration pour la propriété que vous mettez en forme, mais qu'un autre style de la sélection actuelle en contient, sélectionnez Réutiliser le style existant pour modifier le style existant.
Mettez en forme le contenu.
Voir aussi
Concepts
Comment : utiliser les fenêtres Appliquer des styles et Gérer les styles