Amirton Chagas
http://amirton.wordpress.com
[email protected]
Este trabalho está licenciado sob
uma Licença Creative Commons
Atribuição 2.5 Brasil. Para ver
uma cópia desta licença, visite
http://creativecommons.org/lice
nses/by/2.5/br/ ou envie uma
carta para Creative Commons,
171 Second Street, Suite 300,
San Francisco, California 94105,
USA.

Tags HTML possuem atributos de formatação
 Deprecated em favor do uso de CSS

Separação do conteúdo do formato

Redução no código trafegado do servidor
para o cliente

Arquivo separado, para conter toda a
formatação do documento

<link rel=“stylesheet” href=“arquivo.css” />

Melhora performance:
 Se aproveita da cache do browser
 Permite reuso da formatação

ex1-cssPaginaSimples.css

ex2-paginaSimples-CSS.html

Por tag
 Formatação aplicada a todos os elementos da mesma
tag no documento.

Classe
 Formatação aplicada a todos os elementos cujo
atributo class seja igual ao nome da classe no css.

Por Id
 Formatação será aplicada somente ao elemento cujo
atributo id seja igual ao nome do id no css.

seletor {propriedade: valor}
 Seletor pode ser
▪ Tag(s)
▪ Classe(s)
▪ Id(s)
▪ Tag.Classe

Comentário: /* comentário */

Tag <link>, dentro do head
 <link rel=“stylesheet” type=“text/css”
href=“arquivo.css” />
▪ Recomendado

Escrevendo estilo dentro de uma tag <style>
 <style type=“text/css”>/* Código CSS */</style>
▪ Não Recomendado

font
 font-family
 font-size
 font-weight

color
 Nome da cor
▪ color: red
 Código Hexa da cor
▪ color: #FF0000
 Código RGB da cor
▪ color: rgb(255,0,0)

text-align

text-decoration

text-indent

line-height
 Similar a “leading”

letter-spacing
 Similar a “kerning”

list-style-image

list-style-type

list-style-position

http://www.w3schools.com/css/css_list.asp

display





block
inline
list-item
none
visibility
 hidden
 visible

width
 Cuidado…

height
 Mais cuidado ainda….

border




color
style
width
Pode ser configurado para cada lado individualmente

Margin e Padding – diferença:
Documento
Div
Conteúdo da Div
Margin
Padding

Margin e padding podem ser configuradas
individualmente para cada lado.
 Mesmo efeito:
▪ margin-top: 5px;
margin-bottom: 15px;
margin-right: 0px;
margin-left: 10px;
▪ margin: 5px 0px 15px 10px;
top
right
left
bottom

Altera o cursor do mouse

Cuidado para não tirar o sentido normal
 Não usar “pointer” (mãozinha de link) se o usuário
não puder clicar

Algumas tags possuem “pseudo-classes”
 Classes que você não declarou
 O browser conhece

Exemplo:
 a
▪ hover
▪ visited
▪ active
 Geral
▪ :first-child

:first-letter

:first-line

position





absolute
fixed
relative
static
Essencial usar
corretamente
 Problemas de
compatibilidade entre
browsers
 Layouts mais complexos
são muito sensíveis

Após escolher o tipo de
posicionamento do seu
elemento, você pode
informar a posição dele:




top
right
bottom
left

Valor padrão

Qualquer valor de top, right, bottom ou left
será ignorado

Indica que o elemento deve ficar exatamente
onde deveria estar seguindo o fluxo normal
do documento

Usa os valores de top, right, bottom e left

Referência:
 A Janela (área útil do browser)

Desconsidera a hierarquia

Usa os valores de top, right, bottom e left

Referência:
 O “pai” (elemento que contém o elemento que
está recebendo a propriedade)

Irá posicionar o elemento usando os valores
informados, em relação ao elemento que o
contém, e não em relação à janela

Usa os valores de top, right, bottom e left

Referência:
 A posição onde o elemento deveria estar

Ao contrário de fixed e absolute, usando
relative o browser não libera o espaço onde o
elemento estava previamente alocado.

Cuidado ao usar position
 Muito poderoso
 Muito eficiente para layouts simples e estáticos
▪ Protótipos são construídos rapidamente
▪ Páginas simples também

Controle mais rígido sobre o posicionamento
 O uso de position deixa você com o controle (quase)
total da posição dos seus elementos
▪ Incompatibilidades de browsers podem transformar isso em
um problema

Seu layout fica preso à resolução que você
trabalhou
 É permitido o uso de porcentagem
▪ Mais problemas de compatibilidade com browser

Não é uma má prática
 Só deve ser bem usado
▪ Analisar o uso de ajuste de posição X margin/padding
▪ Pode ser usado para criar efeitos interessantes

Alguns elementos de HTML criam blocos
 Um bloco causa uma quebra de linha, por default
▪ div, table, ...

float permite que esta regra seja quebrada
 Permite que outro elemento “flutue” ao lado do bloco

clear “limpa” a configuração de float
influenciando algum bloco
 “força” a quebra de linha novamente

Especifica o comportamento que o browser deve
ter se o conteúdo de um elemento não couber
 Ex: <div style=“width: 300px”>
<img src=“imagemGrande.jpg” alt=“imagem de
800px de width”>
</div>

Valores:
 visible (padrão)
 hidden
 scroll

Define a área de um elemento que deve ser
mostrada
 Similar ao “cortar” em uma imagem, no Word

Restrições:
 A posição do elemento deve ser absoluta
 O overflow não pode ser visible

Uso:
 clip: rect(Tpx, Rpx, Bpx, Lpx);

vertical-align
 Define o alinhamento vertical do elemento

Quebra de página para impressão
 page-break-after
 page-break-before

Um elemento pode herdar um atributo de várias
configurações diferentes
 Ex:
▪ Um link (<a class=“lnkDf” id=“linkCurso”>) pode ter
Propriedades configurados para a tag, para a classe e para a
id.
 Ordem de precedência

!important quebra a precedência
 Use com parcimônia…
 Ferramenta útil, mas muito usada em designs mal
projetados… Gambiarra.

A Licença Simplificada não é uma licença
propriamente dita. Ela é apenas uma referência útil
para entender a Licença Jurídica (a licença integral) ela é uma expressão dos seus termos-chave que pode
ser compreendida por qualquer pessoa. A Licença
Simplifica em si não tem valor legal e seu conteúdo
não aparece na licença integral.

O Creative Commons não é um escritório de
advocacia e não presta serviços jurídicos. A
distribuição, exibição ou inclusão de links para esta
Licença Simplificada não estabelece qualquer relação
advocatícia.