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.
Ninguem posta mais =/
Parece que muitos desiste fácil .. =/
vamo lah pessoal …. =D
Kiko, dá uma olhada na aula número 9. Lá fiz uma chamada.
nao intendi o negocio do arquivo(o que vai nesse arquivo) e da chamada… no meu nao deu certo… valew abraços
O que é código css? E arquivo css?
Tadeu,
Código CSS é o código que indica a aparência que um documento html terá. As aulas seguintes a esta eu vou mostrar muito código Css e espero que você compreenda melhor. Quanto ao arquivo Css, é um arquivo separado do documento html para armazenar códigos Css. Dúvidas pergunte de novo.
Bom ja estou nessa aula…
Eu entendi q podemos criar o estilo da pagina dentro do codigo da pagina, ou criar um arquivo .css q servirá como padrão para todas as páginas, basta apenas q nós indiquemos esse arquivo no cabeçalho da página, estou certo prof.?
Agora ref ao cache nao entendi bem… rs (putz o mais simples… rs) Isso q o sr. se referia era aquela parada dos arquivos temporarios de internet q atualiza a cada visita na página?
Fico no aguardo.
Abraço.
Por aí, Cristian. Os navegadores em um processo que armazena as páginas (inclusive css) que acabam de buscar dos servidores em um local chamado cache. Se o usuário pede de novo a mesma página e o navegador percebe que a página não mudou, ele pode não fazer o pedido completo do site e usar a página do cache.
Isso pode dar problemas se você está testando uma página localmente. Mesmo você mudando um código na página local, o navegador pode continuar mostrando um erro, porque está mostrando o arquivo do cache.
para evitar esse problema o q eu devo fazer… se eu só limpar a pasta “Temporary Internet Files” resolve?
Desativar o cache em Opções de Internet…
karo amigo. ja tentei de tudo e nada…este codigó simples, da para tu mostrar onde entra a linha q vai buscar o arquivo.css e tipo fazer a fonte ficar verlha… OBRIGADO.
MEU TESTE
Bome’s Mouse Keyboard – Um sequenciador midi virtual,
que faz do teclado do pc um controlador midi. não procurei muito,
já fiquei satisfeito com ele.
tem umas 5 oitavas, pitch wheel, modulation wheel e inúmeros knobs programáveis
karo amigo. ja tentei de tudo e nada…este codigó simples, da para tu mostrar onde entra a linha q vai buscar o arquivo.css e tipo fazer a fonte ficar verlha… OBRIGADO.
!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
head>
title>MEU TESTE
meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
/head>
body>
p>Bome’s Mouse Keyboard – Um sequenciador midi virtual,
que faz do teclado do pc um controlador midi. não procurei muito,
já fiquei satisfeito com ele.
tem umas 5 oitavas, pitch wheel, modulation wheel e inúmeros knobs programáveis
/body>
/html>
Coloque:
<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” />
logo antes de
</head>
Prof. Luís Eduardo, primeiramente gostaria de parabenizá-lo pelo trabalho, e agradecer pelas aulas apresentadas, estou aprendendo muito no Tecnoclasta.
Assim como o Álvaro, também não consegui alterar a página utilizando a referência:
Então dei uma pesquisada e encontrei uma um pouco diferente que funcionou:
Poderia me explicar a diferença entre as duas referências?
Obrigado
olá ,
professor tentei completar essa aula aee ,
mais não deu certo
pelo jeito estou fazendo tudo qe voçe
ensinou .
mais quando vou abrir minha pagina
fica tudo branco
como se não houvesse nada ;/
me ajude ae , quero mt concluir esse curso !
Professor paramim entender melhor
peguei uma CSS valida de uma amiga
e deu uma olhada e não cosigui entender meu erro ainda rsrs
mais ela me explicou bem
E agora vou para o proximo nivel !
Não entendi bem…isso ai é pra fazer no txt e salvar como html ainda? XD ou não tenho que usar outro programa…gente sou muito iniciante.