64 pág.
Denunciar
Pré-visualização | Página 1 de 6
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,