Banner propaganda da DevMedia - Cursos de desenvolvimento web

O painel Styles do DWMX 2004 - 2a Parte

Publicado em: 10/08/2004

Finalidade

Neste tutorial mostrarei a utilização do painel Styles do Dreamweaver funcionando como um editor de folhas de estilo em cascata.
Este tutorial compõe-se de uma sequência de 06 (seis) documentos HTML (Introdução mais 1a.Parte até 5a. Parte) cujos links encontram-se no início e no fim do tutorial.

Para otimizar o aprendizado deste tutorial é necessário que você já tenha lido e entendido as partes anteriores de vez que uma parte é sequência da anterior.

[Introdução] [1a.Parte] [2a.Parte] [3a.Parte] [4a.Parte] [5a.Parte]

A estilização da lista ordenada <ol>

Na página padrão logo abaixo da imagem existe uma lista não ordenada <ul> aninhada dentro de uma lista ordenada <ol> que iremos estilizar a seguir:

Recordando:

1-) Se o painel Styles não estiver visível no Dreamweaver, tecle Shift + F11 para trazer o painel do CSS Styles;

2-) Clique no ícone com um sinalzinho de + (mais) para abrir a caixa de diálogo New CSS Style;

3-) Na caixa que se abre digite
Tag: ol - marque Tag (redefines the look of a especifc tag) e This document only;

4-) Clique OK e veja figura a seguir

Estilize <ol> adotando os seguintes parâmetros:

Screenshot do painel de estilos para o elemento ol

Clique OK.


A estilização da lista não ordenada <ul>

Observe no código que <ul> está dentro de <ol>, isto é:
<ul> é um elemento "filho" de <ol> (Ver FAQ - elemento filho)
E, aqui podemos aplicar a regra CSS no seletor contextual ol ul
(Ver FAQ - seletor contextual)

Screenshot do painel de estilos para o elemento seletor descendente ol ul

Clique OK.

Ver a estilização da lista na página padrão


A estilização da tag de imagem

Observe no código da página, que a tag de imagem <img> é um elemento filho de uma tag de parágrafo <p>
Vamos criar uma classe para esta tag <p> que contém a imagem.

Adotaremos o nome img-um para a classe. Vamos ao código da página acresentar a classe ao parágrafo.
Agora temos um seletor de classe. (Ver FAQ - Elemento nível de bloco)
Se você está reproduzindo os passos deste tutorial altere no código o seguinte:

O codigo atual:
<p><img src="cssnodw1.gif" alt="css no dw 1" width="208"
height="130" /></p>
A alteração a fazer:
<p class="img-um" ><img src="cssnodw1.gif" alt="css no dw 1" width="208"
height="130" /></p>

E agora vamos estilizar a classe .img-um para o parágrafo que contém a imagem.

Repita os passos 1 e 2 do item anterior e na caixa que se abre marque os parâmetros de estilização conforme mostrado na figura abaixo:

Screenshot do painel de estilos para o elemento imagem

Ver a estilização da tag p da imagem na página padrão


Considerações sobre a estilização da tag p com a classe img-um

A tag <p> é um elemento nível de bloco. (Ver FAQ - Elemento nível de bloco)

Elementos nível de bloco funcionam em CSS como se fossem "caixas" e podemos colocar neles uma cor de fundo, bordas, paddings, margins, bem como definir uma altura e uma largura. (Ver "caixas" CSS)

A tag img é um elementoHTML inline (Ver FAQ - Elemento nível de bloco)

Observe que criamos para a imagem uma "caixa" na cor rosa #FFCCCC, com padding em cima e em baixo de 15px para que a imagem dentro dela "desgrudasse" das bordas superior e inferior. Também definimos um padding a esquerda de 100px e uma largura de 330px para a caixa.
Ao definirmos text-indent igual a zero, anulamos o text-indent igual a 20px, que está definido para todos os parágrafos na regra CSS para parágrafos definida anteriormente. (Ver FAQ - herança CSS )

Para melhor entender as estilizações de elementos em bloco faça uma cópia desta etapa das estilizações e vá alterando as regras CSS para a classe .img-um uma de cada vez e visualizando o efeito no brownser.
Comece alterando os valores adotados neste tutorial e depois acresente outras regras.

[Introdução] [1a.Parte] [2a.Parte] [3a.Parte] [4a.Parte] [5a.Parte]

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo