O painel Estilos CSS

O painel Estilos CSS permite que você rastreie as propriedades e regras CSS afetando um elemento de página atualmente selecionado (modo Atual) ou todas as propriedades e regras disponibilizadas para o documento (modo Tudo). Um botão de alternância na parte superior do painel permite que você alterne entre os dois modos. O painel Estilos CSS também permite modificar propriedades CSS no modo Tudo e no modo Atual.

No modo Atual, o painel Estilos CSS exibe três painéis: o painel Resumo para seleção que exibe as propriedades CSS da seleção atual no documento, o painel Regras que exibe o local das propriedades selecionadas (ou uma cascata de regras da tag selecionada, dependendo da sua seleção) e o painel Propriedades que permite editar as propriedades CSS da regra aplicada à seleção.

Você pode redimensionar qualquer um desses painéis arrastando as bordas entre os painéis ou pode redimensionar as colunas arrastando os divisores.

O painel Resumo para seleção exibe um resumo das propriedades CSS e seus respectivos valores referentes ao item atualmente selecionado no documento ativo. O resumo mostra as propriedades de todas as regras que se aplicam diretamente à seleção. Somente as propriedades definidas são mostradas.

Por exemplo, as regras a seguir criam um estilo de classe um e um estilo de tag (neste caso, de parágrafo):

Quando você seleciona um texto de parágrafo com o estilo de classe .foo na janela Documento, o painel Resumo para seleção exibe as propriedades das duas regras, pois ambas se aplicam à seleção. Nesse caso, o painel Resumo para seleção listará as seguintes propriedades:

O painel Resumo para seleção organiza as propriedades em ordem crescente de especificidade. No exemplo acima, o estilo de tag define o tamanho de fonte, e o estilo de classe define a família de fontes e a cor. (A família de fontes definida pelo estilo de classe substitui a família de fontes definida pelo estilo de tag porque os seletores de classe têm uma especificidade maior do que os seletores de tag. Para obter mais informações sobre a especificidade CSS, consulte www.w3.org/TR/CSS2/cascade.html.)

O painel Regras exibe duas visualizações diferentes, visualização Sobre ou visualização Regras, dependendo da seleção. Na visualização Sobre (a visualização padrão), o painel exibe o nome da regra que define a propriedade CSS selecionada e o nome do arquivo que contém a regra. Na visualização Regras, o painel exibe uma cascata ou hierarquia de todas as regras que se aplicam direta ou indiretamente à seleção atual. (A tag à qual a regra se aplica diretamente aparece na coluna da direita.) Você pode alternar entre duas visualizações clicando nos botões Mostrar informações ou Mostrar cascata no canto superior direito do painel Regras.

Quando você seleciona uma propriedade no painel Resumo para seleção, todas as propriedades da regra de definição aparece no painel Propriedades. (A regra de definição também estará selecionada no painel Regras, caso a visualização Regras esteja selecionada.) Por exemplo, se você tiver uma regra chamada .maintext que define uma família de fontes, um tamanho de fonte e a cor, a seleção de qualquer uma dessas propriedades no painel Resumo para seleção exibirá todas as propriedades definidas pela regra .maintext no painel Propriedades, bem como a regra .maintext selecionada no painel Regras. (Além disso, a seleção de qualquer regra no painel Regras exibirá as propriedades dessa regra no painel Propriedades.) Em seguida, você poderá usar o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no documento atual ou vinculada através de uma folha de estilos anexada. Por padrão, o painel Propriedades mostra apenas as propriedades que já foram definidas e as organiza em ordem alfabética.

Você pode optar por exibir o painel Propriedades em duas outras visualizações. A visualização de categoria exibe as propriedades agrupadas em categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria, exibidas em texto azul. A visualização de lista exibe uma lista alfabética de todas as propriedades disponíveis e, da mesma forma, ordena as propriedades definidas na parte superior, exibindo-as em texto azul. Para alternar entre as visualizações, clique no botão Mostrar visualização de categoria, Mostrar visualização de lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades.

Em todas as visualizações, as propriedades definidas são exibidas em azul. As propriedades irrelevantes para uma seleção são exibidas com uma linha tachada vermelha. Ao manter o cursor do mouse sobre uma regra irrelevante, você fará com que seja exibida uma mensagem explicando por que a propriedade é irrelevante. Geralmente, uma propriedade é irrelevante porque ela é sobreposta ou não é uma propriedade herdada.

Qualquer alteração efetuada no painel Propriedades é aplicada imediatamente, permitindo que você a visualize enquanto trabalha.

Painel Estilos CSS no modo Tudo

No modo Tudo, o painel Estilos CSS exibe dois painéis: o painel Todas as regras (na parte superior) e o painel Propriedades (na parte inferior). O painel Todas as regras exibe uma lista de regras definidas no documento atual, bem como as regras definidas nas folhas de estilo anexadas ao documento atual. O painel Propriedades permite editar propriedades CSS para todas as regras selecionadas no painel Todas as regras.

Você pode redimensionar o painel arrastando a borda entre os painéis e pode redimensionar as colunas Propriedades arrastando seus respectivos divisores.

Quando você seleciona uma regra no painel Todas as regras, todas as propriedades definidas nessa regra aparecem no painel Propriedades. Em seguida, use o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no documento atual ou vinculada em uma folha de estilos anexada. Por padrão, o painel Propriedades mostra apenas as propriedades que já foram definidas e as organiza em ordem alfabética.

Você pode optar por exibir as propriedades em duas outras visualizações. A visualização de categoria exibe as propriedades agrupadas em categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria. A visualização de lista exibe uma lista alfabética de todas as propriedades disponíveis e, da mesma forma, ordena as propriedades definidas na parte superior. Para alternar entre as visualizações, clique no botão Mostrar visualização de categoria, Mostrar visualização de lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades. Em todas as visualizações, a propriedades definidas são exibidas em azul.

Qualquer alteração efetuada no painel Propriedades é aplicada imediatamente, permitindo que você a visualize enquanto trabalha.

Botões e visualizações do painel Estilos CSS

Nos modos Tudo e Atual, o painel Estilos CSS contém três botões que permitem alterar a visualização no painel Propriedades (o painel inferior):

Divide as propriedades CSS compatíveis com o Dreamweaver em oito categorias: fonte, fundo, bloco, borda, caixa, lista, posicionamento e extensões. As propriedades de cada categoria estão contidas em uma lista que você expande ou reduz clicando no botão de adição (+) ao lado do nome de categoria. As propriedades definidas aparecem (em azul) no topo da lista.

Exibe todas as propriedades CSS compatíveis com o Dreamweaver em ordem alfabética. As propriedades definidas aparecem (em azul) no topo da lista.

Exibe apenas as propriedades definidas. A visualização de propriedades definidas é a visualização padrão.

Nos modos Tudo e Atual, o painel Estilos CSS também contém os seguintes botões:

Abre a caixa de diálogo Vincular a folha de estilos externa. Selecione uma folha de estilos externa para vincular ou importe-a para o documento atual.

Abre uma caixa de diálogo na qual você pode selecionar o tipo de estilo que está criando; por exemplo, para criar um estilo de classe, redefinir uma tag HTML ou definir um seletor CSS.

Abre uma caixa de diálogo na qual você pode editar os estilos no documento atual ou em uma folha de estilos externa.

Remove a regra ou propriedade selecionada do painel Estilos CSS e remove a formatação de qualquer elemento ao qual ela foi aplicada. (No entanto, este recurso não remove as propriedades de classe e ID referenciadas por esse estilo.) O botão Excluir regra CSS também pode desanexar (ou “desvincular”) uma folha de estilos CSS anexada.

Abertura do painel Estilos CSS

Use o painel Estilos CSS para exibir, criar, editar e remover estilos CSS, bem como para anexar folhas de estilos externas aos documentos.