Accueil Médias sociaux Création de styles avec sélecteurs de classe et d'ID dans Dreamweaver - mannequins

Création de styles avec sélecteurs de classe et d'ID dans Dreamweaver - mannequins

Table des matières:

Vidéo: TUTO CSS - #7 Regroupement d'éléments avec span et div 2025

Vidéo: TUTO CSS - #7 Regroupement d'éléments avec span et div 2025
Anonim

Les sélecteurs de classe et d'ID de Dreamweaver présentent de nombreuses similitudes et une différence clé. Les styles d'ID ne peuvent être utilisés qu'une seule fois par page, mais les styles de classe peuvent être utilisés autant de fois sur la même page que vous le souhaitez.

Les styles de classe et d'ID présentent les similitudes suivantes:

Vous pouvez nommer les styles créés avec les sélecteurs de classe et d'ID comme vous le souhaitez. Vous ne devez pas inclure d'espaces ou de caractères spéciaux dans les noms de style, bien que le trait de soulignement et le tiret soient corrects. L'utilisation de toutes les minuscules est une pratique courante mais non obligatoire.

Vous pouvez appliquer des styles de classe et d'ID à n'importe quel élément d'une page, mais ils sont généralement appliqués aux en-têtes, balises div, balises de liste non ordonnées, balises de paragraphe, balises d'image et HTML5 Mots clés.

L'utilisation de styles créés avec le sélecteur de classe et d'ID est un processus en deux étapes. D'abord, vous créez un nouveau style en utilisant le sélecteur de classe ou d'ID et lui donnez un nom; Ensuite, vous appliquez le style à un élément de la page.

Pour définir un nouveau style de classe ou d'ID, créez et enregistrez un nouveau document ou ouvrez un fichier existant, puis procédez comme suit:

1Si vous définissez un nouveau style, vous voulez appliquer à un élément existant, cliquez pour placer votre curseur sur l'élément que vous souhaitez mettre en forme avec le nouveau style.

Bien que cette étape ne soit pas requise (vous pouvez créer des styles pour des éléments qui ne sont pas encore sur la page), Dreamweaver crée automatiquement des noms de sélecteur basés sur l'élément de page actuellement sélectionné par votre curseur.

2Dans le panneau Sélecteurs du panneau Concepteur CSS, sélectionnez le nom de la feuille de style à laquelle vous souhaitez ajouter le nouveau style.

Si vous souhaitez cibler le style sur un type de support ou une taille d'écran spécifique, définissez une requête multimédia dans le panneau @Media.

Si vous ne spécifiez pas de requête multimédia, Dreamweaver utilisera la propriété Global et votre style fonctionnera dans tous les formats de média et tailles d'écran.

3 Dans le panneau Sélecteurs, cliquez sur le signe plus (+).

Un nouveau sélecteur est ajouté au panneau Sélecteurs. Dreamweaver a ajouté un nom de sélecteur composé, qui inclut tous les styles déjà appliqués au titre sur lequel votre curseur reposait lorsque vous avez commencé à définir le style.

4 Double-cliquez sur le nom du sélecteur et modifiez-le ou remplacez-le par le nom que vous souhaitez utiliser pour votre style.

Vous pouvez nommer les styles de classe et d'ID comme vous le souhaitez, à condition de ne pas utiliser d'espaces ou de caractères spéciaux autres que le trait d'union (-) ou le trait de soulignement (_).

Si vous souhaitez créer un style à l'aide du sélecteur de classes, vous devez commencer le nom du style par un point ou une période.Si vous souhaitez utiliser le sélecteur d'ID, le nom du style doit commencer par un signe dièse (#).

5Dans le panneau Propriétés, spécifiez les paramètres de votre règle de style.

Les sélecteurs de classe et d'ID sont faciles à appliquer au contenu après leur création, car Dreamweaver ajoute ces styles aux listes déroulantes Classe et ID de l'inspecteur des propriétés, situé en bas de l'espace de travail.

Création de styles avec sélecteurs de classe et d'ID dans Dreamweaver - mannequins

Le choix des éditeurs

Pour les seniors: Comment travailler avec Windows dans Microsoft Windows - les nuls

Pour les seniors: Comment travailler avec Windows dans Microsoft Windows - les nuls

Windows, avec un W majuscule, tire son nom de sa caractéristique principale: Windows, avec un w minuscule. Se familiariser avec Windows signifie apprendre à ouvrir, fermer, redimensionner, déplacer et basculer entre les fenêtres, ce qui est la clé pour jongler avec succès avec plusieurs activités. Chaque programme que vous exécutez occupe sa propre fenêtre. Une fenêtre peut occuper une partie de ...

Comment accepter ou rejeter les cookies dans Safari - dummies

Comment accepter ou rejeter les cookies dans Safari - dummies

Un cookie est un petit fichier qu'un site Web enregistre automatiquement sur le disque dur de votre Mac. Il contient des informations, telles que vos préférences ou votre date de naissance, que le site utilisera lors de vos prochaines visites. Dans Mac OS X Snow Leopard, Safari vous permet de choisir d'accepter ou non tous les cookies ...

Le choix des éditeurs

Construire des boîtes et des lignes Bézier dans QuarkXPress - des nuls

Construire des boîtes et des lignes Bézier dans QuarkXPress - des nuls

Pour créer une boîte ou une ligne dans QuarkXPress plus complexe qu'un simple rectangle, ovale ou starburst, vous entrez dans le domaine du chemin de Bézier. Si vous avez utilisé l'outil Plume dans Adobe Illustrator ou Photoshop, vous comprenez déjà les chemins de Bézier. Il faut un peu de pratique et un esprit détendu ...

Création d'un rapport avec Crystal Reports 10 - témoins

Création d'un rapport avec Crystal Reports 10 - témoins

Lorsque vous démarrez Crystal Reports 10, généralement l'une des trois choses suivantes: créer un rapport, modifier un rapport ou exécuter un rapport sur les données de votre base de données. Les rapports prennent des données à partir d'une base de données, les traitent, les formatent et les affichent ensuite sur une imprimante, un écran d'ordinateur ou un site Web. Crystal Reports ...

Traitant des commentaires Javadoc dans Eclipse - mannequins

Traitant des commentaires Javadoc dans Eclipse - mannequins

Lorsque vous utilisez Eclipse pour écrire du code Java, n'oubliez pas de éditez les commentaires de Javadoc (les choses qui commencent par / **). Vous pouvez ajouter des informations utiles lorsque vous modifiez les commentaires Javadoc et lorsque vous les modifiez, l'aide au code d'Eclipse propose des suggestions. N'oubliez pas ces astuces lorsque vous modifiez vos commentaires Javadoc: Ajouter un commentaire Javadoc: ...

Le choix des éditeurs

Les connexions cachées sur le Nikon D5600 - les nuls

Les connexions cachées sur le Nikon D5600 - les nuls

Ouvrent les couvercles sur les côtés gauche et droit du Nikon D5600 caméra, et vous verrez plusieurs ports de connexions cachées. Les ports de connexion suivants sont indiqués sur cette image: Terminal d'accessoires: ce terminal accepte les accessoires suivants: câble déclencheur à distance Nikon MC-DC2; Télécommandes sans fil WR-1 et WR-R10; et les unités GPS GP-1 / GP-1A. I ...

Les connexions cachées sur votre Nikon D5200 - les nuls

Les connexions cachées sur votre Nikon D5200 - les nuls

ÉParpillés sur l'extérieur de votre appareil photo sont nombreuses commandes que vous utilisez pour changer d'image -prend des paramètres, revoir et modifier vos photos, et effectuer diverses autres opérations. Caché sous le couvercle sur le côté gauche de la caméra, vous trouverez les quatre ports de connexion suivants, étiquetés dans cette figure: Borne accessoire: Vous pouvez brancher le Nikon en option ...

Des boutons et autres commandes du Nikon D7500 - mannequins

Des boutons et autres commandes du Nikon D7500 - mannequins

C'est génial d'avoir une carte pour le boutons et commandes sur votre appareil photo, mais ce n'est pas beaucoup d'aide si vous ne pouvez pas vous rappeler quel bouton appuyer sur quand (et pourquoi). Alors, voici un aperçu des fonctions des contrôles les plus importants. (Certains contrôles ont des fonctions supplémentaires pendant certaines opérations, mais la table ...