xhtml_03 44
Pré-visualização6 páginas
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
\u2022 Em poucos slides, explorar os fundamentos do padrão Web CSSCSS
\u2013 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.
\u2022 Mostrar vários exemplos de códigos CSS que você deve testar para
solidificar seus conhecimentos nesta nova linguagem
\u2013 Este novo assunto é, como no caso do XHTML, de suma importancia para as
próximas disciplinas do curso (Desenvolvimento Web, etc.)
\u2022 Aconselha-se utilizar uma referência para acompanhar este assunto
\u2013 Mais sobre qual referência pode ser utilizada adiante\u2026
3
O início da Web\u2026
\u2022 Boa parte dos documentos publicados na Web eram concebidos
utilizando regras oriundas do HTMLHTML (1.0, \u2026, 3.2, 4.01, \u2026)
\u2013 HTML tinha dupla funçãodupla função: estruturar o conteúdo e aparência (estilizá-lo)
\u2013 Há, ainda, uma grande variedade de tag\u2019s e atributos para estilização
\u2022 Hoje, estas tag\u2019s e atributos constituem código legadocódigo legado (deprecado) pelo XHTML
\u2022 Neste tipo de HTML, mudanças na página eram muito difíceis!
\u2013 Não havia reusoreuso de estilização para outras páginas
\u2013 Não havia um consenso no tocante a que os navegadores deviamdeviam dede obedecerobedecer
\u2022 Veja com seus próprios olhos\u2026
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 \u2013 R$ 56.99
<li> Aspirador de pó CCE \u2013 R$ 156.99
</ul>
<p align=right> Traga logo sua família! Não perca tempo.
<center><font size=\u201csmall\u201d> Ofertas válidas enquanto
durar o estoque!</font></center>
<p align=center><font size=\u201csmall\u201d>Copyright © 1998 \u2013 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\u2019s sem
fechá-las (e torcia para que todos os
browsers entendessem isso\u2026 )
Alinhamento
Outra forma
de alinhar!
Alguns atributos requeriam
aspas duplas e outros não\u2026
Agora o tamanho da fonte!
Obs.: também não havia nenhum DOCTYPE associado ao documento\u2026
5
Um padrão de apresentação
\u2022 O padrão Web CSS 2.CSS 2.1 1 (Cascading Style Sheets)
\u2013 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
\u2013 O CSS precisa da definição da precisa da definição da estruturaestrutura do XHTML para funcionar
\u2013 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
\u2022 Um conjunto de regras CSS forma uma ffolha de olha de eestilosstilos
\u2013 Estas regras são colocadas em um arquivo textoarquivo texto com extensão ..csscss
\u2022 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
\u2022 Uma regra CSS, na sua forma mais elementar, é composta de três
partes: um seletor, uma propriedade e um valor.
seletor { propriedade: valor; }
\u2022 Onde:
\u2013 Seletor: genericamente, é o elemento XHTML (ou pseudo-seletores, de
classe e ID) para o qual a regra será aplicada;
\u2013 Propriedade: é o \u201catributo\u201d do elemento ao qual será aplicada a regra;
\u2013 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! \u2026 a cor do parágrafo será vermelha
(mais sobre cores adiante\u2026)
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
\u2022 A regra mostrada há pouco seria aplicada a todos os parágrafos
\u2013 Ora, mas se fosse preciso aplicar duas cores diferentes a dois parágrafos?
\u2022 Será visto que CSS é capaz de selecionar apenas um elemento (e até sub-elementos!)
\u2013 E se houvesse um <em> dentro do parágrafo? Sua cor seria alterada?
\u2022 Para utilizar CSS, faz-se necessária uma boa referência
\u2013 Ora, como é possível saber quais são todas as propriedades, valores e
sintaxe possíveis aplicáveis a um elemento XHTML?
\u2022 Ex.: é possível mudar a cor do texto de uma tag <img> ?
\u2022\u2022 CSS Pocket ReferenceCSS Pocket Reference (Eric Meyer)
9
Ligando o CSS ao XHTML
\u2022 Basicamente, há duas formasduas formas de se conectar um CSS a um XHTML
Fazendo uso da tag <style>\u2026</style> na própria página
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN\u201c
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en\u201c>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>O título do documento</title>
<style type=\u201ctext/css\u201d>
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\u201c
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en\u201c>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>O título do documento</title>
<style type=\u201ctext/css\u201d>
</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\u2026
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=\u201cindex.css" />
11
Anatomia de um LINK
<link type="text/css" rel="stylesheet" href=\u201cindex.css" />
O tipo da informação é \u201ctext/css\u201d. 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á \u201clinkada\u201d à página
<link> é um elemento vazio. Neste caso,
foi usada a regra do XHTML strict \u2018 />\u2019
12
Um exemplo breve\u2026
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
\u2022 É possível definir quantas regras você quiser em um arquivo CSS
\u2013 Inclusive,