Curso Subsequente em Manutenção e Suporte em Informática Introdução às Tecnologias Web Cascading Style Sheets Prof. César Rocha - Copyright©2009 cesarocha@ifpb.edu.br 2 Roteiro • Em poucos slides, explorar os fundamentos do padrão Web CSSCSS – sintaxe, seletor, propridades, regras, CSS no XHTML, vantagens, herança e override de propriedades no código CSS, otimizando partes do CSS, declaração de classes, pseudo-classes, usando o validador CSS, etc. • Mostrar vários exemplos de códigos CSS que você deve testar para solidificar seus conhecimentos nesta nova linguagem – Este novo assunto é, como no caso do XHTML, de suma importancia para as próximas disciplinas do curso (Desenvolvimento Web, etc.) • Aconselha-se utilizar uma referência para acompanhar este assunto – Mais sobre qual referência pode ser utilizada adiante… 3 O início da Web… • Boa parte dos documentos publicados na Web eram concebidos utilizando regras oriundas do HTMLHTML (1.0, …, 3.2, 4.01, …) – HTML tinha dupla funçãodupla função: estruturar o conteúdo e aparência (estilizá-lo) – Há, ainda, uma grande variedade de tag’s e atributos para estilização • Hoje, estas tag’s e atributos constituem código legadocódigo legado (deprecado) pelo XHTML • Neste tipo de HTML, mudanças na página eram muito difíceis! – Não havia reusoreuso de estilização para outras páginas – Não havia um consenso no tocante a que os navegadores deviamdeviam dede obedecerobedecer • Veja com seus próprios olhos… 4 O início da Web(cont.) <html> <head> <title>Lojas Maia (ano 1998)</title> </head> <body bgcolor=tan text=black> <p align=center>Venha conhecer nossa <font face=arial>queima</font> de estoque da semana! Temos promoções imperdíveis para você! </p> <p> Veja alguns exemplos: <ul> <li> Liquidificador Arno – R$ 56.99 <li> Aspirador de pó CCE – R$ 156.99 </ul> <p align=right> Traga logo sua família! Não perca tempo. <center><font size=“small”> Ofertas válidas enquanto durar o estoque!</font></center> <p align=center><font size=“small”>Copyright © 1998 – todos os direitos são estritamente reservados.</font> </body> </html> Aqui estão alguns atributos que controlam a aparência. bgcolor define a cor de fundo e o text define a cor do texto existente Tipo da fonte! Você podia escrever algumas tag’s sem fechá-las (e torcia para que todos os browsers entendessem isso… ) Alinhamento Outra forma de alinhar! Alguns atributos requeriam aspas duplas e outros não… Agora o tamanho da fonte! Obs.: também não havia nenhum DOCTYPE associado ao documento… 5 Um padrão de apresentação • O padrão Web CSS 2.CSS 2.1 1 (Cascading Style Sheets) – Na verdade, uma nova linguagem que possibilita a criação de regrasregras de apresentação para apenas uma página ou até um site completo – O CSS precisa da definição da precisa da definição da estruturaestrutura do XHTML para funcionar – Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado um estilo a um (ou mais) elemento(s) XHTML • Um conjunto de regras CSS forma uma ffolha de olha de eestilosstilos – Estas regras são colocadas em um arquivo textoarquivo texto com extensão ..csscss • Portanto, o CSS também nnããoo dependedepende de uma ferramenta específica Obs.: já existe uma proposta da W3C do CSS 3 (ainda não completamente suportado por todos os navegadores atuais). Veja maiores detalhes em: http://www.w3.org/Style/CSS/current-work 6 • Uma regra CSS, na sua forma mais elementar, é composta de três partes: um seletor, uma propriedade e um valor. seletor { propriedade: valor; } • Onde: – Seletor: genericamente, é o elemento XHTML (ou pseudo-seletores, de classe e ID) para o qual a regra será aplicada; – Propriedade: é o “atributo” do elemento ao qual será aplicada a regra; – Valor: é a característica específica a ser assumida pela propriedade. Sintaxe de uma regra 7 Exemplo: p { color : red; border: 1px solid gray; } A espessura da borda, o seu tipo e sua cor. A partir daí, deve-se escolher a(s) propriedade(s). Neste caso, a cor do parágrafo será modificada A primeira coisa que se deve fazer é selecionar o elemento XHTML que se quer estilizar. Note, porém, que não há <> no seletor! … a cor do parágrafo será vermelha (mais sobre cores adiante…) Todo este código é chamado de regra CSS. Ela deve existir, preferencialmente, dentro de um arquivo .css Esta propriedade é multivalorada. Ela aplica uma borda nos parágrafos da página Obs.: observe as posições das chaves, dos sinais de dois pontos e ponto e vírgulas! 8 Comentários • A regra mostrada há pouco seria aplicada a todos os parágrafos – Ora, mas se fosse preciso aplicar duas cores diferentes a dois parágrafos? • Será visto que CSS é capaz de selecionar apenas um elemento (e até sub-elementos!) – E se houvesse um <em> dentro do parágrafo? Sua cor seria alterada? • Para utilizar CSS, faz-se necessária uma boa referência – Ora, como é possível saber quais são todas as propriedades, valores e sintaxe possíveis aplicáveis a um elemento XHTML? • Ex.: é possível mudar a cor do texto de uma tag <img> ? •• CSS Pocket ReferenceCSS Pocket Reference (Eric Meyer) 9 Ligando o CSS ao XHTML • Basicamente, há duas formasduas formas de se conectar um CSS a um XHTML Fazendo uso da tag <style>…</style> na própria página <!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="en" lang="en“> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>O título do documento</title> <style type=“text/css”> p { color : red; border: 1px solid gray; } </style> </head> ... Exemplo: Para adicionar CSS diretamente em apenas um arquivo XHTML, adicione a tag <style> e o atributo type indicando que é um css Obs.: esta não é, necessariamente, a melhor abordagem. Apenas um arquivo é estilizado e não há reuso de regras ou folhas de estilos completas para outras páginas que venham a surgir, futuramente. Adicione suas regras CSS dentro de <style> 10 Ligando o CSS ao XHTML(cont.) Fazendo uma referência a um arquivo css externo à página <!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="en" lang="en“> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>O título do documento</title> <style type=“text/css”> </style> </head> ... Exemplo: Aqui está o código XHTML que indica ao browser onde encontrar o arquivo externo Obs.: este arquivo css pode residir na sua estrutura de diretórios ou até mesmo vir de uma URL absoluta. Delete isso… index.css p {p { color: red; color: red;border: 1px solid gray; border: 1px solid gray; }} Servidor Web <link type="text/css" rel="stylesheet" href=“index.css" /> 11 Anatomia de um LINK <link type="text/css" rel="stylesheet" href=“index.css" /> O tipo da informação é “text/css”. Em outras palavras, o browser deve considerar o texto como sintaxe css. A localização do arquivo é dita no atributo href (note que está sendo usada uma URL relativa, mas isso não é obrigatório!) O atributo rel identifica o relacionamento entre o arquivo XHTML e a informação que está sendo linkada. Neste caso, estamos linkando uma folha de estilos * Aqui vale a mesma regra para doctype: o <link> pode ser escrito em apenas uma linha. Contudo, se for necessário quebrar uma linha, esta deve ser feita entre atributos O elemento <link> informa ao browser que uma informação externa será “linkada” à página <link> é um elemento vazio. Neste caso, foi usada a regra do XHTML strict ‘ />’ 12 Um exemplo breve… Laboratório 06: definindo uma folha de estilos CSSLaboratórioLaboratório 0606:: definindo uma folhadefinindo uma folha dede estilosestilos CSSCSS 13 Otimizando o código CSS • É possível definir quantas regras você quiser em um arquivo CSS – Inclusive,