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…
Professor, mas como desativo o cache? pois não consegui fazer essa aula, não consegui fazer com que o site da aula anterior que é um exercício para ser validade pelo w3c pegue os dados do .css criado nesta aula.
Att.
Gerson
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.
olá , professor tudo bom eu posso salvar meu arquivo css dentro da mesma pasta html mais dentro do e fazer referencia onde ta meu arquivo com um link para nao ficar junto com o codigo html.
Prof. Não entendi tambem tentei adicionar aquele comando “body” no deafult.aspx mais nao esta dando certo, esta aparecendo no cabelho da pagina testeweb1 aquela linha de comando que adicionei”body{color: red;background-color: green;}”, o que estou fazendo errado, precisa ter outro programa para criar este .CSS, ou onde consigo criar este arquivo?
Obrigado
Olá professor, primeiramente parabéns pela pela iniciativa, até o momento tenho acompanhado suas aulas e acredito que será de grande valia para todos.
Pelo que entendi, para adicionar um CSS através da forma de arquivo, é necessário criar um arquivo.css por exemplo: estilos.css, e dentro deste arquivo eu coloco o codigo CSS, por exemplo: body{color: grey; background-color: black;} e salvo na mesma pasta?
Pode ser ignorancia minha, más qual a vantagem de se colocar CSS da forma de aquivo do que direto no cabeçalho?
Muito bem Samuel, obrigado. A vantagem de se colocar o CSS em um arquivo separado, é que é possível usar o mesmo arquivo Css para várias páginas no site. Sem repetir o código e correr o risco de procurar código em vários arquivos se se mudar de idéia.
Resolvido o meu problema com o cache, era as aspas, pois copiei de acordo com essa aula, e no código ficou aspas, mas diferente, quando fui validar o xhtml (não o css) ele apontou as aspas, quando abri o código vi que era diferente das aspas usadas, então troquei as mesmas, salvei, testei e funcionou, desde já, muito obrigado.
Boa Noite eu queria uma ajuda do Prof. Luis Eduardo, eu não sou seu aluno, mas eu vi que você da aula de jsp, servlet e CSS, e gostaria de saber se o sr. poderia me ajudar se possivel entre em contato comigo meu e-mail saraiva.zimba@gmail.com agradeço desde já
rofessor, para meu css dar certo, tive que tirar a / do tag:
ficou assim:
assim ele leu meu .css sem problemas.também acrescentei os tags:
agora atualiza beleza.
Professor, para meu css dar certo, tive que tirar a / do tag:
<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” />
ficou assim:
<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” >
assim ele leu meu .css sem problemas.também acrescentei os tags:
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache<
<META HTTP-EQUIV=”Expires” CONTENT=”-1″<
agora atualiza beleza.
Ps: Desculpe os anteriores mas os tags não apareceram.Perdoe a inesperiencia mas é vivendo e aprendendo.
Professor, para meu css dar certo, tive que tirar a / do tag:
<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” />
ficou assim:
<link href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all” >
assim ele leu meu .css sem problemas.também acrescentei os tags:
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache>
<META HTTP-EQUIV=”Expires” CONTENT=”-1″>
agora atualiza beleza.
Ps: Desculpe os anteriores mas os tags não apareceramou ficarm erradas.Perdoe a inexperiência mas é vivendo e aprendendo.
Interessante lembrar que, para adaptar um site para ser visualizado em um dispositivo movel, em geral basta modificar o .css. Essa eh uma das grandes vantagens de se usar esse estilo.
Professor,coloquei o meu código na parte do head assim,mas não deu certo,informe onde está o erro.
Daniel
Como?
O código não é publicado aqui. Tire os símbolos Maior e Menor para que fique visível.
Quero parabeniza-lo pelo site que é muito informativo, apesar de as vezes encontrar dificuldade em validar os meus exercícios eu descobri que a persisitência e a atenção são a chave do sucesso. Tenho o curso de web alguns códigos aqui são conhecidos por mim, mas a abordagem da matéria é muito rica e interessante, novamente parabéns Professor Luís Eduardo.
Parabéns.. é difícil encontrar conteúdo de boa qualidade e contínuos como esse na net!
boa noite.
não consigo trocar as cores das letras..não entendi como criar o arquivo e como colocar o codigo de fonte..
alguem pode me auxiliar.
obrigado.
Aula concluída e validada.