Amirton Chagas

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite nses/by/2.5/br/ ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA. nses/by/2.5/br/

 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   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, dentro do head  ▪ Recomendado  Escrevendo estilo dentro de uma tag  /* Código CSS */ ▪ 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 

 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 bottom left

 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:  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 ( ) 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.