| |
Os
estilos CSS são mais abrandentes que os estilos HTML. É
uma tecnologia que não faz parte do HTML padrão, é
um conjunto de tags que ajudam a controlar a aparência e a
formatação de textos.
Criando um Estilo CSS personalizado
Vamos criar um estilo que formate o texto/conteúdo
das páginas (tipo e tamanho da fonte e texto justificado).
Esse estilo será aplicado ao texto da página produtos.html
- Crie
uma pasta chamada css dentro da pasta bioderm
(Com o painel Arquivos aberto, clique com o botão direito
do mouse sobre a pasta Site-BIODERM e no menu
que se abre selecione Nova pasta e nomeie a
pasta como css
- Abra
a paleta Design que fica do lado direito da
tela e escolha a guia Estilos CSS
- Na
guia Estilos CSS clique no ícone Novo
estilo CSS (folhinha com sinal de +)
- Na
caixa de diálogo que é exibida, dê um nome
ao estilo que será criado, por exemplo corpo
- No
campo Tipo: selecione Criar estilo
personalizado (classe)
- No
campo Definir em: selecione (Novo arquivo
de folha de estilos) e clique em OK
- Na
caixa de diálogo que é exibida, no
campo Salvar selecione a pasta css
e no campo Nome do arquivo: digite
estilos.css (esse será o arquivo que
vai armazenar os estilos). Em seguida clique no botão
Salvar
- Será
exibido o painel de estilos para que você defina as propriedades
do estilo:
Na categoria Tipo defina fonte = verdana, tamanho
= 12 pixels, estilo = normal, cor = preto (#000000)
Na
categoria Bloco defina alinhamento do texto
= justificar
Clique em OK.
Será criado o arquivo estilos.css na pasta
bioderm/css, contendo o estilo corpo.
Podemos inserir outros estilos dentro desse arquivo, como por exemplo
um estilo que personalize os links, fazendo com que o link só
fique sublinhado no momento em que o cursor estiver sobre ele. Para
isso, edite o arquivo estilos.css e insira o seguinte estilo (logo
depois do estilo corpo):
a.linkdestaq:link
{ color: black; font-size: 7.5pt; font-family: Verdana, Arial, sans-serif;
text-decoration: none }
a.linkdestaq:active { color: black; font-size: 7.5pt; font-family:
verdana, arial, sans-serif; text-decoration: none }
a.linkdestaq:visited { color: black; font-size: 7.5pt; font-family:
verdana, arial, sans-serif; text-decoration: none }
a.linkdestaq:hover { color: black; font-size: 7.5pt; font-family:
verdana, arial, sans-serif; text-decoration: underline }
Salve
o arquivo.
Os estilos
criados, corpo e linkdestaq, devem
aparecer no painel Design/Estilos HTML. Aplique os estilos na página
produtos.html:
- Selecione
o texto da descrição que fica antes da tabela
dos produtos e aplique nele o estilo corpo.
- Selecione
a palavra/link "aqui" e aplique nela o estilo
linkdestaq
- Aplique
também o estilo corpo nos textos que
estão dentro da tabela de produtos
- Tecle
F12 para visualizar a página no navegador. Na descrição
a fonte será alterada e o texto ficará justificado,
quanto ao link "aqui", só ficará sublinhado
quando o cursor estiver sobre ele.
salve novamente a página.
Quando um estilo CSS é aplicado, o Dreamweaver cria uma linha
de código dentro da tag head, que sinaliza
o arquivo de estilos que está sendo utilizado. De acordo
com o exemplo abaixo, baseado na estrutura do site Bioderm, para
acessar o arquivo estilos.css a partir de uma página do site,
deve-se subir um nível na estrutura de pastas e então
acessar a pasta css:
<head>
<title></title>
<meta>
<link href="../css/estilos.css" rel="stylesheet"
type="text/css">
</head>
A
seguir podemos ver como ficou o código html ao receber um
estilo CSS:
<p
class="corpo"> Para saber mais clique <a href="index.html"
class="linkdestaq">aqui</a></p>
O texto
"Para saber mais clique aqui" recebeu o estilo corpo
e a palavra "aqui", que é um link, recebeu
também o estilo linkdestaq.
Como carregar os estilos para uma nova página
- Abra
a paleta Design e escolha a guia Estilos
CSS
- Na
guia Estilos CSS clique no ícone Anexar
a folha de estilos (o 1º ícone com uma
corrente)
- Em
seguida selecione o arquivo de estilos desejado
|
