Material Base CSS PDF

HTML5 e CSS3 Essentials
CSS - Cascading Style Sheets
Objetivos da Aula
Aula 06 (parte 1/2)
O que CSS?
Conhecendo suas caractersticas;
Agrupamento de seletores;
Seletor descendente (ou encadeado);
Atributos Class e ID;
Combinando Seletores;
Utilizao do CSS;
Objetivos da Aula
Aula 06 (parte 2/2)
Sprite;
Cores;
Unidades de medida;
Grupos de Propriedades;
Seletores Complexos;
Pseudo-classes;
Prefixos de identificao dos browsers.
O que CSS?
O que CSS?
O que CSS?
O Cascading Style Sheets (folha de estilo em cascata, ou
simplesmente CSS), uma linguagem de folhas de estilo que formata
a informao entregue pelo HTML. Seu principal benefcio :
Prover a separao entre o formato e o contedo de um documento,
que pode ser qualquer coisa: imagem, texto, vdeo, audio ou
qualquer outro elemento criado. Portanto, o CSS formata a
informacao que na maioria das vezes visual, mas nem sempre.
O que CSS?
No CSS Aural, possvel:
Manipular o audio entregue
Controlar o volume, profundidade
ao visitante pelo sistema
do som, tipo da voz, ou em qual
que faz a leitura da tela.
caixa de som a voz saira.
De certa forma, o usuario formata a informacao que esta em formato

de audio, e que o visitante consume ao entrar no site. O CSS prepara
a informao para ser consumida da melhor maneira possvel. Para
mais informaes sobre CSS Aural: www.w3.org/TR/CSS2/aural.html
O que CSS?
Basicamente, as atualizaes do HTML5 foram:
1 As criaes de novas tags.
2 A mudana do significado de alguns elementos que foram modificados.
3 Outras tags que foram descontinuadas.
Com o CSS que nos conhecemos podemos formatar algumas
caractersticas basicas: cores, background, caractersticas de font,
margins, paddings, posio e ainda controlamos de uma maneira muito
artesanal e simples a estrutura do site com a propriedade float.
O que CSS?
Com as atualizaes do CSS3 e com os browsers atualizando o suporte
do CSS2.1, nos entramos em um patamar onde sem dvida o CSS a
arma mais poderosa para o designer web.
Voc deve entender 3 coisas sobre o CSS:
Ele resolve problemas do HTML (formatao);
Separa a estruturao de dados da formatao;
Economiza tempo de trabalho, aumentando a reusabilidade.
Mltiplos estilos podem ser definidos em cascata, dentro de um nico
documento.
10
O que CSS?
Solucao para problemas no HTML
Tags HTML foram desenvolvidas originalmente para definir o
contedo do documento;
O layout do documento era supostamente tratado pelo browser, sem
usar qualquer formatao;
Economizam tempo de trabalho, aumentando a reusabilidade;
O contedo do documento HTML foi claramente misturado com o
layout de apresentao de documentos.
11
O que CSS?
Para resolver este problema, o W3C

criou o Estilo (STYLE) no HTML 4.0
12
Conhecendo suas caractersticas
13

Para construir uma CSS basta utilizar corretamente os 5 componentes:
Seletor
Bloco de
declarao
Declarao
Propriedade
Valor
Muito do poder da linguagem CSS esta nos seletores. Com eles,

podemos escolher qualquer elemento na pagina para aplicar estilos. Um
seletor representa uma estrutura. Ela ultilizada como uma condio
para determinar quais elementos de um grupo sero formatados.
Voce aprende, naturalmente, durante o uso do dia a

dia.
14

Veja como funciona:
p { color: blue; }
Seletor
15

Veja como funciona:
p { color: blue; }
Bloco de declaracao
16

Veja como funciona:
p { color: blue; }
Declaracao
17

Veja como funciona:
p { color: blue; }
Propriedade
18

Veja como funciona:
p { color: blue; }
Valor
19

Veja como funciona:
p { color: blue; }
p = Seletor
{ } = Bloco de declarao
color: blue = Declarao
color = Propriedade
blue = Valor
20

Se o valor composto de mltiplas palavras, sera necessaria a utilizao
de aspas:
p {font-family: Times New Roman;}
21

Para especificar mais de uma propriedade, necessario utilizar ponto e
vrgula.
p{
text-align: center;
color: blue;
font-family: Arial;
}
22
Agrupamento de seletores
23
Agrupa elementos separados por vrgula, para que herdem a mesma
formatao.
h1,h2,h3,h4,h5,h6 { color: green; }
24
Seletor descendente (ou encadeado)
25

Com este seletor, podemos escolher um ou mais elementos que esto
dentro de outro, ou seja, que so descendentes do elemento principal.
p strong { color: red; }

Com isso, selecionamos apenas tags strong que esto dentro de
paragrafos.
26

Podemos selecionar com mais especificidade, escrevendo com mais
elementos, como:
div p strong a { color: red; }
Neste exemplo, selecionamos links (a) que esto dentro de tags strong,
que sua vez, esto dentro de paragrafos, e ficam dentro de tags div.
27
Atributos Class e ID
28
Seletor de classe
Ele seleciona elementos com uma classe especfica aplicada.
.destaque { font-size: 20px;}
O .destaque seleciona todos os elementos com a classe "destaque".
29
Seletor de id
O seletor de id, seleciona o elemento com a id especificada. Cada id
nica e no pode ser repetida no mesmo documento.
#cabecalho { color: black; width:100%;}
O #cabecalho ira selecionar o elemento com o id "cabecalho".
30
Combinando Seletores
31
Podemos combinar os seletores para conseguir diferentes elementos, e
partes mais especficas de nossos sites. Veja alguns exemplos:
p.destaque seleciona apenas os paragrafos que possuem a classe
"destaque";
div#cabecalho h1 seleciona tags h1 que estejam dentro da div, com
a id "cabecalho".
#conteudo ul li a seleciona links (a) dentro de itens de lista, que
por sua vez, esto dentro de tags ul, e ficam dentro de um elemento
com a id "contedo".
32
#conteudo p.destaque strong seleciona elementos strong dentro
de paragrafos com a classe "destaque", que por sua vez, esto
dentro de um elemento com a id "conteudo";
.mensagem.destaque seleciona apenas elementos que tenham a
classe "mensagem", e a classe "destaque".
Separa itens por vrgulas, como p.destaque, h1, a.saiba-mais e
seleciona todos os elementos para as regras.
Muito til para diminuir a repeticao de regras no arquivo CSS.
33
Estes seletores so para cobrir suas necessidades basicas de formatao
de elementos. Eles simplificam de uma forma que vai fazer voc:
Trabalhar menos, e escrever

menos codigo CSS e Javascript.
Sao os seletores complexos que
veremos posteriormente.
34
Utilizacao do CSS
35
Utilizacao do CSS
Existem 3 formas de utilizao do CSS:
11
Em uma tag HTML (inline);
22
No cabealho <HEAD> de uma pagina HTML;
33 Em um arquivo CSS externo.
36
Utilizacao do CSS
CSS Inline
Mistura a estrutura com apresentao;
No recomendado pelos padres web (Web Standards).
Exemplo:
<p style=color: blue>Texto do pargrafo</p>
37
Utilizacao do CSS
CSS dentro do HTML
Um nico estilo para um documento;
No recomendado pelos padres web (Web Standards);
Deve ser inserido no cabealho do HTML pelas TAGs <style>.
Exemplo:
<head>
<style type="text/css">
p{color: blue;}
</style>
</head>
38
Utilizacao do CSS
CSS externo
Ideal para aplicar em varias paginas;
Recomendado pelos padres web (Web Standards);
Possibilita mudar o layout apenas do arquivo CSS;
Cada pagina deve ter um vnculo com a folha de estilo;
CSS externo apenas um arquivo com extenso .css;
Todas as paginas que utilizam esta folha de estilo, tero o seu
contedo alterado.
Exemplo: <link rel=stylesheet type=text/css href=estilo.css />
39
Utilizacao do CSS
Posso utilizar os tres modos?
Sim, mas atente-se a ordem de execuo:
CSS externo
CSS dentro do
Em uma TAG
HTML (<head>)
HTML (inline)
CSS inline sobre-escreve todas as outras.
40
Sprite
41
Sprite
Sprite
Pra quem no conhece, essa uma tcnica que se baseia em combinar
diversas imagens em uma so, em busca de diminuir o nmero de
requisies HTTP para o servidor.
E essa apenas uma de suas aplicaes, no mundo dos games, por
exemplo, ela muito usada para fazer animaes.
Imagine um menu como esse:
42
Sprite
Fazer uma requisio para cada uma das imagens muito ruim em
termos de performance, por isso podemos recorrer aos CSS Sprites da
seguinte maneira: Montamos nossa lista no-ordenada de elementos, mas
ao invs de utilizarmos a tag img, aplicamos uma classe para cada um
dos itens.
Exemplo:
<ul>
<li class="escudos atletico-mg"></li>
<li class="escudos botafogo"></li>
<li class="escudos coritiba"></li>
</ul>
43
Sprite
Para ento no CSS, utilizarmos como background apenas uma imagem
que contm todos os escudos. E para cada um dos elementos, colocamos
a posio X e Y dentro dessa imagem que contm todos eles.
Exemplo:
.escudos {
background: url('images/sprite.png') no-repeat;
}
.atletico-mg {
background-position: 0 -416px;
}
.botafogo {
}
.coritiba {
}
44
Sprite
Assim, conseguimos diminuir o tamanho em KB dos dados trafegados e
tambm o nmero de requisies HTTP para o servidor.
Para aplicar essa tcnica voc pode recorrer ao Photoshop ou Illustrator

colocando todas as imagens em um so arquivo e ento buscando a
posio X (vertical) e Y (horizontal) com a rgua. Uma excelente
alternativa para pessoas masoquistas.
Ja para pessoas normais, existem boas ferramentas como o SpriteCow e

o SpritePad que te auxiliam nesse trabalho.
45
Cores
46
Cores
Cores
A W3C prope diferentes maneiras de definir cores entre elas:
11
Nomes em ingls (palavra-chave);
22
RGB em valores inteiros ou porcentagem;
33 Codigo Hexadecimal.
47
Cores
Cores
Voc pode definir a cor, utilizando o nome da cor. Os nomes das cores
que so validos, so os listados nas recomendaes CSS do W3C.
As recomendaes para CSS 2.1, listam as 17 cores seguintes:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,

olive, orange, purple, red, silver, teal, white, e yellow
48
Cores
Cores
49
Cores
Cores
possvel definir mais de 16 milhes de cores indicando os valores RGB.
O RGB abreviatura para:
R = red (vermelha), G = green (verde), B = blue (azul)
Assim, o codigo rgb(X, Y, Z) indica uma cor obtida, com a mistura de uma
quantidade X de vermelho + Y de verde e Z de azul. Duas so as
maneiras de definir a quantidade de cada cor: Uma faixa de numerao (0
at 255), ou percentagem (0% at 100%).
50
Cores
Cores
No valido usar em uma definio nmero e porcentagem.
Exemplos:
Definices validas
rgb(145, 230, 50) ou rgb(20%, 0%, 70%)
Definicao nao valida
rgb(255, 20%, 120)
51
Cores
Cores
Em Hexadecimal tambm possvel definir mais de 16 milhes, assim
como no RGB. Esta a maneira mais conhecida de definir uma cor com
#RRGGBB onde RR, GG e BB representam um nmero hexadecimal
entre 00 e FF para o Vermelho, o Verde e o Azul.
Hexadecimal uma notao de 16 dgitos:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
52
Cores
Cores
indiferente usar letras maisculas ou minsculas na sintaxe
hexadecimal de cores, no entanto, valido abreviar a notao para trs
dgitos:
#FFF = #FFFFFF
#CF9 = #CCFF99
#cde = #ccddee
#49c = #4499cc
53
Unidades de medida
54
Unidades de medida
Unidades de medida
Tamanhos:
px: a unidade para pixel;
%: a unidade para porcentagem;
pt: a unidade para pontos;
em: a unidade do tamanho de um caracter.
55
Unidades de medida
Unidades de medida
56
Grupos de Propriedades
57
Dividiremos as propriedades em grupos. So eles:
11
22
Cores
Coresde
defundo
fundo
33
Fontes
Fontes
66
Agrupamentos de
elementos (Box Model)
44
Textos
Textos
55
Links
Links
Listas
Listas
77
Outras propriedades
58
1: Cores de Fundo
59
Cores de Fundo
Grupo 1: Cores de fundo
background-color: a propriedade que define a cor de fundo de um
elemento;
background-image: a propriedade que define uma imagem como
fundo;
background-position: a propriedade que define o posicionamento
da imagem na pagina;
background-attachment: a propriedade que define se a imagem
sera fixa na pagina, ou se vai rolar com o contedo (scroll | fixed).
60
Cores de Fundo
Grupo 1: Cores de fundo
background-repeat: a propriedade que controla a repetio de
uma imagem de fundo. (repeat | repeat-x | repeat-y | no-repeat);
background-size: a propriedade que define o tamanho das
imagens de fundo. (auto | length | cover | contain | intial).
61
2: Fontes
62
Fontes
Grupo 2: Fontes
font-family: a propriedade que define a lista de fontes a ser utilizada;
serif: Caracterizada pelas fontes que possuem p, (Times, Georgia);
san-serif: Caracterizada pelas fontes que no possuem p (Arial);
monospace: Caracterizada pelas fontes que possuem uma largura fixa.
Ao especificar a fonte, necessario informar qual a sua

caracterstica, caso nenhuma da lista for encontrada.
63
Fontes
Grupo 2: Fontes
font-style: a propriedade que define o estilo da fonte. (normal |
italic | oblique*);
font-variant: a propriedade que define a variao em tamanho da
fonte. (normal | small-caps);
font-weight: a propriedade que define o peso da fonte. (normal |
bold | lighter | number);
font-size: a propriedade que define o tamanho da fonte.
64
3: Textos
65
Textos
Grupo 3: Textos
color: a propriedade que define a cor de um texto;
text-align: a propriedade que define o alinhamento do texto. (left |
right | center | justify);
text-decoration: a propriedade que define decorao no texto.
(none | underline | overline | line-through);
text-indent: a propriedade que define um espaamento da primeira
linha do texto;
text-transform: a propriedade que controla as letras de um texto.
(none | capitalize | uppercase | lowercase).
66
Textos
Grupo 3: Textos
line-height: a propriedade que define a distncia entre as linhas do
texto;
word-spacing: a propriedade que define o espaamento entre as
palavras;
letter-spacing: a propriedade que define o espaamento entre os
caracteres do texto.
67
4: Links
68
Links
Grupo 4: Links
Para usarmos CSS em links, precisamos conhecer um pouco mais sobre
Pseudo-Classes. CSS Pseudo-Classes so usadas para adicionar
efeitos especiais em alguns seletores.
seletor:pseudo-classes {propriedade: valor;}
69
Links
Grupo 4: Links
:active: Adiciona um estilo no elemento ativo;
:focus: Adiciona um estilo que tem foco ativo;
:hover: Adiciona um estilo que tem o ponteiro do mouse sobre o
elemento;
:link: Adiciona um estilo no link que no foi visitado;
:visited: Adiciona um estilo no link visitado.
70
5: Listas
71
Listas
Grupo 5: Listas
list-style-image: a propriedade que defini uma imagem como
marcador da lista.
list-style-position: a propriedade que define a posio do
marcador da lista.
list-style-type: a propriedade que define o estilo de marcador da
lista.
72
6: Box-Model
73
Box-Model
Grupo 6: Box Model
O box model (modelo de caixa) compreende todos os elementos do
documento HTML e esta relacionado ao layout da sua pagina.
Essencialmente, um box model consiste dos seguintes itens:
Margens
Bordas
Espaamentos
Contedo
74
Box-Model
Grupo 6: Box Model
75
Box-Model
Grupo 6: Box Model
A leitura do tamanho deve ser realizada em sentido horario, e o tamanho
final de um box model definido pela soma de:
Largura total = width + left padding + right padding + left border +
right border + left margin + right margin.
Altura total = height + top padding + bottom padding + top border
+ bottom border + top margin + bottom margin.
O atributo width e height define o tamanho do contedo de um elemento.
necessario considerar esta regra no tamanho final dos elementos.
76
Box-Model
Grupo 6: Box Model
Qual sera o tamanho final deste elemento?
div{
width:220px;
height:500px;
padding:10px;
border:5px solid gray;
margin:10px;
}
77
Box-Model
Grupo 6: Box Model
Largura final: 220 + 10 + 10 + 5 + 5 = 250px

Altura final: 500 + 10 + 10 + 5 + 5 = 530px
78
Box-Model
Grupo 6: Box Model
Margem, espacamento e bordas podem ser declarados da seguinte
forma:
propriedade-top: valor;
propriedade-left: valor;
propriedade-bottom: valor;
propriedade-right: valor;
Ou, de forma compilada (shorthand):
propriedade: top right bottom left; ou propriedade: valor.
79
Box-Model
Grupo 6: Box Model
Margens(margin): so as distncias definidas, entre os lados que
determinam o limite do seu documento/elemento.
body{
margin-top:100px;
margim-right:50px;
margim-bottom:150px;
margim-left:100px;
}
80
Box-Model
Grupo 6: Box Model
Espacamento(padding): so as distncias definidas, entre as margens
e o contedo do documento/elemento.
body{
margin:100px 50px 150px 100px;
padding: 20px;
}
81
Box-Model
Grupo 6: Box Model
Bordas(border): so as distncias definidas, entre as margens e o
espaamento/contedo do seu documento/elemento.
body{
margin:100px 50px 150px 100px;
padding: 20px;
border-width:1px;
}
82
Box-Model
Grupo 6: Box Model
border-width: a propriedade que define a espessura de borda que
sera utilizado (medium | thin | thick | length);
border-color: a propriedade que define a cor da borda;
border-style: a propriedade que define o estilo da borda (dotted |
dashed | solid | double | groove | ridge | inset | outset).
83
Box-Model
Grupo 6: Box Model
Ha tambm uma forma de controlar o Box-Model chamada box-sizing.
uma propriedade que permite que mudemos o comportamento
padrao do box-model.
Por padro todos os elementos possuem o valor content-box para essa
propriedade, sendo definido pelo contedo.
box-sizing: content-box;
84
Box-Model
Grupo 6: Box Model
Essa propriedade permite um novo valor que resolve todos os
problemas:
box-sizing: border-box;
O que ela faz? Simples! Altera o comportamento do box-model
fazendo com que o navegador calcule a largura e altura do elemento
contando no apenas o seu contedo como visto no content-box
mas tambm considerando o padding (espaamento) e border (borda)
do elemento.
85
Box-Model
Grupo 6: Box Model
Para aplicar essa regra geral para todo o site e, que seja funcional em
todos os navegadores, basta adicionar a regra abaixo no CSS:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
86
Box-Model
Grupo 6: Box Model
87
7: Outras propriedades
88
Outras propriedades
Grupo 7: Outras propriedades
possvel controlar a largura e altura dos elementos.
width: Determina a largura de um elemento;
height: Determina a altura de um elemento;
max-width e min-width: Determina a largura maxima e mnima de
um elemento;
max-height e min-height: Determina a altura maxima e mnima de
um elemento.
89
Outras propriedades
Display (mostra) e Visibility (visibilidade).
A propriedade display determina como sera apresentado o elemento,
enquanto visibility determina se o elemento sera visvel ou no.
Os valores possveis para visibility so: (visible | hidden);
Os valores possveis para display so: (none | block | inline | ).
90
Outras propriedades
As diferenas entre display:none e visibility:hidden so:
display:none ocultara um elemento, e no ocupara o espao no
layout;
visibility:hidden ocultara um elemento, mas continuara ocupando o
espao no layout.
91
Outras propriedades
Posicionamento(position): Esta propriedade permite que posicionemos
os elementos na tela. Este posicionamento pode ser realizado pelos
atributos top, right, bottom e left.
Para
que
estes
atributos
funcionem
corretamente,
devemos
primeiramente definir qual o mtodo do posicionamento, que so: (static

| fixed | relative | absolute).
92
Outras propriedades
static: Segue o fluxo do layout da pagina;
fixed: Mtodo que fixara o elemento, mesmo que a pagina possua
um scroll;
relative: Mtodo que em conjunto com os atributos top, right,
bottom e left, movimentam o elemento de acordo com o valor
declarado. Este elemento pode sobrepor outros elementos, mas o
seu espao de origem preservado.
93
Outras propriedades
absolute: Mtodo que em conjunto com os atributos top, right,
bottom e left, movimentam o elemento de acordo com o valor
declarado. Este elemento no preserva o espao de origem.
Ha uma opo que controla a posio de profundidade do elemento,
podendo controlar a posio em via de camada, como se fosse um
elemento em cima do outro. necessario usar posio para funcionar.
z-index: Mtodo que permite trabalharmos os elementos em
camadas (layers). O principal comportamento do mtodo, que um
ndice com nmero maior, sobrepe o menor.
94
Outras propriedades
Flutuacao(float): Esta propriedade permite movimentar um elemento
para esquerda ou direita, e ainda podemos preencher o espao vago ao
lado com outro elemento.
Um elemento pode ser movimentado, apenas para a esquerda

ou para a direita. No possvel movimentar um elemento para
cima ou para baixo. Para isto, utiliza-se a propriedade float.
95
Outras propriedades
Um elemento flutua para esquerda ou para a direita, at possuir espaos.
Caso no possua mais espao, o elemento flutuara para baixo:
left: Flutua o elemento para a esquerda;
right: Flutua o elemento para a direita.
Para quebrarmos essa flutuao, utilizamos a propriedade clear com um
dos seguintes valores: (left | right | both).
96
Seletores Complexos
97
Seletores Complexos
Boa parte da inteligncia do CSS, esta em saber utilizar os seletores de
uma maneira eficaz, escalavel e inteligente.
Os seletores complexos selecionam elementos, que talvez seja preciso
fazer algum script em JavaScript para poder marca-lo com uma
CLASS, ou um ID, para, ento, formata-lo.
Com os seletores complexos, voce consegue formatar

elementos que antes eram inatingveis.
98
Seletores Complexos
Agora, veja uma lista de seletores complexos e suas funes:
No so todas as possibilidades, porque podem haver modificaes e
novos formatos. Lista atualizada pelo W3C: www.w3.org/TR/css3selectors/#selectors
Imagine que voc tenha um ttulo (h1), seguido de um paragrafo
(p). preciso selecionar todos os paragrafos que vem depois de
um ttulo H1. Com os seletores complexos, voc fara assim:
h1 + p { font-size: 20px; }
99
Seletores Complexos
Este seletor um dos mais simples e mais teis, comparado aos que so
utilizados em projetos por a.
No preciso adicionar uma classe com JQuery, e nem manipular o
CMS para marcar esse paragrafo. Ou seja, no precisamos fazer
milagre para encontrar os paragrafos que vem logo depois de um H1.
Apenas aplique o seletor CSS e pronto!
100
Seletores Complexos
elemento[atr]: Elemento com um atributo especfico;
elemento[atr=x]: Elemento que tenha um atributo com valor
especfico, igual a x;
elemento[atr~=x]: Elemento com um atributo, cujo valor uma
lista separada por espaos, sendo que um dos valores x;
elemento[atr^=x]: Elemento com um atributo, cujo valor comece
exatamente com string x;
elemento[atr$=x]: Elemento com um atributo, cujo valor termina
exatamente com string x;
elemento[atr*=x]: Elemento com um atributo, cujo valor contenha a
string x;
101
Seletores Complexos
elemento:nth-child(n): Seleciona um objeto N de um determinado
elemento;
elemento:checked: Seleciona elementos que esto checados, como
radio buttons e checkboxes;
E > F: Seleciona os elementos Es, que so filhos diretos de F;
E + F: Seleciona o elemento F que precede de imediato o elemento E.
102
Pseudo-classes
103
Pseudo-classes
Pseudo-classes
Pseudo-classes so tipos de classes especiais que no so definidas
pelo desenvolvedor (ja so pr-definidas).
A sua maior utilizao com links (a) para definir diversos estilos quando
o link novo, visitado, etc. O seletor de pseudo-classe escrito com o
nome do elemento + dois pontos(:) + nome da pseudo-classe.
As pseudo-classes so divididas em 2 tipos:
Dinmicas
Dinmicas
Estruturais
Estruturais
104
Pseudo-classes
As pseudo-classes dinamicas
As pseudo-classes dinamicas controlam os estados dos elementos.
Todos os elementos tem estados definidos, por exemplo o elemento link
(a) tem varios estados:
Quando voc passa o mouse, tira o mouse, clica no mouse e

quando ele visitado. Estes estados do link podem ser
formatados e tambm esto presentes em outros elementos.
105
Pseudo-classes
Para comear, vamos nos familiarizar com as pseudo-classes de links:
a:link: Apenas para os links no-visitados;
a:visited: Quando o elemento foi visitado;
a:active: Quando o elemento esta ativo ou pressionamos Enter.
Para ver esse estado, clique em um link, mas no solte o boto.
106
Pseudo-classes
a:hover: Quando o mouse esta em cima do mesmo.
Podemos fazer diversos efeitos interessantes,
ja que pode ser aplicada a qualquer elemento.
a:focus: Quando o elemento ganha foco. Por exemplo, quando os
inputs ganham foco para serem preenchidos.
til para pessoas que possuem habilidade limitada,
e no conseguem utilizar o mouse, por exemplo.
107
Pseudo-classes
Pseudo-classes estruturais
As pseudo-classes estruturais encontram elementos em uma arvore de
elementos.
Eles no formatam os estados, mas nos ajudam a encontrar elementos
especficos para que sejam formatados sem a ajuda de programao,
ou insero de alguma identificao direta no codigo. Por exemplo, uma
tabela zebrada (aquela tabela que tem as cores de linhas alternadas).
108
Pseudo-classes
Hoje podemos encontrar facilmente estes elementos, utilizando a pseudoclasse: nth-child().
table tr:nth-child(odd) {background:gray;}
109
Pseudo-classes
O seletor anterior encontra todas as linhas da tabela (tr) mpares (odd)
dentro da tabela, e aplica um background cinza. Simples, no ?
Ento, lembre-se:
Pseudo-classes selecionam elementos especficos

nas arvores de elementos do HTML.
110
Pseudo-classes
Veja a lista de pseudo-classes que o CSS3 adicionou a cartilha:
elemento:target: Encontra um elemento alvo, e muito utilizado para
fazer abas;
elemento:empty: Encontra elementos que no tem filhos;
elemento:enabled: Encontra elementos que esto habilitados. Por
exemplo: inputs de checkbox, texto e etc;
elemento:disabled: Encontra elementos desabilitados para edio
ou manipulao;
elemento:checked: Encontra elementos como checkbox e botes
radio que esto checados.
111
Pseudo-classes
elemento:first-of-type: Encontra o primeiro elemento do tipo;
elemento:last-of-type: Encontra o ltimo elemento do tipo;
elemento:first-child: Encontra o primeiro elemento filho;
elemento:last-child: Encontra o ltimo elemento filho;
elemento:nth-of-type(pos): Encontra um elemento tomando como
base sua posio na arvore de elementos do mesmo gnero;
elemento:nth-child(pos): Encontra um elemento tomando como base
sua posio na arvore de elementos;
elemento:not(class): Seleciona os elementos definidos, MENOS os
elementos especficados pela pseudo-classe.
*pos posio do elemento
*class classe do elemento
112
Pseudo-classes
Pseudo-elementos
Os pseudo-elementos permite que os autores selecionem informaes
inacessveis, e tambm possibilita aos desenvolvedores um caminho
para referenciar contedos que no existem. Por exemplo:
Podemos inserir um elemento antes (::before), ou

depois (::after) de um objeto ja existente no HTML.
113
Pseudo-classes
Existem alguns pseudo-elementos basicos, que voc ja deve ter usado
em seus projetos:
elemento::first-letter: Encontra a primeira letra da primeira palavra
de um bloco de texto;
elemento::first-line: Seleciona a primeira linha de um bloco de texto;
elemento::before: Insere um elemento no incio do contedo de um
elemento;
elemento::after: Insere um elemento no final do contedo de um
elemento.
114
Prefixos de identificacao dos browsers
115

A combinao da grande variao de browsers no mercado, com as
mais
novas
features
do
CSS,
resultam
em
problemas
de
compatibilidade. Exemplo:
Caso voc utilize a propriedade
Utilizar uma feature que
no seu CSS, os browsers que no
ainda esta sendo estudada,
suportam essa propriedade, ou
e que somente o Firefox,
que suportam com uma sintaxe
por exemplo, suporta.
diferente, podem dar problemas.
a que entram os prefixos de browsers!
116

Os prefixos (ou vendor-prefixes) so teis para podermos experimentar
features que ainda esto sendo estudadas, e que so rascunhos nos
documentos do W3C. A necessidade de ser adicionar prefixos antes das
propriedades, vem do fato que o CSS3 vem sendo adicionado
gradativamente nos navegadores.
Efeito X
Efeito X
=
=
Um efeito x no funcionara da
Navegador y
mesma maneira dos navegadores
Navegador z
y e z, e pode ser que alguns deles

no suporte certas propriedades.
117
Importante
Cada navegador tem um prefixo proprio, e
propriedades experimentais que podero no
funcionar em outros browsers.
Os navegadores ignoram as linhas com
prefixos que nao reconhecem.
118

Os principais browsers e prefixos utilizados, esto retratados na tabela
abaixo:
119

A primeira vista pode parecer complicado trabalhar com prefixos, mas
alm de ser uma parte importante no processo de padronizao do
CSS3, voc podera posteriormente, evitar retrabalhos em projetos.
Alm disso, ao trabalhar com um efeito de

borda arredondada, por exemplo, sem utilizar o
CSS3 voc teria muito mais trabalho com as
linhas de codigo e imagens.
120
Prximos Passos
Para que voc tenha um melhor aproveitamento do curso, participe das
seguintes atividades disponveis no Step 4:
Aula 7: CSS3
Fazer a leitura dos Slides;
Assistir a aula Sncrona;
Realizar o Laboratorio e Teste de Conhecimento;
Faa os exerccios propostos do Projeto Dexter.
Maos obra!
121

Material Base CSS PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Material Base CSS PDF

Enviado por

Direitos autorais:

Formatos disponíveis

HTML5 e CSS3 Essentials

CSS - Cascading Style Sheets

Controlar o volume, profundidade

ao visitante pelo sistema

do som, tipo da voz, ou em qual

que faz a leitura da tela.

caixa de som a voz saira.

De certa forma, o usuario formata a informacao que esta em formato

Para resolver este problema, o W3C

Conhecendo suas caractersticas

Conhecendo suas caractersticas

Muito do poder da linguagem CSS esta nos seletores. Com eles,

Voce aprende, naturalmente, durante o uso do dia a

Conhecendo suas caractersticas

Conhecendo suas caractersticas

Conhecendo suas caractersticas

Conhecendo suas caractersticas

Conhecendo suas caractersticas

Conhecendo suas caractersticas

Conhecendo suas caractersticas

p {font-family: Times New Roman;}

Conhecendo suas caractersticas

h1,h2,h3,h4,h5,h6 { color: green; }

Seletor descendente (ou encadeado)

Seletor descendente (ou encadeado)

p strong { color: red; }

Seletor descendente (ou encadeado)

div p strong a { color: red; }

.destaque { font-size: 20px;}

O .destaque seleciona todos os elementos com a classe "destaque".

#cabecalho { color: black; width:100%;}

O #cabecalho ira selecionar o elemento com o id "cabecalho".

Muito til para diminuir a repeticao de regras no arquivo CSS.

Trabalhar menos, e escrever

Em uma tag HTML (inline);

No cabealho <HEAD> de uma pagina HTML;

33 Em um arquivo CSS externo.

CSS inline sobre-escreve todas as outras.

Para aplicar essa tcnica voc pode recorrer ao Photoshop ou Illustrator

Ja para pessoas normais, existem boas ferramentas como o SpriteCow e

Nomes em ingls (palavra-chave);

RGB em valores inteiros ou porcentagem;

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,

Ao especificar a fonte, necessario informar qual a sua

seletor:pseudo-classes {propriedade: valor;}

Largura final: 220 + 10 + 10 + 5 + 5 = 250px

primeiramente definir qual o mtodo do posicionamento, que so: (static

Um elemento pode ser movimentado, apenas para a esquerda

Com os seletores complexos, voce consegue formatar

Apenas aplique o seletor CSS e pronto!

Quando voc passa o mouse, tira o mouse, clica no mouse e

Para ver esse estado, clique em um link, mas no solte o boto.

table tr:nth-child(odd) {background:gray;}

Pseudo-classes selecionam elementos especficos

Podemos inserir um elemento antes (::before), ou

Prefixos de identificacao dos browsers

Prefixos de identificacao dos browsers

no seu CSS, os browsers que no

ainda esta sendo estudada,

suportam essa propriedade, ou

e que somente o Firefox,

que suportam com uma sintaxe

por exemplo, suporta.