Curso de Desenvolvimento Web - Módulo 02 - CSS

746 visualizações

Publicada em

Curso desenvolvimento de Desenvolvimento Web, incluindo as linguagens HTML, CSS e Javascript. O conteúdo é dividido em 03 Módulos.

Publicada em: Internet
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Curso de Desenvolvimento Web - Módulo 02 - CSS

  1. 1. S Desenvolvimento Web Com HTML, CSS e JavaScript Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br
  2. 2. Sobre o Prof. Rodrigo Santa Maria S Bacharel em Ciência da Computação (PUC Minas); S Especialista com MBA Internacional em Gerenciamento de Projetos (FGV/Ohio University, USA); S Professor Universitário (UNIFEOB); S Micro-empresário da área de TI; S Acesse: www.digitallymade.com.br S E-mail: rodrigo@digitallymade.com.br
  3. 3. Sobre o Prof. Rodrigo Santa Maria S Analista/Desenvolvedor de aplicações desde 2000; S Ex-IBMer (de 2009 a 2013); S Diretor-Presidente/Co-fundador do Instituto Internacional de Ideias; S Fundador do Google Developers Group São João da Boa Vista;
  4. 4. Visão Geral S Ao final deste curso, você será capaz de: S Criar páginas HTML5; S Utilizar folhas de estilo CSS3; S Utilizar JavaScript e o framework jQuery; S Criar páginas com funcionalidades Ajax; S Utilizar frameworks como o Bootstrap;
  5. 5. Desenvolvimento Web MÓDULO 02 S Pauta: Ø Introdução ao CSS Ø O CSS3 Ø Seletores CSS Ø Classes Ø Regras, atributos, valores Ø Exemplos Ø Links interessantes
  6. 6. S Introdução ao CSS
  7. 7. S CSS Zen Garden: http://www.csszengarden.com Exemplos de CSS
  8. 8. Resumo da aula ü Vamos aprender o que é a linguagem CSS e aonde ela se insere no Desenvolvimento Web; ü Entender qual é o problema em aplicar utilizar HTML para formatação; ü Saber como reconhecer um CSS quando vê-lo!
  9. 9. Motivação para o CSS q <font face="Verdana" size="2">Teste</font> q <b>Olá</b> q Qual é o problema do código acima? q Imagine que seja necessário alterar a fonte em TODAS as páginas. 9
  10. 10. "Style sheets" ou "Folhas de Estilo" S CSS é um padrão recomendado pelo W3C para todos os browsers (World Wide Web Consortium é a entidade que cuida do desenvolvimento e padronização das tecnologias ligadas à Web). S "Cascading Style sheets" ou "Folhas de Estilo Encadeadas" é uma tecnologia (linguagem) criada para definir estilos (cores, tipologia, posicionamento, etc ...)
  11. 11. Por que usar padrões? S Manutenção mais fácil S Tamanho do arquivo menor (economia de banda e velocidade no carregamento) S Maior acessibilidade para o usuário S Compatibilidade com diferentes navegadores
  12. 12. Recomendações para o desenvolvedor S Com CSS economiza-se tempo de criação e manutenção (isola os códigos de formatação aplicado a várias páginas HTML em um único arquivo ".css"); S Reduz código de descritores HTML da página (tags); S os navegadores (browsers) carregam mais rápido;
  13. 13. Recomendações para o desenvolvedor S Maior eficiência no gerenciamento do layout; S CSS é simples pois descreve apenas estilos; S Com recursos mais avançados de CSS pode-se conseguir um design sofisticado sem utilização de imagens e tabelas.
  14. 14. Ordem de prioridade S Default do Browser S CSS externo (arquivo ".css") S CSS interno (dentro da tag <head>) S Estilos inline (dentro do elemento HTML)
  15. 15. Herança S Herança significa que você pode especificar estilos variados (classes) para cada elemento na página, e cada classe herdará algumas características de estilo de seu elemento básico ou de seu elemento pai na estrutura do documento HTML.
  16. 16. Organização 16
  17. 17. Separação entre camadas q HTML: Ø Conteúdo; Ø Dados e estrutura; q CSS: Ø Apresentação; Ø Formatação, layout, cores, fontes, posicionamento. q JavaScript: Ø Comportamentos; Ø Programação. 17
  18. 18. 18 (colam o HTML com o CSS!)
  19. 19. Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer Declaração de Regra CSS
  20. 20. Modelo de Caixa S Tamanho do Elemento width: min-width: max-width: height: min-height: max-height:
  21. 21. Exemplo 1 P { font-family: verdana,arial,sans-serif; font-weight: bold; font-size: 12pt; color: #00cc00; } P.small { font-size: 8pt; text-align: center; }
  22. 22. Exemplo 2 S a tag <b> herda a característica "font-size" da tag <p> pois é filha dentro da estrutura do HTML.
  23. 23. Exemplo 2 <p style="font-size:10pt;color:red;">Este parágrafo foi definido com tamanho de fonte de 10pts e cor de texto vermelho. No meio deste texto uma palavra foi colocada em <b style="font-size:120%;color:blue;">negrito</b> mas foi alterada sua cor para azul e o tamanho de fonte aumentado em 20%.</p>.
  24. 24. Sintaxe CSS S A sintaxe CSS compoe-se de três partes: um seletor, uma propriedade e um valor. S selector {property: value} S O seletor é o elemento/tag que definimos (maioria das vezes trata-se de uma tag HTML), a propriedade é o atributo que desejamos inserir para este elemento, e cada propriedade tem um valor atribuído. A propriedade e o valor são separados por dois pontos ":" e delimitados por chaves "{}"
  25. 25. Sintaxe CSS S Ex: body {color: #000000} S Se o valor tem múltiplas palavras ele deve ser colocado entre aspas "" : If the value is multiple words, put quotes around the value: S Ex: p {font-family: "Comic Sans MS"}
  26. 26. Sintaxe CSS S Algumas aplicações de CSS exigem um conjunto maior de declarações, neste caso é aconselhável definir os seletores um em cada linha. Ex: S p { text-align: center; color: black; font-family: arial }
  27. 27. Atributo class S Com o atributo "class" podemos definir diferentes estilos para um mesmo elemento. Por exemplo, se quiséssemos ter 2 tipos de parágrafos "<p>" em nosso documento HTML: um alinhado à direita e outro centralizado. Fazemos assim: styles:
  28. 28. Atributo class S Ex: S p.right {text-align: right} p.center {text-align: center} S aplicando os estilos definidos na página HTML: S <p class="right">Este parágrafo está alinhado à direita</p> S <p class="center">Este outro parágrafo está centralizado</p>
  29. 29. Atributo ID S Com o atributo ID podemos definir um estilo único para ser utilizado em muitos elementos. S Ex: S #right {text-align: right} S aplicando o estilo na página HTML : S <p id="right">Este parágrafo está alinhado à direita</p> <h3 id="right">Este header também ficará alinhado à direita</h3> S Obs: o atributo ID deve ter valor único no documento.
  30. 30. Comentário no CSS S Podemos inserir comentários entre as definições de estilos para melhor documentar a finalidade de cada uma delas. Este procedimento é extremamente saudável visto que provavelmente não lembraremos dos significados e aplicação dos estilos em um futuro próximo. S O comentário irá ser ignorado pelo Browser. Ele começa com "/*", e termina com "*/" :
  31. 31. Comentário no CSS /* este é um comentário */ p { text-align: left; /* outro comentário */ color: blue; font-family: verdana,arial,sans-serif }
  32. 32. Aplicando CSS à página S CSS podem ser utilizados de três maneiras diferentes: local (modificando uma tag específica de uma página), geral (modificando determinados atributos para a toda a página) ou global (quando criamos um modelo que será aplicado a várias páginas simultaneamente).
  33. 33. Aplicando CSS a página - Local S Style Sheet pode modificar os atributos de uma única tag específica, em um determinado ponto de uma página. S Os comandos em CSS aplicados localmente seguem a seguinte sintaxe: S <tag STYLE="propriedade:valor; propriedade, valor;"...>
  34. 34. Aplicando CSS a página - Local S Pelo código HTML normal, o tamanho máximo de uma fonte que podemos obter é estipulado pela tag <FONT>. Utilizando o CSS podemos aumentar o tamanho com que as letras seriam tradicionalmente mostradas. S <FONT FACE="verdana,arial" SIZE="7">TEXTO</FONT>
  35. 35. Aplicando CSS a página S Introduzindo comandos de CSS na tag podemos modificar seus atributos para mostrar a frase com outra cor e em tamanho maior. S <FONT style="font-size:50pt; color:red; line- height:30pt; font- family:verdana,arial;">TEXTO</FONT>, S Com o CSS não há limites para o tamanho da fonte. Ele pode ser definido em pontos, pixels e outras unidades.
  36. 36. Aplicando CSS a página-Geral S O comando STYLE no cabeçalho do documento, entre a tag HTML e a tag BODY, cria um modelo padrão de CSS que será aplicado a toda uma página e todo o conteúdo da página obedecerá as propriedades/valores definidas neste intervalo. Por exemplo:
  37. 37. Aplicando CSS a página-Geral S <HTML> <TITLE> ... </TITLE> <HEAD> <STYLE type="text/css"> <!-- p {font: 12pt "Corrier, Times"; color: black} h1 {font: 15px "arial,verdana"; color: #00cc00} -- > </STYLE> </HEAD> <BODY> ..... </BODY> </HTML>
  38. 38. Aplicando CSS a página-Geral S Obs: O que está dentro da tag STYLE aparece em comentário <!-- -->. Isso serve para evitar problemas com browsers que não suportam CSS. Estando entre comentários, os atributos funcionarão normalmente em browsers com capacidade para CSS e serão desprezados por browsers mais antigos.
  39. 39. Aplicando CSS a página-Global S Podemos criar um único modelo de Style Sheets para ser aplicado a múltiplas páginas. Para tanto, devemos construir um modelo separado de Style Sheets e salvá-lo em um arquivo de terminação ".css". Esse modelo pode ser aplicado a qualquer página, apenas referindo-se ao arquivo ".css" no seu cabeçalho, como a seguir:
  40. 40. Aplicando CSS a página-Global S <HEAD> < link rel=stylesheet href="exemplo1.css" type="text/css"> </HEAD>
  41. 41. Aplicando CSS a página-Global S Outra maneira de aplicar o modelo CSS é importá-lo. A diferença do exemplo acima e importá-lo é que a segunda maneira permite acrescentar estilos na própria página que está editando, sem precisar alterar o modelo global (o arquivo .css).
  42. 42. Aplicando CSS a página-Global S <HTML> <STYLE TYPE="text/css"> <!-- @import url (exemplo1.css); B { font-family: arial; color:black; font-size:10px; } </STYLE> <HEAD> <TITLE>Exemplo 1</TITLE> </HEAD>
  43. 43. Aplicando CSS a página-Global S <BODY> <P> O texto segue o modelo de CSS exemplo1.css, mas os <B>negritos serão alterados</B>. </P> </BODY> </HTML>
  44. 44. Aplicando CSS a página S OBS: No caso de uma mesma página ter mais de um estilo aplicado, para saber qual predominará deve-se adotar as regras de "cascata" citadas anteriormente.
  45. 45. Regras aplicadas em fontes S font-family - utilizado para indicar qual a fonte que uma tag ou documento HTML irá mostrar. De forma geral: S P { font-family: Verdana, Arial, Helvetica } S Neste exemplo, tudo o que estiver entre as tag <P> e </P> no documento HTML será visualizado na fonte Verdana. A razão de definir mais de uma fonte deve-se ao fato de que nem todos os computadores possuem as mesmas fontes instaladas. No caso, se o computador não possuir a Verdana instalada, automaticamente passará para a Arial.
  46. 46. Regras aplicadas em fontes S font-size - utilizado para definir o tamanho das fontes. Existem 3 formas para definição de tamanho: S em pontos (pt), pixels (px), cm (cm) e outras unidades de medida; S através de palavras-chave; S em percentagem (%)
  47. 47. Regras aplicadas em fontes S Ponto - pode ser usada para definir o tamanho de um elemento em uma página HTML. Funcionam bem em todos os browsers e plataformas operacionais. S Ex: P { font-size: 20pt } para pontos
  48. 48. Regras aplicadas em fontes S Pixel é uma medida familiar aos web designers. Pode dar uma boa noção do tamanho que a fonte aparecerá na tela, mas infelizmente a utilização dessa medida tem causado problemas para na impressão das páginas em papel. S B { font-size: 20px } para pixels, por exemplo.
  49. 49. Regras aplicadas em fontes S As unidades de medida que podem ser utilizadas são: S pt: pontos S px: pixels S in: inches S cm: centímetros S mm: milímetros, e outras.
  50. 50. Regras aplicadas em fontes S Palavras-chave - é outra maneira de determinar tamanhos de fonte em CSS : S xx-small S x-small S small S medium S large S x-large S xx-large
  51. 51. Regras aplicadas em fontes S Percentagem - o tamanho das fontes também pode ser determinado segundo regras de percentagem: S P { font-size: 12pt } B { font-size: 150% } S No exemplo acima, todo o texto que estiver compreendido entre as tags <P> e </P> no corpo da página será mostrados em 12 pontos, assim como todas as palavras em negrito (<b>) entre as duas tags serão apresentadas em um tamanho 50% maior.
  52. 52. Regras aplicadas em fontes S font-weight é o comando CSS que controla a propriedade bold (negrito) de uma tag: S H1 { font-weight: bold } S No exemplo acima, todas as palavras da página que estiverem compreendidas entre as tags <H1> e </H1> serão mostradas em negrito.
  53. 53. Regras aplicadas em fontes S font-style é o comando CSS que controla a propriedade italic de uma tag. S H1 { font-style: italic } S No exemplo acima o browser irá procurar uma versão itálico da fonte para apresentar o texto compreendido entre as tags <H1> e</H1>.
  54. 54. Regras aplicadas em fontes S text-transform serve para controlar os atributos maiúsculas e minúsculas de um texto: S P { text-transform: uppercase } S No exemplo, tudo o que estiver compreendido entre as tags <P> e </P> será mostrado em maiúsculas COMO NESTE EXEMPLO.
  55. 55. Regras aplicadas em fontes S text-decoration - serve para controlar o sublinhado das palavras. S B { text-decoration: underline } S No exemplo acima todas as palavras em negrito da página aparecerão também sublinhadas.
  56. 56. Regras aplicadas em fontes S O mais interessante do comando text-decoration é que utilizando o atributo none podemos eliminar o sublinhado de um link. Como abaixo: S <style type="text/css"> <!-- A { text-decoration: none } --> </style>
  57. 57. Regras aplicadas em parágrafos S line-height - é o comando que controla o espaçamento entre as linhas de um texto. O espaço é definido pela distância entre a base das linhas de um texto. S P { line-height: 14pt } S Obs: as unidades de medida são as mesmas explicadas para o comando font-size: pt, px, in, cm, mm, pc, ex, em.
  58. 58. Regras aplicadas em parágrafos S text-align é a comando utilizado para o alinhamento de parágrafos em CSS. Ela só funciona em elementos que definam parágrafos, como <P>, <H1>, <H2>, <BLOCKQUOTE> e <UL>. Os valores que podem ser aplicados são: left, right, center e justify (justificado). S P { text-align:justify }
  59. 59. Regras aplicadas em parágrafos S text-indent é o comando que permite configurar o valor da indentação de um parágrafo. Também só funciona em elementos que definam parágrafos, como os descritos para o text-align. S P { text-indent:40pt }
  60. 60. Teste S 1. Qual o significado de CSS? a. Creative Style Sheets b. Colorful Style Sheets c. Cascading Style Sheets d. Computer Style Sheets
  61. 61. Teste S 1. Qual o significado de CSS? c. Cascading Style Sheets
  62. 62. Teste S 2. Qual é a opção correta para referenciarmos um CSS externo? a. <link rel="stylesheet" type="text/css" href="mystyle.css"> b. <style src="mystyle.css"> c. <stylesheet>mystyle.css</stylesheet>
  63. 63. Teste S 2. Qual é a opção correta para referenciarmos um CSS externo? a. <link rel="stylesheet" type="text/css" href="mystyle.css">
  64. 64. Teste S 3. Em que parte do documento HTML é correto referenciar um arquivo CSS externo? S a. Topo do conteúdo S b. Na sessão <head> S c. Na sessão <body> S d. No final do documento.
  65. 65. Teste S 3. Em que parte do documento HTML é correto referenciar um arquivo CSS externo? b. Na sessão<head>
  66. 66. Teste S 4. Qual tag HTML é utilizada para definir um CSS interno? a. <css> b. <style> c. <script>
  67. 67. Teste S 4. Qual tag HTML é utilizada para definir um CSS interno? b. <style>
  68. 68. Teste S 5. Qual atributo HTML é utilizado para definir estilos inline? a. Styles b. Style c. Font d. class
  69. 69. Teste S 5. Qual atributo HTML é utilizado para definir estilos inline? b. Style
  70. 70. Teste S 6. Qual é a sintaxe correta CSS? a. {body;color:black} b. body {color: black} c. body:color=black d. {body:color=black(body}
  71. 71. Teste S 6. Qual é a sintaxe correta CSS? b. body {color: black}
  72. 72. Teste S 7. Como inserir comentários no arquivo de CSS? a. /* this is a comment */ b. ' this is a comment' c. // this is a comment d. // this is a comment //
  73. 73. Teste S 7. Como inserir comentários no arquivo de CSS? a. /* this is a comment */
  74. 74. Tableless - Definição S Tableless é uma filosofia de desenvolvimento client- side que prega a abordagem do HTML em seu significado semântico. S As tags HTML passam a ser usadas para aquilo cujo qual foram originalmente designadas
  75. 75. Tableless S Antigamente, grande parte dos desenvolvedores construíam seus layouts usando tabelas, que não é a tag semanticamente correta para construção de layouts. S Por conta disso começaram a chamar o desenvolvimento semanticamente coerente de "Tableless".
  76. 76. S CSS3 Novidades
  77. 77. Novidades do CSS3 1. Criar Cantos arredondados 2. Sombra projetada 3. Criar Gradiente Botões 4. Várias imagens de fundo 5. Layout de várias colunas 6. Transformar 7. Transição
  78. 78. Cantos Arredondados x = horizontal radius [ <length> | <%> ] y = vertical radius [ <length> | <%> ] border-top-left radius: x y; border-top-right-radius: x y; border-bottom-left-radius: x y; border-bottom-right-radius: 0; border -*-*-radius: [x] [y]?
  79. 79. Cantos Arredondados border-radius: [x] {1,4} [ / [y] {1,4} ]? border-radius:5px 10px 10px 10px / 10px 10px 5px 5px; border-radius:5px 10px / 10px; border radius: 10px;
  80. 80. Cantos Arredondados W3C Specification Mozilla Implementation border-radius -moz-border-radius border-top-left-radius -moz-border-radius-topleft border-top-right-radius -moz-border-radius-topright border-bottom-right-radius -moz-border-radius-bottomright border-bottom-left-radius -moz-border-radius-bottomleft
  81. 81. Cantos Arredondados S Safari eChrome: S V3.0: Use o prefixo -webkit-
  82. 82. Sombra Projetada text-shadow: x y b color S x = posição horizontal § x < 0: esquerda do texto § x > 0: direita do texto S y = posição vertical § y < 0: acima do texto § y > 0: abaixo do texto S b = raio de desfoque
  83. 83. Sombra Projetada box-shadow: x y b color Exemplos: -webkit-box-shadow: -3px 3px 3px #999999; -moz-box-shadow: -3px 3px 3px #999999; text-shadow: -4px 4px 3px #999999;
  84. 84. Degradê S rgba(r, g, b, opacity) S background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1)),to(rgba(185,185,185,1))); S background:-moz-linear- gradient(top,rgba(255,255,255,1), rgba(185,185,185,1));
  85. 85. Layout Multi Colunas #multi-column { /* For Mozilla: */ -moz-column-width: 13em; -moz-column-gap: 1em; /* For WebKit: */ -webkit-column-width: 13em; -webkit-column-gap: 1em; }
  86. 86. Layout Multi Colunas #multi-column { -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; }
  87. 87. Fontes S font-face @font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } p { font-family: Gentium, serif; } S font-variant font-variant: [normal|small-caps] S font-weight font-weight: [100…900]; S font-stretch font-stretch: [ultra- condensed|expanded|etc];
  88. 88. Google Fonts
  89. 89. Ferramentas de Cor Color Picker / Color Wheel S Extensão para Firefox: S http://www.colorzilla.com/firefox/ S https://addons.mozilla.org/en-US/firefox/addon/60 S Online: S http://www.colorpicker.com/ S http://www.workwithcolor.com/doughnut-color-picker-01.htm S http://www.febooti.com/products/iezoom/online-help/online-color- chart-picker.html S http://www.ficml.org/jemimap/style/color/wheel.html 21/11/15 89
  90. 90. Ferramentas de Cor S Color Blender: S http://meyerweb.com/eric/tools/color- blend/ S Referências sobre cores: S http://www.morecrayons.com/ 21/11/15 90
  91. 91. Links Interessantes CSS3 S https://pattle.github.io/simpsons-in-css/ S http://revistaw.com.br/animacoes-em-css/ S http://tutorialzine.com/2014/07/20-impressive-css3-techniques- libraries-and-examples/ S http://tutorialzine.com/2013/10/12-awesome-css3-features-you- can-finally-use/ S http://www.creativebloq.com/css3/animation-with-css3-712437
  92. 92. Muito obrigado! Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br facebook.com/rodrigobsm Contato

×