All Articles Dreamweaver
Aprendizagem CSS no Dreamweaver Parte Tutorial 2: Criando Regras da 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

Na primeira parte do nosso olhar para usar CSS no Dreamweaver , eu forneceu um resumo sobre alguns fundamentos importantes, como o que os estilos são, como funcionam, quais são as folhas de estilo. Lembre-se, um estilo (também chamado de "regra") é simplesmente uma coleção de propriedades de formatação, e uma folha de estilo é uma lista de estilos.

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.

O bacana é que podemos aplicar regras de classe para qualquer elemento HTML: tabelas, divs, títulos, o corpo, regras horizontais, listas ... as obras! Isto nos permite começar realmente a nossa página eo nosso formatação sob controle. Então, vamos dar uma olhada em como criar uma regra de classe, então podemos discutir como aplicá-las.

Veja como criar uma regra de classe ...

Etapa - 1

Na parte inferior do painel Estilos CSS, clique no ícone Nova regra CSS.

Etapa - 2

Na caixa de diálogo Nova regra CSS que aparecer, escolha Class (pode aplicar a qualquer elemento HTML) no menu drop down menu Tipo Selector.

Etapa - 3

No campo Nome do Selector, digite um nome para a regra nova classe.

Porque estamos essencialmente a criação de regras de classe a partir do zero, podemos nomeá-los o que quisermos, mas não se esqueça de usar espaços ou caracteres especiais em seus nomes dominação de classe. Por exemplo, se você está criando um domínio de classe para controlar os gráficos, você pode nomear sua regra "ImageController" ou "PictureFixerUpper". Se você estiver criando uma barra lateral, então o nome da sua regra "sidebar". Nome 'em como quiser, e usar um nome que seja útil e significativo!

Etapa - 4

Na parte inferior da caixa de diálogo, decidir se você quer salvar sua regra em uma folha de estilo interna "Este documento Only" ou em uma folha de estilo externa "File Folha de New Style".

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

Note-se que a nova regra aparece na parte superior do painel Estilos CSS. Observe também que o nome da sua regra é precedido por um período / stop total. Nomes de domínio de classe deve ser sempre precedido por um período, se você não colocar um em quando você está nomeando sua regra (como fizemos para trás na Etapa 3), o Dreamweaver vai ficar o período em automaticamente.

Agora que você já criou uma regra de classe, é hora de aplicá-la em toda a sua página. Como mencionado anteriormente, ao contrário redefiniu elementos HTML, regras de classe têm que ser aplicadas manualmente no documento. Dependendo de como você aplica a regra, tanto para nível de bloco ou inline elementos HTML, você vai obter resultados diferentes em sua página. Vamos dar uma olhada em algumas maneiras de fazer isso.

Veja como aplicar formatação a elementos nível de bloco HTML:

Etapa - 6

Em sua página, um único clique no objeto que você gostaria de formato. Por exemplo, se for um título ou um parágrafo que você gostaria de formato, basta soltar o cursor no texto. Se for uma tabela, div, ou imagem, certifique-se selecionar o objeto. Às vezes, usando o Seletor de Tag na barra de status no canto inferior esquerdo vem a calhar quando você está tentando selecionar esses elementos maiores. Seja o que for que você deseja formatar, a idéia aqui é para selecioná-lo.

Etapa - 7

A partir do menu de classe no Inspetor de propriedades, escolha o seu domínio de classe. Isso se aplica a regra de classe para o objeto selecionado. Observe que o Selector Tag agora indica o elemento HTML que você selecionou, bem como o nome do seu domínio de classe, passou por um período. Por exemplo, . Se estivéssemos a olhar para este exemplo em View Code, ele ficaria assim:

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

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

Passo - 9

Tal como antes, escolha o seu domínio de classe a partir do Inspetor de propriedades. A diferença agora é que somente a palavra ou frase selecionada é formatada. Confira o seletor de tags, e ele vai lhe dizer o que está acontecendo. Agora ele lê seguido por um período e nome do seu domínio de classe é, por exemplo . No modo de exibição Código, leria . Uma é um elemento inline. Como você pode ver, o mesmo atributo HTML é utilizado (classe), ea sintaxe é exatamente a mesma que era antes, mas conseguimos um resultado muito diferente na nossa página.

Conhecer e compreender, não só como criar regras de classe, mas também as duas maneiras de aplicá-los irá realmente melhorar a sua capacidade de construir e desenvolver grandes sites de busca. Stylin feliz "!

Se aprofundar em CSS com Explorando CSS .

Related Videos
Comments (0)

You must be logged in to comment.

Synthi V Explored
Arturia V 105
Dream It. Do It.
Do you want to learn Synthi V Explored?
Yes, I want to learn!
No Thanks, I just want to read the article.
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: