All Articles Dreamweaver
学习CSS在Dreamweaver教程第2部分:创建类规则
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.

什么是伟大的,我们可以适用于任何HTML元素的类规则:表,div的,标题​​,身体,横向规则,列出了... ...作品!这使我们能够真正得到我们的网页和我们的格式控制之下。因此,让我们看看创建一个阶级统治,那么我们可以讨论如何应用它们。

以下是如何创建一个阶级统治的... ...

STEP - 1

在“CSS样式”面板的底部,单击“新建CSS规则图标。

步骤 - 2

在新的CSS规则出现的对话框中,选择从下拉菜单选择类型下拉 (可应用于任何HTML元素)。

STEP - 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样式”面板的顶部出现。还要注意,您的规则的名称是一个时期/句号进行。必须始终是阶级统治的名称进行一段时间,如果你不把当你命名规则(就像我们在一步三回头)之一,那么Dreamweaver将自动粘在期间。

现在,您已经创建了一个阶级统治的,它的时间,到适用于整个您的网页。如前所述,不像重新定义HTML元素,类的规则已经被应用在您的文档手动。根据你如何应用你的规则,无论是块级或内嵌的HTML元素,你会得到不同的结果,在您的网页上。让我们看看几个方法可以做到这。

下面是如何将格式应用于HTML元素的块级:

步 - 6

您的网页上,请单上的对象,你想要的格式。例如,如果它的标题或段落,你想要的格式,只是文本拖放到你的光标。如果它是一个表,div或图像,请一定要选择的对象。有时,在左下角的状态栏上使用的标签选择器来派上用场,当你试图选择这些更大的元素。不管是什么,你要格式化,这里的想法是选择它。

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

与以前一样,选择从属性检查您的阶级统治。现在不同的是,只对选定的词或句子获取格式化。退房的标签选择器,它会告诉你这是怎么回事。现在,它读取一个时期和阶级统治的名字,例如 。在“代码”视图中,它会读 。 A 是一个内联元素。正如你可以看到,是使用相同的HTML属性(类),和语法是完全一样的,因为它是以前的,但我们得到一个非常不同的结果,我们的网页上。

认识和了解,不仅是如何创建类的规则,而且应用的两种方式,将真正增强你的能力,建立和发展非常好看的网站。快乐斯蒂林的!

进入CSS的更深入探讨 CSS 。

Comments (0)

You must be logged in to comment.

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: