Noções sobre as folhas de estilos em cascata

As folhas de estilos em cascata (CSS) são um conjunto de regras de formatação que controlam a aparência do conteúdo em uma página da Web. O uso de estilos CSS para formatar uma página separa o conteúdo da apresentação. O conteúdo da página, ou código HTML, reside no arquivo HTML, e 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 a seção de cabeçalho). A separação do conteúdo da apresentação torna mais fácil a manutenção da aparência do site em um local central, pois você não precisa atualizar cada propriedade em cada página sempre que é necessário fazer uma alteração. Isso também torna o código HTML mais simples e limpo, diminuindo o tempo de carregamento do navegador e simplificando a navegação para as pessoas com problemas de acesso (por exemplo, aquelas que usam leitores de tela).

A CSS oferece excelente flexibilidade e controle sobre a aparência exata da página. Com a CSS, você pode controlar várias propriedades de texto, como fontes e tamanhos de fonte específicos; negrito, itálico, sublinhado e sombras de texto; cor de texto e cor de fundo; cor e sublinhado de link; e muito mais. Usando a CSS para controlar as fontes, você também pode garantir um tratamento mais consistente do layout e da aparência da página em vários navegadores.

Além da formatação do texto, você pode usar a CSS para controlar o formato e o posicionamento dos elementos em nível de bloco em uma página da Web. Um elemento em nível de bloco é uma parte independente do conteúdo, geralmente separado por uma nova linha no código HTML e formatado visualmente como um bloco. Por exemplo, as tags h1, p e div produzem elementos em nível de bloco em uma página da Web. Você pode definir as margens e bordas de elementos em nível de bloco, posicioná-los em um local específico, adicionar uma cor de fundo a eles, flutuar texto em volta deles etc. A manipulação dos elementos em nível de bloco é basicamente a maneira como você cria o layout das páginas com a CSS.

Sobre as regras CSS

A regra de formatação CSS consiste em duas partes: o seletor e a declaração (ou, na maioria dos casos, em um bloco de declarações). O seletor é um termo (como p, h1, um nome de classe ou uma ID) que identifica o elemento formatado e o bloco de declarações define o que são as propriedades de estilo. No exemplo a seguir, h1 é o seletor e tudo o que estiver entre chaves ({}) é o bloco de declarações:

Uma declaração individual consiste em duas partes: a propriedade (como font-family) e o valor (como Helvetica). Na regra CSS anterior, um determinado estilo foi criado para as tags h1: o texto de todas as tags h1 vinculadas a esse estilo terá 16 pixels de tamanho, a fonte Helvetica e será negrito.

O estilo (que é proveniente de uma regra ou de um conjunto de regras) reside em um lugar separado do texto real que ele está formatando, geralmente em uma folha de estilos externa ou na parte de cabeçalho de um documento HTML. Desse modo, uma regra para as tags h1 pode se aplicar a várias tags simultaneamente (e, no caso das folhas de estilos externas, a regra pode se aplicar a várias tags simultaneamente em várias páginas diferentes). Assim, a CSS oferece recursos de atualização extremamente fáceis. Quando você atualizar uma regra CSS em um lugar, a formatação de todos os elementos que usam o estilo definido serão automaticamente atualizados para o novo estilo.

Você pode definir os seguintes tipos de estilos no Dreamweaver:

• Os estilos de classe permitem que você aplique as propriedades de estilo a qualquer elemento na página.

• Os estilos de tag HTML redefine a formatação de uma tag específica, como h1. Quando você criar ou alterar um estilo CSS para a tag h1, todo o texto formatado com a tag h1 é imediatamente atualizado.

• Os estilos avançados redefinem a formatação de uma determinada combinação de elementos ou de outras formas de seletor conforme permitido pela CSS (por exemplo, o seletor td h2 se aplica sempre que um cabeçalho h2 aparece em uma célula de tabela.) Os estilos avançados também podem redefinir a formatação das tags que contêm um atributo id específico (por exemplo, os estilos definidos por #myStyle se aplicam a todas as tags que contêm o par atributo/valor id="myStyle").

As regras CSS podem residir nos seguintes locais:

Conjuntos de regras CSS armazenadas em um arquivo CSS (.css) externo separado (e não em um arquivo HTML). Esse arquivo é vinculado a uma ou mais páginas de um site usando um link ou uma regra @import na seção de cabeçalho de um documento.

Conjuntos de regras CSS incluídas em uma tag style na parte de cabeçalho de um documento HTML.

Definidas em ocorrências específicas de tags em um documento HTML. (Não é recomendável o uso de Estilos inline.)

O Dreamweaver reconhece os estilos definidos nos documentos existentes, contanto que eles estejam em conformidade com as diretrizes do estilo CSS. O Dreamweaver também processa a maioria dos estilos aplicados diretamente na Visualização de design. (A visualização do documento em uma janela de navegador, no entanto, proporciona a você o processamento de página “ao vivo” mais preciso.) Alguns estilos CSS são processados de forma diferente no Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou outros navegadores, enquanto outros estilos não são compatíveis com nenhum navegador.

Sobre os estilos em cascata

O termo em cascata se refere à maneira como um navegador exibe os estilos de elementos específicos em uma página da Web. Três fontes diferentes são responsáveis pelos estilos que você vê em uma página da Web: a folha de estilos criada pelo autor da página, as seleções de estilo personalizadas do usuário (se houver alguma) e os estilos padrão do próprio navegador. Os tópicos anteriores descrevem como criar estilos para uma página da Web como o autor da página da Web e da folha de estilos anexada a essa página. Mas os navegadores também têm suas próprias folhas de estilos padrão que regem o processamento das páginas da Web e, além disso, os usuários podem personalizar seus navegadores fazendo seleções que ajustam a exibição das páginas. A aparência final de uma página da Web é o resultado das regras de todas essas fontes juntas (ou “em cascata”) para processar a página da Web de uma maneira ideal.

Uma tag comum, como a tag de parágrafo ou a tag <p>, ilustra o conceito. Por padrão, os navegadores vêm com folhas de estilos que definem a fonte e o tamanho de fonte do texto do parágrafo (ou seja, o texto que aparece entre as tags <p> no código HTML). No Internet Explorer, por exemplo, todo o texto do corpo, incluindo o texto do parágrafo, é exibido na fonte Times New Roman média, por padrão.

Como autor de uma página da Web, no entanto, você pode criar uma folha de estilos que substitua o estilo padrão de fonte de parágrafo e tamanho de fonte do navegador. Por exemplo, você pode criar a seguinte regra na folha de estilos:

Quando um usuário carrega a página, as configurações de fonte de parágrafo e tamanho de fonte definidas por você como autor substituem as configurações padrão de texto de parágrafo do navegador.

Os usuários podem fazer seleções para personalizar a exibição do navegador de uma forma ideal para seu próprio uso. No Internet Explorer, por exemplo, o usuário pode selecionar Exibir > Tamanho do texto > O maior para expandir a fonte da página para um tamanho mais legível, caso ele ache que a fonte está muito pequena. Por fim (pelo menos neste caso), a seleção do usuário substitui os estilos padrão de tamanho de fonte do navegador e os estilos de parágrafo criados pelo autor da página da Web.

A herança é outra parte importante da cascata. As propriedades da maioria dos elementos de uma página da Web são herdadas; por exemplo, as tags de parágrafo herdam determinadas propriedades das tags de corpo, as tags span herdam determinadas propriedades das tags de parágrafo e assim por diante. Desse modo, se você criar a seguinte regra na folha de estilos:

Todo o texto de parágrafo na página da Web (bem como o texto que herda propriedades da tag de parágrafo) será Arial e itálico, pois a tag de parágrafo herda essas propriedades da tag de corpo. Você pode, no entanto, ser mais específico em suas regras e criar estilos que substituam a fórmula padrão para herança. Por exemplo, se você criar as seguintes regras na folha de estilos:

Todo o texto do corpo será Arial e itálico, exceto o texto do parágrafo (e seu texto herdado), que será exibido como Courier normal (não itálico). Tecnicamente, a tag de parágrafo herda primeiro as propriedades definidas para a tag de corpo, mas depois ela as ignora porque tem as suas próprias propriedades. Em outras palavras, enquanto os elementos de página geralmente herdam as propriedades acima, a aplicação direta de uma propriedade a uma tag sempre resulta em uma substituição da fórmula padrão para herança.

A combinação de todos os fatores abordados anteriormente, além de outros fatores como a especificidade CSS (um sistema que atribui pesos diferentes a determinados tipos de regras CSS) e a ordem das regras CSS, acaba criando uma cascata complexa na qual os itens com prioridades mais altas substituem as propriedades com prioridades mais baixas. Para obter mais informações sobre as regras que regem a cascata, a herança e a especificidade, acesse www.w3.org/TR/CSS2/cascade.html.

Sobre formatação de texto e CSS

Por padrão, o Dreamweaver usa as Folhas de estilo em cascata (CSS) para formatar texto. Os estilos que você aplica ao texto usando o Inspetor de propriedades ou os comandos de menu criam regras CSS que estão incorporadas no cabeçalho do documento atual.

Também é possível usar o CSS Designer para criar e editar propriedades e regras CSS. O CSS Designer é um editor muito mais robusto do que o Inspetor de propriedades e exibe todas as regras CSS definidas para o documento atual, quer essas regras estejam incorporadas no cabeçalho do documento ou em uma folha de estilos externa. A Adobe recomenda que você use o CSS Designer (em vez do Inspetor de propriedades) como a ferramenta principal para a criação e edição de CSS. Como resultado, o código será mais limpo e fácil de manter.

Para obter informações sobre o CSS Designer, consulte Aplicar layout às páginas usando o CSS Designer.

Além dos estilos e folhas de estilos criados, você também pode usar as folhas de estilos fornecidas junto com o Dreamweaver para aplicar estilos aos documentos.

Para obter um tutorial sobre a formatação de texto com CSS, consulte www.adobe.com/go/vid0153_br.

Sobre as Propriedades CSS abreviadas

A especificação CSS permite a criação de estilos através de uma sintaxe abreviada conhecida como CSS abreviada. A CSS abreviada permite que você especifique os valores de várias propriedades usando uma única declaração. Por exemplo, a propriedade font permite que você defina as propriedades font-style, font-variant, font-weight, font-size, line-height e font-family em uma única linha.

Um ponto-chave a ser observado quando se usa a CSS abreviada é que os valores omitidos em uma propriedade CSS abreviada são definidos para seus valores padrão. Isso pode fazer com que as páginas sejam exibidas incorretamente quando duas ou mais regras CSS são atribuídas à mesma tag.

Por exemplo, a regra h1 mostrada a seguir usa a sintaxe CSS longa. Observe que as propriedades font-variant, font-stretch, font-size-adjust e font-style foram definidas para seus valores padrão.

Reescrita como uma única propriedade abreviada, a mesma regra poderá ter a seguinte aparência:

Quando a propriedade é escrita através da notação abreviada, os valores omitidos são definidos automaticamente para seus valores padrão. Desse modo, o exemplo abreviado anterior omite as tags font-variant, font-style, font-stretch e font-size-adjust.

Se você tiver estilos definidos em mais de um local (por exemplo, incorporado em uma página HTML e importado de uma folha de estilos externa) nos formatos abreviado e longo, saiba que as propriedades omitidas em uma regra abreviada podem substituir (ou cascata) as propriedades que estão explicitamente definidas em outra regra.

Por esse motivo, o Dreamweaver usa o formato longo da notação CSS, por padrão. Isso impede os possíveis problemas ocasionados pela substituição de uma regra abreviada por uma longa. Se você abrir uma página da Web codificada com a notação CSS abreviada no Dreamweaver, saiba que o Dreamweaver criará novas regras CSS usando o formato longo. Você pode especificar como o Dreamweaver criará e editará as regras CSS alterando as preferências de edição CSS na categoria Estilos CSS da caixa de diálogo Preferências (Editar > Preferências no Windows; Dreamweaver > Preferências no Macintosh).

Dreamweaver e CSS

No Dreamweaver, você pode trabalhar com CSS de várias maneiras:

• Você pode usar o CSS Designer para criar seu CSS com codificação mínima. Para obter mais informações, consulte Aplicar layout às páginas usando o CSS Designer. 
• Você também pode codificar o CSS manualmente. Para obter mais informações sobre os recursos de codificação oferecidos pelo Dreamweaver, consulte Ambiente de codificação no Dreamweaver.
• Se você prefere trabalhar com arquivos Sass, Scss ou Less, pode codificar os arquivos usando a sintaxe de sua preferência e usá-la no Dreamweaver. Para obter mais informações, consulte Pré-processadores de CSS.