Abra o Inspetor de propriedades (Janela > Propriedades), se ainda não estiver aberto e selecione a opção CSS no canto esquerdo do painel.
Última atualização em
20/12/2021
Saiba como usar o Inspetor de propriedades de texto para aplicar formatação HTML ou formatação CSS no Dreamweaver.
Você pode usar o Inspetor de propriedades de texto para aplicar formatação HTML ou formatação de Folha de Estilo em Cascata (CSS). Quando você aplica formatação HTML, o Dreamweaver adiciona propriedades ao código HTML no corpo da página. Quando você aplica formatação CSS, o Dreamweaver escreve propriedades no cabeçalho do documento ou em uma folha de estilo separada.
Quando você criar estilos inline CSS, o Dreamweaver adicionará o código de atributo de estilo diretamente ao corpo da página.
Sobre formatação de texto (CSS versus HTML)
Formatar texto no Dreamweaver é similar a usar um processador de texto padrão. Você pode definir estilos de formatação padrão (Parágrafo, Título 1, Título 2 e assim por diante) para um bloco de texto, alterar a fonte, tamanho, cor e alinhamento do texto selecionado ou aplicar estilos de texto como negrito, itálico, código (monoespaçado) e sublinhado.
O Dreamweaver possui dois Inspetores de propriedades, integrados em um: o Inspetor de propriedades CSS e o Inspetor de propriedades HTML. Quando você usa o Inspetor de propriedades CSS, o Dreamweaver formata o texto usando Folhas de Estilo em Cascata (CSS). O CSS oferece aos web designers e desenvolvedores maior controle sobre o design da página da Web, além de proporcionar recursos aprimorados para acessibilidade e tamanho de arquivo reduzido.O Inspetor de propriedades CSS permite acessar estilos existentes, bem como criar novos.
Usar CSS é uma forma de controlar o estilo de uma página da Web sem comprometer sua estrutura. Ao separar elementos visuais de design (fontes, cores, margens e assim por diante) da lógica estrutural de uma página da Web, o CSS oferece aos web designers controle visual e tipográfico sem sacrificar a integridade do conteúdo. Além disso, definir design tipográfico e layout de página a partir de um único e distinto bloco de código—sem ter que recorrer a mapas de imagem, tags font, tabelas e GIFs espaçadores—permite downloads mais rápidos, manutenção do site simplificada e um ponto central de onde controlar atributos de design em várias páginas da web.
Você pode armazenar estilos criados com CSS diretamente no documento ou, para ter mais recursos e flexibilidade, pode armazenar estilos em uma folha de estilo externa.Se você anexar uma folha de estilo externa a várias páginas da Web, todas as páginas refletem automaticamente quaisquer alterações feitas na folha de estilo. Para acessar todas as regras CSS de uma página, use o painel Estilos CSS (Janela > Estilos CSS). Para acessar regras que se aplicam à seleção atual, use o painel Estilos CSS (modo Atual) ou o menu pop-up Regra de Destino no Inspetor de propriedades CSS.
Se preferir, você pode usar tags de marcação HTML para formatar texto em suas páginas da Web. Para usar tags HTML em vez de CSS, formate seu texto usando o Inspetor de propriedades HTML.
É possível combinar a formatação CSS e a formatação HTML 3.2 em uma mesma página. A formatação é aplicada de forma hierárquica: a formatação HTML 3.2 substitui a formatação aplicada pelas folhas de estilos CSS externas, enquanto a CSS incorporada no documento substitui a CSS externa.
Editar regras CSS no Inspetor de propriedades
Siga um destes procedimentos:
- Coloque o ponto de inserção dentro de um bloco de texto que foi formatado por uma regra que você deseja editar. A regra aparece no menu pop-up Regra Direcionada.
- Selecione uma regra no menu pop-up Regra-alvo.
- Clique em Editar regra.
Faça alterações na regra usando as várias opções
no inspetor de propriedade CSS.
Regra-alvo
É a regra que você está editando no Inspetor de propriedades CSS. Quando você tem um estilo existente aplicado ao texto, a regra que afeta o formato do texto aparece quando você clica dentro do texto na página. Você também pode usar o menu pop-up Regra Direcionada para criar novas regras CSS, novos estilos em linha ou aplicar classes existentes ao texto selecionado.Se você está criando uma nova regra, precisará preencher a caixa de diálogo Nova regra CSS.Para mais informações, veja os links no final deste tópico.
Editar regra
Abre a caixa de diálogo Definição de regra CSS para a regra direcionada. Se você selecionar Nova regra CSS no menu pop-up Regra direcionada e clicar no botão Editar regra, o Dreamweaver abrirá a caixa de diálogo Nova regra CSS.
CSS Designer
Abre o painel CSS Designer e exibe propriedades para a regra direcionada na visualização Atual.
Fonte
Altera a fonte da regra-alvo.
Tamanho
Define o tamanho de fonte da regra-alvo.
Cor do texto
Define a cor selecionada como a cor da fonte na regra-alvo. Selecione uma cor compatível com a web clicando na caixa de cor ou insira um valor hexadecimal (por exemplo, #BB5153) no campo de texto adjacente.
Negrito
Adiciona a propriedade de negrito à regra-alvo.
Itálico
Adiciona a propriedade de itálico à regra-alvo.
Alinhar à esquerda, centralizar e alinhar à direita
Alinha a regra direcionada à esquerda, centro ou direita.
As propriedades Fonte, Tamanho, Cor do texto, Negrito, Itálico e Alinhamento sempre exibem as propriedades da regra que se aplica à seleção atual na janela Documento. Quando você alterar alguma dessas propriedades, afetará a regra-alvo.
Edição da cor do texto usando o Inspetor de propriedades
Se não tiver aplicado nenhuma regra específica a seu texto, você pode editar a cor do texto diretamente do Inspetor de propriedades. No exemplo a seguir, observe a cor do texto antes da edição. O campo adjacente ao seletor de cores exibe branco, indicando a cor do texto onde você posicionou o cursor.
Para editar a cor do texto, selecione o texto que deseja editar. Clique no seletor de cores e selecione a cor de sua escolha. Veja a seguinte imagem onde o inspetor de propriedades exibe a nova cor.
Definir formatação HTML no inspetor de propriedades
Abra o inspetor de Propriedades (Janela >
Propriedades), se ainda não estiver aberto, e clique no botão HTML.
Selecione o texto que deseja formatar.
Defina as opções a serem aplicadas ao texto selecionado:
Formato
Define o estilo de parágrafo do texto selecionado. Parágrafo aplica o formato padrão para uma tag <p>, Título 1 adiciona uma tag H1, e assim por diante.
ID
Atribui uma ID à seleção. O menu pop-up de ID (se aplicável) lista todos os IDs não utilizados e declarados do documento.
Classe
Exibe o estilo de classe que está atualmente aplicado ao texto selecionado. Se nenhum estilo foi aplicado à seleção, o menu pop‑up mostra Nenhum estilo CSS. Se vários estilos foram aplicados à seleção, o menu fica em branco.
Use o menu Estilo para fazer qualquer um dos seguintes:
Selecione o estilo que deseja aplicar à seleção.
Selecionar Nenhum para remover o estilo atualmente selecionado.
Selecione Renomear e renomeie o estilo.
Selecione Anexar folha de estilos para abrir uma caixa de diálogo que permite anexar uma folha de estilos externa à página.
Negrito
Aplica <b> ou <strong> ao texto selecionado de acordo com a preferência de estilo definida na categoria Geral da caixa de diálogo Preferências.
Itálico
Aplica <i> ou <em> ao texto selecionado de acordo com a preferência de estilo definida na categoria Geral da caixa de diálogo Preferências.
Lista não ordenada
Cria uma lista com marcadores do texto selecionado. Se nenhum texto estiver selecionado, uma nova lista com marcadores será iniciada.
Lista ordenada
Cria uma lista numerada do texto selecionado. Se nenhum texto estiver selecionado, uma nova lista numerada será iniciada.
Citação em bloco e Remover citação em bloco
Recue ou remova o recuo do texto selecionado aplicando ou removendo a tag blockquote. Em uma lista, o recuo cria uma lista aninhada e a remoção do recuo desaninha a lista.
Link
Cria um link de hipertexto do texto selecionado. Clique no ícone da pasta para navegar até um arquivo no seu site; digite a URL; arraste o ícone Apontar para arquivo para um arquivo no painel Arquivos; ou arraste um arquivo do painel Arquivos para a caixa.
Título
Especifica a dica de ferramenta de texto para um link de hipertexto.
Alvo
Especifica o quadro ou janela na qual o documento vinculado será carregado:
_blank carrega o arquivo vinculado em uma nova janela do navegador sem nome.
_parent carrega o arquivo vinculado no frameset ou janela pai do quadro que contém o link.Se o quadro que contém o link não estiver aninhado, o arquivo vinculado é carregado na janela completa do navegador.
_self carrega o arquivo vinculado no mesmo quadro ou janela que o link. Este destino está implícito, portanto geralmente não é necessário especificá-lo.
_top carrega o arquivo vinculado na janela do navegador completa, removendo assim todos os quadros.
Renomear uma classe no inspetor de propriedades HTML
Dreamweaver exibe todas as classes disponíveis para a página no menu Classe do inspetor de propriedades HTML. Você pode renomear estilos nesta lista selecionando a opção Renomear no final da lista de estilos de classe.
No painel Inspetor de propriedades, selecione a lista suspensa Classe.
Na lista exibida, selecione Renomear no final da lista.
Selecione o estilo que deseja renomear no menu pop-up Renomear estilo.
Digite um novo nome no campo de texto Novo nome e clique em
OK.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
