Comment créer des styles avec sélecteurs class et id dans dreamweaver

category Ordinateurs et logiciels / Graphiques et animations / Conception graphique

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

Sommaire

Les styles de classe et d'identification ont les similitudes suivantes:

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

Vous pouvez appliquer des styles de classe et d'ID à tout élément sur une page, mais ils sont le plus souvent appliquée à-tête des balises, des balises div, les balises de liste à puces, étiquettes de paragraphe, les balises d'image, et les nouvelles balises HTML5.




Utilisation des styles créés avec le sélecteur de classe et l'ID est un processus en deux étapes. D'abord, vous créez un nouveau style en utilisant le sélecteur de classe ou ID et lui donner un Nom puis vous appliquez le style à un élément de la page.

Pour définir un nouveau style de classe ou ID, créer et enregistrer un nouveau document ou ouvrir un fichier existant, puis suivez ces étapes:

1

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

Bien que cette étape est inutile (vous pouvez créer des styles pour les éléments qui ne sont pas encore sur la page), Dreamweaver crée automatiquement des noms de sélection basé sur l'élément de page que votre curseur sélectionne actuellement.

2

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

Si vous souhaitez cibler le style à un type de média ou de l'écran taille spécifique, définir une requête des médias dans le panneaumedia.

Si vous ne spécifiez pas une requête des médias, Dreamweaver utiliser la propriété mondial et votre style fonctionnera dans tous les formats de médias et tailles d'écran.

Comment créer des styles avec sélecteurs class et id dans dreamweaver
Comment créer des styles avec sélecteurs class et id dans dreamweaver Agrandir
3

Dans le panneau des sélecteurs, cliquez sur le signe plus (+).

Une nouvelle sélection est ajoutée au panneau des sélecteurs. Dreamweaver a ajouté un nom de sélecteur de composé, qui inclut tous les styles déjà appliquées à la ralingue où votre curseur se reposait quand vous avez commencé à définir le style.

4

Double-cliquez sur le nom du sélecteur, et de modifier ou de le remplacer par le nom que vous souhaitez utiliser pour votre style.

Vous pouvez nommer classe et styles d'identité que vous voulez, tant que vous ne l'utilisez pas des espaces ou des caractères spéciaux autres que le trait d'union (-) ou de soulignement (_).

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

Comment créer des styles avec sélecteurs class et id dans dreamweaver
Comment créer des styles avec sélecteurs class et id dans dreamweaver Agrandir
5

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

Les sélecteurs de classe et d'identité sont faciles à appliquer au contenu après que vous les créez parce Dreamweaver ajoute ces styles aux listes déroulantes class et id dans l'inspecteur des propriétés, situées au bas de l'espace de travail.

Articles Similaires

A propos Auteur
Comment fixer une feuille de style externe à une page dans Dreamweaver Comment fixer une feuille de style externe à une page dans Dreamweaver

Après avoir créé une feuille de style externe dans Dreamweaver, vous pouvez le joindre à toute page web. Dans les instructions étape-par-étape qui suivent, vous pouvez utiliser l'une des feuilles de style prédéfinis inclus dans Dreamweaver,…

Comment créer une barre de navigation à partir d'une liste non ordonnée de liens dans Dreamweaver Comment créer une barre de navigation à partir d'une liste non ordonnée de liens dans Dreamweaver

Voici un grand tour de CSS pour tourner une liste à puces dans une barre de navigation dans Dreamweaver avec un effet de survol simple. Utilisation d'une liste à puces pour les barres de navigation est une convention bien accepté pour les sites…

Comment créer une nouvelle page avec une mise en page CSS dans Dreamweaver Comment créer une nouvelle page avec une mise en page CSS dans Dreamweaver

Dreamweaver comprend deux mises en page CSS conçus avec des balises HTML5 que vous pouvez personnaliser pour créer une variété apparemment infinie de modèles de page. Ces dispositions vous donnent une longueur d'avance lorsque vous créez une…

Comment faire pour créer des feuilles de style internes et externes dans dreamweaver Comment faire pour créer des feuilles de style internes et externes dans dreamweaver

Lorsque vous créez de nouveaux styles dans Dreamweaver, vous devez décider si vous souhaitez enregistrer le style dans une feuille de style interne ou externe. Dans un feuille de style interne, la règle de style est enregistré au début du…

Comment définir des styles avec le sélecteur de balises dans Dreamweaver Comment définir des styles avec le sélecteur de balises dans Dreamweaver

Vous pouvez créer entièrement de nouveaux styles dans Dreamweaver en utilisant l'appel ou ID sélecteurs, mais vous pouvez également créer des styles qui changent la forme de balises HTML existants. Ces styles sont créés en utilisant la…

Comment modifier un style dans Dreamweaver Comment modifier un style dans Dreamweaver

Vous pouvez modifier les attributs d'un style dans Dreamweaver après sa création en modifiant sa définition de style. Ceci est où certains des plus grands avantages de Cascading Style Sheets entrent en jeu. Vous pouvez apporter des modifications…

Comment modifier les styles dans une mise en page CSS dans Dreamweaver Comment modifier les styles dans une mise en page CSS dans Dreamweaver

Après avoir créé une nouvelle page avec une mise en page CSS dans Dreamweaver, vous avez un nombre apparemment infini d'options pour l'édition, mais vous devez d'abord déterminer quels styles dans la feuille de style correspondent aux…

Comment basculer entre css et html mode dans la propriété inspecteur de dreamweaver Comment basculer entre css et html mode dans la propriété inspecteur de dreamweaver

L'inspecteur de propriétés, qui est accessible à partir du fond de l'espace de travail de Dreamweaver, affiche les propriétés disponibles à tout élément sélectionné sur la page. Ainsi, les options dans l'inspecteur des propriétés sont…

Feuilles de style en cascade et SharePoint 2010 Feuilles de style en cascade et SharePoint 2010

Cascading Style Sheets (CSS) peuvent être très sophistiqués. CSS est un moyen de séparer look and feel du contenu. Ces règles de style sont souvent placés dans la zone de la tête d'un document HTML ou dans un fichier tout à fait distincte…

Comment définir des styles pour plusieurs éléments pour HTML5 et CSS3 programmation Comment définir des styles pour plusieurs éléments pour HTML5 et CSS3 programmation

Parfois, vous voudrez peut-être un certain nombre d'éléments sur votre page web basée HTML5 et CSS3 pour partager des styles similaires. Jetez un oeil à cet exemple pour le voir en action.Les trois premiers titres ont tous des styles très…

Créer une nouvelle feuille de style dans le panneau styles CSS Créer une nouvelle feuille de style dans le panneau styles CSS

Lorsque vous cliquez sur l'icône CSS Nouvelle règle (dans la marge) au bas du panneau Styles CSS, la boîte de dialogue Nouvelle règle CSS ouvre. La boîte de dialogue Nouvelle règle CSS combine les caractéristiques pour définir des styles…

Quatre types de feuilles de style en cascade dans la conception web Quatre types de feuilles de style en cascade dans la conception web

Cascading Style Sheets (CSS) se répartissent en quatre types différents (ou styles). Lorsque vous comprenez comment ces quatre types différents de travailler, vous serez coiffer vos pages Web plus efficacement.Pour garder votre CSS organisée,…

Comment construire styles de composés dans des feuilles de style en cascade (CSS) Comment construire styles de composés dans des feuilles de style en cascade (CSS)

Après que vous avez maîtrisé travailler avec classe personnalisée, tag redéfinit et styles d'identité dans Cascading Style Sheets (CSS), vous pouvez entrer dans les ligues majeures de styles de composés. Pour comprendre comment travailler…

Mise en place en html css Mise en place en html css

CSS est un langage de feuille de style utilisée pour définir l'apparence et le formatage d'un document écrit dans un langage de balisage - souvent HTML. UN style en ce sens, est un ensemble de formatage de texte des instructions, telles que la…

» » » » Comment créer des styles avec sélecteurs class et id dans dreamweaver