Este artigo explica como usar Cascading Style Sheets (CSS) para formatar texto em uma página no Dreamweaver. Você pode usar CSS para formatar e posicionar o texto de uma forma que o HTML não consegue, proporcionando mais flexibilidade e controle sobre a aparência da sua página.
Noções básicas sobre CSS
Cascading Style Sheets (CSS) são um conjunto de regras de formatação que controlam a aparência do conteúdo em uma página da Web. Quando você usa CSS para formatar uma página, o conteúdo e a apresentação são mantidos separados. O conteúdo da página (código HTML) está em seu próprio arquivo HTML, enquanto as regras CSS que definem a representação do código estão em outro arquivo (uma folha de estilo externa) ou em outra parte do documento HTML (geralmente uma seção). O uso de CSS oferece grande flexibilidade e maior controle sobre a aparência da sua página, desde o posicionamento preciso do layout até fontes e estilos específicos.
CSS permite controlar muitas propriedades que você não pode controlar usando apenas HTML. Por exemplo, você pode especificar diferentes tamanhos e unidades de fonte (pixels, pontos, etc.) para o texto selecionado. Ao usar CSS para definir o tamanho da fonte em pixels, você também pode garantir uma abordagem mais consistente ao layout e aparência da página em vários navegadores.
As regras de formatação CSS consistem em duas partes: seletores e declarações. Seletores são termos que identificam elementos formatados (como P, H1, nome de classe ou ID), enquanto declarações são usadas para definir elementos de estilo. No exemplo a seguir, H1 é o seletor e tudo entre chaves ({}) é uma declaração:
Aqui está o conteúdo citado:
H1 {
font-size:16 pixels;
font-family:Helvetica
}
;
Uma declaração consiste em duas partes: propriedades (como font-family) e valores (como Helvetica). O exemplo acima cria um estilo para a tag H1: o texto de todas as tags H1 vinculadas a este estilo terá 16 pixels de tamanho e usará fonte Helvetica e negrito.
O termo "cascata" refere-se à capacidade de aplicar vários estilos ao mesmo elemento ou página da Web. Por exemplo, você pode criar uma regra CSS para aplicar cores, outra regra para aplicar margens e, em seguida, aplicar ambas ao mesmo texto em uma página. Os estilos definidos "se espalham" pelos elementos da sua página da Web, criando, em última análise, o design desejado.
A principal vantagem do CSS é que ele é fácil de atualizar; desde que uma regra CSS seja atualizada, a formatação de todos os documentos que usam o estilo definido será automaticamente atualizada para o novo estilo.
Os seguintes tipos de regras 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. Todos os estilos de classe começam com um ponto (.). Por exemplo, você pode criar um estilo de classe chamado .red, definir a propriedade de cor da regra como vermelho e, em seguida, aplicar o estilo a uma parte do texto do parágrafo estilizado.
As regras de tags HTML redefinem o formato de tags específicas (como p ou h1). Quando você cria ou altera uma regra CSS para uma tag h1, todo o texto formatado com a tag h1 é atualizado imediatamente.
As regras do seletor CSS (estilos avançados) redefinem a formatação de combinações específicas de elementos ou outras formas de seletor permitidas pelo CSS (por exemplo, aplique o seletor td h2 sempre que um título h2 aparecer em uma célula da tabela). Os estilos avançados também podem redefinir o formato das 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 atributo/valor id="myStyle").
Crie uma nova folha de estilo
Primeiro, você criará uma folha de estilos externa que contém regras CSS que definem estilos de texto de parágrafo. Ao criar estilos em uma folha de estilos externa, você pode controlar a aparência de diversas páginas da Web simultaneamente a partir de um local central, sem precisar definir estilos para cada página da Web individualmente.
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 separado (não um arquivo HTML). O arquivo .css está vinculado a uma ou mais páginas do site usando links na seção principal do documento.
Uma folha de estilo CSS interna (ou incorporada) é uma série de regras CSS contidas na tag de estilo na seção head de um documento HTML. Por exemplo, o exemplo a seguir define o tamanho da fonte para todo o texto em um documento que possui tags de parágrafo definidas:
:<head>
<estilo>
p{
tamanho da fonte: 80px
}
</estilo>
</head>：
Os estilos embutidos são definidos em instâncias de tags específicas no documento HTML. Por exemplo,
"p style="tamanho da fonte: 9px""
Define o tamanho da fonte somente para parágrafos formatados com tags contendo estilos embutidos.
O Dreamweaver renderiza a maioria das propriedades de estilo aplicadas e as exibe 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.
Selecione "Arquivo">"Novo".
Na caixa de diálogo Novo Documento, selecione Página Base na coluna Categoria, selecione CSS na coluna Página Base e clique em Criar.
Uma folha de estilos em branco aparecerá na janela do documento. Os botões Visualização de design e Visualização de código foram desativados. As folhas de estilo CSS são arquivos de texto simples e seu conteúdo não será usado para visualização em um navegador.
Salve ("Arquivo">"Salvar") esta página como cafe_townsend.css.
Ao salvar sua folha de estilo, salve-a na pasta cafe_townsend (a pasta raiz do seu site).
Digite o seguinte código na folha de estilo:
p{
família de fontes: Verdana, sem serifa;
tamanho da fonte: 11px;
cor: #000000;
altura da linha: 18px;
preenchimento: 3px;
}
À medida que você digita o código, o Dreamweaver usa dicas de código para sugerir opções que ajudarão você a concluir sua entrada. Ao ver o código que deseja que o Dreamweaver conclua para você, pressione Enter (Windows) ou Return (Macintosh).
Não se esqueça de adicionar um ponto e vírgula após o valor do atributo no final de cada linha.
O código concluído será semelhante ao exemplo a seguir:
Para exibir o guia, escolha Ajuda > Referências e escolha Referência CSS O'Reilly no menu pop-up do painel Referências. Salve a folha de estilo.
Folha de estilo anexada
Quando você anexa uma folha de estilos a uma página da Web, as regras definidas na folha de estilos são aplicadas aos elementos correspondentes na página. Por exemplo, quando você anexa a folha de estilo cafe_townsend.css à página index.html, todo o texto do parágrafo (texto formatado com tags no código HTML) é formatado de acordo com as regras CSS que você define.
Na janela Documentos, abra o arquivo index.html do Cafe Townsend. (Se o arquivo já estiver aberto, clique na guia.)
Selecione o primeiro texto colado na página em Tutorial: Adicionar conteúdo à página.
Procure no inspetor de propriedades e certifique-se de que o parágrafo esteja formatado usando tags de parágrafo.
Se o menu pop-up Formatar no inspetor de propriedades indicar Parágrafo, o parágrafo foi formatado usando a tag de parágrafo. Se o menu pop-up Formatar no Inspetor de propriedades disser Nenhum ou algo mais, selecione Parágrafo para formatar o parágrafo.
Repita a etapa 3 para o segundo parágrafo.
No painel Estilos CSS (Janela > Estilos CSS), clique no botão Anexar folha de estilos no canto inferior direito do painel.
Na caixa de diálogo Anexar folha de estilo externa, clique em Procurar e navegue até o arquivo cafe_townsend.css criado na seção anterior.
Clique em OK.
O texto na janela do documento será formatado de acordo com as regras CSS na folha de estilos externa.
Explore o painel Estilos CSS
O painel Estilos CSS permite rastrear regras e propriedades CSS que afetam o elemento da página atualmente selecionado ou afetar todo o documento e modificar as propriedades CSS sem abrir uma folha de estilos externa.
Certifique-se de que a página index.html esteja aberta na janela do documento.
No painel Estilos CSS (Janela > Estilos CSS), clique em Todos na parte superior do painel e verifique suas regras CSS.
No modo “Todos”, o painel CSS mostra todas as regras CSS que se aplicam ao documento atual, estejam elas em uma folha de estilos externa ou no próprio documento. Você deverá ver duas categorias principais no painel Todas as regras: uma categoria de tags e uma categoria cafe_townsend.css.
Se a categoria do rótulo não estiver expandida, clique no sinal de mais (+) para expandir a categoria.
Clique na regra do corpo.
A propriedade background-color com valor #000000 aparece no painel inferior Propriedades.
Observe que pode ser necessário recolher outros painéis, como o painel Arquivo, para ver o painel Estilos CSS completo, e você também pode alterar o comprimento do painel Estilos CSS arrastando a borda entre os painéis.
Você define a cor de fundo da página em Tutorial: Criando um layout de página baseado em tabela usando a caixa de diálogo Modificar propriedades da página. Ao definir as propriedades da página dessa forma, o Dreamweaver grava um estilo CSS que é incorporado ao documento.
Clique no sinal de mais (+) para expandir a categoria cafe_townsend.css.
Clique em pRule.
Todas as propriedades e valores definidos na folha de estilo externa para a regra p aparecerão no painel Propriedades abaixo.
Na janela do documento, clique uma vez em qualquer lugar dos dois parágrafos que você acabou de formatar.
No painel Estilos CSS, clique em Atual na parte superior do painel e inspecione seus estilos CSS. No modo Atual, o painel CSS mostra um resumo das propriedades da seleção atual. As propriedades mostradas correspondem às propriedades da regra p na folha de estilo externa.
Na próxima seção, você usará o painel Estilos CSS para criar uma nova regra. Criar novas regras usando o painel Estilos CSS é muito mais fácil do que digitar as regras manualmente, assim como quando você criou originalmente uma folha de estilos externa.
Crie novas regras CSS
Nesta seção, você usa o painel Estilos CSS para criar uma regra CSS ou estilo de classe personalizado. Os estilos de classe permitem definir as propriedades de estilo de qualquer intervalo ou bloco de texto e podem ser aplicados a qualquer tag HTML. Para obter mais informações sobre os diferentes tipos de regras CSS, consulte Noções básicas sobre CSS.
No painel Estilos CSS, clique em Nova regra CSS no canto inferior direito do painel.
Na caixa de diálogo Nova regra CSS, selecione Classe na opção Tipo de seletor. Esta opção deve ser selecionada por padrão.
Digite .bold na caixa de texto Nome.
Certifique-se de digitar um ponto final (.) antes da palavra "negrito". Todos os estilos de aula devem começar com um ponto final.
No menu pop-up "Definir em", selecione cafe_townsend.css. Este arquivo deve ser selecionado por padrão.
Clique em OK.
A caixa de diálogo Definição de regras CSS aparece, indicando que você está criando um estilo de classe chamado .bold no arquivo cafe_townsend.css.
Na caixa de diálogo "Definição de regra CSS", faça o seguinte:
Na caixa de texto "Fonte", insira Verdana, sans-serif.
Na caixa de texto Tamanho, insira 11 e selecione Pixels no menu pop-up imediatamente à direita.
Na caixa de texto Row Height, insira 18 e selecione Pixels no menu pop-up imediatamente à direita.
Escolha Negrito no menu pop-up Peso.
Na caixa de texto Cor, insira #990000.
Dica Para obter mais informações sobre propriedades CSS, consulte o Guia de referência O'Reilly incluído no Dreamweaver. Para exibir o guia, escolha Ajuda > Referências e escolha Referência CSS O'Reilly no menu pop-up do painel Referências.
Clique em OK.
Clique no botão Todos na parte superior do painel Estilos CSS.
Se a categoria cafe_townsend.css não estiver expandida, clique no botão de adição (+) próximo à categoria.
Você pode ver que o Dreamweaver adicionou o estilo de classe .bold à lista de regras definidas na folha de estilos externa. Se você clicar em uma regra .bold no painel Todas as regras, as propriedades da regra aparecerão no painel Propriedades. As novas regras também aparecem no menu pop-up Estilo do inspetor de propriedades.
Aplicar estilo de classe ao texto
Agora você criou uma regra de classe e a aplicou a algum texto de parágrafo.
Na janela do documento, selecione as primeiras quatro palavras do texto no primeiro parágrafo: Chef visionário do Café Townsend.
No inspetor de propriedades (Janela > Propriedades), escolha negrito no menu pop-up Estilo.
Um estilo "negrito" será aplicado ao seu texto.
Repita a etapa 2 para aplicar o estilo “negrito” às primeiras quatro palavras do segundo parágrafo.
Salve a página.
Formate o texto da barra de navegação
A seguir, você usará CSS para aplicar estilos ao texto do link da barra de navegação. Muitas páginas da Web usam imagens retangulares coloridas com texto incorporado para criar barras de navegação. No entanto, se você usa CSS, tudo que você precisa definir é o texto do link e alguma formatação. Usando a propriedade display: block e definindo a largura do bloco, você pode criar efetivamente um retângulo sem usar uma imagem adicional.
Crie uma nova regra para navegação
Abra o arquivo cafe_townsend.css se ainda não estiver aberto ou clique em sua guia para exibir o arquivo.
Defina uma nova regra digitando o seguinte código após o estilo de classe .bold no arquivo:
.navigation {
}
Esta é uma regra vazia.
O código no arquivo deve ser semelhante ao exemplo a seguir:
Salve o arquivo cafe_townsend.css.
A seguir, você usará o painel Estilos CSS para adicionar propriedades à regra.
Se o arquivo index.html não estiver aberto, abra o arquivo.
No painel Estilos CSS, certifique-se de que o modo Todos esteja selecionado, selecione a nova regra .navigation e clique em Editar estilos no canto inferior direito do painel.
Na caixa de diálogo "Definição de regra CSS", faça o seguinte:
Na caixa de texto "Fonte", insira Verdana, sans-serif.
Selecione 16 no menu pop-up Tamanho e selecione Pixels no menu pop-up imediatamente à direita dele.
Selecione Normal no menu pop-up Estilo.
Selecione Nenhum na lista Modificação.
Escolha Negrito no menu pop-up Peso.
Na caixa de texto Cor, insira #FFFFFF.
Para exibir o guia, escolha Ajuda > Referências e escolha Referência CSS O'Reilly no menu pop-up do painel Referências.
Clique em OK.
Agora você usará o painel Estilos CSS para adicionar mais propriedades à regra .navigation.
No painel Estilos CSS, certifique-se de que a regra .navigation esteja selecionada e clique em Mostrar visualização de lista.
A visualização de lista faz com que o painel Propriedades exiba todas as propriedades disponíveis em ordem alfabética (diferentemente da visualização Definir Propriedades, que exibe apenas as propriedades que foram definidas).
Clique na coluna à direita da propriedade background-color.
Para ver o conteúdo completo de uma propriedade, coloque o ponteiro do mouse sobre a propriedade.
Insira o valor hexadecimal #993300 e pressione Enter (Windows) ou Return (Macintosh).
Dica Para ver o impacto do seu trabalho em uma folha de estilo externa, mantenha o arquivo cafe_townsend.css aberto na janela do documento enquanto você trabalha. Ao fazer seleções no painel Estilos CSS, você também verá o Dreamweaver escrever código CSS na folha de estilos.
Encontre a propriedade de exibição (talvez seja necessário rolar para baixo), clique uma vez na coluna da direita e selecione bloquear no menu pop-up.
Encontre a propriedade de preenchimento, clique uma vez na coluna da direita, insira um valor de 8px e pressione Enter (Windows) ou Return (Macintosh).
Encontre a propriedade de largura, clique uma vez na coluna da direita, digite 140 na primeira caixa de texto, selecione Pixels no menu pop-up e pressione Enter (Windows) ou Return (Macintosh).
Clique em Mostrar propriedades das configurações para exibir apenas as propriedades definidas no painel Propriedades.
Clique no arquivo cafe_townsend.css para exibi-lo. Você verá que o Dreamweaver adicionou todas as propriedades especificadas ao arquivo.
Salve e feche o arquivo cafe_townsend.css.
Agora você criou uma regra que formata o texto da barra de navegação. A seguir, você aplicará a regra aos links selecionados.
Aplicar regras
Com a página index.html aberta na janela do documento, clique na palavra Cuisine para colocar o ponto de inserção em algum lugar da palavra.
No seletor de rótulos, clique no rótulo mais à direita.
Esta operação selecionará todo o texto do rótulo ou link especificado.
No inspetor de propriedades (Janela > Propriedades), selecione Navegação no menu pop-up Estilo.
Na janela do documento, a aparência do texto Cuisine mudou completamente. O texto agora está formatado como um botão da barra de navegação com base nas propriedades definidas para a regra .navigation na seção anterior.
Repita as etapas 1 a 3 para cada link na barra de navegação.
Você deve atribuir um estilo de classe de navegação a cada rótulo ou link, por isso é importante selecionar cada link individualmente usando o seletor de rótulo e depois atribuir um estilo de classe a cada link, um por um.
Se você tiver problemas para formatar o texto do link, certifique-se de que haja espaços (não retornos de carro) entre cada (ou grupo de) palavras vinculadas. Certifique-se também de que o espaço entre os dois links não esteja vinculado. Se os espaços estiverem vinculados, selecione-os cuidadosamente, desmarque a caixa de texto Link no Inspetor de propriedades e pressione Enter (Windows) ou Return (Macintosh).
Quando terminar de formatar todas as palavras na barra de navegação, salve a página e visualize seu trabalho em um navegador (Arquivo > Visualizar no navegador).
Você pode clicar no link para ter certeza de que funciona.
Adicionar efeito de passagem do mouse
Agora você adicionará um efeito de sobreposição que fará com que a cor de fundo da barra de navegação mude cada vez que o ponteiro do mouse passar sobre um link. Para adicionar um efeito de mouseover, adicione uma nova regra contendo a pseudoclasse :hover.
Sobre... Sobre:hover Pseudo-classes Pseudo-classes são uma forma de afetar certos elementos em um documento HTML, não com base no código HTML do documento em si, mas com base em outras condições externas aplicadas pelo navegador da Web. As pseudoclasses podem ser dinâmicas, o que significa que à medida que o usuário interage com o documento, os elementos da página podem ganhar ou perder pseudoclasses.
A pseudoclasse :hover afeta alterações em um elemento de página formatado quando o usuário passa o ponteiro do mouse sobre o elemento. Por exemplo, quando você adiciona a pseudoclasse :hover a um estilo de classe .navigation (.navigation:hover) para criar uma nova regra, todos os elementos de texto formatados com a regra .navigation serão alterados com base nas propriedades de .navigation: regra de foco.
Abra o arquivo cafe_townsend.css.
Selecione toda a regra .navigation.
Copie o texto ("Editar">"Copiar").
Clique uma vez no final da regra e pressione Enter (Windows) ou Return (Macintosh) mais algumas vezes para criar espaço.
Cole ("Editar" > "Colar") o texto copiado no espaço que você acabou de criar.
Adicione a pseudoclasse :hover ao seletor .navigation colado da seguinte maneira:
Na nova regra .navigation:hover, substitua a cor de fundo atual (#993300) por #D03D03.
Salve e feche o arquivo.
Abra o arquivo index.html na janela do documento e visualize a página em um navegador (Arquivo > Visualizar no navegador).
Ao posicionar o ponteiro do mouse sobre qualquer link, você poderá ver o novo efeito de passagem do mouse.