![Page 1: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/1.jpg)
INTERNET BÁSICA:
INSTITUTO FEDERAL DE EDUCAÇÃO , CIÊNCIA E
TECNOLOGIA DA PARAÍBA – CAMPUS CAMPINA GRANDE
1
INTERNET BÁSICA:VALIDAÇÃO & CSS – PARTE 4
Rhavy Maia Guedes [email protected]
![Page 2: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/2.jpg)
Sabe aquele site da Ferrari?! Pois é, ale
não validou no W3C!
Muito
fraquinho mesmo!
2
![Page 3: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/3.jpg)
• Doctype
Definição
Validador W3C3
• Definição
• Exemplos
![Page 4: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/4.jpg)
Validação W3C4
� Garante que seu documento é bem formado e que todos os elementos e atributos escolhidos aderem a um padrão definido;
� Serviço gratuito e online que permite checar � Serviço gratuito e online que permite checar se um determinado documento segue as regras definidas em um DOCTYPE;
� A url do validador: http://validator.w3.org
![Page 5: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/5.jpg)
Doutor, eu preciso especificar para o validador
qual padrão eu adoto no
meu HTML?
Sim. Você precisa
5
precisa fazer isso!
![Page 6: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/6.jpg)
Legado do HTML6
Não existia preocupação com apresentação . A web parecia uma brincadeira. No entanto, a linguagem de marcação já ganhava forma.
Época marcada pela guerra dos navegadores , de um lado Netscape de outro o IE, para padronizar a web. Surge também a figura do Web Developer.
Fim da guerra entre os navegadores marcada pelo surgimento do Wide Web Consortium(W3C). Separação da infre-estrutura do HTML
1989 - 1991 19951998
![Page 7: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/7.jpg)
Legado do HTML7
1999
Agora sim, boa vida! Depois de pequenas correções da versão anterior não há nada com o que se preocupar. Essa versão é a mais utilizada.
O HTML adota padrões do XML para suportar novas tecnologias
2000
![Page 8: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/8.jpg)
DOCTYPE8
� (X)HTML permitem que desenvolvedores criem diversos tipos de documentos, cada um definido por um conjunto de regras distintas� Estas regras de cada tipo são detalhadas e mantidas pela W3C
na forma de uma Definição do Tipo de Documento (DocumentType Definition - DTD)
� A declaração DOCTYPE informa aos serviços validação e aos navegadores modernos qual DTD foi utilizada para elaborar a marcação de sua página
![Page 9: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/9.jpg)
DOCTYPE9
� Declarações DOCTYPE indicam compatibilidade:� Portanto, a marcação de sua página não será
validada a menos que seu código comece com uma declaração DOCTYPE apropriada.
� Estas devem ser sempre as primeiras em um documento Web.
![Page 10: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/10.jpg)
DOCTYPE10
![Page 11: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/11.jpg)
DOCTYPE é garantia total?
� O DOCTYPE não fornece garantias de que o documento foi realmente escrito com base no padrão especificado.
11
Será que o web designer não cometeu erros de
marcação?
![Page 12: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/12.jpg)
Validação W3C12
W3C Validador: http://validator.w3.org
![Page 13: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/13.jpg)
Validação com erro!
� Notificação do(s) erro(s).� Verifique o(s) erro(s) listado(s).
13
![Page 14: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/14.jpg)
Validação sem erro!
� DOCTYPE;� Tipo de codificação;� Corretude das tags e atributos.
14
![Page 15: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/15.jpg)
Meta
� Localizada dentro do <head > do documento html;
� Serve para descrever o conteúdo do seu site:� Navegador;
15
� Navegador;� Buscadores.
<head><meta name=“xxx” http-equiv=“xxx” content=“xxx”>
</head>
Possíveis combinações do META: http://minerva.ufpel.edu.br/~bira/html/meta.html
![Page 16: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/16.jpg)
Meta
� A definição de uma codificação, no documento, informará ao browser que conjunto válido de caracteres está sendo utilizado
16
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1”>
</head>
A lista de codificações pode ser encontrada em: http://www.w3.org/International/O-charset.html
![Page 17: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/17.jpg)
• Definição
Construção
CSS17
• Construção
• Exemplos
![Page 18: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/18.jpg)
Roteiro
� Em poucos slides, explorar os fundamentos do padrão Web CSSCSS;� Sintaxe, seletor, propriedades, regras, CSS no
xHTML, vantagens, herança e override de
18
xHTML, vantagens, herança e override de propriedades no código CSS, otimizando partes do CSS, declaração de classes, pseudo-classes, Validador CSS...
![Page 19: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/19.jpg)
Roteiro
� Mostrar vários exemplos de códigos CSSCSS que você deve testar para solidificar seus conhecimentos nesta nova linguagem� Este novo assunto é, como no caso do XHTML,
19
� Este novo assunto é, como no caso do XHTML, de suma importância para as próximas disciplinas do curso (Desenvolvimento Web, etc.)
![Page 20: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/20.jpg)
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);
20
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.
![Page 21: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/21.jpg)
O início da Web…
� 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 deviam de obedecerdeviam de obedecer;;
21
navegadores deviam de obedecerdeviam de obedecer;;
� Veja com seus próprios olhos...
![Page 22: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/22.jpg)
Vejam…22
![Page 23: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/23.jpg)
O início da Web(cont.)23
<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:
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!
Obs.: também não havia nenhum DOCTYPE associado ao documento…
<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ãoestritamente reservados.</font>
</body>
</html>
Você podia escrever algumas tag’s sem fechá-las (e torcia para que todos os browsers entendessem isso… )
Alinhamento
Outra forma de alinhar!
Agora o tamanho da fonte!
![Page 24: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/24.jpg)
Um padrão de apresentação
� O padrão Web CSS 2.1 CSS 2.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;
24
página ou até um site completo;
� O CSS precisa da definição da estruturaprecisa da definição da estrutura do xHTMLpara funcionar;
� Uma regra CSS é uma declaração que segue uma sintaxe própria sintaxe própria e que define como será aplicado um estiloestilo a um (ou mais) elemento(s) xHTML.
![Page 25: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/25.jpg)
Um padrão de apresentação25
• Comportamento [Javascript]
• Apresentação [CSSCSS]
• Conteúdo [HTML]
![Page 26: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/26.jpg)
Um padrão de apresentação
� Um conjunto de regras CSS forma uma folha folha de de estilosestilos� Estas regras são colocadas em um arquivo textoarquivo texto com
extensão ..csscssPortanto, o CSS também nãonão dependedepende de uma ferramenta
26
� Portanto, o CSS também nãonão dependedepende de uma ferramenta específica.
Obs.: já existe uma proposta da W3C do CSSCSS 3 (ainda não completamentesuportado por todos os navegadores atuais). Veja maiores detalhes em: http://www.w3.org/Style/CSS/current-work
![Page 27: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/27.jpg)
Vantagens
� Centralização de toda forma de apresentação do site. O maior impacto vem na manutenção;
� Economia no tráfego do servidor;� Reutilização de código;
27
� Reutilização de código;� Facilidade para ferramentas como, por
exemplo, RSS e Text-to-speech;� Flexibilidade para utilização de outras mídias.
![Page 28: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/28.jpg)
Sintaxe de uma regra
� Uma regra CSS, na sua forma mais elementar, é composta de três partes: um seletor, uma propriedade e um valor.
28
seletor { propriedade : valor ;
}
![Page 29: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/29.jpg)
Sintaxe de uma regra
� 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
29
� Propriedade : é o “atributo” do elemento ao qual será aplicada a regra;
� Valor : é a característica específica a ser assumida pela propriedade.
![Page 30: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/30.jpg)
Exemplo:30
p {
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…)
p {color : red ;border : 1px solid gray ;
}
A espessura da borda, o seu tipo e sua cor.
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!
![Page 31: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/31.jpg)
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
31
� 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?
![Page 32: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/32.jpg)
Comentários
� 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?
32
um elemento xHTML?� Ex.: é possível mudar a cor do texto de uma tag <img> ?
�� CSS CSS PocketPocket ReferenceReference (Eric Meyer)
�� CascadingCascading Style 2.1 Style 2.1 (http://www.w3.org/TR/CSS21/)
![Page 33: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/33.jpg)
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
33
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.0 Strict //EN“<!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> ...
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>
Para adicionar CSS diretamente em apenas um arquivo XHTML, adicione a tag <style> e o atributo type indicando que é um css
![Page 34: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/34.jpg)
� Fazendo uma referência a um arquivo cssexterno à página
Ligando o CSS ao HTML(cont.)34
<!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> ...
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…
Servidor Web
<link type="text/css" rel="stylesheet" href=“index.c ss" />
![Page 35: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/35.jpg)
Anatomia de um LINK35
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 elemento <link> informa ao browser queuma informação externaserá “linkada” à página
<link type="text/css" rel="stylesheet" href=“index. css" />
O atributo rel identifica o relacionamento entre o arquivo XHTML e a
informação que está sendolinkada. Neste caso, estamoslinkando 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
<link> é um elemento vazio. Neste caso, foi usada a regra do XHTML strict ‘ />’
![Page 36: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/36.jpg)
Anatomia de um LINK36
<style type="text/css">@import url(/ index . css );
Também indica à página xHTML onde
está o CSS
@import url(/ index . css ); </style>
![Page 37: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/37.jpg)
Um exemplo breve…37
LaboratórioLaboratório 0606:: definindo uma folha de estilos CSSdefinindo uma folha de estilos CSSLaboratórioLaboratório 0606:: definindo uma folha de estilos CSSdefinindo uma folha de estilos CSSLaboratórioLaboratório 0606:: definindo uma folha de estilos CSSdefinindo uma folha de estilos CSSLaboratórioLaboratório 0606:: definindo uma folha de estilos CSSdefinindo uma folha de estilos CSS
![Page 38: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/38.jpg)
Otimizando o código CSS
� É possível definir quantas regras você quiser em um arquivo CSS� Inclusive, é possível utilizar uma mesma propriedade, várias
vezes.
� Exemplo:
38
h1 {� Exemplo: h1 {color : gray ;font-family : sans-serif ;
}
h2 {color : gray ;font-family : sans-serif ;
}
p {color : red ;
}
arquivo.css
Aqui está uma regra para configurar a cor de todos os cabeçalhos de nível 1 <h1> na página, além de configurar o tipo da fonte para sans-serif
E aqui está uma regra para fazer a mesma coisa com todos os cabeçalhos de nível 2 <h2> encontrados
Mudar a cor de todos os parágrafos encontrados para vermelha
![Page 39: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/39.jpg)
Otimizando o código CSS
� Porém, há um problema com a abordagem anterior…� Há duplicaçãoduplicação de propriedades e valores!
� O que fazer?
39
h1, h2 {color : gray ;Para escrever uma mesma regra para
� Pergunta intrigante…
color : gray ;font-family : sans-serif ;
}
h2 {color : gray;font - family: sans - serif;
}
p {color : red ;
}
arquivo.css
Para escrever uma mesma regra para vários seletores, escreva-os separados por vírgulaNesta regra, todos os cabeçalhos de níveis 1 e 2 terão suas aparências alteradas automaticamente…
Delete isso…
…mas, o que faríamos se quiséssemos, amanhã, colocar uma linha de borda apenas nos cabeçalhos de nível 1 <h1>, mas não em cabeçalhos <h2>?
![Page 40: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/40.jpg)
Regras aplicadas a um mesmo seletor
� Até aqui, cada regra mostrada mencionava sempre tag’s distintas� Saiba que é permitido escrever várias regras para uma mesma tagpara uma mesma tag
XHTML
� Assim, no geral, se houver regras que mencionam um mesmo descritor XHTML, cada regra irá “adicionar” aparência em relação à anterior *
40
anterior *
� Pode-se “acumular”“acumular” aparência escrevendo regras mais específicas
*Iremos ver, mais adiante, que, em alguns casos, o browser irá decidir de acordo com o peso da regra (não considerando se ela é a última dentro do arquivo css).
h1, h2 {color : gray ;font-family : sans-serif ;
}
h1 {border-bottom : 1px solid black ;
}
![Page 41: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/41.jpg)
Overriding (sobreposição)
� Em situações que envolvam regras aplicadas a um mesmo descritor XHTML, é comum sobreporsobrepor a aparência definida em regras anteriores
� A isso, dá-se o nome de overrideoverride (ou sobreposição) de aparência
41
aparência
� Se as propriedades são conflitantes, será escolhida a regra mais específica que o browser encontrar dentro do arquivo CSS:
Obs: note que a cor cinza do cabeçalho h1 será sopreposta pela última regra mais específica
h1, h2, h3 {color : gray ;font-family : sans-serif ;
}
h1 {color : red ;border-bottom : 1px solid black ;
}
![Page 42: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/42.jpg)
Um meta-padrão
� Procure concentrarconcentrar código comum a todos os descritores XHTML � Ora, se a aparência tiver de mudar, apenas um único
local será alterado
Só então, a partir daí, defina regras de estilo
42
� Só então, a partir daí, defina regras de estilo mais específicasespecíficas� Uma boa dica é fazer override de propriedades, caso
estas já tenham sido definidas em regras de estilo anteriores no código CSS� Mesmo assim, muito cuidado na escrita de regras conflitantes!
![Page 43: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/43.jpg)
Um meta-padrão
� E lembre-se: ao resolver um conflito de regras em um arquivo CSS, o browser irá sempre em busca da regra mais específica.
43
h1, h2, h3 {color : gray ;font-family : sans-serif ;
}
h1 {color : red ;border-bottom : 1px solid black ;
}
![Page 44: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/44.jpg)
Herança
� Mesmo fatorando código comum e se valendo de override para ajustes específicos, em CSS, é facil começar a duplicar propriedadesduplicar propriedades� Veja um exemplo:
44
h1, h2 {color : gray ;
Conforme visto em slides anteriores, é color : gray ;font-family: sans-serif;
}
h2 {color : red ;border-bottom : 1px solid black ;
}
p {color : blue ;font-family: sans-serif;
}
arquivo.css
…problema! Ora, por que definir font-family para cada elemento? E se, amanhã, for adicionado à página um elemento <blockquote>? Teríamos de adicionar uma nova regra no arquivo css para ele também?
Ajustes específicos em <h2> foram feitos com override, mas…
Conforme visto em slides anteriores, é interessante fatorar(concentrar) código comum aos elementos (neste caso, os cabeçalhos <h1> e <h2 >, suas cores e tipo de fonte)
![Page 45: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/45.jpg)
Herança(cont.)
� “Elementos-filhos” podem herdar aparência de seus “pais”� Mas isso apenas paraalgumasalgumas propriedades!
45
body {font-family: sans-serif;
}Iremos mover a propriedade para o “pai” de
Delete isso…
� Pergunta intrigante:
h1, h2 {color : gray ;font - family: sans - serif;
}
h2 {color : red ;border-bottom : 1px solid black ;
}
p {color : blue ;font - family: sans - serif;
}
arquivo.css
Iremos mover a propriedade para o “pai” de todos os elementos envolvidos no arquivo.
A grande maioria dos filhos de <body> (inclusive seus “netos”) serão afetados diretamente; como se houvesse uma regra explícita para cada um.
…mas, e se houvesse uma tag <img> definida dentro de algum parágrafo? <img> é um elemento inline (como <a>, <em>,… ); sua fonte seria alterada?
Delete isso…
![Page 46: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/46.jpg)
Herança(cont.)46
body {font-family: sans-serif ;
}
p {color : blue ;font - family: sans - serif;
}
![Page 47: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/47.jpg)
“Sobrepondo” a Herança
� Movendo a propriedade para <body>, quase todos os elementos tiveram suas fontes afetadas� Mas, e se houver uma herança herança
47
body {font-family : sans-serif;
}
h1, h2 {uma herança herança indesejada?indesejada?
� Como faço isso?
h1, h2 {color : gray ;
}
h2 {color : red ;border-bottom : 1px solid black ;
}
p {color : blue ;
}
em {font-family: serif;
}
arquivo.css
Ora, você pode anular a herança fazendo override específico para um determinado elemento afetado por ela…
É facil: apenas adicione uma nova regra selecionando apenas um determinado elemento desejado e atribuindo uma nova aparência ao mesmo
![Page 48: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/48.jpg)
Herança, override, … confusão!
� Como saber quais propriedades admitem herança e quais não?� É aí que uma boa referênciaboa referência entra em cena (CSS CSS
PocketPocket ReferenceReference)
Entretanto, no geral, estilos que afetam texto
48
� Entretanto, no geral, estilos que afetam texto (color , font -family , font -size , font -weight , font -style ) admitem herança� Teste font-weight e font -style e veja isso na prática!
![Page 49: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/49.jpg)
Herança, override, … confusão!
� Outras propriedades (border ) não serão herdadas!� Pense um pouco: ora, não é porque se quer colocar
uma borda ao redor do corpo <body> do documento XHTML que todos os elementos filhos (<p>, <h1>,
49
XHTML que todos os elementos filhos (<p>, <h1>, <a>, <em>, etc. ) devem ter uma também, certo?
Obs: acima, note que, em alguns casos, vale também o bom senso na hora de se construir a regra…
![Page 50: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/50.jpg)
Um exemplo breve…50
Laboratório 07: Laboratório 07: overridingoverriding, herança, herança... Continua...... Continua...Laboratório 07: Laboratório 07: overridingoverriding, herança, herança... Continua...... Continua...Laboratório 07: Laboratório 07: overridingoverriding, herança, herança... Continua...... Continua...Laboratório 07: Laboratório 07: overridingoverriding, herança, herança... Continua...... Continua...
![Page 51: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/51.jpg)
Classes
� Com CSS também é possível utilizar classeclasse que permite a definição de regras css.� As classes podem ser aplicadas a qualquer elemento XHTML.
� Ademais, pode-se aplicar estilos estilos distintosdistintos para o mesmo tipo para o mesmo tipo de elementode elemento do XHTML, usando classes classes distintasdistintas para cada um
51
de elementode elemento do XHTML, usando classes classes distintasdistintas para cada um deles
� Permite flexibilidade, não restringe a aplicação de estilo somente ao seletores definidos no HTML.
� Use o atributo class para adicionar uma classe aos elementos do xHTML.� Um elemento pode, ainda, se relacionar com várias classes
� Desde que os múltiplos nomes de classes no atributo class sejam separados com espaços em branco (mais sobre isto adiante…)
![Page 52: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/52.jpg)
Declaração de uma classe52
p.vermelho {
Uma forma simples é escrever o seletor primeiro…
A definição de classes ocorre dentro do arquivo CSS (junto com as demais regras, quando
for o caso…) … e, depois, o nome da classe.
p.vermelho {color : red ;
}
Use um “.” entre o nome do elemento XHTML desejado e o nome da classe para selecionar um elemento específico da mesma
Evite utilizar espaços em branco e/ou caracteres especiais para
nomear uma classe
Esta regra irá selecionar todos osparágrafos que pertençam à classe
de nome “vermelho”
![Page 53: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/53.jpg)
Relacionando-se com classes
� Para associar um elemento XHTML a uma classe, basta utilizar o atributo class (isto fará com que ele seja adicionado ao “grupo”)
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1 - strict. dtd ">
Exemplo:
"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>
</head>
<body><p class =“vermelho” > Este parágrafo terá cor vermelha </p><p class =“azul” > Este parágrafo terá cor azul </p>
...
Pergunta 01: e se quiséssemos criar uma classe para elementos distintos (não apenas parágrafos)?
Observe o uso do atributo e o nome da classe
Pergunta 02: e se fosse preciso fatorar código comum às classes?
![Page 54: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/54.jpg)
Classes: conceitos avançados
� É possível associar elementos distintos a uma ou várias classe(s)�� Vários elementos, uma classeVários elementos, uma classe : se não houver nada
antes do sinal de “.” e o nome da classe, todos os elementos daquela classe serão afetados
54
elementos daquela classe serão afetados
.centro { text-align:center;
}
<h1 class =‘centro’ > Um texto </h1> <p class =‘centro’ > Um texto </p>
![Page 55: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/55.jpg)
Classes: conceitos avançados
� Associar elementos�� Um elemento, várias classesUm elemento, várias classes : o processo inverso também é
possível - um elemento pode pertencer a vários grupos simultaneamente*
55
* E se houver regras conflitantes entre as várias classes acima? Como o browser irá decidir?
.borda { border-bottom: 1px solid black; }
.verde { color: green; }
.centro { text-align:center; }<p class=‘ verde borda centro ’>...
![Page 56: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/56.jpg)
Um exemplo breve…56
Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …Laboratório 07: overriding, herança, classes, …
![Page 57: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/57.jpg)
Validador CSS
� Escrever um CSS otimizado, muitas vezes, não é sinônimo de que ele foi realmente escrito sem erros de sintaxe� Há alguma forma de verificar se o webdesigner não cometeu
erros no CSS?
57
�� O Validador CSS da W3CO Validador CSS da W3C� Da mesma forma que no validador XHTML, é um serviço
gratuito, online e que permite checar se um determinado CSS foi escrito corretamente;
� Por conseguinte, ele irá garantir que o CSS é bem estruturado e que todas as regras, propriedades e valores aderem a um padrão definido.
![Page 58: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/58.jpg)
Uso do validador CSS58
http://jigsaw.w3.org/css-validator/
![Page 59: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/59.jpg)
Uso do validador CSS(cont.)59
E a W3C ainda lhe dá a oportunidade de inserir uma imagem no documento XHTML indicando que a folha de estilos usada para estilizar a página é livre de erros e adere a padrões ☺!
![Page 60: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/60.jpg)
Fontes
� É possível selecionar um trecho de texto e configurar seu tipo de fonte, tamanho, cor e até algumas “decorações” para o mesmo;
� No CSS, fontes se apresentam e são classificadas em famílias:famílias:
60
classificadas em famílias:famílias:� A partir daí, é só especificar as fontes que serão
aplicadas em cada elemento
![Page 61: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/61.jpg)
Fontes
� Espeficique o tipo da fonte utilizando a propriedade font-family
61
body {font-family : Verdana, Geneva, Arial, sans-serif ;
}
� Apenas algumas fontes são comumente instaladas na maioria dos computadores; logo, tome cuidado na hora de escolher suas fontes!
}
![Page 62: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/62.jpg)
Fontes(cont.)
� Conforme foi dito anteriormente, cada fonte pertence a uma família� Cada família possui um conjunto de características a serem
compartilhadas
� No CSS 2.1CSS 2.1, há cinco famílias básicas de fontes:
62
� No CSS 2.1CSS 2.1, há cinco famílias básicas de fontes:
sans-serif: Verdana, Trebuchet MS, Arial, Geneva, Arial Black, …
serif : Times, Times New Roman, Georgia, …
monospace : Courier , Courier New , Andale Mono, …
cursive : Comic Sans, Apple Chancery, …
fantasy : Impact, etc…
Importante: Geneva, Courier, Helveltica e Times são fontes comumente presentes em Mac’s. As demais, em plataformas Windows e Mac’s (provavelmente).
![Page 63: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/63.jpg)
Fontes(cont.)63
A fonte Verdana está disponível no computador? Se estiver, aplique a fonte neste elemento (no caso, body)
Se Verdana não estiver disponível, então procure pela fonte Geneva. Se esta não estiver disponível, procure, então, por
Arial. E assim, por diante…
Note o uso da propriedade font-family(e tão font-type)
body {font-family : Verdana, Geneva, Arial, sans-serif ;
}
Esta lista de prioridades deve ser separada por vírgulas, a partir da fonte mais específica até a mais genérica. Se houver a necessidade de especificar uma fonte de nome composto, use aspas duplas (e.g. “Times New Roman”)
Não há uma regra de quantas fontes devem aparecer aqui. Porém, é sempre bom colocar o nome de uma família como uma última opçãode contingência para aqueles que não possuem uma fonte específica
Finalmente, se nenhuma das fontes for encontrada, o browser irá aplicar o que ele considerar “default” para a fonte sans-serif
Importante: os nomes das fontes são case-sensitive.
![Page 64: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/64.jpg)
Fontes(cont.)
� Altere a intesidade (peso) da fonte com a propriedade font-weight
64
h1 {font - weight : bold ;
lighter *
normal
bold
� Espeficique a “decoração” com a propriedadetext-decoration
font - weight : bold ;}
p {text-decoration : underline ;
}
none
underline
overline
line-through
blink *É possível tornar um texto decoradousando-se também outros valores de propriedades:
bolderO peso pode variar ligeiramentede um navegador para outro.
![Page 65: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/65.jpg)
Fontes(cont.)
� Espeficique o tamanho da fonte com a propriedade font-
size e sua cor usando a propriedade color
65
body {font-size : 16px ;color : red ;
}
Também é possível especificar o tamanho da fonte utilizando outras unidades além do pixel. E a cor utilizando a notação Hexadecimal. Mais
} sobre estes dois pontos adiante…
aqua green navy silver
blue gray olive teal
black lime purple white
fuchsia maroon red yellow
•Veja algumas cores pré-definidas:
![Page 66: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/66.jpg)
Fontes(cont.)
� É possível ajustar o tamanho do texto usando pixels, conforme visto;
� Porém, também é possível ajustar o tamanho da fonte de forma relativarelativa a uma outra fonte (pai ou a folha de estilos do browser):
� Isto é feito com duas unidades relativas: %% e em.em.
66
body {font-size : 14px ;
}h1 {
font-size : 150%;}h2 {
font-size : 1.2em ;}
É facil: defina um tamanho para o <body>. Isto irá agir como um default para a página
Uma boa prática: agora, defina os tamanhos de fontes dos outros elementos de forma relativa ao tamanho do corpo (com % ou em). Assim, se o tamanho das fontes tiver de mudar, ajustes serão realizados em apenas um único local (além disso, ajustes por parte dos usuários também serão permitidos) ☺. Pense nisso…
Importante: não confunda “em” com <em>!
![Page 67: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/67.jpg)
Fontes(cont.)
� Infelizmente, algumas versões de navegadores (e.g. Internet Explorer) não permitem, aos visitantes da página, ajustar o tamanho do texto quando o seu valor-base é expresso em pixels:� Para evitar isso, use keywordskeywords ao invés de pixels no valor-base.
67
� Para evitar isso, use keywordskeywords ao invés de pixels no valor-base.
xx-small
x-small
smallmediumlargex-largexx-large
Os valores reais das keywords não são constantes entre todos os navegadores!
body {font-size : small ;
}h1 {
font-size : 150%;}h2 {
font-size : 1.2em ;}
![Page 68: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/68.jpg)
Fontes(cont.)
� Adicione itálico a um elemento com a propriedade font-style
� Entretanto, nem todas as fontes fornecem suporte
68
p {font-style : italic ;
}
Um texto normal
Um texto em itálico
� Entretanto, nem todas as fontes fornecem suporte nativo a itálico� Se isso acontecer, use o valor oblique
oblique, na verdade, também indica ao navegador que um texto “em itálico” é desejado. Porém, ao invés de procurar e usar uma fonte projetada especialmente para este fim, o browser irá aplicar uma “inclinação” no texto “na marra”.
p {font-style : oblique ;
}
Na prática, entretanto, dependendo da escolha da fonte e do seu browser, os dois estilos poderão ser idênticos.
![Page 69: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/69.jpg)
Cores
� Já foi visto como especificar cores usando nomes de cores� A paleta CSS de nomes contém pouco mais de 10 cores (fator
limitante)
� Porém, não seria mais conveniente especificar cores
69
� Porém, não seria mais conveniente especificar cores usando uma “paleta” de aproximadamente 16 milhões de cores? Como?� Porcentagens de Red Green Blue, (usando valores de 0-255, ou
%)
� Notação Hexadecimal (seis dígitos, de 0..9, A, B, C, D, E e F)
� Uma maneira interessante de mixar cores é utilizando ferramentas de edição de fotos ou até mesmo usando alguns catálogos da Web
![Page 70: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/70.jpg)
Cores(cont.)
� Crie uma cor em termos de valores RGB (mixagem de cores)
Ou até mesmo espeficique em termos de valores finais,
70
h1 {background-color : rgb(80%, 40%, 0%) ;
}
80% de vermelho, 40% de verde e 0% de azul…
� Ou até mesmo espeficique em termos de valores finais, diretamente
h1 {background-color : rgb(204, 102, 0) ;
}
80% de 255 = 20440% de 255 = 10200% de 255 = 0
![Page 71: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/71.jpg)
Cores(cont.)
� Você também pode mixar cores usando a notação Hexadecimal� E, nesta notação, os dígitos para as cores podem conter letras!
� Na verdade, o primeiro conjunto de dois dígitos representa o vermelho, outro conjunto o verde e os
71
representa o vermelho, outro conjunto o verde e os restante para o azul � Sempre inicie uma notação hexa com o sinal “#”
p {color : #cc6600 ;
}
# CC 66 00
CC
•Onde:12(C) * 16 + 12 = 192 + 12 = 204
Red Green Blue
66 6 * 16 + 6 = 96 + 6 = 102
00 0 * 16 + 0 = 0 + 0 = 0
![Page 72: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/72.jpg)
Catálogo (uma parte…) de cores na Web
72
Disponível por HTTP em: http://en.wikipedia.org/wiki/Web_colors
![Page 73: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/73.jpg)
Um exemplo breve…73
LaboratórioLaboratório 0808:: fontes, cores, validador, …fontes, cores, validador, …LaboratórioLaboratório 0808:: fontes, cores, validador, …fontes, cores, validador, …LaboratórioLaboratório 0808:: fontes, cores, validador, …fontes, cores, validador, …LaboratórioLaboratório 0808:: fontes, cores, validador, …fontes, cores, validador, …
![Page 74: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/74.jpg)
Box Model
� CSS permite utilizar um modelo de caixa para controlar como elementos (tag’s) xhtml serão exibidos no navegador� As “caixas” têm um conteúdo, um padding*, uma borda* e uma margem*
� Cada um destas partes são comentadas abaixo:�� ConteúdoConteúdo : a área alocada para o conteúdo consiste do espaço mínimo
necessário para receber o conteúdo (até tocar a borda do browser, se
74
necessário para receber o conteúdo (até tocar a borda do browser, se for o caso)
�� PaddingPadding : propriedade utilizada para criar um espaço ao redor do conteúdo (espaço interno entre o conteúdo e a borda, quando houver alguma)
�� Borda: Borda: fica ao redor do padding(se houver algum) e, por sua vez, do conteúdo
�� MargemMargem : fica ao redor da borda, padding e conteúdo; é usada para fornecer espaçamento entre elementos adjacentes*
* padding, borda e margem são, conceitualmente, opcionais! Não esqueça disso…
![Page 75: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/75.jpg)
Box Model(cont.)75
um conteúdo um conteúdo um conteúdo umconteúdo um conteúdo um conteúdo um conteúdo
Esta parte é chamada de conteúdo (e.g. um texto ou uma imagem).
Ao redor do conteúdo, pode (não é obrigatório) haver um padding (transparente).
Uma borda pode ser colocada ao redor do padding e do conteúdo.
conteúdo um conteúdo um conteúdo um conteúdoum conteúdo um conteúdo um conteúdo umconteúdo um conteúdo um conteúdo um conteúdoum conteúdo um conteúdo um conteúdo umconteúdo um conteúdo um conteúdo um conteúdo
Finalmente, uma margem (transparente) pode ser colocada ao redor de todo o resto
Todos os elementos são tratados como caixas: parágrafos, cabeçalhos, listas, itens de lista, imagens, texto enfatizado, links, quotas, citações em bloco, etc
![Page 76: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/76.jpg)
Pode-se gerar várias combinações…76
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
só conteúdo
margem sup. e inf. + bordapadding sup. e esq. diferentes
padding iguais
conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
só bordas
só margens
margens inf. e dir. distintas + borda esq.
margem sup. e inf. + borda
só margem dir. + padding sup.inf.
um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo um conteúdo
misturado ☺
![Page 77: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/77.jpg)
Bordas
� Altere a espessura da borda com a propriedade border-width
77
p {border-width : thin ;
}img {
border - width : 5px ;
thinmediumthick
1px2px3px4px5px
� Altere a cor da borda com a propriedade border-color
border - width : 5px ;}
p {border-color : red ;border-color : rgb(100%, 0%, 0%) ;border-color : #FF0000 ;
}
Você pode especificar usando thin, medium, thick ou usando px
5px6px
Você pode usar cores pré-definidas, valores em rgb ou usando a notação hexadecimal
Vide catálogo …
![Page 78: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/78.jpg)
Bordas(cont.)
� Altere o estilo da borda com a propriedade border-style
78
h1 {border-style : dotted ;
}
solid
double
groove*
Explore cada um dos valores (de
dotted*
dashed
inset
� Especificando os lados da borda:border-top-colorborder-top-styleborder-top-width
* Ainda não suportada por todos os navegadores.
outsetExplore cada um dos valores (de preferência, no Firefox…) !
ridge*
border-right-colorborder-right-styleborder-right-width
border-bottom-colorborder-bottom-styleborder-bottom-width
border-left-colorborder-left-styleborder-left-width
h1 {border-top-style : solid ;border-top-color : red ;border-top-width : 2px ;
}
Exemplo:
![Page 79: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/79.jpg)
Um exemplo breve…79
LaboratórioLaboratório 0909:: bordas, box model, …bordas, box model, …LaboratórioLaboratório 0909:: bordas, box model, …bordas, box model, …LaboratórioLaboratório 0909:: bordas, box model, …bordas, box model, …LaboratórioLaboratório 0909:: bordas, box model, …bordas, box model, …
![Page 80: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/80.jpg)
O atributo id
� Até aqui, temos usado classes quando desejávamos aplicar um mesmo estilo a um grupo específico de elementos XHTML da página � Mas, e quando este conjunto contém apenas um único elementoum único elemento (e.g., o
rodapé da página, ou um parágrafo contendo uma mensagem do dia, ...)?
80
...)?
� Se há apenas um único elementohá apenas um único elemento a ser estilizado de maneira diferente dos demais, classes classes nãonão são (semanticamente) a melhor são (semanticamente) a melhor solução!solução!
� Use o atributo id para prover a um elemento um nome único
� Deve haver apenas um único elemento na página com um dado id
� A partir daí, pode-se usar este id para prover um único estilo ao elemento
![Page 81: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/81.jpg)
Anatomia de um id81
#vermelho {
Uma forma simples é escrever # primeiro…
A definição de um id ocorre dentro do arquivo CSS (junto com as demais regras, quando
for o caso…) … e, depois, o nome do id.
#vermelho {color : red;
}
Use um “#” seguido do nome do id para selecionar um único
elemento da páginaEvite utilizar espaços em branco e/ou caracteres especiais para
nomear um id
Esta regra irá selecionar o elemento que possuir o atributo
id de nome “vermelho”
![Page 82: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/82.jpg)
id (conceitos avançados)
� E se houver dois elementos de mesmo id na página e uma regra id?� Ambos serão estilizados, mas, seu documento XHTML não será
validado!
� Um elemento pode ter um id único e ainda fazer parte de uma classe
82
classe � Mas…e se houver regras conflitantes escritas nas regras da classe e do
id?� Uma regra escrita com id deterá maior prioridade em relação a uma regra
escrita com elementos XHTML ou até mesmo classes! Pense nisso…
� Vale também saber que um id pode ser utilizado como um “alvo” na criação de links internos (vide módulo XHTML) *� Isso já é uma indicação da W3C (tornará as coisas mais simples…)
* Ainda não suportada por todos os navegadores (sobretudo os mais antigos).
![Page 83: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/83.jpg)
Quiz…
� Qual a escolha mais adequada para cada item abaixo? Id ou Classe? � Um parágrafo contendo o rodapé da página xhtml;
� Uma imagem na página representando a “foto do dia”;
83
dia”;
� Parágrafos que contém comentários de visitantes sobre um dado filme;
� A lista de produtos em um carrinho de compras (a imagem do produto, sua descrição, preço, quantidade em estoque, etc.);
![Page 84: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/84.jpg)
Elemento <div>
� Elementos <div> são usados, basicamente, para agrupar elementos relacionados na página de modo a criar seções lógicasseções lógicas� Na verdade, ele age como um “containercontainer” para vários
elementos XHTML que devam ser relacionados
84
elementos XHTML que devam ser relacionados dentro da página� Elementos <div> ainda ajudam o webdesigner a identificar e
delimitar as principais “grandes áreasgrandes áreas” de um documento: cabeçalho, rodapé, conteúdo, etc.
![Page 85: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/85.jpg)
Elemento <div>
� <div> pode agrupar elementos de modo que recebam um estilo CSS� Uma vez que elementos foram agrupados, pode-se
estilizar div’s como elementos XHTML quaisquer. � Ex.: criar uma borda ao redor de um grupo de elementos,
85
� Ex.: criar uma borda ao redor de um grupo de elementos, adicionar uma mesma cor de background, etc.
![Page 86: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/86.jpg)
Propriedade width
� É possível usar a propriedade width para configurar a largura de elementos� Se não houver uma regra alterando a largura de um elemento, o
browser, então, irá admitir a largura como sendo “auto”…� E irá expandir o elemento usando o espaço disponível (na área
visível do browser)
86
visível do browser)
� Cuidado: a propriedade width especifica somente a largura do conteúdo!conteúdo!� Assim, se for preciso descobrir a largura total de um elemento,
deve-se somar possíveis padding’s, bordas, e margens (quando for o caso)
![Page 87: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/87.jpg)
Propriedade width87
conteúdo conteúdo
Esse parágrafo contém algumas indicações CSS. Qual será a largura total do elemento na
tela, em px?
Ex.:
conteúdo conteúdo conteúdo conteúdo
tela, em px?
p {border-width : 2px ;padding : 5px 8px 10px 7px ;margin : 10px ;width : 300px ;
}
10 2 7 300 8 2 10
![Page 88: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/88.jpg)
Propriedade height
� É possível usar a propriedade height para configurar a altura de elementos� Se não houver uma regra alterando a largura de um elemento, o
browser, então, irá admitir a largura como sendo “auto”…� E irá expandir o elemento usando o espaço disponível (na área
visível do browser)
88
visível do browser)
p {border-width : 2px solid black ;height : 500px ;width : 300px ;padding : 10px ;
}
conteúdo conteúdo conteúdo conteúdo conteúdo conteúdo
10
10
500
![Page 89: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/89.jpg)
Layout
� Os browsers posicionam elemento seguindo um fluxo fluxo padrãopadrão� A partir do topo, até a parte inferior da área visível da página,
com uma quebra de linha antes e depois de cada elemento de bloco (não flutuante) encontrado:
89
� Por default, cada elemento de bloco irá ocupar toda a largura da área visível do navegador
� Elementos “inline” (ou em linha), por sua vez, fluem a partir da parte superior esquerda do elemento de bloco até encontrar sua parte inferior direita (default).
![Page 90: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/90.jpg)
Layout(cont.)
� Elementos são capazes de flutuar (com float ) sobre o fluxo padrão� A idéia é “descolar” um elemento da página podendo movê-lo
para esquerda ou à direita
� Lembre-se: se, por um lado, eles não são mais “enxergados”
90
Lembre-se: se, por um lado, eles não são mais “enxergados” pelos elementos de bloco, por outro, elementos inline irão considerar e respeitar os seus limites:� Lembre-se: para flutuar, um elemento deve ter um id e um width
![Page 91: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/91.jpg)
Layout(cont.)
� Há diversas maneiras de conceber um layout para uma página� Pode-se usar um layout “flexível”: o conteúdo principal
da página poderá “crescer” ou “diminuir”, conforme a janela do navegador é redimensionada � Este layout possui algumas limitações (vide práticas anteriores)
91
� Este layout possui algumas limitações (vide práticas anteriores)
� Pode-se usar um layout “fixo”layout “fixo”: o tamanho do conteúdo principal da página não será alterado ainda que a janela do navegador seja redimensionada � Usa não apenas a propriedade width , mas height também� Este layout também possui limitações, mas, atualmente, é bastante
utilizado
� Não há um layout perfeito: a escolha recai no que o site deve permitir seu usuário fazer e o webdesigner saber ou não implementá-lo
![Page 92: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/92.jpg)
Um exemplo breve…92
LaboratórioLaboratório 1010:: uso de <div>uso de <div>LaboratórioLaboratório 1010:: uso de <div>uso de <div>LaboratórioLaboratório 1010:: uso de <div>uso de <div>LaboratórioLaboratório 1010:: uso de <div>uso de <div>
![Page 93: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/93.jpg)
Elementos descendentes
� Com CSS, também é possível selecionar apenas determinados elementos descendentes (elementos filhos, netos, bisnetos, etc.)
93
div#rodape p {color : #FF4567;
}
Selecione apenas os parágrafosque são descendentes (em
� Pode-se fazer construções mais complexas…
}qualquer nível) da div rodapé
div#cabecalho > p {color : #FF4567;
}
#h1+p {color : #FF4567;
}
Selecione apenas os parágrafos que são filhos diretos da div. Se houvesse, por ex., um blockquote na div que
possuísse um parágrafo como filho, este não iria ser afetado, pois já seria,
no caso, um “neto”…
Selecione apenas aqueles parágrafos que aparecem imediatamente após os
elementos h1
![Page 94: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/94.jpg)
Propriedade text-align
� A propriedade text-align permite alinhar todos os elementos “inline” (ou apenas texto) que estão dentro de elementos de bloco� Lembre-se de que, apesar de text-align funcionar para
qualquer elemento inline, ela sempre deve ser setada em
94
elementos de bloco!� Ex.: logo, tentar usar diretamente text-align em <img> não irá
funcionar
� Note que é bastante comum setar text-align em um elemento “pai” e o alinhamento ser passado para os filhos (inline’s ou blocos)� Ex: text-align em uma <div> que contém <p> e <h1>
� Estes dois últimos elementos herdarão o alinhamento do pai.
![Page 95: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/95.jpg)
Elemento <span>
� O elemento <span> é bastante similar ao <div> visto há pouco: é utilizado para agrupar elementos “inline” (em linha) ou texto puro� Da mesma forma que com as div’s, é possível adicionar span’s à
classes (ou até prover um id único para eles) visando estilizá-
95
los em um arquivo CSS!
.vermelho { color: red;font-weight: bold;
}
<p> Camisas <span class=“vermelho”> vermelhas </span>terão 30% de desconto hoje mesmo! </p>
<h3> Afinal, o <span class=“vermelho”> vermelho </span>é uma cor que está sempre na moda </h3>
•Exemplo: arquivo.cssarquivo.html
<span> é um elemento inline. Logo, ele não causará nenhuma quebra de linha indesejada em um texto
que, supostamente, deva ser contínuo...
•Pergunta intrigante:…mas, por que não usar <em> no html e no css em vez de todo este cuidado?
![Page 96: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/96.jpg)
<a> e pseudo-classes
� O elemento <a> é um exemplo de elemento que admite diferentes estadosestados (não-clicado, clicado, mouse sobre o link, etc.…)� A folha de estilos default do browser provê uma aparência para cada
estado
� É bastante comum aplicar estilos a cada um destes estados de <a>Use pseudopseudo--classesclasses para contemplar cada estado possível
96
� Use pseudopseudo--classesclasses para contemplar cada estado possível� É possível estilizar pseudo-classes, mas elas não irão aparecer na estrutura
XHTML
� O browser é que irá fazer todo o trabalho de associar o link à classe correta com base na interação do visitante enquanto ele usa os links (isso tudo “on-the-fly”)
a:link { color: green; } /* link não visitado */a:visited { color: red; } /* link já visitado */a:hover { color: yellow; } /* mouse sobre o link */a:active{ color: blue} /* link selecionado */
Teste isso…
![Page 97: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/97.jpg)
Um exemplo breve…97
Lista de revisão para a prova…Lista de revisão para a prova…Lista de revisão para a prova…Lista de revisão para a prova…Lista de revisão para a prova…Lista de revisão para a prova…Lista de revisão para a prova…Lista de revisão para a prova…
![Page 98: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/98.jpg)
Para um melhor aproveitamento…
� Ao codificar exemplos mostrados em sala, procureverificar pontos de dúvidas com o professor.
� Não estude apenas por slides (são apenas tópicos)!
� Mantenha em dia todas as questões das listas de listas de exercíciosexercícios e práticas de laboratórioe práticas de laboratório..
98
exercíciosexercícios e práticas de laboratórioe práticas de laboratório..
� Não se acanhe! Procure-me (ou monitor da disciplina, quando houver algum) e questione conceitos, listas, etc.
� Não deixe para começar a estudar em cima da hora.
![Page 99: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/99.jpg)
Dúvidas99
� Perguntas?
![Page 100: INTERNET BÁSICA: VALIDAÇÃO & CSS – PARTE 4 · do curso (Desenvolvimento Web, etc.) ... O CSS precisa da definição da estrutura do xHTML para funcionar; Uma regra CSS é uma](https://reader036.vdocuments.pub/reader036/viewer/2022062601/5bb7f27109d3f2333b8b9ab3/html5/thumbnails/100.jpg)
Bibliografia
� DAMASCENCO, Aniele. Webdesign Teoria e Webdesign Teoria e PráticaPrática. Editora Visual Books, 2003.
� MEMÓRIA, Filipe. Design para InternetDesign para Internet. Editora Campus, 2005.
100
Campus, 2005.
� NIEDERST, Jennifer. Aprenda Web DesignAprenda Web Design. Editora Ciência Moderna, 2002.
� SCHMIDT, Paulo. Fundamentos de Auditoria de Fundamentos de Auditoria de SistemasSistemas. Editora Atlas, 2006.
� Artigos e materiais na Web.