Use este tópico para saber mais sobre os conceitos básicos de CSS como regras, seletores, herança e muito mais. Além disso, saiba como associar CSS às suas páginas da Web no Dreamweaver.
Sobre Folhas de estilos em cascata
Cascading Style Sheets (CSS) é uma coleção 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 conteúdo de apresentação. O conteúdo da página—o 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 estilo externa) ou em outra parte do documento HTML (geralmente a seção head). A separação do conteúdo da apresentação facilita muito a manutenção da aparência do seu site a partir de um local central, pois não é necessário atualizar cada propriedade em cada página sempre que você quiser fazer uma alteração.A separação do conteúdo da apresentação também resulta em código HTML mais simples e limpo, o que proporciona tempos de carregamento mais rápidos no navegador e simplifica a navegação para pessoas com problemas de acessibilidade (por exemplo, aquelas que usam leitores de tela).
CSS oferece grande flexibilidade e controle sobre a aparência exata da página. Com CSS você pode controlar muitas propriedades de texto incluindo fontes específicas e tamanhos de fonte; negrito, itálico, sublinhado e sombras de texto; cor do texto e cor do fundo; cor do link e sublinhado do link; e muito mais.Ao usar CSS para controlar as fontes, você também pode garantir um tratamento mais consistente do layout e aparência da página em vários navegadores.
Além da formatação de texto, você pode usar CSS para controlar o formato e posicionamento de elementos de nível de bloco em uma página da Web. Um elemento de nível de bloco é uma parte independente de conteúdo, geralmente separada por uma nova linha no HTML, e formatada visualmente como um bloco. Por exemplo, as tags h1, p e div produzem elementos de nível de bloco em uma página da Web.Você pode definir margens e bordas para elementos de nível de bloco, posicioná-los em um local específico, adicionar cor do fundo a eles, flutuar texto ao redor deles, e assim por diante. A manipulação de elementos de nível de bloco é essencialmente a forma como você cria layouts de páginas com CSS.
Sobre as regras CSS
Uma regra de formatação CSS consiste em duas partes—o seletor e a declaração (ou na maioria dos casos, um bloco de declarações). O seletor é um termo (como p, h1, um nome de classe ou um id) que identifica o elemento formatado, e o bloco de declaração define quais são as propriedades de estilo.No exemplo a seguir, h1 é o seletor, e tudo que fica entre as chaves ({}) é o bloco de declaração:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Uma declaração individual consiste em duas partes, a propriedade (como font-family) e valor (como Helvetica). Na regra CSS anterior, um estilo específico foi criado para tags h1: o texto para todas as tags h1 vinculadas a este estilo será de 16 pixels de tamanho, fonte Helvetica e negrito.
O estilo (que vem de uma regra, ou uma coleção de regras) reside em um lugar separado do texto real que está formatando—geralmente em uma folha de estilo externa, ou na seção head de um documento HTML.Assim, uma regra para tags h1 pode ser aplicada a muitas tags ao mesmo tempo (e no caso de folhas de estilo externas, a regra pode ser aplicada a muitas tags ao mesmo tempo em muitas páginas diferentes). Dessa forma, CSS fornece capacidade de atualização extremamente fácil. Quando você atualizar uma regra CSS em um local, a formatação de todos os elementos que usam o estilo definido será atualizada automaticamente para o novo estilo.
Você pode definir os seguintes tipos de estilos no Dreamweaver:
Estilos de classe permitem aplicar propriedades de estilo a qualquer elemento ou elementos na página.
Estilos de tag HTML redefinem a formatação para 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 será atualizado imediatamente.
Estilos avançados redefinem a formatação para uma combinação específica de elementos ou para outras formas de seletor permitidas pelo CSS (por exemplo, o seletor td h2 é aplicado sempre que um título h2 aparece dentro de uma célula de tabela.) Estilos avançados também podem redefinir a formatação para 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:
Folhas de estilos CSS externas
Coleções de regras CSS armazenadas em um arquivo CSS (.css) externo separado (não um arquivo HTML). Este arquivo é vinculado a uma ou mais páginas em um site usando um link ou uma regra @import na seção head de um documento.
Folhas de estilos CSS internas (ou incorporadas)
Coleções de regras CSS incluídas em uma tag style na parte head de um documento HTML.
Estilos inline
Definidos em ocorrências específicas de tags em um documento HTML. (Não é recomendável o uso de Estilos inline.)
Dreamweaver reconhece estilos definidos em documentos existentes, desde que estejam em conformidade com as diretrizes de estilo CSS. Dreamweaver também renderiza a maioria dos estilos aplicados diretamente na visualização Design. (Visualizar o documento em uma janela do navegador, no entanto, oferece a renderização "ao vivo" mais precisa da página.) Alguns estilos CSS são renderizados de forma diferente no Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou outros navegadores, e alguns não são atualmente suportados por nenhum navegador.
Sobre os estilos em cascata
O termo cascata refere-se à forma como um navegador exibe estilos para 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 estilo criada pelo autor da página, as seleções de estilo personalizadas do usuário (se houver) e os estilos padrão do próprio navegador. Os tópicos anteriores descrevem a criação de estilos para uma página da Web do ponto de vista do autor tanto da página da Web quanto da folha de estilo anexada a essa página.Mas os navegadores também têm suas próprias folhas de estilo padrão que determinam a renderização de páginas da Web, e além disso, os usuários podem personalizar seus navegadores fazendo seleções que ajustam a exibição de páginas da Web. A aparência final de uma página da Web é o resultado das regras de todas as três fontes se combinando (ou "em cascata") para renderizar a página da Web de forma otimizada.
Uma tag comum — a tag de parágrafo, ou tag <p> — ilustra o conceito. Por padrão, os navegadores vêm com folhas de estilo que definem a fonte e o tamanho da fonte para texto de parágrafo (ou seja, texto que fica entre as tags <p> no código HTML). No Internet Explorer, por exemplo, todo o corpo de texto, incluindo texto de parágrafo, é exibido em Times New Roman, fonte Medium por padrão.
Como autor de uma página da Web, no entanto, você pode criar uma folha de estilo que substitui o estilo padrão do navegador para fonte de parágrafo e tamanho da fonte. Por exemplo, você pode criar a seguinte regra em sua folha de estilo:
p {
font-family: Arial;
font-size: small;
}
Quando um usuário carrega a página, as configurações de fonte e tamanho da fonte do parágrafo definidas por você como autor substituem as configurações padrão do texto do 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 > Maior para expandir a fonte da página para um tamanho mais legível se achar que a fonte é muito pequena. Por fim (pelo menos neste caso), a seleção do usuário substitui tanto os estilos padrão do navegador para tamanho da fonte do parágrafo quanto 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 em uma página da Web são herdadas—por exemplo, as tags de parágrafo herdam certas propriedades das tags de corpo, as tags span herdam certas propriedades das tags de parágrafo, e assim por diante. Assim, se você criar a seguinte regra em sua folha de estilos:
body {
font-family: Arial;
font-style: italic;
}
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:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Todo o corpo de texto será Arial e em itálico exceto o parágrafo (e seu texto herdado), que será exibido como Courier normal (sem itálico).Tecnicamente, a marca de parágrafo primeiro herda as propriedades que estão definidas para a marca do corpo, mas depois ignora essas propriedades porque tem propriedades próprias definidas. Em outras palavras, embora os elementos de página geralmente herdem propriedades de cima, a aplicação direta de uma propriedade a um tag sempre causar uma substituição da fórmula padrão para herança.
A combinação de todos os fatores discutidos acima, além de outros fatores como especificidade CSS (um sistema que atribui diferentes pesos a tipos específicos de regras CSS) e a ordem das regras CSS, criam uma cascata complexa onde itens com prioridades mais altas substituem propriedades com prioridades mais baixas.Para mais informações sobre as regras que regem a cascata, herança e especificidade, visite 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 mais informações sobre o CSS Designer, consulte Como definir o layout de 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 ver um tutorial sobre formatação de texto com CSS, consulte www.adobe.com/go/vid0153.
Sobre as propriedades CSS abreviadas
A especificação CSS permite a criação de estilos usando uma sintaxe abreviada conhecida como CSS abreviado.O CSS abreviado permite especificar os valores de várias propriedades usando uma única declaração.Por exemplo, a propriedade font permite definir as propriedades font-style, font-variant, font-weight, font-size, line-height e font-family em uma única linha.
Uma questão importante a ser observada ao usar CSS abreviado é que os valores omitidos de uma propriedade CSS abreviada recebem o valor 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 abaixo usa sintaxe CSS extensiva. Observe que as propriedades font-variant, font-stretch, font-size-adjust e font-style receberam os valores padrão.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Reescrita como uma propriedade única abreviada, a mesma regra pode aparecer da seguinte forma:
h1 { font: bold 16pt/18pt Arial }
Quando escrita usando notação abreviada, os valores omitidos são automaticamente atribuídos aos seus valores padrão. Assim, 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, incorporados em uma página HTML e importados de uma folha de estilo externa) usando as formas abreviada e longa da sintaxe CSS, esteja ciente de que propriedades omitidas em uma regra abreviada podem substituir (ou cascade) propriedades que estão explicitamente definidas em outra regra.
Por esse motivo, Dreamweaver usa a forma longa da notação CSS por padrão.Isso evita possíveis problemas causados por uma regra abreviada substituindo uma regra longa. Se você abrir uma página da Web que foi codificada com notação CSS abreviada no Dreamweaver, esteja ciente de que o Dreamweaver criará qualquer nova regra CSS usando a forma longa. Você pode especificar como o Dreamweaver cria e edita 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 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 CSS.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
