Amirton Chagas

Apresentação em tema: "Amirton Chagas"— Transcrição da apresentação:

1 Amirton Chagas http://amirton.wordpress.com amirton@proativasolucoes.com

2 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. http://creativecommons.org/lice nses/by/2.5/br/

3  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

4  Arquivo separado, para conter toda a formatação do documento   Melhora performance:  Se aproveita da cache do browser  Permite reuso da formatação

5  ex1-cssPaginaSimples.css  ex2-paginaSimples-CSS.html

6  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.

7  seletor {propriedade: valor}  Seletor pode ser ▪ Tag(s) ▪ Classe(s) ▪ Id(s) ▪ Tag.Classe  Comentário: /* comentário */

8  Tag, dentro do head  ▪ Recomendado  Escrevendo estilo dentro de uma tag  /* Código CSS */ ▪ Não Recomendado

9  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)

10  text-align  text-decoration  text-indent  line-height  Similar a “leading”  letter-spacing  Similar a “kerning”

11  list-style-image  list-style-type  list-style-position  http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/css/css_list.asp

12  display  block  inline  list-item  none  visibility  hidden  visible

13  width  Cuidado…  height  Mais cuidado ainda….  border  color  style  width  Pode ser configurado para cada lado individualmente

14  Margin e Padding – diferença: Documento Div Conteúdo da Div Margin Padding

15  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

16  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

17  Algumas tags possuem “pseudo-classes”  Classes que você não declarou  O browser conhece  Exemplo:  a ▪ hover ▪ visited ▪ active  Geral ▪ :first-child

18  :first-letter  :first-line

19  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

20  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

21  Usa os valores de top, right, bottom e left  Referência:  A Janela (área útil do browser)  Desconsidera a hierarquia

22  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

23  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.

24  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

25  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

26  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

27  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

28  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);

29  vertical-align  Define o alinhamento vertical do elemento  Quebra de página para impressão  page-break-after  page-break-before

30  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.

31  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.