O documento discute conceitos de CSS como incorporação em HTML, seletores, propriedades e boas práticas. Aborda tags como <link> e <style> para adicionar folhas de estilo, e o uso de IDs, classes e estilos inline. Também menciona validação CSS e problemas de compatibilidade entre navegadores.

2. • Entender os conceitos de:
– Incorporação de CSS no HTML
• Tag <link>
• Estilos “in-line” em cada tag.
• Atributos HTML para trabalhar com CSS:
– id
– class
– style
– O conceito de Seletor.
– Propriedades CSS mais comuns e utilizadas.
– Novas propriedades do CSS 3.

3. • O que são?
– Lista de regras de formatação. Separam a estrutura do
documento, da formatação.
– Linguagem de Estilo, interpretada pelo Browser.
– Folhas de estilo para formatação de documentos
HTML e XML.
• Lançada pela W3C:
– CSS 1 (Level 1): 1996 (Autores: Håkon e Bert Bos).
– CSS 2 (Level 2): 1998.
– CSS 3 (Level 3): 2006 – Atualmente.

4. • Boas Práticas:
– Sempre deixar as folhas de estilo em um arquivo externo.
• Problemas Comuns:
– Interpretação divergente entre os navegadores:
• Problemas comuns com unidades de medida e posicionamento.
– Falta no reconhecimento de propriedades.
– Interpretação fora dos padrões da W3C.
• Solução dos Problemas:
– Folhas de estilo para navegadores problemáticos: “Hacks”.

5. • Utilização de tags e atributos HTML:
• Folhas externas:
– Tag <link>
• Incorporação:
– Tag <style>
• Estilos “in-line”:
– Atributo style
– <input type=“text” style=“border: 1px” />

6. • Tag <link>, filha da tag head com os atributos:
– href
• Especifica a localização do documento.
– media
• Específica em que tipo de device o documento CSS em
questão será utilizado para estilização.
– rel
• Atributo obrigatório, especifica qual a relação do documento
CSS com o documento que ele foi “lincado”.
– type
• Tipo MIME do documento que se quer “linkar”, pra CSS:
“text/css”

7. • Tag <link>, operadores para o atributo
device
– Operadores:
• and Operador lógico “e”.
• not Operador lógico de negação.
• , Operador “um ou”.
– Valores do atributo ou tipos de device.
– Combinações de operadores com valores:
<link media="screen and (device-height:500px)“ />

8. Tag <link>, valores para o atributo device
Valor: Descrição:
all Padrão. Apropriado para todos os dispositivos.
aural Sintetizadores de voz.
braille Dispositivos de feedback de Braille.
handheld Dispositivos portáteis de mão (tela pequena, limitada largura de banda).
projection Projetores.
print Modo de visualização de impressão /páginas impressas.
screen Telas de Computador.
tty Teletipos e meios de comunicação similares usando uma grade de caracteres de
passo fixo.
tv Dispositivos tipo televisão (baixa resolução, capacidade limitada de rolagem).

9. • Tag <link>, valores para o atributo rel
– alternate
– archives
– author
– bookmark
– external
– first
– help
– icon
– last
– licence
– next
– nofollow
– noreferrer
– pingback
– prefetch
– prev
– search
– sidebar
– stylesheet
– tag
– up

10. • Tag style com os atributos:
– Media:
• Mesmos valores da tag link
– Type
• Mesmo valor da tag link
• A marcação CSS pode ficar entre as tags:
<style type=“text/css” media=“all”>
p { padding: 5px; }
</style>

11. • Estilos “in-line” com o atributo global style
– Sobrepõe as folhas de estilo incorporadas (tag
style) e as folhas de estilo externas (tag link).
– A marcação CSS feita como valor do atributo
style
<input type=“text” style=“color:#000; border:
1px solid #FFF” />

12. • Atributos globais HTML ligados diretamente com o CSS.
Ambos trabalham em conjunto com o conceito de
Seletores:
– id
• Deve ser único para cada elemento HTML.
– class
• Um elemento HTML pode conter mais de uma classe,
separadas por espaços.
<div id=“id_unica” class=“classe1 classe2”>
Sou um Texto
</div>

13. • Baseada no conceito de Seletor:
– Veja o Apêndice - Lista de Tipos de Seletores.
• Conceito de Pseudo-classe:
– Semelhante ao conceito de classe abstrata.
– Opcional.
seletor:pseudo-classe {
propriedade:valor;
}

14. • O que são?
– Conjunto de regras que contém uma ou mais
propriedades CSS.
– Pode-se combinar os tipo de seletores.
• No que se aplica?
– A um, ou a um conjunto de elementos de
linguagem de marcação: HTML ou XML.
– Elemento específico de um conjunto de
elementos: utilização de pseudo-classes.

15. • Combinação de tipo se seletores, sem a
utilização de pseudo-classes:
header > * {
color:#000;
font: bold;
padding: 5px;
}
 header é o seletor de tag.
 O sinal de maior ( > )
seleciona um dado filho do
elemento.
 O asterisco ( * ) seleciona
todos os elementos.
Como se lê?
“Selecione todos os elementos
filhos da tag header.”

16. • Pseudo-classes CSS:
– Veja o Apêndice - Lista de Tipos de Seletores.
– Pseudo-classes mais utilizadas:
• :hover
– Quando o ponteiro do mouse está sobre o elemento.
• :focus
– Quando o elemento tem o foco do cursor do mouse.
• :first-child
– Primeiro filho de um dado elemento.

17. Exemplo de Seletor sem Pesudo-
classe
Exemplo de Seletor com Pseudo-
classe
ul li {
color:#0FF;
}
ul:first-child {
color:#0FF;
}
Todos os
elementos li
foram
estilizados
Apenas o
primeiro
elemento li foi
estilizado

18. • O que são?
– Regras para a formatação de elementos.
– Ver Apêndice - Lista de Propriedades.
• Características:
– Sempre ficam dentro do bloco do Seletor, ou seja das
chaves.
– As propriedades podem ser multivaloradas.
ul li {
color:#0FF;
}
Seletor ul li

19. • Veja a lista de todos os valores das
propriedades:
– http://www.pageresource.com/dhtml/cssprops.htm
• Veja a tabela de cores enviada gentilmente
pela aluna Adriana:
– CSS 3 - Apêndice - Tabela de Cores

20. Unidade: Descrição:
% Porcentagem
in Polegada
cm Centímetro
mm Milímetro
em 1em é igual ao tamanho da fonte de corrente. 2em significa duas vezes o tamanho da fonte
atual. Por exemplo, se um elemento é exibido com uma fonte de 12 pt, em seguida, '2 em 'é
24 pt. O 'em' é uma unidade muito útil em CSS, uma vez que pode adaptar-se
automaticamente para a fonte que o leitor utilize.
ex um ex é a altura-x de uma fonte (altura x geralmente é cerca de metade do tamanho da fonte)
pt Ponto (1 pt é o mesmo que 1/72 de polegada)
pc Pica (1 pc é o mesmo que 12 pontos)
px Pixels (um ponto na tela do computador)

21. • Após o documento HTML ser seccionado,
utiliza-se o CSS para posicionamento dos
elementos:
– Propriedades mais utilizadas:
• width
• height
• float
• margin
• padding
• clean

22. • Código CSS que produziria o posicionamento
dos elementos como na figura:
header, footer {
width: 100%;
}
nav, aside, article {
float: left;
}
nav { width: 30%; }
article { width: 50%; }
aside {width: 20%;}

23. • As folhas de estilo também são validadas.
• Ferramenta de validação da W3C:
– http://jigsaw.w3.org/css-validator
• Importância de validar?
– Garantir que seu código está conforme as regras,
aumentando a probabilidade de ser renderizado
igual em todos os (bons) navegadores.

24. • Qual a função dos hacks?
– Maneiras de corrigir as imperfeições dos
navegadores não compatíveis
• Como são implementados:
– Comentários HTML
– Asterisco na propriedades CSS

25. • O que é?
– É um teste que observa a compatibilidade do
navegador em questão com os padrões W3C.
• Para que serve?
– Testar compatibilidade entre navegadores.
• Como testar?
– http://acid2.acidtests.org
– http://acid3.acidtests.org/

26. www.tiago.blog.br
tiago@tiago.blog.br