HTML e CSS 04: Painéis CSS do Dreamweaver

1. Sintaxe das regras CSS

Se usarmos o Dreamweaver teremos uma enorme facilidade em editar nosso código. Com ele podemos criar tanto CSS internos quanto externos ao arquivo HTML. Daqui para frente daremos preferência ao arquivo de CSS externo, como vimos na aula passada.

Depois de criarmos o arquivo CSS (como fizemos na aula passada), podemos começar a criar as regras CSS. Uma regra CSS envolve a seguintes sintaxe:

seletor {
   propriedade: valor
}
 

Assim, se criei um estilo para texto corrido, e quero que o tamanho da fonte seja 12pt, meu código CSS será:

p{
   font-size: 12pt;
}

 

Lembrando que posso encadear vários pares propriedade:valor para um mesmo seletor:

{
   font-size: 12pt;
   color:#D22B00;
   font-weight: bold;
}

 

Existem ainda as pseudo classes, que se referem a estados de um objeto/seletor. A tag link é um caso clássico.

a {
    color: red;
}
 

O código acima se refere a qualquer link.

a:hover {
    color: green;
}

Já este código acima se refere ao seletor ‘a’ quando o usuário está com o ponteiro do mouse sobre ele. O resultado é este tipo de link. Tente passar o mouse sobre ele.

2. Propriedades CSS: painel type

A opção type mostra as opções ligadas à formatação de texto: família de fonte, tamanho e peso da fonte, côr, estilo, etc.

Lembre-se que a escolha da fonte web não é tão livre quanto quando se usa Flash. O usuário só conseguirá usar as fontes de seu próprio sistema para visualizar sua página. Assim, tente usar uma fonte que seja bastante comum entre seus usuários, preferencialmente as que são distribuídas com os principais sistemas operacionais. Para mais detalhes sobre quais fontes usar, consulte os excelentes artigos de Joe Gillespie e Megan McDermott sobre o assunto.

curso-html-css-painel-type

Na verdade, como você sempre corre o risco do seu usuário não ter a fonte que você determinou, se faz uma escolha em ordem de preferência:

font-family: <ideal>, <alternativa>, <comum>, <generica>

É comum fazer uma lista de fontes preferenciais:

font-family: Verdana, Helvetica, Arial, sans-serif;

No exemplo acima, a fonte preferencial é a Verdana; caso ela não esteja instalada, o navegador procura pela Helvetica, depois pela Arial, e finalmente por qualquer fonte sans-serif.

3. Propriedades CSS: painéis background e block

Nestas opções você pode escolher a côr ou imagem do background, e também como esta imagem vai se repetir (se somente na horizontal, só na vertical ou em ambos os sentidos.

curso-html-css-painel-bg

 

No item block, você tem outras opções ligadas a como os blocos de texto se acomodam na página.

curso-html-css-painel-block