All Articles Dreamweaver
Dreamweaverのチュートリアルのパート2でCSSを学ぶ:クラスルールを作成する
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

私たちのDreamweaverでCSSを使用して見ての第一 、私はそのようなスタイルは、スタイルシートとは何か、彼らがどのように機能するか、何であるかのようないくつかの重要なファンダメンタルズ、上で要約を提供する。覚えておいて、スタイルは(また、"ルール"と呼ばれる)だけでの書式設定プロパティのコレクションであり、スタイルシートは、スタイルのリストです。

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.

テーブル、divタグ、見出し、本文、水平方向のルール、リスト...作品:何が素晴らしいのは我々は任意のHTMLエレメントにクラスルールを適用できることです!これは、私たちは実際にはコントロールの下での我々のページおよび私達の書式設定を取得することができます。それでは、クラスのルールを作成するを見てみましょう、そして我々はそれらを適用する方法を議論することができます。

クラスルールを作成する方法は以下の通りです...

ステップ1 -

[CSSスタイル]パネルの下部に、 新規CSSルール]アイコンクリックします。

ステップ - 2

表示される[新規CSSルール]ダイアログボックスで、ドロップダウンメニューセレクタタイプ]ドロップダウンから(任意のHTMLエレメントに適用することができます) クラスを選択してください

ステップ - 3

新しいクラスのルールの名前でセレクタ名のフィールドで、入力。

我々は本質的にゼロからクラスルールを作成しているので、我々がやりたいように名前を付けますが、あなたのクラスのルール名にスペースや特殊文字を使用しないことを確認することができます。たとえば、グラフィックスを制御するためのクラスルールを作成するのであれば、あなたのルール"ImageController"または名前を付けるかもしれない"PictureFixerUpperを 。"サイドバーを作成している場合は、あなたのルール" サイドバー "など名前付けます。名前は'日ですが、自分が好きで、有用かつ有意義な名前を使用してください!

ステップ - 4

ダイアログボックスの下部には、内部スタイルシート" これのみドキュメント "または外部スタイルシート" 新規スタイルシートファイル "にあなたのルールを保存するかどうかを決定します。

ステップ - 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.

新しいルールが[CSSスタイル]パネルの上部に表示されることに注意してください。あなたのルールの名前がピリオド/完全な停止によって進行されていることにも注意してください。クラスルール名は常にピリオドで進めている必要があります。あなたは(私はステップ3に戻って行ったように)、ルールに名前を付けるしているときにものを配置しない場合は、Dreamweaverによって自動的にピリオドを続けるつもりです。

あなたがクラスのルールを作成したので、それはあなたのページ全体に適用する時間です。 HTML要素の再定義とは異なり、前述のように、クラスのルールは、ドキュメントに手動で適用する必要があります。どちらかのブロックレベルまたはインラインHTML要素に、あなたのルールを適用する方法に応じて、あなたのページで異なる結果が得られます。のは、これを行うにはいくつかの方法を見てみましょう。

ブロックレベルのHTML要素にフォーマットを適用する方法は次のとおりです。

ステップ - 6

あなたのページで、フォーマットしたいオブジェクトをシングルクリック。例えば、それは見出しや段落の場合、書式を設定したいのですが、単にテキストにカーソルをドロップします。それはテーブル、div、または画像の場合、オブジェクトを選択してください。時々、左下隅のステータスバーにタグセレクタを使用すると、これらの大きな要素を選択しようとしているときに便利です。それはフォーマットするが何であれ、ここの考えはそれを選択することです。

ステップ - 7

プロパティインスペクタで[クラス]メニューから、あなたのクラスのルールを選択してください。これにより、選択したオブジェクトに、クラスのルールが適用されます。タグセレクタは、今あなたが選択したHTML要素だけでなく、あなたのクラスのルールの名前、ピリオドで進行を示していることに注意してください。例えば、 。我々はコードビューでこの例を見ていたなら、それは次のようになります。

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

ステップ - 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).

ステップ - 9

以前と同様、プロパティインスペクタからクラスのルールを選択してください。違いは、今選択した単語や文だけがフォーマットされています。タグセレクタをチェックし、そしてそれは、最大何を教えてあげる。今では、読み取ります期間と、クラスのルールの名前が続きます。例えば、 。コー​​ドビューでは、それは読んでいましたインライン要素です。ご覧のように、同一のHTML属性は、(クラス)が使用され、そしてそれが以前にあった、しかし我々はページ上で非常に異なる結果を得るような構文はまったく同じです。

クラスのルールだけでなく、それらを適用することの二つの方法を作成する方法を知っていると理解だけでなく、と本当に見栄えのサイトを構築し、開発するあなたの能力を強化します。幸せセンスがある!

とCSSに深く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: