Saiba como usar o painel CSS Designer para criar ou anexar folhas de estilos, consultas de mídia, seletores e definir propriedades CSS.
O painel CSS Designer (Janela > CSS Designer) é um Inspetor de propriedades CSS que permite criar “visualmente” estilos e arquivos CSS e definir propriedades, junto com consultas de mídia.
As seções a seguir estão disponíveis na interface do CSS Designer:
Com o CSS Designer, você pode editar uma regra individual em uma folha de estilos CSS (use a guia Atual no CSS Designer), ou, se preferir, trabalhe diretamente na folha de estilos CSS (use a guia Tudo no CSS Designer).
No painel Origens do painel CSS Designer, clique em 
e em uma das seguintes opções:
Com base na opção selecionada, as caixas de diálogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente são exibidas.
Clique em Procurar para especificar o nome do arquivo CSS e, se você estiver criando um CSS, o local para salvar o novo arquivo.
Siga um destes procedimentos:
(Opcional) Clique em Uso condicional e especifique a consulta de mídia que deseja associar ao arquivo CSS.
No painel CSS Designer, clique em uma origem CSS no painel Origens.
Clique em 
no painel @Mídia para adicionar uma nova consulta de mídia.
A caixa de diálogo Defina a consulta de mídia aparece e relaciona todas as condições de consulta de mídia compatíveis com o Dreamweaver.
Selecione as Condições conforme desejar.
Verifique se você especificou valores válidos para todas as condições selecionadas. Caso contrário, as consultas de mídia correspondentes não serão criadas com sucesso.
somente a operação “and” é compatível com várias condições.
Se você adicionar as condições de consulta de mídia pelo código, apenas as condições permitidas serão preenchidas na caixa de diálogo Definir consulta de mídia. A caixa de texto Código na caixa de diálogo, entretanto, mostra o código completo (incluindo condições não permitidas).
Se você clicar em uma consulta de mídia na visualização dinâmica/de design, a janela de visualização é alterada para corresponder à consulta de mídia selecionada. Para exibir o tamanho total da janela de visualização, clique em Global no painel @Mídia.
No painel CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mídia no painel @Mídia.
No painel Seletores, clique em . Com base no elemento selecionado no documento, o CSS Designer identifica de forma inteligente e solicita o seletor relevante (até três regras).
Execute um ou mais destes procedimentos:
Observação: a opção Duplicar na consulta de mídia está disponível somente quando a fonte do seletor selecionado contém consultas de mídia. Não é possível duplicar um seletor de uma fonte em uma consulta de mídia de outra fonte.
Agora é possível copiar estilos de um seletor e colá-los em outro. Você pode copiar todos os estilos ou copiar apenas uma categoria de estilos específica, como Layout, Texto e Borda.
Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis:
Clique no seletor requerido e arraste-o para a nova posição com o painel Seletores.
As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades:
antes de editar as propriedades de um seletor CSS, identifique os elementos associados a ele usando a Inspeção inversa. Ao fazer isso, você pode avaliar se todos os elementos realçados na Inspeção inversa realmente exigem alterações.
Marque a caixa de seleção Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que você pode especificar para um seletor, desmarque a caixa de seleção Exib. conj.
Para definir uma propriedade como, por exemplo, width ou border-collapse, clique nas opções necessárias exibidas perto da propriedade no painel Propriedades.
As propriedades substituídas são indicadas em formato tachado.
Usando os controles de caixa no painel Propriedades do CSS Designer, é possível definir rapidamente as propriedades de margens, preenchimento e posição. Se preferir o código, você poderá especificar o código abreviado para margem e preenchimento nas caixas de edição rápida, como exibido neste exemplo.
Clique nos valores e insira o valor necessário. Se você desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de vínculo no centro.
A qualquer momento, você pode desativar ou excluir valores específicos, por exemplo, o valor da margem esquerda e manter os valores das margens direita, superior e inferior.
As propriedades de controle de bordas são organizadas em guias lógicas para ajudá-lo a exibir ou alterar as propriedades.
Se preferir o código, você poderá especificar o código abreviado para bordas e raio da borda na caixa de texto de edição rápida.
Para especificar as propriedades de controle de bordas, defina a propriedade na guia “Todos os lados”. As outras guias são ativadas e as propriedades definidas na guia “Todos os lados” são refletidas nas bordas individuais.
Ao alterar uma propriedade nas guias de borda individual, o valor da propriedade correspondente na guia “Todos os lados” muda para “undefined” (valor padrão).
No exemplo abaixo, a cor da borda estava definida como preto e foi alterada para vermelho na borda superior.
O código inserido é baseado na configuração da preferência para o formato abreviado ou longo.
Durante a Inspeção, as guias são focadas com base na prioridade das guias “definidas”. A prioridade mais alta é para a guia “Todos os lados”, seguida por “Superior“, “Direita”, “Inferior” e “Esquerda”. Por exemplo, se estiver definido um valor apenas para a borda superior, o modo computado direciona o foco à guia “Superior”, ignorando a guia “Todos os lados”, pois não havia um valor definido para “Todos os lados”.
O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS a partir do painel CSS Designer, sem ter que fazer alterações diretamente no código. Quando você comenta partes do CSS, pode ver que tipos de efeitos as propriedades e os valores específicos têm na sua página.
Quando você desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentários de CSS e um rótulo [desativado] à propriedade do CSS que você desativou. Você pode, em seguida, reativar ou excluir a propriedade do CSS desativada, de acordo com sua preferência.
Você pode desativar ou excluir qualquer propriedade usando o CSS Designer.
As capturas de tela a seguir mostram os ícones de desativar e excluir da propriedade height. Esses ícones ficam visíveis quando você passa o mouse na propriedade.
Também é possível usar as opções de excluir e desativar no nível de grupo de controle de bordas para aplicar essas ações a todas as propriedades.
Você pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Também é possível navegar entre os grupos de propriedades no painel Propriedades.
|
Atalho |
Fluxo de trabalho |
|
CTRL + Alt +[Shift =] |
Adiciona seletor (se o controle estiver na seção de seletor) |
|
CTRL + Alt+ S |
Adiciona seletor (se o controle estiver em qualquer lugar no aplicativo) |
|
CTRL + Alt +[Shift =] |
Adiciona propriedade (se o controle estiver na seção de propriedade) |
|
CTRL + Alt+ P |
Adiciona propriedade (se o controle estiver em qualquer lugar no aplicativo) |
|
Select + Delete |
Exclui o seletor, se ele estiver selecionado |
|
CTRL + Alt + (PgUp/PgDn) |
Salta entre as seções enquanto estiver no subpainel de propriedades |
Geralmente, um único Seletor CSS é associado a vários elementos de página. Por exemplo, o texto no conteúdo principal de uma página, um cabeçalho, e um texto de rodapé podem ser associados ao mesmo seletor CSS. Ao editar as propriedades do seletor CSS, todos os elementos associados ao seletor serão afetados, incluindo aqueles que não devem ser alterados.
Realce dinâmico ajuda a identificar todos os elementos associados a um seletor CSS. Para alterar apenas um elemento ou alguns elementos, você pode criar um novo seletor CSS para os elementos e editar as propriedades.
Para identificar elementos de página associados a um seletor CSS, passe o mouse sobre o botão na Visualização dinâmica (com Código ativo “desligado”). O Dreamweaver realça os elementos associados com linhas pontilhadas.
Para fixar o realce dos elementos, clique no seletor. Agora, os elementos estão realçados com uma borda azul.
Para remover o realce azul em torno de elementos, use o seletor novamente.
O Realce dinâmico está ativado por padrão. Para desativar o Realce dinâmico, clique nas opções de Visualização dinâmica na barra de ferramentas Documento e clique em Desativar realce dinâmico.
Quando você edita uma folha de estilos CSS externa, todos os documentos vinculados a essa folha de estilos CSS são atualizados para refletir essas edições.
É possível exportar os estilos CSS localizados em um documento para criar uma nova folha de estilos CSS, e anexar ou vincular-se a uma folha de estilos externa para aplicar os estilos encontrados nesse local.
Você pode anexar às páginas qualquer folha de estilos criada ou copiada no site.
Abra o CSS Designer seguindo um destes procedimentos:
No CSS Designer, clique no ícone + ao lado de Origens e selecione Anexar arquivo CSS existente.
Siga um destes procedimentos:
Clique no botão Visualizar para verificar se a folha de estilos aplica os estilos desejados à página atual.
Se os estilos aplicados não forem o que você espera, clique em Cancelar para remover a folha de estilos. A aparência da página será revertida para o estado anterior.
Clique em OK.
