All Articles Dreamweaver
Apprendre CSS dans Dreamweaver Tutoriel Partie 2: Création de règles de classe
Geoff Blake on Tue, February 15th | 0 comments
In Part One of our look at using CSS in Dreamweaver, I provided a rundown on a few key fundamentals, such as what styles are, how they work, what style sheets are. Remember, a style (also called a "ru

Dans la première partie de notre regard sur l'utilisation de CSS dans Dreamweaver , j'ai fourni un aperçu sur quelques fondamentaux clés, tels que les styles sont, comment ils fonctionnent, ce sont des feuilles de style. Rappelez-vous, un style (aussi appelé une «règle») est simplement une collection de propriétés de formatage, et une feuille de style est une liste de styles.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

Ce qui est formidable, c'est que nous pouvons appliquer les règles de classe à n'importe quel élément HTML: tables, div, rubriques, le corps, des règles horizontales, listes ... les travaux! Cela nous permet de vraiment obtenir notre page et en forme de notre sous contrôle. Alors prenons un oeil à la création d'une domination de classe, alors nous pouvons discuter de la façon de les appliquer.

Voici comment faire pour créer une règle de classe ...

Étape - 1

Au bas de panneau Styles CSS, cliquez sur l'icône Nouvelle règle CSS.

Étape - 2

Dans la boîte de dialogue Nouvelle règle CSS qui s'affiche, choisissez de classe (peut s'appliquer à n'importe quel élément HTML) dans la liste déroulante Type de sélecteur dans le menu déroulant.

Étape - 3

Dans le champ Nom du sélecteur, tapez un nom pour votre règle nouvelle classe.

Parce que nous sommes essentiellement à créer des règles de classe à partir de zéro, nous pouvons les nommer ce que nous voulons, mais être sûr de ne pas utiliser des espaces ou des caractères spéciaux dans vos noms de domination de classe. Par exemple, si vous créez une règle de classe pour contrôler les graphiques, vous pouvez nommer votre règle "ImageController" ou "PictureFixerUpper." Si vous créez une barre latérale, puis le nom de votre règle "sidebar". Nom 'em comme bon vous semble, et d'utiliser un nom qui est utile et significative!

Étape - 4

Au bas de la boîte de dialogue, de décider si vous voulez sauvegarder votre règle dans une feuille de style interne "Seulement ce document" ou dans une feuille de style externe "Nouveau fichier feuille de style".

Étape - 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

Notez que votre nouvelle règle apparaît en haut du panneau Styles CSS. Notez aussi que le nom de votre règle est précédée d'une période / arrêt complet. La domination de classe des noms doit toujours être précédé d'une période, si vous ne mettez pas un en quand vous êtes nommer votre règle (comme nous l'avons fait revenir à l'étape 3), puis Dreamweaver bâton de la période au cours automatiquement.

Maintenant que vous avez créé une règle de classe, il est temps de l'appliquer tout au long de votre page. Comme mentionné précédemment, contrairement a redéfini les éléments HTML, les règles de classe doivent être appliquées manuellement dans votre document. Selon la façon dont vous appliquez votre règle, soit à niveau bloc ou en ligne des éléments HTML, vous obtiendrez des résultats différents sur votre page. Prenons un oeil à quelques manières de faire cela.

Voici comment faire pour appliquer le formatage à éléments de niveau bloc HTML:

Étape - 6

Sur votre page, cliquez une fois sur l'objet que vous souhaitez formater. Par exemple, si c'est une position ou un paragraphe que vous souhaitez formater, déposez simplement votre curseur dans le texte. Si c'est une table, div ou l'image, veillez à sélectionner l'objet. Parfois, en utilisant le sélecteur de balises sur la barre d'état dans le coin inférieur gauche est très pratique lorsque vous essayez de sélectionner ces éléments plus importants. Quoi que vous voulez formater, l'idée ici est de le sélectionner.

Étape - 7

Dans le menu de classe de l'inspecteur Propriétés, choisissez votre domination de classe. Ceci s'applique de votre domination de classe à l'objet sélectionné. Notez que le sélecteur de balise indique maintenant l'élément HTML que vous avez sélectionné, ainsi que le nom de votre domination de classe, a procédé par une période. Par exemple, . Si nous étions à regarder cet exemple en mode code, il devrait ressembler à ceci:

. Notice that the rule name in code is not proceeded by a period.


That's how to apply formatting to a block level element. Let's see what happens if we try selecting text instead of simply clicking inside it.

Here's how to apply formatting to an inline element. It's only slightly different, but let's give it a try.

Étape - 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

Étape - 9

Tout comme auparavant, choisir votre domination de classe de l'inspecteur des propriétés. La différence maintenant est que seul le mot sélectionné ou la phrase sera formaté. Vérifiez le sélecteur de balises, et il vous dira ce qui se passe. Maintenant il lit suivie d'une période et le nom de votre règle de classe, par exemple . En mode Code, il se lirait . A est un élément inline. Comme vous pouvez le voir, le même attribut HTML est utilisé (classe), et la syntaxe est exactement la même que celle précédemment, mais nous obtenons un résultat très différent sur ​​notre page.

Connaître et comprendre, non seulement la façon de créer des règles de classe, mais aussi les deux façons de les appliquer vont vraiment améliorer votre capacité à construire et à développer de grands sites à la recherche. Stylin heureux »!

Obtenez plus profondément dans CSS avec Explorer CSS .

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: