Noções básicas sobre folhas de estilo em cascata As folhas de estilo em cascata (CSS) são uma série de regras de formatação que controlam a aparência do conteúdo da página da Web. Ao usar CSS para formatar uma página, separe o conteúdo da apresentação. O conteúdo da página (ou seja, o código HTML) reside no próprio arquivo HTML, enquanto as regras CSS que definem a apresentação do código residem em outro arquivo (uma folha de estilos externa) ou em outra parte do documento HTML ( geralmente o cabeçalho do arquivo). O uso de CSS oferece grande flexibilidade e maior controle sobre a aparência exata da sua página, desde o posicionamento preciso do layout até fontes e estilos específicos.
CSS permite controlar muitas propriedades que o HTML sozinho não pode controlar. Por exemplo, você pode especificar diferentes tamanhos e unidades de fonte (pixels, tamanhos de pontos, etc.) para o texto selecionado. Ao usar CSS para definir tamanhos de fonte em pixels, você também garante uma abordagem mais consistente ao layout e aparência da página em vários navegadores.
Além de formatar texto, você pode usar CSS para controlar a formatação e o posicionamento de elementos em nível de bloco em uma página da Web. Por exemplo, você pode definir margens e bordas para elementos em nível de bloco, flutuar texto em torno de outro texto e muito mais.
As regras de formatação CSS consistem em duas partes: seletores e declarações. Um seletor é um termo que identifica um elemento de formato (como P, H1, nome de classe ou ID) e a declaração é usada para definir o estilo do elemento. No exemplo a seguir, H1 é o seletor e tudo entre colchetes ({}) é uma declaração:
H1 {
tamanho da fonte: 16 pixels;
família de fontes:Helvetica;
peso da fonte: negrito
}
Uma declaração consiste em duas partes: propriedades (como font-family) e valores (como Helvetica). A regra CSS acima cria um estilo específico para tags H1: o texto de todas as tags H1 vinculadas a este estilo terá tamanho de 16 pixels, fonte Helvetica e negrito.
O termo cascata refere-se à capacidade de aplicar vários estilos ao mesmo elemento. Por exemplo, você pode criar uma regra CSS para aplicar cores, outra regra CSS para aplicar margens e, em seguida, aplicar ambas ao mesmo texto na página. Os estilos definidos "se espalham" até os elementos da sua página da Web, criando, em última análise, o design desejado.
A principal vantagem do CSS é que ele fornece recursos de atualização convenientes; quando você atualiza uma regra CSS em um só lugar, a formatação de todos os documentos que usam esse estilo definido é automaticamente atualizada para o novo estilo.
Os seguintes tipos de estilo podem ser definidos no Dreamweaver:
Regras CSS personalizadas (também chamadas de estilos de classe) permitem aplicar propriedades de estilo a qualquer intervalo ou bloco de texto. (Consulte Aplicando Estilos de Classe.)
Os estilos de tags HTML redefinem o formato de tags específicas (como h1). Quando você cria ou altera o estilo CSS de uma tag h1, todo o texto formatado com a tag h1 é atualizado imediatamente.
Os estilos de seletor CSS (estilos avançados) redefinem a formatação para combinações específicas de elementos, ou para outras formas de seletor que o CSS permite (por exemplo, aplicar o seletor td h2 sempre que um cabeçalho h2 aparecer dentro de uma célula da tabela). Os estilos avançados também podem redefinir a formatação de tags que contêm um atributo id específico (por exemplo, um estilo definido por #myStyle pode ser aplicado a todas as tags que contêm o par de valores de atributo id="myStyle").
As regras CSS podem estar localizadas nos seguintes locais:
Uma folha de estilo CSS externa é uma série de regras CSS armazenadas em um arquivo CSS externo (.css) separado (não um arquivo HTML). O documento está vinculado a uma ou mais páginas do site usando links na parte do cabeçalho do arquivo do documento.
Uma folha de estilo CSS interna (ou incorporada) é uma série de regras CSS contidas na tag de estilo no cabeçalho de um documento HTML.
Os estilos embutidos são definidos em todo o documento HTML em uma instância específica de uma tag.
O Dreamweaver reconhece estilos definidos em documentos existentes, desde que estejam em conformidade com as diretrizes de estilo CSS.
dica
Para exibir o Guia de referência de CSS da O'Reilly incluído no Dreamweaver, selecione Ajuda > Referência e selecione Referência de CSS da O'Reilly no menu pop-up do painel Referência.
Definir manualmente a formatação HTML substitui a formatação aplicada por meio de CSS. Para que as regras CSS controlem a formatação de parágrafos, toda a formatação HTML definida manualmente deve ser removida.
O Dreamweaver renderiza a maioria das propriedades de estilo aplicadas diretamente na janela do documento. Você também pode visualizar o documento em uma janela do navegador para ver como os estilos são aplicados. Algumas propriedades de estilo CSS aparecem de forma diferente no Microsoft Internet Explorer, Netscape Navigator, Opera e Apple Safari, e algumas não são atualmente suportadas por nenhum navegador.