Quinta aula: Introdução a Css

Autor: Prof. Luis Eduardo | Data: 6 novembro 2007 | Por favor, Deixe seu Comentário!

Sejam bem vindos, esta é a quinta aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java - CPWJ

Na última aula estudamos a última parte de xHTML. Hoje vamos ver como podemos mudar o comportamento padrão dos tags xHtml, mudando a aparência das páginas.

Css é a segunda parte do curso. Significa Cascate Style Sheet, ou folhas de estilo em cascata. O objetivo é mudar a aparência padrão dos tags xHtml.

Para usar Css e manter a validação da página xHtml temos duas opções: usamos o tag ’style’ no cabeçalho do xhtml, ou incluímos um arquivo *.css no cabeçalho.

Usando o tag Style

<style type=”text/css” title=”mystyles” media=”all”>
<!–

aqui colocar qualquer código css.

–>
</style>

Usando o tag ‘link’ para inclusão de página Css

Neste caso todo o código Css será digitado em um arquivo separado e na página xHtml colocaremos uma referência no ‘Head’ assim:

<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” />

Não é preciso argumentar muito que a segunda opção é a melhor escolha não é? Só tome cuidado com o cache do navegador. Quando estiver estudando CSS, desative o cache para evitar mudar CSS que está correto, porque o navegador poderá estar mostrando código antigo.

Pronto, agora já dá para começar a codificar, você já sabe onde colocar o código.Vamos ver como modificar a aparência do texto de uma página.
Para isso é necessário definir duas coisas: “O que” e “como”. Isso é, qual parte da página desejamos modificar a aparência e como será a modificação que desejamos.

A sintaxe de uma regra é a seguinte:

oque { como: assim; }
seletor { parâmetro: valor;}

No exemplo vamos modificar todos os textos da página, para usar uma fonte vermelha:

body { color: red; }

Body indica todo o documento. Color é o parâmetro de cor da fonte e Red é vermelho!

Este código deverá estar no arquivo estilo.css no mesmo diretório da página xhtml em que você incluiu o código link acima.

É possível mudar praticamente qualquer aparência. Por exemplo para a cor de fundo usa-se background-color:

body{
color: red;
background-color: green;
}

Aproveitei para mostrar que é possível mudar mais de um parâmetro de cada vês.

Mas nem sempre queremos todo o texto da página da mesma cor, quase sempre não. Então podemos aplicar mudanças para cada tag xHtml individualmente:

h1 { color: blue;}
h2, h3, h4, h5, h6 {color: gray; }

O segundo exemplo mostra que é possível aplicar a mesma modificação a vários seletores simultaneamente. Aqui indicamos que a fonte dos títulos H1 são azuis e dos outros títulos cinza. Observe que podemos fazer simultaneamente:

body { color: red; }
h1 { color: blue;}

Veja que aqui temos todos os textos em vermelho e os títulos em azul. O nome “Cascata” foi escolhido exatamente por esta característica: a cor azul do título ‘h1′ irá sobrepor a cor vermelha do ‘body’. Sempre a opção mais específica sobrepõe a mais genérica. Esta sobreposição permite escrever estilos mais ou menos específicos conforme a necessidade. O navegador irá resolver a sobreposição em cascata de forma previsível, ganhando sempre a característica aplicada ao indicador mais específico. Tocaremos neste assunto novamente em uma próxima aula.

Bom, esta aula foi bem curta devido ao feriado, o objetivo foi apenas mostrar rapidamente o que é o Css e para que serve, e como aplicar código Css em uma página xHtml padrão sem perder a validação.

Exercícios

Acerte a página da aula anterior, com cores de fonte e fundo diferentes. Esqueça o bom gosto e teste várias cores. Valide no w3c. Valide também a página Css em http://jigsaw.w3.org/css-validator/#validate-by-upload.

Aprofundando

O conteúdo da aula é uma introdução bem rápida e básica. Alunos que queiram saber tudo sobre Css uma referência obrigatória é o site do Maujor: http://www.maujor.com.