Criar e aplicar um estilo

Importante :  Este artigo foi traduzido por um sistema de tradução automática, leia o aviso de isenção de responsabilidade. Para sua referência, veja a versão em inglês deste artigo aqui.

Um estilo é um conjunto de características de formatação definidas em uma CSS (folha de estilo em cascata). Você pode aplicar estilos em uma página da Web, incluindo texto (caracteres individuais ou parágrafos inteiros), gráficos, camadas, tabelas e até mesmo ao corpo da página da Web inteira. Os estilos permitem que você reutilize de forma eficaz um conjunto de propriedades e valores sempre que quiser usá-los.

Os estilos de uma CSS ficam em cascata no sentido de que regras de estilo globais se aplicam aos elementos HTML a menos que as regras de estilo locais as substituam. Em geral, as regras de estilo locais têm precedência sobre as regras de estilo gerais. Por exemplo, um estilo definido em uma CSS interna em uma página da Web substitui um estilo definido em uma CSS externa. Semelhantemente, uma CSS embutida definida em um único elemento HTML na página da Web substitui os estilos definidos para esse mesmo elemento na CSS interna ou externa da página da Web. As partes das regras de estilo globais que não estejam em contradição com regras de estilo da CSS locais se aplicam aos elementos HTML mesmo quando os estilos locais são aplicados.

Neste artigo

Tipos de estilos

Criar um estilo

Aplicar um estilo

Tipos de estilos

Um estilo que reside em uma CSS externa ou interna pode ser baseado em classe, em elemento ou em identificação. Um estilo é definido por seu conjunto de regras, que consiste em um seletor, seguido por um bloco de declarações de propriedade que aparecem entre uma chave esquerda ({) e uma chave direita (}). Cada tipo de estilo é distinguido de outros tipos de estilo por seu seletor; um ponto (.) precede o seletor em um estilo baseado em classe; um sinal de número (#) precede o seletor em um estilo baseado em identificação; e o seletor de um estilo baseado em elemento consiste somente em um elemento HTML, tal como o elemento H1.

Estilos baseados em classe

Use estilos baseados em classe para definir um conjunto de propriedades que você deseja usar em um ou mais itens em uma página da Web. Se você um dia quiser modificar o estilo, edite o conjunto de regras do mesmo e cada item ao qual você aplicou o estilo refletirá automaticamente as alterações.

No exemplo seguinte, "introdução" é o seletor do estilo e o "tamanho de fonte: pequeno" é uma declaração de propriedade, seguida por uma segunda declaração de propriedade.

Exemplo de um conjunto de regras em um estilo baseado em classe

.introduction {font-size: small; color: white}

Exemplo de um estilo baseado em classe aplicado à marca <p>

<p class="introduction">

Estilos baseados em elemento

Use estilos baseados em elemento para definir um conjunto de propriedades que você deseja utilizar em cada instância de um elemento HTML específico em uma página da Web. Por exemplo, para criar uma margem de 25 pixels em torno de todos os parágrafos (conteúdo entre as marcas <p>) na página da Web, crie um estilo baseado em elemento que use o elemento p como seu seletor e contenha declarações para propriedades de margem, como mostrado no código seguinte.

Exemplo de um conjunto de regras de um estilo baseado em elemento

p { margin-left: 25px; margin-right: 25px }

Estilos baseados em identificação

Use um estilo baseado em identificação quando quiser definir um conjunto de propriedades para um único item ou bloco de itens que você deseja distinguir de qualquer outro conteúdo em uma ou mais páginas da Web. Use um estilo baseado em identificação quando quiser estilizar um único elemento HTML em uma página da Web.

Exemplo de um conjunto de regras de um estilo baseado em identificação

#footer {background-color: #CCCCCC; margin: 15px}

Exemplo de um estilo baseado em identificação aplicado a uma marca <p>

<p id="footer">

Estilos embutidos

Use um estilo embutido quando quiser definir um conjunto de propriedades para um único item ou bloco de itens em uma página da Web e não quiser reutilizar esse estilo. Ao contrário dos estilos baseados em identificação, em elemento e em classe, cujas propriedades são definidas na seção de cabeçalho de uma página da Web (CSS interna) ou em um arquivo de CSS externa, as propriedades de um estilo embutido (ou CSS embutida) são definidas diretamente no elemento HTML que você deseja que use o estilo.

Exemplo de um conjunto de regras de um estilo embutido

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Início da página

Criar um estilo

Você pode criar novos estilos do início ou copiar um estilo existente. De qualquer forma, a caixa de diálogo Novo Estilo permite que você defina tudo sobre seu novo estilo, incluindo o tipo de seletor, as propriedades e a folha de estilos que conterá o estilo. Quando você quiser criar um novo estilo embutido, use também o painel de tarefas Propriedades de CSS. Quando quiser criar e aplicar rapidamente um novo estilo em sua página sem definir quaisquer propriedades para o estilo, use também a barra de ferramentas Estilo.

Criar um estilo usando a caixa de diálogo Novo estilo

  1. Siga um destes procedimentos:

    • Para adicionar um estilo a uma CSS externa, abra o arquivo .css.

    • Para adicionar um estilo a uma CSS interna, abra a página da Web.

    • Para adicionar um estilo embutido, abra a página da Web e, em seguida, selecione o conteúdo que você deseja estilizar.

  2. Siga um destes procedimentos:

    • Para criar um novo estilo    Clique em Novo Estilo em um destes locais: o painel de tarefas Aplicar Estilos ou o painel de tarefas Gerenciar Estilos, a barra de ferramentas Estilo ou o menu Formatar.

    • Para copiar um estilo existente    Siga um destes procedimentos:

      • No painel de tarefas Aplicar Estilos, aponte para o estilo que você deseja copiar, clique na seta para baixo que aparece e, em seguida, selecione Cópia do Novo Estilo.

      • No painel de tarefas Gerenciar Estilos ou no painel de tarefas Propriedades de CSS, clique com o botão direito do mouse no estilo que deseja copiar e, em seguida, selecione Cópia do Novo Estilo.

  3. Na caixa de diálogo Novo Estilo, faça o seguinte:

Use

Para

Seletor

  • Para usar um seletor de classe, digite um ponto (.) seguido por um nome exclusivo.

  • Para usar um seletor de identificação, digite um sinal de número (#) seguido por um nome exclusivo.

    Observação : Nomes de classe e de seletor de identificação não podem conter espaços a menos que você esteja criando um seletor complexo.

  • Para usar um seletor de elemento, digite o nome de um elemento HTML ou clique na caixa suspensa Seletor e selecione um nome de elemento.

  • Para usar um seletor embutido, selecione estilo embutido.

  • Para criar um seletor complexo, digite o seletor.

Definir em

Selecione uma das seguintes opções:

  • Página atual adiciona o novo estilo à CSS interna na página da Web atual.

  • Nova folha de estilos adiciona o novo estilo a uma nova CSS externa vazia.

  • Folha de estilos existente adiciona o novo estilo a uma CSS externa existente que você especificar.

Aplicar o novo estilo à seleção de documento

Aplique o estilo à seleção atual na página da Web.

URL

Se você selecionou Folha de estilos existente em Definir em, insira a URL no arquivo .css.

Categoria

Selecione qualquer uma das opções seguintes e, em seguida, defina as propriedades que aparecem à direita na caixa de diálogo:

Dica : Categorias que aparecem em negrito na lista Categoria contêm propriedades definidas.

  • Fonte define as propriedades de fonte, incluindo tamanho, peso, decoração e cor.

  • Bloco define a altura da linha, o alinhamento do texto, o recuo do texto e o espaçamento do texto.

  • Plano de fundo define a cor do plano de fundo e as propriedades de imagem do plano de fundo.

  • Borda define uma borda e suas propriedades.

  • Caixa define as propriedades de preenchimento e de margem da caixa e dos elementos de nível do bloco.

  • Posição define as dimensões e a posição da caixa e dos elementos de nível do bloco.

  • Layout define a visibilidade, a flutuação e o comportamento da quebra de texto, o recorte e as outras propriedades de layout da caixa e dos elementos de nível do bloco.

  • Lista define as propriedades dos elementos de lista, incluindo tipo, posição e imagem.

  • Tabela define as propriedades de elementos relacionados à tabela, incluindo espaçamento, layout, propriedades da borda.

Observação : Você também pode copiar um estilo de uma CSS para outra. No painel de tarefas Gerenciar Estilos, arraste o estilo da CSS que contém esse estilo para o nome da CSS para qual você deseja copiá-lo, ou para um ponto específico na lista de estilos na CSS de destino.

Criar um estilo in-line usando o painel de tarefas Propriedades de CSS

  1. No Modo de Exibição de Design ou Modo de Exibição de Código, em sua página da Web, selecione o conteúdo ao qual você deseja adicionar um estilo embutido.

  2. No painel de tarefas Propriedades de CSS, em Regras Aplicadas, clique com o botão direito do mouse no seletor ao qual você deseja aplicar o estilo embutido, ou, se "(sem regras aplicadas)" aparecer, clique com o botão direito do mouse em qualquer local em Regras Aplicadas e, em seguida, clique em Novo Estilo Embutido no menu de atalho.

  3. Em Propriedades de CSS, defina as propriedades desejadas.

Criar e aplicar um novo estilo indefinido

Você pode criar estilos e aplicá-los a itens e, em seguida, definir os estilos mais tarde. Por exemplo, se você quiser trabalhar com um designer para criar a aparência da sua página, aplique estilos indefinidos aos itens em sua página, em seguida, reúna-se com o designer para definir o estilo mais tarde.

  1. No Modo de Exibição de Design ou Modo de Exibição de Código, em sua página da Web, selecione o item ao qual você deseja aplicar um estilo.

  2. Para criar e aplicar um novo estilo sem definir quaisquer propriedades, na barra de ferramentas Estilo, na caixa Classe ou Identificação, digite um nome exclusivo para o novo estilo.

Início da página

Aplicar um estilo

Você pode usar o painel de tarefas Aplicar Estilos, o painel de tarefas Gerenciar Estilos ou a barra de ferramentas Estilo para aplicar estilos baseados em classe ou em identificação a partir de suas CSS (folhas de estilo em cascata) internas e externas. O painel de tarefas Aplicar Estilos permite que você aplique vários estilos a uma seleção, enquanto o painel de tarefas Gerenciar Estilos e a barra de ferramentas Estilo estão limitados a aplicar um estilo. A barra de ferramentas Estilo permite que você nomeie e aplique rapidamente os novos estilos definidos em sua página.

Você não pode aplicar estilos que usem um elemento de um seletor (estilos baseados em elemento) porque esse tipo de estilos são aplicados automaticamente ao seu elemento associado em uma página da Web. O painel de tarefas Aplicar Estilos lista os estilos baseados em elemento em Seletores Contextuais e, junto com o painel de tarefas Gerenciar Estilos, exibe um ponto azul ao lado do nome do estilo. A barra de ferramentas Estilo não lista os estilos baseados em elemento.

  1. No modo de Exibição de Design ou Modo de Exibição de Código, em sua página da Web, selecione o item ao qual você deseja aplicar um estilo.

  2. Siga um destes procedimentos:

    • Para aplicar vários estilos existentes    No painel de tarefas Aplicar Estilos, pressione CTRL enquanto clica em cada estilo desejado.

    • Para aplicar um único estilo existente    Siga um destes procedimentos:

      • No painel de tarefas Aplicar Estilos, clique no estilo de classe ou de identificação desejado.

      • Na barra de ferramentas Estilo, na caixa suspensa Classe ou Identificação, clique no estilo desejado.

      • No painel de tarefas Gerenciar Estilos, clique com o botão direito do mouse no estilo de classe ou de identificação desejado e, em seguida, clique em Aplicar Estilo no menu de atalho.

    • Para criar e aplicar um novo estilo sem definir quaisquer propriedades    Na barra de ferramentas Estilo, na caixa Classe ou Identificação, digite um nome exclusivo para o novo estilo.

Início da página

Observação : Aviso de Isenção de Tradução Automática: Este artigo foi traduzido por computador, sem intervenção humana. A Microsoft oferece essas traduções automáticas para ajudar as pessoas que não falam inglês a aproveitar os textos escritos sobre produtos, serviços e tecnologias da Microsoft. Como este artigo foi traduzido automaticamente, é possível que contenha erros de vocabulário, sintaxe ou gramática.

Expanda suas habilidades
Explore o treinamento
Obtenha novos recursos primeiro
Ingressar no Office Insider

Essas informações foram úteis?

Obrigado por seus comentários!

Agradecemos pelos seus comentários! Parece que pode ser útil conectar você a um de nossos agentes de suporte do Office.

×