2014 - Desenvolvimento Web - 03 CSS

588 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
588
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
28
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

2014 - Desenvolvimento Web - 03 CSS

  1. 1. Multimídia CSS 2014 Prof. Willian Magalhães wmagalhaes@unipar.br
  2. 2. • Apostila K19 Desenvolvimento WEB • Download gratuito em • http://www.k19.com.br/downloads/apostilas • Site W3Schools (material oficial W3C) • http://www.w3schools.com • (material base para o criação destes slides) wmagalhaes@unipar.br Material Recomendado
  3. 3. • Tableless – site sobre web standards • http://tableless.com.br • Maujor – site sobre CSS e web standards • http://www.maujor.com wmagalhaes@unipar.br Material Recomendado
  4. 4. Cascading Style Sheet
  5. 5. • CSS - Cascading Style Sheets (Folhas de Estilos em Cascata) • Define através de regras define como o navegador deve exibir o conteúdo HTML • O CSS foi introduzido (W3C) na versão 4 do HTML para resolver o problema da sopa de tags wmagalhaes@unipar.br CSS
  6. 6. • Uma das recomendações W3C • Separa a apresentação (layout) do conteúdo • Permite controle centralizado sobre a formatação (facilita manutenção) • Páginas mais leves (reutilização / cache) • Portabilidade wmagalhaes@unipar.br CSS
  7. 7. • O CSS formata a informação • Esta informação pode ser uma IMAGEM, um TEXTO, um VIDEO, um ÁUDIO ou qualquer outro elemento de uma página wmagalhaes@unipar.br O que o CSS formata?
  8. 8. • Geralmente esta informação é visual • Porém, nem sempre... • No CSS Aural é possível manipular o áudio entregue ao usuário através de um sistema leitor de tela • É possível controlar o volume, o tipo da voz, a posição do som wmagalhaes@unipar.br Compreendendo o CSS
  9. 9. • O CSS deve preparar a informação para que ela possa ser acessada (consumida) da melhor maneira possível wmagalhaes@unipar.br Definição
  10. 10. • As especificações do CSS são publicadas e mantidas pelo W3C (World Wide Web Consortium) • http://www.w3.org/css wmagalhaes@unipar.br CSS quem?
  11. 11. Compatibilidade
  12. 12. • Estatísticas dos navegadores mais utilizados • http://www.w3schools.com/browsers/browsers_stats.asp • Estatísticas das resoluções mais utilizadas • http://www.w3schools.com/browsers/browsers_display.asp wmagalhaes@unipar.br Para quem desenvolver?
  13. 13. Regras CSS
  14. 14. • Seletor define quem será formatado • Propriedade define o que será formatado • Valor define como será formato wmagalhaes@unipar.br Sintaxe Regra CSS
  15. 15. wmagalhaes@unipar.br Olá CSS
  16. 16. wmagalhaes@unipar.br Comentários
  17. 17. Seletores
  18. 18. • Os seletores definem como identificar o elemento à ser formatado • Os principais seletores são por tag, id e classe • No CSS3 existem 44 formas diferentes de acessar um determinado elemento • http://www.w3schools.com/cssref/css_selectors.asp wmagalhaes@unipar.br Seletores
  19. 19. wmagalhaes@unipar.br Seletor universal
  20. 20. wmagalhaes@unipar.br Seletor por tag
  21. 21. wmagalhaes@unipar.br Seletor por id
  22. 22. wmagalhaes@unipar.br Seletor por classe
  23. 23. wmagalhaes@unipar.br Seletor por descendência
  24. 24. wmagalhaes@unipar.br Seletor por descendência direta
  25. 25. wmagalhaes@unipar.br Seletor por atributo
  26. 26. wmagalhaes@unipar.br Agrupando seletores
  27. 27. CSS onde?
  28. 28. • Existem três maneiras de vincular folhas de estilo ao documento HTML • Código INLINE • Código INTERNO • Código EXTERNO wmagalhaes@unipar.br CSS onde?
  29. 29. • Método não recomendado, pois não possibilita nenhuma forma reutilização • Geralmente utilizados em testes e casos muito específicos wmagalhaes@unipar.br INLINE
  30. 30. • Utilizado em páginas especificas, não possibilita reutilização entre arquivos distintos • Possibilita reutilização no mesmo arquivo • É possível descrever uma regra em qualquer parte do documento porém recomenda-se que as regras sejam descritas dentro do bloco de cabeçalho, ou seja, entre as tags <head> e </head> wmagalhaes@unipar.br INTERNO
  31. 31. wmagalhaes@unipar.br INTERNO
  32. 32. • Método recomendado, pois possibilita reutilização de estilos em páginas distintas wmagalhaes@unipar.br EXTERNO
  33. 33. Cores no CSS
  34. 34. • No CSS as cores podem ser atribuídas a um determinado elemento de diversas formas wmagalhaes@unipar.br Cores no CSS
  35. 35. • Cores descritas em hexadecimal são compostas pelo padrão de cores RGB • Cada uma destas cores é representado por um ou dois algarismos variando de 0 a F • http://www.w3schools.com/cssref/css_colorsfull.asp wmagalhaes@unipar.br Valores em hexadecimal
  36. 36. • Nesta modalidade cada uma das cores variar de 0 a 255 ou de 0% a 100% • Ainda é possível informar o valor do canal de transparência (alpha), podendo variar de 0 a 1 wmagalhaes@unipar.br Valores em RGB
  37. 37. • Cores em HSL são compostas por três valores • Hue (matiz), Saturation (saturação) e Lightness (luminosidade) • Existe um quarto paramento referente a transparência, variando de 0 a 1 • http://hslpicker.com wmagalhaes@unipar.br Valores em HSL
  38. 38. • Existem cerca de 141 cores podem ser referenciadas através do nome • No link abaixo pode ser encontrada uma lista com os nomes de cores possíveis • http://www.w3schools.com/cssref/css_colornames.asp wmagalhaes@unipar.br Nome da cor (em inglês)
  39. 39. • É possível utilizar algumas cores utilizadas pelo sistema operacional do usuário • No link abaixo apresenta alguma destas cores • http://maujor.com/tutorial/syscolor.html wmagalhaes@unipar.br Cores do sistema operacional
  40. 40. Propriedades CSS
  41. 41. http://www.w3schools.com/css/css_background.asp wmagalhaes@unipar.br Plano de Fundo Propriedade Descrição background Define todas as propriedades em uma definição background-attachment Define se a imagem de fundo é fixa ou não background-color Define uma cor de fundo background-image Define um imagem de fundo background-position Define a posição da imagem de fundo background-repeat Define se como a imagem de fundo deve ser repetida
  42. 42. http://www.w3schools.com/css/css_text.asp wmagalhaes@unipar.br Texto Propriedade Descrição color Define a cor para o texto text-align Define o alinhamento horizontal do texto text-decoration Utilizado para definir ou remover decorações em textos text-transform Tranforma o texto em maiusculas e minusculas
  43. 43. http://www.w3schools.com/css/css_text.asp wmagalhaes@unipar.br Fonte Propriedade Descrição font-family Define a “familia” da fonte font-style Geralmente utilizada para deixar a fonte em itálico font-size Define o tamanho da fonte font-weight Utilizada para definir o “peso” da fonte (negrito)
  44. 44. http://drmarkwomack.com/a-writing-handbook/style/typography/ wmagalhaes@unipar.br Fontes Serif e Sans-Serif
  45. 45. http://www.w3schools.com/css/css_text.asp wmagalhaes@unipar.br Links Propriedade Descrição :link Estado normal, quando o link ainda não foi visitado :visited Estado quando o link já visitado pelo usuário :hover Estado quando o mouse estiver sobre o link :active Estado quando o link esta sendo clicado text-decoration Utilizado para definir ou remover decorações em textos
  46. 46. http://www.w3schools.com/css/css_list.asp wmagalhaes@unipar.br Listas Propriedade Descrição list-style-type Define o estilo da lista list-style-image Define se a imagem de fundo é fixa ou não background-image Define um imagem de fundo
  47. 47. http://www.w3schools.com/css/css_table.asp wmagalhaes@unipar.br Tabelas Propriedade Descrição border-style Define o tipo (estilo) da borda border-color Define a cor da borda border-width Define o tamanho da borda border-collapse Define como as bordas devem se unir width Define a largura height Define a altura padding Define o espaço entre o conteúdo e a borda text-align Define o alinhamento do texto horizontalmente vertical-align Define o alinhamento do texto verticalmente
  48. 48. CSS Box Model
  49. 49. • Box Model é um termo utilizado para descrever o comportamento visual dos elementos HTML • Neste modelo cada um dos elementos HTML possui uma espécie de caixa ao redor wmagalhaes@unipar.br Box Model
  50. 50. • Esta caixa que envolve os elementos é composta basicamente por três partes: • Margem externa (margin) • Borda (border) • Margem interna (padding) wmagalhaes@unipar.br Box Model
  51. 51. Compreendendo o Box Model
  52. 52. • MARGIN corresponde a uma área vazia em torno da borda, a margem não possui cor de fundo (background) • BORDER área intermediaria entre as margens internas e margens externas • PADDING corresponde ao espaço entre a borda e o conteúdo do elemento wmagalhaes@unipar.br Detalhes do Box Model
  53. 53. 250px – largura do elemento (width) + 20px – margens internas (padding) + 10px – bordas (border) + 20px – margens (margin) = 300px wmagalhaes@unipar.br Calculo - Largura x Altura
  54. 54. http://www.w3schools.com/css/css_border.asp wmagalhaes@unipar.br Bordas Propriedade Descrição border-style Define o tipo (estilo) da borda border-color Define a cor da borda border-width Define o tamanho da borda border Definição abreviada para as propriedades acima
  55. 55. http://www.w3schools.com/css/css_margin.asp wmagalhaes@unipar.br Margens Externas Propriedade Descrição margin Define o tamanho da margem Propriedade Descrição margin: 25px 50px 75px 100px superior, Direita, Inferior, Esquerda margin: 25px 50px 75px Superior, Esquerda e Direita, Inferior margin: 25px 50px Superior e Inferior, Direita e Esquerda margin: 25px Todas as margens
  56. 56. http://www.w3schools.com/css/css_padding.asp wmagalhaes@unipar.br Margens Internas (espaçamento) Propriedade Descrição padding Define o tamanho da margem interna Propriedade Descrição padding: 25px 50px 75px 100px superior, Direita, Inferior, Esquerda padding: 25px 50px 75px Superior, Esquerda e Direita, Inferior padding: 25px 50px Superior e Inferior, Direita e Esquerda padding: 25px Todas as margens internas
  57. 57. CSS Display e Visibility
  58. 58. • A regra visibility: hidden oculta o elemento, porém matem seu espaço reservado • A regra display: none não exibe o elemento liberando seu espaço no navegador wmagalhaes@unipar.br Escondendo elementos
  59. 59. wmagalhaes@unipar.br Exemplo de utilização
  60. 60. • Elementos em bloco (block) ocupam a largura disponível e possuem um intervalo de linha • Exemplos: H1, P, DIV • Elementos inline ocupam apenas o espaço necessário para seu conteúdo, este elementos não forçam quebra de linha • Exemplos: A, LABEL wmagalhaes@unipar.br Elementos em bloco
  61. 61. wmagalhaes@unipar.br Exemplo de utilização
  62. 62. Posicionamento
  63. 63. wmagalhaes@unipar.br Posicionamento Propriedade Descrição position: absolute Posiciona o objeto independente de outros objetos position: fixed Posiciona o objeto em um ponto fixo na tela position: relative Posiciona o objeto relativo a sua posição de origem Propriedade Descrição top Distancia da margem superior da janela bottom Distancia da margem inferior da janela right Distancia da margem direita da janela left Distancia da margem esquerda da página z-index Ordem dos objetos quanto sobrepostos
  64. 64. Flutuação
  65. 65. • Elementos sem flutuação wmagalhaes@unipar.br Flutuação 002 003 001
  66. 66. • Elemento 001 com flutuação a direita wmagalhaes@unipar.br Flutuação 003 002 001
  67. 67. • Todos elementos com flutuação à esquerda wmagalhaes@unipar.br Flutuação 003001 002
  68. 68. http://www.w3schools.com/css/css_float.asp wmagalhaes@unipar.br Flutuação Propriedade Descrição float: none Restaura a flutuação para o valor padrão float: left Alinha os objetos a esquerda float: right Alinha os objetos a direita
  69. 69. • BUDD, Andy. Criando página WEB com CSS. São Paulo: Pearson Education do Brasil, 2006; • LEWIS, Joseph R. CSS avançado. São Paulo: Novatec Editora, 2010; • EIS, Diego; FERREIRA, Elcio. HTML5 e CSS3 com farinha e pimenta. Tabless.com.br, 2012; • FERREIRA, Elcio; EIS, Diego. HTML5 Curso W3C Escritório Brasil. Disponível em <www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em 04 de agosto de 2013; • W3SCHOOLS. Disponível em <www.w3schools.com>. Acesso em 04 de agosto de 2013 Referências

×