Partilhar via

Trabalhando com CSS: Uma visão geral

  • Artigo

Uma folha de estilos em cascata (CSS) contém regras de estilos que são aplicadas a elementos em uma página da Web.Esses estilos definem como elementos são exibidos e onde eles são posicionados na página.Visual Studio 2008 fornece ferramentas que você pode usar para trabalhar com a CSS.

Esse tópico contém:

  • Cenários

  • Ferramentas e recursos do CSS

  • Segundo plano

  • Exemplos de código

  • Referência de Classe

  • O que há de novo

Cenários

Em Visual Studio 2008, enquanto vocês utilizar o designer para criar e editar páginas Web, você pode escrever regras de estilos internas, que estão contidas em uma página Web, ou em uma folha de estilos externa.Você pode ver preenchimentos e margens aplicadas aos elementos da páginas utilizando auxílios visuais.você também pode posicionar elementos utilizando as ferramentas de posicionamento.

Voltar ao topo

Ferramentas e recursos do CSS

Visual Studio 2008 fornece uma conjunto de ferramentas para criar, aplicar e gerenciar estilos e folhas de estilo em cascata (CSS).As ferramentas incluem o seguinte:

  • A janelas Aplicar Estilos permite criar, modificar e aplicar estilos.Você também pode vincular à uma folha de estilo em cascata (CSS) externa, ou remover uma.A janela identifica o os tipos de estilos, e mostra quando o estilo é utilizado na página Web atual e quando é utilizado na seleção atual.Para obter mais informações, consulte Como: Usar estilos aplicar e gerenciar estilos Windows.

  • A janela Gerenciar Estilos fornece várias das mesmas ferramentos que a janelas Aplicar Estilos.No entanto, você pode utilizar a janela Gerenciar Estilos para mover estilos de uma folha de estilos interna (um elemento style de uma página) para uma folha de estilos esterna ou vice-versa.Você também pode usar-la para mover estilos dentro de uma folha de estilo.Para obter mais informações, consulte Como: Usar estilos aplicar e gerenciar estilos Windows.

  • A janela Propriedades de CSS mostra os estilos que são usados na seleção atual em uma página Web.Ela também mostra a ordem de precedência para os estilos.Além disso, a janelas fornece um listra abrangente de todas as propriedades de CSS.Isso te permite adicionar propriedades a um estilos pré-existente, modificar propriedades que você já havia definido, e criar novos estilos internos.Para obter mais informações, consulte Como: Usar a janela Propriedades CSS.

  • A barra de ferramentas Aplicação Direta de Estilo permite aplicar ou remover estilos com base em classe ou identificação, e criar e aplicar novos estilos.Isso fornece maior controle sobre os estilos que são gerados por Visual Studio.Para obter mais informações, consulte Como: Use o estilo Direct aplicativo barra de ferramentas.

  • O seletor de marcas te permite selecionar marcações HTML enquanto você está trabalhando em uma página Web.A barra de seleção de marcas está na parte inferior da janela de edição.Quando você colocar o cursor em qualquer lugar da página, a barra de seleção rápida de marcas exibe marcas que mostram as marcações HTML existentes para aquela área.Você também pode usar a tecla ESC para mover para cima a hierarquia HTML para selecionar marcas que estão acumuladas dentro de outras marcas.Para obter mais informações, consulte Navegação por Marcas no Editor HTML do Visual Web Developer.

Voltar ao topo

Segundo plano

Ao invés de determinar os atributos de formatação individualmente para cada elemento em uma página, você pode criar regras de estilo.Essas regras aplicam valores de propriedade (tipicamente regras de formatação) quando um navegador Web encontra alalgumanstância de um elemento, ou de um elemento que possui uma identificação específica ou classe de estilo.

Para trabalhar com estilos CSS, você deve entender como criar um estilo e como aplicá-lo.Essa seção contém informações da especificação W3C do CSS sobre estilos CSS e sobre ferramentas em Visual Studio 2008 que facilitam o trabalho com estilos CSS.

Definindo Regras de Estilos CSS

Cada regra de estilo CSS (também conhecida sistema autônomo um estilo) tem duas partes principais: um seletor (sistema autônomo, por exemplo, h1) e uma declaração (sistema autônomo color:blue). A declaração consiste de uma propriedade (color) e seu valor (blue).A sintaxe para uma regra de estilo é como segue:

Selector { property : value ; property2 : value2}

Por exemplo, a seguinte regra de estilo CSS especifica que qualquer texto em um elemento h1 deve ser centralizado e sua fonte deve ser de cor azul.

h1 {text-align:center; color:blue;}

Usando Tipos Diferentes de Estilos

Você pode definir uma regra de estilo que se aplica a um elemento, um elemento que tenha uma classe atribuída ou a um elemento por ID.Um estilo é definido pelo seu conjunto de regras, que consiste em um seletor, seguido de um bloco de declarações de propriedade exibidos entre uma chave esquerda ({}) e uma chave direita (}).Cada tipo de estilo é diferenciado por seu seletor.Um seletor baseado em classe é precedido por um ponto (.).Um seletor baseado em identificação é precedido por uma cerquilha (#).O seletor para um estilo baseado em elemento consiste apenas do nome do elemento HTML, como h1.

Estilos baseados em elementos

Estilos baseados em elementos definem propriedades que você deseja aplicar para cada instância de um elemento HTML particular.(Estilos baseados em elementos podem ser substituídos por estilos baseados em classes ou em identificação para instâncias individuais de um elemento) Por exemplo, você pode querer criar uma margem de 25 pixels ao redor de todos os parágrafos (conteúdos que estão em elementos p).Para fazer isso, você cria um estilo baseado em elemento que usa o elemento p como seletor e que contenha declarações para propriedades de margem.O exemplo seguinte mostra essa regra de estilo baseado em elemento.

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

Estilos baseados em Classes

Estilos baseados em classes define propriedades que você deseja aplicar para um subgrupo de um tipo particular de elemento (por exemplo, para alguns mas não todos os elementos p).Eles também podem ser aplicados para tipos diferentes de elementos, como alguns elementos p e span.O exemplo seguinte mostra uma regra de estilo baseada em classe.O nome introduction é o seletor de estilo (o nome da classe).

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

O exemplo seguinte mostra como especificar uma classe para uma marcação <p>:

<p class="introduction">

Estilos baseados em Identificação

Estilos baseados em identificação definem propriedades que você deseja aplicar para elementos específicos que são identificados por seu atributo de identificação.Você frequentemente usa um estilo baseado em identificação quando deseja aplicar um estilo para um elemento HTML em um página Web.O exemplo seguinte mostra um estilo baseado em identificação.O nome footer especifica a identificação à que esse estilo se aplica.

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

O exemplo seguinte mostra como especificar uma identificação para uma marcação <p>:

<p id="footer">

Escrevendo Estilos CSS

Você pode escrever regras de estilos de CSS em vários locais, incluindo os seguinte:

  • Em linha com a marcação HTML.

  • Em um elemento style em uma página Web.

  • Em uma folha de estilos externa (arquivo .css) que está vinculada ou importada para a página Web.

Em geral, você escreve regras que se aplicam ao site Web como todo em uma folha de estilos externa.Você escreve regras de estilos que se aplicam apenas à uma página em um elemento de página style.Você escreve regras de estilos que se aplicam apenas à um elemento da página como um estilo interno.Muitos designers e desenvolvedores descobrem que é mais fácil se manter o estilo quando se escreve todas as regras de estilos em uma ou mais folha de estilo externa.

Criando estilos Internos

Uma regra de estilo interna é definida em uma marcação de abertura do elemento utilizando o atributo de estilo.Use um estilo interno quando você desejar definir propriedades para um único elemento em uma página Web ou quando você não deseja reutilizar o aquele estilo.

O exemplo seguinte mostra um estilo interno.

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

Criando estilos CSS Internos (específicos da página)

Regras de estilo CSS podem ser definidas em um elemento style dentro do elemento head de uma página Web.Nessa caso, a regra de estilo se aplicar apenas ao elemento naquela página.

O seguinte exemplo de código mostra como definir e aplicar uma regra de estilo CSS a todos os elementos h1 em uma página da Web:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">        h1{text-align:center; color:blue;}      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

Nesta página da Web, qualquer texto que apareça entre as marcas <h1> e </h1> será centralizado e terá a cor azul.Você não precisa reatribuir esses atributos de estilo para cada elemento h1 no documento.Se você deseja mudar a cor (ou qualquer propriedade) de todos os textos em todos os elementos h1, você pode editar apenas uma regra de estilo.

Criando Folhas Esternas de Estilos em Cascata

Uma folha de estilos externa é um arquivo de texto simples com um extensão de nome de arquivo .css que contém somente regras de estilo.Você pode vincular uma folha de estilos a uma página da Web usando um elemento link, como mostrado no exemplo de código a seguir.

<link rel="stylesheet" type="text/css" href="myStyles.css" />

Esse elemento link aplica as regras de estilos na folha de estilos externa myStyles.css à página atual.

Regras de estilo listadas na folha de estilos externo são gravadas da mesma forma que eles estão em um style elemento. No entanto, eles não são colocados entre <style> e </style> Rótulos de formatação. O seguinte exemplo mostra o conteúdo completo de um simples arquivo .css.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

Você pode vincular várias páginas HTML a uma folha de estilos externa, o que irá aplicar os estilos consistentemente no site inteiro.Folhas de estilos separam conteúdo e regras de formatação.Isso facilita o gerenciamento de regras de estilo.

Entendendo a Precedência de Regras de Estilo CSS.

Regras de estilo CSS são em "cascatas" no sentido de "seguir uma ordem de precedência".Regras de estilo globais são aplicadas primeiramente à elementos HTML, e regras de estilo locais substituem-nas.Isso significa, por exemplo, que um estilo definido em um bloco style em um página da Web substitui um estilo definido em um folha de estilos externa.Da mesma forma, um estilo interno que é definido em um único elemento HTML na página substitui quaisquer estilos que são definidos para esse mesmo elemento em outro lugar.

Partes de regras de estilo globais não substituídas pelas regras de estilo CSS locais continuam a se aplicar a elementos mesmo depois que forem aplicados os estilos local.No exemplo da seção anterior, o estilos local CSS para o texto do elemento h1 substitui algumas da regras de estilos globais do navegador Web para um texto h1 (centralizar o texto h1 e transformá-lo em azul).No entanto, eles não alteram todos os estilos disponíveis, como as características da fonte.Tanto as regras locais como globais são aplicadas naquela ordem.O resultado é que todos os texto h1 nessa pagina são exibidos em uma fonte maior, que é formatada como centralizada, negrito e azul.

Exemplos de código

Passa a Passo: Criando e Modificando Arquivos CSS

Demonstra Passo a passo: Trabalhando com um arquivo CSS existente

Como: Usar a janela Propriedades CSS

Como: Usar estilos aplicar e gerenciar estilos Windows

Como: Use o estilo Direct aplicativo barra de ferramentas

Voltar ao topo

Referência de Classe

Não há classes que se aplicam as ferramentas CSS.

Voltar ao topo

O que há de novo

Visual Studio 2008 possui agora uma larga experiencia em edição CSS com diversas novas ferramentas para fazer o uso das folhas de estilos em cascata (CSS) mais fáceis do que nunca.Muito do trabalho de criação do layout e conteúdo de estilo pode ser feito no modo Design utilizando a Janela de Propriedades CSS, as Janelas Aplicar Estilos e Gerenciar Estilos, e a ferramenta de Aplicação Direta de Estilo.você também pode alterar a posição, o preenchimento, e as margens no modo Design utilizando as ferramentas visuais de layout WYSIWYG.

Voltar ao topo

Consulte também

Conceitos

Navegação por Marcas no Editor HTML do Visual Web Developer

Formatando elementos no editor de HTML no Visual Web Developer