Aprender CSS (UFCD0154) v2

PROFISSIONAL EM WEBDESIGN
b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 2
0154 - Estilos em CSS
(Cascading Style Sheets)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
O QUE É O CSS
- Significa Cascading Style Sheets
- No HTML definimos contexto para elementos, com CSS definimos a apresentação.
- Foram adicionados no HTML4 para suprir a necessidade de usar tags (ex: <font>) para
formatar a apresentação permitindo o HTML ser só para contexto.
- Uso de folhas externas de CSS, permite formatar estilos para a globalidade do site,
poupando imenso trabalho (estas folhas são guardadas em ficheiros .css)
CSS CSS2
1996 1998 2013
Inicio trabalhos no CSS3
3

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Esta é a sintaxe de uma regra de CSS.
- Ao conjunto chamamos DECLARAÇÃO.
- Ao conjunto chamamos BLOCO DA DECLARAÇÃO
Vamos ver o que significa cada uma destas coisas...
propriedade
propriedade
: ;
{ : ; }
valor
valor
SINTAXE DE UMA REGRA DE CSS
a CSS
selector {
: ;
}
propriedade valor
2

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
selector pode ser qualquer elemento do HTML (sem usar as <>), pode também ser um id,
pode ser uma classe, etc etc etc. Já vamos ver exemplos...
é um aspecto do selector. Num parágrafo, pode ser, por exemplo, a font-
family, a color, o font-size, a margin, e muito mais ...
é a definição da propriedade. color pode ser red, blue ou black ou outra qualquer
cor. A font-family pode ser uma imensidão de tipos de letra, etc...
propriedade
valor
5
SINTAXE DE UMA REGRA DE CSS
a CSS
selector {
: ;
}
propriedade valor

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 6
EXEMPLOS DE REGRAS CSS
a CSS
{
: ;
}
{
: ;
: , ;
}
{
: ;
}
body
h1
#idvermelho
color
font-size
font-family
color
blue
44px
‘Helvetica’ Arial, sans-serif
red

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 7
ONDE INSERIMOS OS CSS?
a HTML
<p > </p>style=’’ : ; : ’’ O meu parágrafocolor font-sizered 12px
Temos 3 opções, todas viáveis e funcionais mas uma a mais recomendada e correcta.
Opção 1: Estilo in-line
- Estilo inserido no próprio elemento.
- Só afecta ESSE elemento.
- Visto como má prática... estamos a misturar contexto apresentação

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 8
a HTML
<head>
<style >
p
...
...
type
red
=’’text/css’’
{
: ;
}
color
</style>
</head>
Opção 2: Folhas de estilos INTERNAS
- Inserido dentro do <head> do página
- Só afecta essa PÁGINA
- Também é visto como má prática...
(ainda temos o CSS dentro do HTML!)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 9
a HTML
<head>
<link rel type href=’’stylesheet’’ =’’text/css’’ =’’css/estilos.css’’>
</head>
Opção 3: Folha de estilos EXTERNAS
- Todos os nossos estilos armazenados num ficheiro externo
- Normalmente esse ficheiro está numa pasta... chamada css
- Apresentação (CSS) e contexto (HTML) estão separados
- Os estilos refletem-se em todas as páginas que tenham esse ficheiro linkado
(não há duplicação de código)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 10
FOLHAS MULTIPLAS DE CSS
a HTML
<head>
<link
<link
<link
<link
<link
<link
...
=’’stylesheet’’ =’’text/css’’ =’’css/estilos.css’’
=’’stylesheet’’ =’’text/css’’ =’’css/soparaestapagina.css’’
=’’stylesheet’’ =’’text/css’’ =’’css/slider.css’’
=’’stylesheet’’ =’’text/css’’ =’’css/print.css’’ =’’print’’
=’’stylesheet’’ =’’text/css’’ =’’css/e-outro.css’’
=’’stylesheet’’ =’’text/css’’ =’’css/e-ainda-outro.css’’
...
rel type href
rel type href
rel type href
rel type href media
rel type href
rel type href
>
>
>
>
>
>
</head>
Podemos ter quantas folhas quisermos...
Mas ! Cada CSS é um HTTP Request! Para velocidade do nosso site
interessa-nos ter o mínimo possível de requests!!!
ALTO AÍ BABALU

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 11
RESUMINDO
a HTML
Maneiras de aplicar CSS
<!DOCTYPE html>
<html >
<head>
<meta >
<title> </title>
<link
<style >
</head>
<body>
<p > </p>
</body>
</html>
lang
charset
=’’pt’’
=’’UTF-8’’
O título
=’’text/css’’ { : ; }
=’’ : ;’’ Um parágrafo
rel type href
type red
style orange
>
</style>p color
color

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 12
PARA ESTE MÓDULO SUGIRO:
a HTML
<!DOCTYPE html>
<html >
<head>
<meta >
<title> </title>
<link
<style >
</head>
<body>
</body>
</html>
lang
charset
=’’pt’’
=’’UTF-8’’
O título
=’’text/css’’
rel type href
type
>
</style>
Termos sempre à mão um ficheiro HTML para copy&paste do código HTML

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 13
Uma pausa com uma coisa fácil
a HTML
/* Isto é um comentário em CSS */
/* Isto é OUTRO comentário
mas este comentário
já tem 3 linhas */
/* Os comentários de várias linhas */
/* também podem ser feitos assim */
/* Fica bonito assim em bloco! */
/* =====================
= Só para ficar bonito! =
===================== */
Comentários em CSS!
a CSS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 14
ATINGIR ELEMENTOS: elementos, classes e ids
a CSS
{
: ;
}
{
: ;
}
{
: ;
}
{
: ;
}
h1
p
#elementocomid
.laranja
color
color
color
color
blue
red
blue
orange
a HTML
<h1> </h1>
<p> </p>
<h1 > </h1>
<p> </p>
<h1> </h1>
<p > </p>
Heading
Um parágrafo aqui
Heading
Outro parágrafo aqui
Heading
E outro parágrafo
id
class
="elementocomid"
="laranja"
Mais tarde veremos que há mais maneiras de
atingir elementos. Mas estas são as principais e
mais comuns.

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 15
ATINGIR ELEMENTOS
a CSS
{ : ; }
{ : ; }
{ : ; }
{ : ; }
{ : ; }
h1
#verde
.verde
#laranja
.laranja
color
color
color
color
color
blue
green
green
orange
orange
a HTML
<h1 > </h1>
<p > </p>
<h1> </h1>
<p > </p>
id class
class id
class
="verde" ="laranja"
="verde" ="laranja"
="laranja verde"
Heading
Heading
E outro parágrafo
Fazendo um mix e observando a especificidade... Como vai ficar isto??

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
b Estilos em CSS
16
ATINGIR ELEMENTOS
No primeiro h1 e primeiro p:
No segundo h1:
No último p
Um id tem mais especificidade que uma class.
Logo ‘’ganha’’ sempre ... não interessa a ordem em que aparecem
Simples ... Aqui vinga a cor declarada no selector de h1
: Temos 2 classes definidas... mas a laranja foi a ultima a ser
declarada na nossa folha de CSS!
a HTML
<h1 > </h1>
<p > </p>
<h1> </h1>
<p > </p>
id class
class id
class
="verde" ="laranja"
="verde" ="laranja"
="laranja verde"
Heading
Heading
E outro parágrafo

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 17
AGRUPAMENTO
a CSS
{ : ; }
{ : ; }
{ : ; }
{ : ; }
{ : ; }
h1
#verde
.verde
#laranja
.laranja
color
color
color
color
color
blue
green
green
orange
orange
a CSS
{ : ; }
, { : ; }
, { : ; }
h1
#verde .verde
#laranja .laranja
color
color
color
blue
green
orange
Código mais pequeno ... ficheiro mais reduzido

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 18
Aninhamento (NESTING)
a CSS
{ : ; }
{ : ; }
{ : ; }
#bloco
#bloco h1
#bloco p
width
color
color
600px
green
orange
a HTML
<div >
<h1> </h1>
<p> </p>
</div>
id="bloco"
Bolo de chocolate
Delicioso! É mesmo mesmo bom. Gosto muito! :)
Em CSS bem esrtuturado precisamos de poucos ids e classes. Podemos especificar
propriedades para selectores dentro de outros selectores.
Neste caso, e não precisam de ter nem id nem class.h1 p

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 19
CORES EM CSS
- Nome predefinidos
- Valores Hexadecimais
- RGB
- RGBa
- HSL
- HSLa
Tantas maneiras?
Vamos sem medo...!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 20
CORES EM CSS
Nome predefinidos
aqua black blue fuchsia
gray green lime maroon
navy olive orange purple
red silver teal white
yellow
Todos os browsers entendem estes nomes.
Foram predefinidos nos inicios do HTML
(Curiosidade: existem 147 destas cores)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 21
CORES EM CSS
Valores Hexadecimais
- Notação hexadecimal
- É a notação de cores mais usada e mais segura na internet.
- Vão de #000000 (preto) até #FFFFFF (branco) até
- Se no conjunto os digitos forem iguais... podem ser abreviados
#0000FF --> Isto é azul
#00F --> Isto é o mesmo azul
# R R G G B B

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 22
CORES EM CSS
Valores Hexadecimais
Browser safe colors
Ja foram importantes ... Quando os ecrãs só suportavam 256 cores.
Agora podemos usar as cores que quisermos!
ff0000 ff0033 ff0066 ff0099 ff00cc ff00ff
ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff
ffff00 ffff33 ffff66 ffff99 ffffcc ffffff

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CORES EM CSS
Cores em RGB
Todos os browsers suportam esta notação para cores
NOTA: Incrivelmente, se usarmos percentagens e algum valor for zero,
tem que se especificar a unidade, neste caso 0%, ou a cor nao funciona.
a CSS
{ : ; }
{ : ; }
{ : ; }
{ : ; }
{ : ; }
.preto
.branco
.tambemsoubranco
.azul
.tambemsouazul
color
color
color
color
color
rgb(0, 0, 0)
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
rgb(0, 0, 255)
rgb(0%, 0%, 100%)
23

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CORES EM CSS
Cores em RGBa
O significa Transparência Alpha
Vai de 0 (totalmente transparente) até 1 (totalmente opaco)
Problemas de suporte: Todos Firefox, Chrome e Safari...
a
só IE 9+, Opera 10+
a CSS
{ : ; }
{ : ; }
{ : ; }
{ : ; }
.preto
.cinza
.souumacor
.sououtracor
color
color
color
color
rgba(0, 0, 0, 1)
rgba(0, 0, 0, 0.5)
rgba(0, 255, 0, 0.7)
rgba(0%, 100%, 0%, 0.2)
24

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CORES EM CSS
Cores em HSL
H = Hue (é um grau na roda de cores... vai de 0 até 360)
- 0 ou 360 é vermelho, 120 verde e 240 azul
S = Saturação (0%-99% sobras de cinzas ... 100% é cor total)
L = Lightness -> 0% luz apagada (preto) ... 100% luz total (branco)
25

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CORES EM CSS
Cores em HSL
H = Hue (é um grau na roda de cores... vai de 0 até 360)
- 0 ou 360 é vermelho, 120 verde e 240 azul
S = Saturação (0%-99% sobras de cinzas ... 100% é cor total)
L = Lightness -> 0% luz apagada (preto) ... 100% luz total (branco)
Problemas de suporte: Todos Firefox, Chrome e Safari... só IE 9+, Opera 10+
a CSS
{ : ; }.umaespeciedeverde color hsl(120, 65%, 75%)
26

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CORES EM CSS
Cores em HSLa
É o mesmo que o HSL ... mas inclui a transparência
- Totalmente opaco
- Totalmente transparente
Problemas de suporte: Todos Firefox, Chrome e Safari...
A= 0
A= 1
só IE 9+, Opera 10+
a CSS
{ : ; }.umaespeciedeverde color hsl(120, 65%, 75%, 0.7)
27

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CORES EM CSS
Problemas de suporte?? Outra vez o raio do IE pah!!
Então alguns métodos só funcionam no IE apartir da versão 9 ...
Posso? E que se lixe quem usa os Internet Explorer antigos?
Como faço isto??
Não os posso usar???
Quero/preciso de usar transparências nas cores...
28

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 29
CORES EM CSS
Fake it... till you make it!
Usamos as transparências...
fall-backs
não abdicamos!
E aproximamos a cor o mais possível para que quem use IE veja uma
cor «parecida».
Já falamos de ? Ainda se lembram?
Lembram-se de termos visto que a ?última regra de CSS é que vinga

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 30
CORES EM CSS
a CSS
{
: ;
: ;
}
.onossoverde
color
color
#00FF00
rgba(0, 255, 0, 0.7)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 31
CORES EM CSS
a CSS
{
: ;
: ;
}
.onossoverde
color
color
#00FF00
rgba(0, 255, 0, 0.7)
Os ... usam a última declaração.
Enquanto ... O Internet Explorer a última declaração.
browsers bons
não entende

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 32
CORES EM CSS
Excelente leitura sobre cores
http://tableless.com.br/sobre-cor-e-webdesign
http://tableless.com.br/cor-webdesign-2/

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 33
CORES EM CSS: OPACIDADE
Outra propriedade muitas vezes útil ao trabalhar com cores é
a opacity. Pode assumir valores de 0 até 1. Cuidado que, para
uma opacidade de 50% escreve-se e não .0.5 0,5
a CSS
{
: ;
: ;
: ;
: ;
: ; /* IE9- */
}
#z6
width
height
background-color
opacity
filter
200px
200px
#00F
0.2
Alpha(opacity=20)
a HTML
<div ></div>=’’z6’’id

Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
b Estilos em CSS
34
DOM & HEREDITARIEDADE
Antes de falarmos de HEREDITARIEDADE é preciso perceber o .
Todos os documentos de HTML geram uma DOM ( ).
O DOM é uma árvore de
hierarquia dos vários elementos.
Todos os documentos HTML são
árvores.
DOM
Document Object Model

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 35
HTML
BODYHEAD
META LINKTITLE
LI
UL
LI LI
- Árvores de documentos HTML são constituídas por elementos HTML.
- É tal e qual a árvore genealógica da familía de cada um de nós...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 36
HTML
BODYHEAD
META LINKTITLE
LI
UL
LI LI
Um é um elemento que está conectado mas mais alto no DOM.ANCESTOR
ANCESTOR

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 37
HTML
BODYHEAD
META LINKTITLE
LI
UL
LI LI
Um refere-se a qualquer elemento que está conetado mas
mais abaixo no DOM
DESCENDANT
DESCENDENTE
DESCENDENTES

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 38
HTML
BODYHEAD
META LINKTITLE
LI
UL
LI LI
Um (pai) é um elemento que está conectado e directamente acima
de um elemento na DOM.
PARENT
PARENT

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 39
HTML
BODYHEAD
META LINKTITLE
LI
UL
LI LI
Um (filho) é um elemento que está conectado e directamente
abaixo de um elemento na DOM.
CHILD
CHILD

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 40
HTML
BODYHEAD
META LINKTITLE
LI
UL
LI LI
Um (irmão) é um elemento que partilha o mesmo pai que outro
elemento.
SIBLING
PARENT
SIBLINGS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 41
Num papel, faça o DOM para o ficheiro HTML que pode encontrar em:
http://cesae.afonsogomes.com/dom.html
EXERCICIO: Compreendendo o DOM.
HTML
BODYHEAD
META METATITLE
UL
LINK ...
...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 42
HTML
BODYHEAD
P
EM
Para compreendermos heranças, vamos usar este bloco de código:
a HTML
<p> <em> </em> </p>Parágrafo com uma palavra enfatizada no meio
Reparem que o está dentro do .
Ou seja, é um filho do .
<em> <p>
<em> <p>
HEREDITARIEDADE

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 43
HEREDITARIEDADE
HTML
BODYHEAD
P
EM
Vamos usar também este estilo:
Apareceu tudo a ?
Incluindo a palavra enfatizada?
O herdou a cor azul do seu elemento pai!
azul
<em>
Vamos usar também este estilo:a CSS
p { : ; }color blue
Note que não criamos estilos para o !<em>

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 44
HEREDITARIEDADE
- Implementada para facilitar a vida a quem escreve o CSS
- Torna os ficheiros CSS mais leves, mais rápidos de fazer o download
e mais fáceis de manter.
Mas serão todas as propriedades herdadas?

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 45
HEREDITARIEDADE
Mas serão todas as propriedades herdadas?
NÃO! Nem todas são herdadas.
- Se todas fossem herdadas teríamos muito mais trabalho
- Muitas teriam de ser desligadas para elementos filhos
- Na generalidade, só as propriedades que simplificam o nosso
trabalho são herdadas

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 46
HEREDITARIEDADE
a HTML
<p> <em> </em> </p>Parágrafo com uma palavra enfatizada no meio
Um exemplo, ainda no nosso parágrafo:
Vamos definir uma border para o nosso parágrafo:
a CSS
p { : ; }border 1px solid #FF0000

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 47
HEREDITARIEDADE
Não herdou pois não?
Para o elemento também ter uma border teria de ficar assimem
a CSS
p
em
{ : ; }
{ : ; }
border
border
1px solid #FF0000
1px solid #FF0000
Ou como já vimos antes ... fica melhor assim:
a CSS
p em, { : ; }border 1px solid #FF0000

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 48
HEREDITARIEDADE
Então que propriedades são herdadas?

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 49
HEREDITARIEDADE
As seguintes propriedades são herdadas:
azimuth, border-collapse, border-spacing, caption-side, color, cursor,
direction, elevation, empty-cells, font-family, font-size, font-style, quotes,
font-variant, font-weight, font, letter-spacing, line-height, list-style-image,
list-style-position, list-style-type, list-style, orphans, pitch-range, pitch,
richness, speak-header, speaknumeral, speak-punctuation, speak,
speechrate, stress, text-align, text-indent, text-transform, visibility,
voice-family, volume, whitespace, widows, word-spacing
Muitas não são? Podemos dividir por grupos...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 50
HEREDITARIEDADE
Propriedades relacionadas com TEXTO que são herdadas
direction, elevation, empty-cells, , , , quotes,
, , , , , list-style-image,
speechrate, stress, , , , visibility,
voice-family, volume, whitespace, widows,
font-family font-size font-style
font-variant font-weight font letter-spacing line-height
text-align text-indent text-transform
word-spacing

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 51
HEREDITARIEDADE
Propriedades relacionadas com LISTAS que são herdadas
font-variant, font-weight, font, letter-spacing, line-height, ,
, , , orphans, pitch-range, pitch,
list-style-image
list-style-position list-style-type list-style

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 52
HEREDITARIEDADE
E... talvez a mais importante ... a propriedade COLOR é herdada
azimuth, border-collapse, border-spacing, caption-side, , cursor,
font-variant, font-weight, font, letter-spacing, line-height, list-style-image,
color

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 53
HEREDITARIEDADE
E a propriedade font-size é herdada?
A resposta simples é: .
No entanto, é herdada de uma maneira diferente das outras.
Os descendentes não herdam o ... herdam um
Vamos ver isso mais à frente depois de falarmos de unidades.
SIM
valor calculadovalor

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 54
SELECTORES DE CSS
A V A N Ç A D O S . . .
Agora que vimos o que é DOM e algumas questões da hereditariedade
podemos voltar aos .selectores de CSS
Não podemos saber só os simples!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 55
SELECTORES DE CSS AVANÇADOS
a HTML
<section>
<div >
<p> <em > </em> </p>
</div>
<div >
<ul >
<li> </li>
<li> <a > </a></li>
</ul>
<ul >
<li><a > </a></li>
<li > </li>
<li> </li><li> </li><li> </li><li> </li><li> </li>
</ul>
</div>
<img >
</section>
id
class
id
id
href class
class
href class
class
src alt
=’’caixa1’’
Parágrafo. =’’enf’’ Enfatizado aqui .
=’’caixa2’’
=’’umalista’’
Coisa 1
Coisa 2 =’’#’’ =’’linktipo1’’ LINK
=’’outralista’’
=’’#’’ =’’linktipo2’’ Elemento 1
=’’elem2’’ Elemento 2
3 4 5 6 7
=’’umaimagemqq.jpg’’ =’’QQ Coisa’’

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 56
a CSS
<style type=’’text/css’’>
</style>
body
p
#umalista
.outralista
{ : ; }
{ : ; }
{ : }
{ : }
color
color
color
color
#FF0000
green
purple
pink
SELECTORES DE CSS ... AVANÇADOS
Já vimos os básicos: Elementos ... ids ... classes
Agora vamos aos mais complexos...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 57
a CSS
* { : ; }border 1px solid #FF0000
SELECTOR UNIVERSAL
O selector Universal atinge TODOS os elementos do documento

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
p > em { : ; }font-weight bold
CHILD SELECTOR
Um child selector (selector de filho) atinge o filho de um elemento.
Neste exemplo, pretende-se atingir o filho doem p
a CSS
#caixa1 em { : ; }border 2px dotted blue
DESCENDANT SELECTOR
Um dos mais comuns tipos de selectores. (Não usa qq símbolo)
Esta é outra maneira de atingir o mesmo elemento .em
58

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
.elem2 ~ li { : ; : ; }color font-weightgreen bold
General Sibling Selector
Similar ao selector anterior mas...
Atinge todos os elementos seguintes e não só um.
a CSS
.elem2 + li { : ; }color red
Adjacent Sibling Selector
Atinge o sibling (irmão) adjacente (seguinte) de um elemento
Esta é outra maneira de atingir o mesmo elemento .em
59

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
60
a CSS
img[alt] { : ; }border 3px solid #000000
Selectores de Atributos (Parte 1 de 4)
Atinge um elemento que possua um determinado atributo.
Neste exemplo estamos a atingir todas as s que tenham um<img> alt

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
61
a CSS
img[src=’’umaimagemqq.jpg’’] { : ; }border 5px solid #FF0000
Atinge um elemento que possua um determinado atributo e com
um valor exactamente igual ao que queremos.
Neste exemplo estamos a atingir todas as s que tenham a
igual a «umaimagemqq.jpg»
<img> src

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
62
a CSS
img[src^=’’umaimagemqq’’] { : ; }border 10px solid #00FF00
Atinge um elemento que possua um determinado atributo
mas que o valor do atributo comece por (no ex) umaimagemqq
Neste caso estamos a atingir a do nosso exemplo<img>
Adicionem outra com outro nome e vejam se atinge!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
63
a CSS
img[src*=’’umaim’’] { : ; }border-bottom 20px solid #0000FF
Atinge um elemento que possua um determinado atributo que no
valor a expressão específica.
Neste caso: estamos a atingir todas as cuja src contenham o
termo ‘’umaim’’
contenha
<img>

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
64
PSEUDO-CLASSES (também conhecidos como: Pseudo-elementos)
‘’Pseudo-classes são usadas para providenciar estilos não para
elementos, mas para vários estados de certos elementos’’
The W3C Consortium

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
65
PSEUDO-CLASSES (também conhecidos como: Pseudo-elementos)
Alguém consegue dar um exemplo?

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
66
a CSS
PSEUDO-CLASSES em links
Assim podemos atingir os vários estados possíveis de um LINK
Geralmente são as primeiras regras de CSS que qualquer iniciado
quer saber como se faz.
a:link
a:visited
a:hover a:focus
a:active
{ : ; }
{ : ; }
{ : ; }
{ : ; }
color
color
color
color
GoldenRod
Fuchsia
FireBrick
SpringGreen
,

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
67
a CSS
a:link
a:visited
a:hover a:focus
a:active
{ : ; }
{ : ; }
{ : ; : ; }
{ : ; }
color
color
color text-decoration
color
GoldenRod
Fuchsia
FireBrick none
SpringGreen
,
Ahh e tal ... E COMO É QUE SE TIRA AQUELE SUBLINHADO? :D

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
68
a CSS
PSEUDO-CLASSES em links (Continuação)
Também podemos atingir links com uma determinada class...
a.linktipo1:link
a.linktipo1:visited
a.linktipo1:hover a.linktipo1:focus
a.linktipo1:active
{ : ; }
{ : ; }
{ : ; }
{ : ; }
color
color
color
color
GoldenRod
Fuchsia
FireBrick
SpringGreen
,

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
69
a CSS
PSEUDO-CLASSES em parágrafos
Esta pseudo-class não representa bem um estado do elemento
Eu acho que foi uma simpatia do W3C para facilitar e reduzir em
muito o código que era necessário para coisas MUITO usadas.
<p>
p:first-line
p:first-letter
{ : ; }
{ : ; : ; }
color
color font-size
green
red 50px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
70
a CSS
Serve para discriminação!! Em CSS não é feio discriminar!
Neste exemplo: a regra aponta ao elemento com class outralista que
tenha elementos descendentes e aplica o estilo a todos
menos ao elemento com a class elem2
<li>
<li>
.outralista li:not(.elem2) { : ; }color red
PSEUDO-CLASSES... todas menos uma!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
Atinge o primeiro filho de um conjunto de elementos irmãos
.outralista li:first-child { : ; }color red
O PRIMEIRO FILHO... Dizem que é o preferido!
71
Atingir ambos os primeiros filhos das nossas duas listas? Simples!
a CSS
ul li:first-child { : ; }color red

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
Atinge o último filho de um conjunto de elementos irmãos
.outralista li:last-child { : ; }color green
O ÚLTIMO FILHO... Dizem que costuma vir por acidente...
72

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
Neste caso é atingido o 4º filho (n=4) dos irmãos <li>
.outralista li:nth-child(4) { : ; }color green
UM FILHO QUALQUER
73
Chamamos-lhe o !Enésimo

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
Em inglês chama-se (= estranhos) aos números ímpares
e (= certos) aos números pares
ODD
EVEN
.outralista li:nth-child(odd)
.outralista li:nth-child(even)
{ : ; }
{ : ; }
font-size
font-weight
30px
bold
FILHOS PARES ... FILHOS ÍMPARES
74

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
Esta é outra maneira para atingir os mesmos elementos
que as regras do slide anterior. Pela matemática...
.outralista li:nth-child(2n+1)
.outralista li:nth-child(2n)
{ : ; }
{ : ; }
font-size
color
20px
red
FILHOS PARES ... FILHOS ÍMPARES
75

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
Estes pseudo-elementos servem para atingir a zona
e a
.
imediatamente
antes do elemento começar zona imediatamente depois do
elemento acabar
São muito, muito usados actualmente...
a:before
a:after
{ : ; }
{ : ; }
content
content
‘’Isto é um ‘’
‘’ fantastico! ‘’
O ANTES e o DEPOIS de um elemento
76

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
::selection
::-moz-selection
{ : ; : }
{ : ; : }
background-color color
background-color color
#78A04C #FFF
#78A04C #FFF
SELECTION: Quando o user seleciona coisas com o rato
77
Este pseudo-estado não é aplicado a nenhum elemento em especifico
Serve apenas para o caso de queremos evitar aquele azul típico que
aparece .
NOTE: Estes selectores ser agrupados!
no texto quando o utilizador selecciona bocados
não podem

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
www.w3.org/community/webed/wiki/Advanced_CSS_selectors
www.w3.org/community/webed/wiki/CSS/Selectors
INFORMAÇÕES ADICIONAIS:
78
Na W3C... entidade que regula o HTML e CSS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
SELECTORES DE CSS ... AVANÇADOS (EXERCICIO)
Copie este código
para um ficheiro seu.
As instruções encontram-se no ficheiro. :)
http://cesae.afonsogomes.com/ex-selectores.html
79

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CSS DE RESET
- Servem para regularizar e na visualização
de sites em diferentes browsers.
- Servem como ponto de partida para todo o nosso CSS.
- Evitam dissabores futuros
- Todos usam-nas ... e usam sempre uma de apenas 2 ou 3 possíveis!
normalizar inconsistências
80
Antes de avançar .. vamos falar de folhas de RESET

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CSS DE RESET
81
O de ... Já foi a mais famosa mundialmente
Já foi o padrão. Mas não está tão completa como podia estar.
Actualmente, a mais usada é o
Bastante completa. É usada por quem sabe muito de internet...
CSS RESET Eric Meyers
NORMALIZE.CSS
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
Vamos ver como podemos usar a Normalize.css

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
UNIDADES EM CSS
px in cm
mm pt
pc
ex
- pixel - polegada - centímetro
- milimetro - ponto (1pt = 1/72polegadas)
- pica (1pc = 12pt) - percentagem
(1ex é x-height da font... normalmente é 50% do font-size)
- 1em é o actual font-size. 2em é 2 vezes o tamanho actual
da font. Sempre em relação ao elemento pai (e com heranças)
%
em
82
Em CSS temos vários tipos de unidades de tamanhos:
O meu tipo de letra x-heightRelativa Absoluta

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CSS PARA FONTS E TEXTO
Agora que sabemos tudo sobre selectores, cores, unidades
e folhas de reset... vamos à formatação de texto
83
Vamos começar por coisas interessantes tipo:
embeber no nosso site fonts que websafe
vamos fugir ao banal!
não são

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
84
Frequentemente ve-se isto:
a CSS
Primeiro aprendamos a declarar uma família de fonts:
p
a
{ : ; }
{ : ; }
font-family
font-family
Arial, Helvetica, sans-serif
’’Times New Roman’’, Georgia, serif
a CSS
body { : ; }font-family ‘Lato’, Arial, Helvetica, sans-serif

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Linkamos o ficheiro da font no da página e depois no CSS:<head>
a CSS
body { : ; }font-family ’Lato’, sans-serif
Embeber fonts ... GOOGLE STYLE: (http://www.google.com/fonts)
a HTML
<link
>
href
rel
=’’http://fonts.googleapis.com/css?family=Lato:300’’
=’’stylesheet’’ =’’text/css’’type
85

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Neste método temos de ter os ficheiros da font no nosso servidor.
a CSS
{
: Gentium;
: url('Gentium.eot');
: url('Gentium.eot?') format('eot'),
url(’Gentium.woff') format('woff'),
url(’Gentium.ttf') format('truetype'),
url(’Gentium.svg#Gentium') format('svg');
}
@font-face
font-family
src
src
font-style font-weight
/* IE9 */
/* IE6-IE8 */
/* Browsers Modernos */
/* Safari/Android/iOS */
/* Legacy iOS */
normal normal: :; ;
Embeber fonts genéricamente: @font-face
86

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
{ : Gentium; : url('Gentium.eot');
: url('Gentium.eot?') format('eot'), url(’Gentium.woff') format('woff'),
url(’Gentium.ttf') format('truetype'),url(’Gentium.svg') format('svg');
}
{ : ;
{ : ;
@font-face
h1
p
font-family src
src
font-style font-weight
font-family
font-family
normal normal
‘Gentium’, ‘’Times New Roman’’, serif
‘Lato’, Arial, Helvetica, serif
: :; ;
Até podemos ter os dois métodos...
a HTML
<html>
<head><link >
<link
></head>
<body> <h1> </h1> <p> </p></body>
</html>
href rel
href
rel
=’’estilos.css’’ =’’stylesheet’’ =’’text/css’’
=’’http://fonts.googleapis.com/css?family=Lato:300’’
=’’stylesheet’’ =’’text/css’’
Um heading Um parágrafo
type
type
87

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-family Arial, Helvetica, sans-serif
font-size: 13px;
line-height: 15px;
font-weight: bold;
font-style: italic;
text-align: right;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
word-spacing: 2px;
Propriedades de CSS para texto
PODE ASSUMIR
Qualquer outro tipo
de letra, websafe ou
não.
Já vimos antes esta
propriedade.
Tipo de letra
88

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
font-weight: bold;
font-style: italic;
text-align: right;
word-spacing: 2px;
font-size 13px
PODE ASSUMIRPODE ASSUMIR
xx-small, x-small, small,
medium, large, x-large,
xx-large, larger, smaller
length (px, em, ...)
inherit
Tamanho da font
89

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
font-weight: bold;
font-style: italic;
text-align: right;
word-spacing: 2px;
line-height 15px
normal
number (2.5)
length (px, em, ...)
percentage (x%)
inherit
Tamanho das linhas
90

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-style: italic;
text-align: right;
word-spacing: 2px;
font-weight bold
normal, bold, bolder,
lighter, inherit
100, 200, 300, 400
500, 600, 700, 800
900
‘’Peso’’ da font
91

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-weight: bold;
text-align: right;
word-spacing: 2px;
font-style italic
Estilo da font
normal
italic
oblique
inherit
92

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-weight: bold;
font-style: italic;
word-spacing: 2px;
text-align right
left
right
center
justify
inherit
Alinhamento
93

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-weight: bold;
font-style: italic;
text-align: right;
word-spacing: 2px;
text-decoration none
Decoração
none
underline
overline
line-through
inherit
94

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-weight: bold;
font-style: italic;
text-align: right;
word-spacing: 2px;
text-transform none
none
capitalize
lowercase
uppercase
inherit
Transformação
95

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-weight: bold;
font-style: italic;
text-align: right;
word-spacing: 2px;
letter-spacing normal
normal
length
inherit
Espaçamento Letras
96

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
}
p
font-size: 13px;
line-height: 15px;
font-weight: bold;
font-style: italic;
text-align: right;
word-spacing 2px
Espaçamento palavras
normal
length
inherit
97

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
a CSS
{
: ;
: ;
: ;
}
p
text-indent
text-overflow
font-variant
20px
clip
small-caps
Outras propriedades para texto
PODE ASSUMIR
normal
length
inherit
PODE ASSUMIR
clip
ellipsis
normal
small-caps
inherit
98

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
FONTS: SHORTHAND NOTATIONaCSS
{
: ;
: ;
: ;
: ;
: ;
}
p.tipoletra1
font-family
font-size
line-height
font-weight
font-style
Arial, Helvetica, sans-serif
20px
22px
bold
italic
aCSS
{
: ;
}
p.tipoletra2
font italic bold 20px/22px Arial, Helvetica, sans-serif
99

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
EXERCICIO
100
Para treinar tipografia:
Faça 3 Headings, cada um seguido de 2 parágrafos
de texto Lorem Ipsum (www.lipsum.org).
Para cada heading e para cada parágrafo use tipos
de letra diferentes com propriedades diferentes.
Deve usar 3 fonts do google.com/fonts e 3 fonts geradas
no site fontsquirrel.com
Alcance um bom efeito visual para cada um dos 3 conjuntos.
H2
P
P
H2
P
P
H2
P
P

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
FONTS: TEXT-SHADOWaCSS
{
: ;
}
p.comsombra
...
...
text-shadow 5px 5px 5px #0000FF
Permite fazer uns efeitos bonitos (ás vezes muito subtis)
X Y blur cor
A101

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
FONTS: TEXT-SHADOW ... experimentem
aCSS
{ : ; }
{ : ; }
{ : ,
; }
{ : ; }
{ : ; }
h1
h1.sombra1
h1.sombra2
h1.sombra3
h1.sombra4
font
text-shadow
text-shadow
text-shadow
text-shadow
50px Arial, sans-serif
5px 5px 5px #0000FF
10px 2px #FF0000
13px 4px #FF0000
1px 1px 1px #B6B6B6
-5px -5px #FF0000
a HTML
<h1 > </h1>
<h1 > </h1>
<h1 > </h1>
<h1 > </h1>
class
class
class
class
=’’sombra1’’ Heading com sombra tipo 1
102

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
FONTS: TEXT-SHADOW
Observem o potencial do text-shadow
http://cesae.afonsogomes.com/exemp-tshadow.html
103

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora! 104
BACKGROUNDS
- Incrivelmente importantes em qualquer site. Fornecem o ‘’contexto’’
geral onde os conteúdos do site se enquadram.
- Podem ser cores sólidas ou fotografias ou texturas.. e até já há
quem use vídeos como fundo para um website.
- Use-se o que se usar... convém sempre ser de um tamanho reduzido

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS
Sem mais demoras... podemos dar uma cor de background assim:
aCSS
{ : ; }body background-color #BDC3C7
Depois, claro, podemos definir fundos para cada área do nosso site:
aCSS
{ : ; }
{ : ; }
header
footer
background-color
background-color
#2c3e50
#34495e

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS
Também podemos ter imagens de fundo
aCSS
{ : ; }body background-image url(img/fundo.png)
Estas imagens são normalmente quadrados de dimensões reduzidas.
Do género de 20x20px ou 50x50px...
Isto porque a propriedade dá uma ajuda.background-repeat

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS
Então vejamos o background-repeat
aCSS
{
: ;
: ;
}
body
background-image
background-repeat
url(img/fundo.png)
repeat
Pode assumir os valores:
(repete horizontalmente) (repete verticalmente)
(não há qualquer repetição) (repete segundo x e y)
repeat-x repeat-y
no-repeat repeat

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS
Também temos a propriedade background-position
Usado quando temos imagens com várias «subimagens» (SPRITES)
aCSS
{
: ;
: ;
}
body
background-image
background-position
url(img/fundo.png)
0 -100px
Pode assumir os valores em pixeis ou percentagens ou keyords:
ou ou para o primeiro valor (horizontal)
ou ou para o segundo valor (vertical)
right center left
top center bottom

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS Utilidade do background-position
0px-100px
-130px
-300px
X
Y
aCSS
{
: ;
: ;
: ;
: ;
}
{
: ;
: ;
: ;
: ; }
#sec1
#sec2
height
background-image
background-position
background-repeat
height
background-image
background-position
background-repeat
130px
url(img/fundo.png)
0 0
repeat-x
170px
url(img/fundo.png)
0 -130px
repeat-x

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS Alguns exemplos de Sprites...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS
Para notação shorthand usamos a propriedade background
aCSS
{ :
}
body background [background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
Esta é a sintaxe!
;

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS Para notação shorthand: background
aCSS
{ :
; }
body background #FF00FF url(imagens/fundo.png) repeat fixed
center center
Isto é o comum de se ver...
aCSS
{
: ;
}
{
: ;
}
#footer
#header
background
background
#FF00FF url(imagens/footer.png) repeat
#56D241 url(imagens/header.png) repeat-x

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS EXERCICIO
aCSS
{
: ;
: ;
: ;
: ;
}
{
: ;
: ;
: ;
}
#sec1
#sec2
height
background-image
background-image
background-repeat
height
background-image
background-repeat
500px
#FF00FF
url(fundo1.png)
repeat
500px
url(fundo2.png)
repeat
Crie um HTML com 2 secções. Arranje 2 imagens para dar de fundo a
cada secção. Faça ao seu
gosto, o CSS não tem que
ficar igual a este.
Vá mudando as
propriedades e observe
as diferenças.

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
BACKGROUNDS GRADIENTS
aCSS
{
: ;
}
#sec1
background-image linear-gradient(to bottom, white, blue)
Podemos também criar gradientes com o background-image, assim:
Ou assim:
aCSS
{
: ;
}
#sec1
background-image linear-gradient(to right, #cf2b4f, #980021)
A sintaxe é um pouco confusa. Este artigo está excelente:
tableless.com.br/como-usar-gradient-no-css-de-forma-consciente

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
INICIO PROJECTO PESSOAL
aHTML
...
...
...
...
<header>
</header>
<section>
</section>
<section>
</section>
<footer>
</footer>
aHTML
...
...
<nav>
<ul>
<li> </li>
</ul>
</nav>
Criar um index.html (página inicial) e outras
Definir tags no <head>
Definir zonas na página, inserir h1s, h2s, Ps, etc..
Fazer CSS inicial (com RESET e alguma tipografia)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL
Antes de começarmos a ver o CSS BOX MODEL relembremos o
conceito de elemento e elemento de
Começa a sua renderização numa nova linha.
Força uma «quebra de linha» sempre que é usado. Temos como
exemplos: , , , , headings, etc...
Começa a sua renderização onde quer que o ponha.
Não forçam uma «quebra de linha» de linha no browser.
Exemplos: , , , , etc...
inline block
Block Element:
Inline Element:
<header> <section> <div> <p>
<em> <i> <strong> <span>

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL (Tudo em html é uma caixa!)
Conteúdo
Padding
Border
Margin
width
Conteúdo:
Padding:
Border:
Margin:
É a caixa do nosso elemento
em si. Onde está o conteúdo. Ex:
Área que rodeia o elemento.
É a borda que envolve o
elemento e o seu padding.
Limpa a área à volta da nossa
caixa. Frequente ser usada para
layouts, definindo espaçamento entre
caixas. É sempre transparente!!
A reflete-se no
elemento e no padding.
<p>
background
height

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Conteúdo
Padding
Border
Margin
width
WIDTH e HEIGHT referem-se à largura e altura
da área do conteúdo.
Adicionando padding, border e margin não afecta
a área do conteúdo mas aumenta o tamanho
geral da caixa do elemento.
height
Se quisermos uma caixa com 100px no geral, com
10px de margem e 10px de padding de cada lado
precisariamos de fazer a largura do conteúdo ser
70px
aCSS
{ : ; : ; ; }#anossacaixa width margin padding:70px 10px 5px
CSS DimensõesBOX MODEL

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
width: 70px
Padding
Border
Margin
Padding, borders e margens podem ser
aplicados a todos os lados de um
elemento ou a cada lado individualmente
Margens podem ter valores negativos!!
aCSS
{
: ;
: ;
;
}
#acaixa
width
margin
padding:
70px
10px
5px
70px 5 0 105010

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Elemento
Padding
Border
Margin
width
height
aCSS
{
: ;
: ;
: ;
}
elemento
width
min-width
max-width
50%
250px
800px
width
min-width
max-width
height
min-height
max-height

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Padding
Elemento
Padding
Border
Margin
width
height
aCSS
{
: ;
: ;
;
: ;
}
elemento
padding-top
padding-right
padding-bottom:
padding-left
20px
10px
20px
10px
padding
padding-top
padding-bottom
padding-left
padding-right

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Padding (Exemplos de Short hands)
aCSS
{
: ;
: ;
;
: ;
}
elemento
padding-top
padding-right
padding-bottom:
padding-left
20px
10px
20px
10px
aCSS
{
: ;
}
elemento
padding 20px 75px
aCSS
{
: ;
}
elemento
padding 20px 30px 50px
aCSS
{
: ;
}
elemento
padding 40px
Top Bottome = 20px
Left Righte = 75px
TODAS = 40pxTop Right Left Bottom= 20px e = 30px = 50px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Margin
Elemento
Padding
Border
Margin
width
height
aCSS
{
: ;
: ;
;
: ;
}
elemento
margin-top
margin-right
margin-bottom:
margin-left
20px
10px
20px
10px
margin
margin-top
margin-bottom
margin-left
margin-right

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Margin (Exemplos de Short hands)
aCSS
{
: ;
: ;
;
: ;
}
elemento
margin-top
margin-right
margin-bottom:
margin-left
20px
10px
20px
10px
aCSS
{
: ;
}
elemento
margin 20px 75px
aCSS
{
: ;
}
elemento
margin 20px 30px 50px
aCSS
{
: ;
}
elemento
margin 40px
Top Bottome = 20px
Left Righte = 75px
TODAS = 40pxTop Right Left Bottom= 20px e = 30px = 50px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Border
Elemento
Padding
Border
Margin
width
height
aCSS
{
: ;
: ;
: ;
}
elemento
border-width
border-style
border-color
5px
solid
red
border
border-width
border-style (Obrigatória)
border-color

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Elemento
Padding
Border
Margin
width
height
aCSS
{
: ;
}
elemento
border 5px solid red
border
border-width
border-style (Obrigatória)
border-color
CSS BOX MODEL Border (Short Hand)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Para uma border surtir efeito, uma deve ser definida
Sem ... nada feito!
Esta propriedade pode assumir os seguintes valores:
border-style
border-style
solid
dotted
dashed
double
groove
ridge
inset
outset
Podem ver exemplos em:
http://www.w3schools.com/css/css_border.asp
CSS A propriedadeBOX MODEL Border-style

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
border-left
border-left-width
border-left-style
border-left-color
Para a border, podemos querer definir individualmente cada face...
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
Short hands
CSS BOX MODEL Border

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Dimensões totais (Exercício 1/4)
aCSS
: ;
: ;
: ;
width
height
border
300px
100px
5px 4px 10px 15px
Largura Total Altura Total
300 + 4 + 15 = 319px 100 + 5 + 10 = 115px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
aCSS : ;
: ;
: ;
: ;
width
height
border
padding
900px
35px
0 1px 1px 10px
20px
900 + 1 + 10 + 20 + 20 = 951px 35 + 0 + 1 + 20 + 20 = 76px35 + 0 + 1 + 20 + 20 = 76px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
aCSS : ;
: ;
: ;
: ;
width
height
margin
padding
900px
200px
10px 15px
20px
900 + 15 + 15 + 20 + 20 = 970px 200 + 10 + 10 + 20 + 20 = 260px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
aCSS
: ;
: ;
: ;
: ;
: ;
width
height
margin
padding
border
440px
270px
10px
15px
20px 5px 10px
440 + 10 + 10 + 15 + 15 + 5 +
+ 5 = 500px
270 + 10 + 10 + 15 + 15 + 20 +
10 = 350px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL
Ja vimos tudo do BOX Model ... voltemos a falar de elementos
e elementos . Algumas considerações só:
- respeitam todas as margins, padding e borders
- não são afectados pelos propriedade
- expandem em altura para alojar todos os seus conteúdos
- Ignoram Top e Bottom margins (se aplicadas)
- Ignoram os atributos e
- podem ser afectados pela propriedade
inline block
Block:
Inline:
vertical-align
width height
vertical-align

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Vertical Align
Perguntam vocês... mas já tinhamos visto a ?
Mas estamos a ver agora! Precisava era de falar do Box
Model primeiro. Portanto:
: serve para alinhar verticalmente elementos inline!
vertical-align
vertical-align
Não!
top
middle
bottom
baseline
length
%
sub
super
inherit
text-top
text-bottom

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Border-radius (nova em CSS3)
aCSS
{ ...
: ;
: ;
... }
elemento
border
border-radius
5px solid green
5px 5px 5px 5px

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
CSS BOX MODEL Border-radius (nova em CSS3)
aCSS
{ ...
: ;
: ;
... }
elemento
border
border-radius
5px solid green
5px 5px 5px 5px
1
3 4
2
1 2 3 4

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
aCSS
.cantos {
: ;
: ;
;
: ;
: ;
}
border
background
width:
height
border-radius
2px solid #16A085
#BDC3C7
200px
200px
5px
CSS BOX MODEL Border-radius
aCSS
.circulo {
: ;
: ;
;
: ;
: ;
}
border
background
width:
height
border-radius
2px solid #16A085
#BDC3C7
200px
200px
50%

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
aCSS
.caixacomestilo {
: ;
: ;
;
: ;
: ;
}
border
background
width:
height
border-radius
2px solid #16A085
#BDC3C7
200px
200px
5px 15px 5px
CSS BOX MODEL Border-radius
aCSS
.elipse {
: ;
: ;
;
: ;
: ;
}
border
background
width:
height
border-radius
2px solid #16A085
#BDC3C7
400px
200px
50%

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Suporte de CSS3 VENDOR PREFIXESpelos browsers e
aCSS
elemento {
: ;
: ;
: ; }
-moz-border-radius
-webkit-border-radius
border-radius
20px 10px 20px
20px 10px 20px
20px 10px 20px
Alguns browsers
O IE (lógico!) só as suporta a partir da versão 9. E com o IE não há volta
a dar.
Já alguns browsers mais antigos ( / ) não suportam, mas
permitem o que chamamos .... São regras suportadas por cada
browser «para testes» e podemos usa-las ou não. Depende de cada um de nós!
não suportam as novas regras de CSS3
Firefox 3- Safari 5-
Vendor Prefixes

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedade nova CSS3 box-shadowaCSS
{
: ;
}
.caixacomsombra
...
...
box-shadow 5px 5px 5px #0000FF
Como já vimos Vendor Prefixes... podemos falar do box-shadow
X Y blur cor
140

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedade nova CSS3 box-shadowaCSS
{
: ;
: ;
: ;
}
.caixacomsombra ...
...
-webkit-box-shadow
-moz-box-shadow
box-shadow
5px 5px 5px #0000FF
5px 5px 5px #0000FF
5px 5px 5px #0000FF
Entao ... correctamente:
141

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITIONING e FLOATING ... finalmente!
Talvez o mais importante em CSS
142
Dizem vocês: temos aqui umas tantas divs, tipo a sidebar e o corpo
como é que as podemos pôr lado a lado? É o que vamos ver agora!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITIONING
Temos 4 tipos diferentes de
posicionamentos:
143
aCSS
: ;
: ;
: ;
: ;
position
position
position
position
static
relative
absolute
fixed
Que, dependendo do tipo usado,
podem ter a acompanhar
propriedades de coordenadas..
aCSS
: ;
: ;
: ;
: ;
top
bottom
right
left
100px
20%
inherit
auto

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
- É a configuração por padrão para
todos os elementos.
- Posiciona-se de acordo com o
‘’fluir normal’’ da página (ordem
dos elementos HTML, etc...)
- Propriedades como
não funcionam
top
left
: ;
: ;
0
100px
144
aCSS
: ;position static
position: relative;
position: absolute;
position: fixed;
aCSS
: ;
: ;
: ;
: ;
top
bottom
right
left
100px
20%
inherit
auto
POSITION: STATIC

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: STATIC
- É a configuração por padrão para
todos os elementos.
- Posiciona-se de acordo com o ‘’fluir normal’’ da página (ordem
dos elementos HTML, etc...)
- Propriedades como não funcionamtop left: ; : ;0 100px
145
aCSS
: ;position static
position: relative;
position: absolute;
position: fixed;

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: RELATIVE
- Posiciona-se relativamente à sua
posição por defeito.
- Segue o ‘’normal fluir’’ do HTML, mantém o espaço previamente
ocupado.
146
aCSS
: ;
position: static;
position: absolute;
position: fixed;
position relative
aCSS
: ;
: ;
: ;
position
top
left
relative
100px
50px
- A caixa move-se 100px para e
50px para a em relação ao
canto superior esquerdo da sua posição
anterior
baixo
direita

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: RELATIVE ... experimentem
147
a CSS
{
: ;
: ;
: ;
}
.segundo
position
top
left
relative
200px
50px
a HTML
<p> </p>
<p > </p>
<p> </p>
Lorem Ipsum 1
=’’segundo’’ Lorem Ipsum 2
Lorem Ipsum 3
class
Gerar 2 parágrafos em lipsum.org para cada um dos s<p>

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: ABSOLUTE
- O elemento é removido (levantado)
do elemento que o contém, e posicionado
de acordo com a esquina da janela
(viewport) do utilizador.
148
aCSS
: ;
position: static;
position: relative;
position: fixed;
position absolute
aCSS
: ;
: ;
: ;
position
top
left
absolute
0
0
- A caixa posiciona-se no canto
superior esquerdo da janela, e não
em relação ao seu elemento pai.

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: ABSOLUTE ... experimentem
149
aCSS
{ : ; : ; }
{ : ; : ; }
{ : ; : ; : ; : ; }
{ : ; : ; }
div
#box1
#box2
#box3
width height
background-color height
background-color position top left
background-color height
200px 200px
red 200px
green absolute 0 0
blue 200px
a HTML
<div ></div>
<div ></div>
<div ></div>
id
id
id
=’’box1’’
=’’box2’’
=’’box3’’

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: ABSOLUTE ... Falemos dos resultados...
150
- A nossa caixa #box2 efectivamente foi retirada da sua
posição e colocada nas coordenadas (0,0)
- Por causa da div #box2 ter saído do fluir normal do HTML,
a caixa #box3 ‘’subiu’’
- O documento HTML não tem CSS de RESET! (O browser
está a introduzir paddings no <body> sem lhe termos
dito para o fazer.
- Se o HTML estivesse normalizado, a caixa vermelha
não se via... ficava exactamente por baixo da caixa verde.
E se quisessemos que a #box2 ficasse por baixo da #box1?

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedade z-index
151
A propriedade z-index serve para ordernar pilhas de
elementos que se sobreponham no HTML (depois de lhe
aplicarmos CSS). Valor auto é o valor por defeito e podemos
atribuir números.
- No fundo, define camadas. Uma camada com z-index
maior é posta por cima de uma camada com um z-index
mais pequeno.
- Só funciona com posições explicitas.
acrescentarExperimentem z-index: ; à #box11

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedade z-index
152
Funcionou?
Nós não explicitamos a posição para a #box1 !!!! Que ficou
com valor por defeito a STATIC.
Acrescentem
NÃO!
Eu disse que só se aplica quando as posições são explicitas!
Resultou agora? :)
position: ; também à #box1relative

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
POSITION: FIXED
- Posição fixa de acordo com a janela
do browser (o viweport)
- Mantêm-se fixa todo o tempo! Não mexe se o user fizer scroll
vertical na página
153
aCSS
: ;
position: static;
position: relative;
position: absolute;
position fixed
aCSS
: ;
: ;
: ;
position
bottom
right
fixed
50px
50px
- A caixa fica fixa no canto inferior direito
a 50px do fundo e 50px da esquerda da
janela.

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
aCSS
{
: ;
: ;
: ;
: ;
: ;
: ;
}
#box
width
height
background-color
position
bottom
right
150px
30px
#78A04C
fixed
50px
50px
a HTML
<div ></div>
<p> </p>
<p> </p>
id=’’box’’
Lorem Ipsum 1
Lorem Ipsum 2
Fazer 20 s com texto gerado em lipsum.org<p>
POSITION: FIXED ... experimentem
154

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Floating (flutuar) faz com que elementos flutuem para um dos lados
do seu elemento contentor,
permitindo a outros elementos
fluirem à sua volta
Começou a ser usado para
‘’embrulhar’’ texto à volta
de imagens
Imaculada Com/Sem Som
by Vitor Almeida

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Floating (flutuar) faz com que elementos flutuem para um dos lados
do seu ,
permitindo a outros elementos
fluirem à sua volta
Começou a ser usado para
‘’embrulhar’’ texto à volta
de imagens
elemento contentor
Imaculada Com/Sem Som
by Vitor Almeida

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Floats servem para:
Ter texto ao lado e abaixo de uma imagem
Menus Horizontais
Galerias de fotos
Criar layouts completos de sites

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Uma caixa flutuada é posicionada
dentro do fluxo do documento e
depois retirada.... para então poder
ser flutuada para a esquerda ou direita
(da linha actual) tão longe quanto
possível.
Vai encostar sempre ao elemento
‘’contentor’’ dela ... o seu elemento pai,
geralmente...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Para onde ‘’vai’’ uma caixa flutuada?
- Encosta à fronteira do viewport (esquerda ou direita)
- Encosta à fronteira do elemento pai (o seu contentor)
- Encosta a outro elemento que esteja flutuado.
3 opções

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Opções possíveis:
Imaginemos isto:
float
float
float
float
: ;
: ;
: ;
: ;
right
left
none
inherit
a HTML
<img >
<p> </p>
src width height alt=’’imagem.jpg’’ =’’100’’ =’’100’’ =’’A imagem’’
Lorem Ipsum ...

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
Vamos ficar com isto:

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
aCSS
{ : ; }img float right

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
aCSS
{ : ; }img float left

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
FLOATING
aCSS
{
: ;
: ;
}
img
float
margin
left
0 20px 10px 0
Podemos aplicar margins, paddings
e borders a elementos flutuados
sem problemas!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CLEAR FLOATS (limpar floats)
Serve para limpar floats que venham de trás. Se não limparmos,
os elementos seguintes são colocados abaixo do float anterior pois
seguem o fluxo normal do documento naquele momento.
Opções possíveis: OU OU OU
OU
Contínuamos com o mesmo exemplo:
clear clear clear
clear clear
: ; : ; : ;
: ; : ;
right left none
inherit both
a HTML
<img >
<p> </p>
src width height alt=’’imagem.jpg’’ =’’100’’ =’’100’’ =’’A imagem’’
Lorem Ipsum ...
165

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Tinhamos visto que a nossa imagem foi flutuada à esquerda e o <p>
fluiu para a direita da imagem.
Se quisermos que o nosso <p> fique por baixo da nossa imagem flutuada
à esquerda...
aCSS
{ : ; }
{ : ; }
img
p
float
clear
left
left
166

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Agora imaginemos que tinhamos 2 imagens, uma flutuada à esquerda
e outra à direita, e queriamos que o <p> ficasse por baixo de ambas...
aCSS
{ : ; }
{ : ; }
{ : ; }
img.imagem1
img.imagem2
p
float
float
clear
left
right
left
167

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Problema comum em floats: Os caídos
Por vezes os floats originam problemas, digamos, caricatos.
width:
350px
width:
250px
width:
200px
float:
left
float:
left
float:
left
O que será que acontece??
Não cabemos
todos aqui!!!
width:
700px
168

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Problema comum em floats: Os caídos!
Por vezes os floats caem para posições que parecem esquisitas...
width:
700px
width:
350px
width:
250px
float:
left
float:
left
Parece estranho mas...
está a funcionar
exactamente
como tem de funcionar!
Não há
espaço
aqui!
width:
200px
float:
left
Soluções para isto????
169

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Problema comum em floats: Os caídos!
3 hipóteses de resolver isto!
width:
250px
width:
250px
float:
left
float:
left
width:
200px
clear:
left
1)
2)
left
Aumentar o contentor
Diminuir um dos nossos
elementos
3) Aplicar um
ao contentor que anda
aos trambolhões.
clear:
170

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Problema comum em floats: O colapso do pai
width:
250px
width:
200px
width:
200px
float:
left
float:
left
float:
left
O elemento pai colapsou!
Mais uma vez... parece estranho mas
Elementos pais vão ‘’embrulhar’’ (WRAP) em volta do conteúdo
somente quando este está no seu fluxo normal. Aqui estão todos
flutuados
está a funcionar como é suposto.
171

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Há imensas soluções para isto ... aqui vão 4 opções:
1)
left 400px
2)
both block ‘’ ‘’
Aplicar uma float e uma width ao elemento pai
{ : ; : ; }
Criar conteúdo gerado usando o pseudo-elemento :after
{ : ; : ; : ; }
Este conteúdo gerado, está no fluxo normal e então o bloco pai fará
o wrapping em volta do conteúdo gerado e assim dos floats também!
#boxpai
#boxpai:after
float width
clear display content
172

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
3)
inline-block
4)
hidenn
1) 3) 4)
Uma é que, automáticamente fazem o wrap a floats!
Obrigar o pai a portar-s como inline-block
{ : ; }
Aplicar um overflow hidden ao pai
{ : ; }
A soluções , e geram um novo «contexto de formatação de bloco»
Esta nova caixa funciona como qualquer outro tipo, com algumas
excepções.
#boxpai
#boxpai
display
overflow
173

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
O truque do CLEARFIX
O clearfix é talvez o mais famoso truque entre web developers e sem dúvida o
mais usado para resolver problemas de FLOATS.
A ideia é a seguinte: a seguir aos nossos elementos com floats, introduzimos
um elemento vazio e o css deste nosso elemento limpa floats e aplica os
truques que vimos anteriormente.
Ao fazer um site (em especial o CSS do site) a regra do é sempre
das primeiras coisas a pormos na nossa folha... !
clearfix
Copy & Paste
174

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
CLEARFIX como fazer
a HTML
<div > </div>
<div > </div>
<div ></div>
id
id
class
=’’divcomfloat1’’
=’’divcomfloat2’’
=’’clearfix’’
... ... ... ... ...
... ... ... ... ...
aCSS
{
: ;
: ;
: ;
: ;
: ;
}
.clearfix
visibility
display
content
clear
height
hidden
block
‘’ ‘’
both
0
{ : ; }
/* IE 6*/
1* html .clearfix zoom
{
: ;
}
/* IE 7*/
1
*:first-child+html .clearfix
zoom
175

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedades de visualização: DISPLAY
aCSS
{
: ;
}
span.especial
display block
176
É usada com 2 fins possiveis:
none- Para esconder um elemento. O elemento é
completamente escondido (não ocupa espaço na página)
- Para obrigarmos um certo tipo de elemento a comportar-se
como se fosse outro tipo. Podemos querer que um elemento
inline se comporte como um elemento block.
display: ;
div.superespecial {
: ;
}
display inline

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedades de visualização: DISPLAY
aCSS
177
Por vezes é também necessário fazer certas divs comportarem-se
como um hibrido de elemento Inline e elemento Block
Nestes casos usamos o O interior do elemento
comporta-se como se fosse um bloco (Ex: <div>) e o elemento em si
é formatado como se tratasse de um elemento inline (Ex: <p>)
display: ;inline-block
Bastante útil para lidar com floats mal-comportados!
http://quirksmode.org/css/css2/display.htmlAprenda mais em:
div.mesmosuperespecial {
: ;
}
display inline-block

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedades de visualização: VISIBILITY
aCSS
178
O atributo pode ser usado para tornar um elemento invisível
Difere do no sentido em que aqui, o elemento ainda
mantem o espaço que lhe pertence, mesmo que esteja invisível.
Também é usado para colapsar uma coluna ou linha de uma tabela.
A tabela mantem o seu layout.
visibility
display: ;none
#umelementoqq { : ; }visibility hidden
aCSS
#umelementoqq { : ; }visibility collapse

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Propriedades de visualização: OVERFLOW
a CSS
179
Esta propriedade é usada quando o conteúdo de uma caixa é maior
que as dimensões que essa caixa possúi.
Pode adoptar os seguintes valores:
overflow
overflow
overflow
overflow
overflow
: ;
: ;
: ;
: ;
: ;
visible
hidden
scroll
auto
inherit

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
180
overflow: ;visible overflow: ;hidden

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
overflow: ;autooverflow: ;scroll
181

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
overflow: ;autooverflow: ;scroll
182

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Para o selector :
: ;
: ;
Para o selector :
: ;
table
caption
border-collapse
border-spacing
caption-side
colapse
10px 10px
bottom
A estilização de tabelas processa-se como qualquer outro elemento
Algumas das propriedades especificas para tabelas são:
183
Estilização de TABELAS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Mais vale aprender vendo exemplos!
http://cesae.afonsogomes.com/tabelas.html
Analisem o código fonte!
184
Estilização de TABELAS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
ul
ol
#ambas-as-listas
{ : ; } /* Opções: , , , */
{ : ; } /* Opções: , ,
, , ,
*/
{ : ;
: ; /* Onde está a bullet */ }
list-style-type
list-style-type
list-style-image
list-style-position
square none disc circle square
decimal decimal decimal-leading-zero
lower-alpha upper-alpha lower-roman
upper-roman
url(’’anossabullet.png’’)
inside
Podem mudar o aspecto das bullets ( ) e dos números ( ) por CSS.
Já vimos como fazer por HTML, não vamos insistir nessa tecla.
Estas são as propriedades só aplicaveis a listas:
<ul> <ol>
185
Estilização de LISTAS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Vamos fazer exemplos para o caso de um menu de <nav>
186
aHTML
<nav>
<ul>
<li><a > </a></li>
<li><a > </a></li>
<li><a ><img ></a></li>
<li><a > </a></li>
<li><a > </a></li>
</ul>
</nav>
href
href
href src
href
href
=’’sobre.html’’ Sobre mim
=’’cv.html’’ Curriculum
=’’index.html’’ =’’logo.png’’
=’’sobre.html’’ Portfolio
=’’sobre.html’’ Contactos
Quais serão as primeiras considerações a fazer?

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
1) O normal é entrar logo a matar e arrumar com as bullets.
187
CSS
nav ul { : ; }list-style none
2) Pôr na horizontal. 2 opções: ou tratam s como inline ou usam floats.
(Se quiserem os links, dentro dos , do mesmo tamanho --> Floats)
LI
<li>
CSS
nav ul li { : ; }float left
3) Como fazemos para por todo o ‘’clicável’’ e não só o texto no ?<li> <a>
CSS
nav ul li a { : ; }display block

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
4) Daqui para a frente é estilização dos s
Depende do design que desejamos para cada projecto
Li
188
Mais vale aprender vendo exemplos!
http://cesae.afonsogomes.com/navmenu.html
Analisem o código fonte!
(Demorou 25 minutos a fazer!)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Os sistemas de grelhas foram criados
para facilitar a (repetitiva) tarefa de
criarmos grelhas para os sites que
fazemos.
Ao usarmos um, sabemos que estamos
a usar um sistema coerente em termos
de tamanhos e espeçamentos
entre os nossos elementos no site.
Existem muitos... usaremos o 960.gs
189
GRID SYSTEMS

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
GRID SYSTEMS
Existem sistemas de grelhas para todos os gostos e feitios:
Os mais usados são:
960.GS Twitter Bootstrap

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
GRID SYSTEMS
Depois temos outros, bons ou maus, com mais ou menos funcionalidade,
responsivos ou não, mais simples ou mais complexos! Há para todos
os gostos...
Recomendo:
http://960.gs
http://unsemantic.com
http://foundation.zurb.com
http://getbootstrap
http://lessframework.com
http://www.getskeleton.com

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
960.GS
É, talvez, o sistema de grelhas mais fácil e intuitivo de usar.
Para aprendizagem é o ideal ...
Com o progredir podemos evoluir para um Bootstrap (responsive) ou até
mesmo o Foundation da Zurb (também responsive)...
mas comecemos com uma coisa simples.
Vamos ve-lo juntos

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Recomendações e boas práticas
1)
2)
3)
@import
Evitar estilos inline (em elementos). São de difícil manutenção e
aumentam o tamanho dos ficheiros
Evitar estilos internos (no head). São de difícil manutenção e
aumentam o tamanho dos ficheiros
Evitar a regra do @import ... atrasa o carregamento do site
‘’outro-css-qq.css’’;<style> </style>
193
Já na recta da meta... Já a acabar os slides!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
4)
5)
6)
Evitar usar multiplas folhas de CSS. Aumenta os HTTP requests e
atrasa muito o carregamento. Condense tudo numa!
Agrupar selectores sempre que possível e recorrer ao nesting
Usar e abusar das propriedades shorthand sempre que possível
194

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
7)
8)
9)
Não abusar do !important muitas vezes é desnecessário e pode
causar muitas dores de cabeça no futuro
Evitar selectores muito complicados. Seja tão específico quanto
necessário no uso dos selectores.
Evitar o selector universal. Atrasa muito a renderização em todos
os browsers.

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
10)
12)
13)
Evite qualificar selectores, tente ser genérico! é
melhor que Pode depois ser re-utilizada.
Evitar a propriedade que é só para o IE. Diminui a
performance da página, nos browsers bons!
Seja parco no uso de IDs. Prefira as classes!
.umaclasseqq
div.umaclasseqq
filter

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
14)
15)
16)
Tente não usar muitas declarações .
Minifique o seu CSS antes de por o site no servidor de produção
(Versão final). Há minificadores automáticos... prefira fazer por si!
Optimize as IMAGENS o mais que puder! São os ficheiros de
um site que mais espaço ocupam! Só não prejudique (muito) a sua
visualização no site.
font-size

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
17)
18)
19)
Sempre que possível, recorra ao uso de SPRITES para combinar
imagens...
Pode também recorrer a fonts de icones (glifos) se se aplicar...
Prefira usar CSS3 em vez de imagens (ex: Gradientes)

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
20
Em caso de dúvidas, recorra ao Afonso. Mas sem abusos! :)
10 emails num dia ...
10 emails num mês ... tudo bem!
NÃO!

b Estilos em CSS
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
C’est Fini!
200

Aprender CSS (UFCD0154) v2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Aprender CSS (UFCD0154) v2

Ähnlich wie Aprender CSS (UFCD0154) v2 (20)

Aprender CSS (UFCD0154) v2