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.
Próximas Aulas
- Seletores, blocos e trechos.
- Deixando as Fontes totalmente sobre nosso controle.
Dúvidas? vá para o fórum.
