All Articles Dreamweaver
Learning CSS in Dreamweaver Tutorial Teil 2: Erstellen Class Rules
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

In Teil eins unserer Blick auf Verwendung von CSS in Dreamweaver , ich habe einen heruntergekommenen vorgesehen auf ein paar wichtige Grundlagen, wie, was Arten sind, wie sie funktionieren, was Stylesheets sind. Denken Sie daran, einen Stil (auch als "Regel") einfach eine Sammlung von Formatierungseigenschaften, und ein Stylesheet ist eine Liste der Stile.

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.

Das Tolle ist, dass wir Klasse Regeln für jedes HTML-Element gelten: Tabellen, divs, Überschriften, die Körper, horizontale Linien, Listen ... das funktioniert! Dies ermöglicht uns, wirklich auf unserer Seite und unsere Formatierung unter Kontrolle. Werfen wir also einen Blick auf die Schaffung einer Klassenherrschaft, dann können wir darüber diskutieren, wie sie anzuwenden.

Hier ist, wie eine Klasse Regel zu erstellen ...

Schritt - 1

Am unteren Rand des Bedienfelds CSS-Stile, klicken Sie auf Neue CSS-Regel-Symbol.

Schritt - 2

In der Neue CSS-Regel Dialogfeld, das erscheint, wählen Sie Class (kann auf jede HTML Element Apply) aus dem Selektor-Typ Dropdown-Menü.

Step - 3

In der Selector Feld Name einen Namen für Ihren neuen Klassenherrschaft.

Weil wir im Wesentlichen die Schaffung bist Klasse Regeln von Grund auf, können wir benennen, was wir wollen, aber sicher sein, nicht zu Leerzeichen oder Sonderzeichen in Ihrer Klasse der Regel Namen zu verwenden. Zum Beispiel, wenn Sie eine Klassenherrschaft Grafiken Kontrolle sind, könnten Sie Ihren Namen rule "ImageController" oder "PictureFixerUpper." Wenn Sie eine Seitenleiste sind, dann nennen Sie Ihre Regel "Sidebar". Name 'em wie Sie wollen, und verwenden Sie einen Namen, nützlich und sinnvoll ist!

Step - 4

Am unteren Rand des Dialogfelds, entscheiden, ob Sie Ihre Regel in einem internen Stylesheet "Nur dieses Dokument" oder in einem externen Stylesheet "New Style Sheet Datei" speichern möchten.

Step - 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.

Beachten Sie, dass die neue Regel an der Spitze der Bedienfeld CSS-Stile angezeigt. Beachten Sie auch, dass die Regel den Namen durch einen Punkt / Punkt ist fort. Klasse Regel müssen immer von einem Zeitraum ausgegangen werden, wenn Sie nichts dagegen unternehmen, Menschen herein, wenn Sie benennen die Regel (wie wir wieder haben in Schritt 3), dann Dreamweaver wird die Zeit automatisch Stick.

Nachdem Sie nun eine Klasse Regel erstellt, ist es Zeit, um es in Ihre Seite zu übernehmen. Wie bereits erwähnt, im Gegensatz zu HTML-Elemente neu definiert haben Klassenregeln manuell in Ihrem Dokument angewendet werden. Je nachdem, wie Sie sich bewerben Ihre Regel entweder auf Block-Level-oder Inline-HTML-Elemente, werden Sie unterschiedliche Ergebnisse auf Ihre Seite zu bekommen. Werfen wir einen Blick auf ein paar Möglichkeiten, dies zu tun.

Hier ist, wie die Formatierung von Block-Level-HTML-Elemente anwenden:

Step - 6

Auf der Seite auf das Objekt, das Sie formatieren möchten mit einem Klick. Zum Beispiel, wenn es sich um eine Überschrift oder einen Absatz, den Sie hatten, um Format wie das ist, werfen Sie einfach Ihren Cursor in das Textfeld. Wenn es eine Tabelle, div, oder das Bild ist, vergewissern Sie sich, um das Objekt auszuwählen. Manchmal mit dem Tag-Selektor auf der Statusleiste in der linken unteren Ecke ist praktisch, wenn Sie versuchen, diese größere Elemente auszuwählen. Was immer es ist, die Sie formatieren wollen, ist die Idee hier, um es auszuwählen.

Step - 7

Von der Klasse Menü auf der Property Inspector, wählen Sie Ihre Klassenherrschaft. Dies gilt Ihre Klasse Regel auf das ausgewählte Objekt. Beachten Sie, dass der Tag-Selektor zeigt nun das HTML-Element Sie ausgewählt haben, sowie den Namen Ihres Klassenherrschaft, ging durch einen Punkt. Zum Beispiel, . Wenn wir bei diesem Beispiel in der Codeansicht sehen wäre, würde es so aussehen:

. 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.

Step - 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).

Step - 9

Nach wie vor, wählen Sie Ihre Klasse Regel aus der Property Inspector. Der Unterschied ist jetzt, dass nur das ausgewählte Wort oder einen Satz formatiert wird. Schauen Sie sich die Tag-Selektor, und es wird Ihnen sagen, was los ist. Jetzt heißt es gefolgt von einem Punkt und Ihre Klasse der Regel den Namen, zum Beispiel . In der Codeansicht, wäre es zu lesen . A ist ein Inline-Element. Wie Sie sehen können, ist die gleiche HTML-Attribut verwendet (Klasse), und die Syntax ist genau das gleiche, wie es vorher war, aber wir bekommen ein ganz anderes Ergebnis auf unserer Seite.

Das Wissen und Verständnis, nicht nur, wie die Klasse Regeln zu erstellen, sondern auch die beiden Arten der Anwendung ihnen wirklich verbessern Sie Ihre Fähigkeit zu bauen und zu entwickeln, große schauende Websites. Glückliche stylish!

Holen Sie sich tiefer in CSS mit Exploring 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: