INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT

Transcrição

1 v1.2 06/04/2017

2 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 4 CSS E CONSTRUÇÃO DE LAYOUTS (PARTE 1) Eder FPF Tech

3 The road so far... HTML Linguagem de marcação. Estrutura mínima de uma página HTML; Tags com abertura e fechamento e tags vazias; Semântica; Principais tags e meta tags; Formulários e campos; Tudo feião.

4 Agenda 1. Introdução 2. Entendendo o CSS 3. Aplicando CSS em um arquivo HTML 4. Principais regras e propriedades Precedência e combinação de seletores Fontes e cores Alinhamento de texto Background, bordas e sombreamento Unidades de Medida Estilizando listas 5. Referências

5 Introdução

6 Introdução CSS Com já vimos, a finalidade do HTML tem foco a estruturação das informações, mas não há muita preocupação com sua aparência: cores, posicionamento do elementos, etc. Problema: páginas HTML com muito conteúdo tornavam-se difíceis de compreender e até mesmo de manter: Em nossos exemplos, poluímos bastante nosso código tentando simular estilo com as elementos de marcação, como a tag hr.

7 Introdução CSS Håkon Wium Lie (CERN, atualmente Opera); Bert Bos; W3C apoiou a ideia; Cascade Style Sheets (folhas de estilo em cascata);

8 Introdução CSS Versões: 1996 CSS CSS CSS CSS3

9 Entendendo o CSS

10 Entendendo o CSS Como é criada uma CSS? A unidade básica de uma CSS é uma regra, composta de duas partes: seletor e declaração. Seletor - é o identificador para localizar o elemento no HTML que será afetado pelo estilo; Declaração - compreende uma propriedade e um valor que serão aplicados ao documento selecionado.

11 Entendendo o CSS Regra CSS seletor { propriedade: valor; } Declaração

12 Entendendo o CSS Seletores id Atributo em uma classe HTML para gerar um identificar único; Representado no CSS por um #; #id { }

13 Entendendo o CSS Seletores Classe Identificador que pode ser aplicado a um ou mais elementos; Representado no CSS por um.;.classe { }

14 Entendendo o CSS Seletores O próprio elemento pode ser uma tag (como vimos nos primeiros exemplos): p { }

15 Entendendo o CSS Regras Propriedade Define qual característica do seletor será estilizado; Valor é a quantificação ou a qualificação da propriedade a ser estilizada;

16 Entendendo o CSS Regras Uma regra CSS pode conter várias declarações separadas por ponto e vírgula:

17 Entendendo o CSS Regras Aplicando o mesmo estilo a vários seletores (basta separálos por vírgula):

18 Entendendo o CSS Regras Diferente do HTML, a sintaxe do CSS é case sensitive:

19 Entendendo o CSS Regras Você pode nomear classes com números, letras, traços e underlines; Não podem ser utilizados caracteres especiais e acentos; O recomendável é sempre usar traços para separar as palavras;

20 Regras Entendendo o CSS

21 Entendendo o CSS Regras Ao nomear classes no CSS devemos sempre levar em conta o comportamento e o estado do elemento no html; Isso é que chamamos de CSS Orientado ao Objeto (OOCSS)

22 Regras Entendendo o CSS

23 Comentários Entendendo o CSS

24 Aplicando o CSS em um arquivo HTML

25 Aplicando o CSS em um arquivo HTML Três possibilidades: Atributo style:

26 Aplicando o CSS em um arquivo HTML Três possibilidades: Atributo style:

27 Aplicando o CSS em um arquivo HTML Três possibilidades: Utilizando a tag style:

28 Aplicando o CSS em um arquivo HTML Três possibilidades: Utilizando a tag style:

29 Aplicando o CSS em um arquivo HTML Três possibilidades: Utilizando a tag link e criando um arquivo externo:

30 Aplicando o CSS em um arquivo HTML Três possibilidades: Utilizando a tag link e criando um arquivo externo:

31 Aplicando o CSS em um arquivo HTML Três possibilidades: Utilizando a tag link e criando um arquivo externo:

32 Aplicando o CSS em um arquivo HTML Três possibilidades: Utilizando a tag link e criando um arquivo externo:

33 #ficaadica Aplicando o CSS em um arquivo HTML

34 Aplicando o CSS em um arquivo HTML Utilizando os seletores no HTML: Se o seletor for uma classe, você deve utilizar o atributo class de um elemento, atribuindo uma ou mais classes como valor;

35 Aplicando o CSS em um arquivo HTML Utilizando os seletores no HTML Se o seletor for um id, você deve utilizar o atributo id de um elemento, atribuindo como valor um nome único em todo o documento:

36 Aplicando o CSS em um arquivo HTML Utilizando os seletores no HTML Se o seletor é o próprio elemento, você não precisa fazer nenhuma indicação adicional para a regra CSS ser aplicada:

37 Aplicando o CSS em um arquivo HTML Mãos à obra! 5 minutos: Escolha qualquer um dos exemplos implementados em aulas anteriores e crie um arquivo CSS externo, associe ao HTML e modifique a cor de todo o texto no body para algum tom de cinza.

38 Principais regras e propriedades

39 Principais regras e propriedades Precedência de seletores Regras em um bloco style tem prioridade sobre as definidas em arquivos externos; Regras no atributo style (diretamente em um elemento HTML) tem precedência sobre tags style e arquivos externos.;

40 Principais regras e propriedades Precedência de seletores Uma regra dentro de um #id sempre será mais forte que as outras; Uma regra de.classe sempre será mais específica que seletores que utilizem a própria tag (p, h1, span, etc); Se duas regras tiverem a mesma força, a que for declarada por último será a que valerá.

41 Principais regras e propriedades Precedência de seletores #id {} prevalece sobre.classe {} prevalece sobre tag {}

42 Principais regras e propriedades Combinação de seletores Algumas exemplos: p.destaque - seleciona apenas os parágrafos que possuem a classe "destaque". div#cabecalho h1 - seleciona tags h1 que estejam dentro da div com a id "cabecalho". #conteudo ul li a - seleciona links (tag a) dentro de itens de lista dentro de tags ul que estejam dentro de um elemento com a id "conteudo".

43 Principais regras e propriedades Combinação de seletores Algumas exemplos: #conteudo p.destaque strong - seleciona elementos strong dentro de parágrafos com a classe "destaque" que estejam dentro de um elemento com a id "conteudo"..mensagem.destaque - seleciona apenas elementos que tenham a classe "mensagem" e a classe "destaque". Separando itens por vírgulas, como p.destaque, h1, a.saiba-mais seleciona todos os respectivos elementos para as regras. Muito útil para diminuir a repetição de regras no arquivo CSS.

44 Principais regras e propriedades Pseudo-classes São tipos de classes especiais não definidas pelo desenvolvedores; Exemplo mais comum: comportamentos da tag a em determinados eventos:

45 Principais regras e propriedades Pseudo-classes Exemplos: Com o seletor a:link, estilizamos apenas os links não-visitados, ou seja, links no seu estado normal. Com o seletor a:visited, estilizamos apenas links visitados, ou seja, que já foram clicados. Com o seletor a:hover, estilizamos links quando o mouse está em cima do mesmo.

46 Principais regras e propriedades Pseudo-classes Exemplos: Com o seletor a:focus, estilizamos links quando os selecionamos com o teclado, através da tecla Tab. Esta pseudo-classe é útil para estilizar links para pessoas que possuem habilidade limitada e não conseguem utilizar o mouse, por exemplo. Com o seletor a:active, estilizamos um link quando o mouse está sendo clicado ou pressionamos Enter, ativando o link.

47 Fontes e cores Propriedades tipográficas Fonte: font-family, font-size, font-style, font-weight, line-height. Decoração de texto: text-decoration, text-transform, text-shadow, text-indent, word-spacing, letter-spacing.

48 Alguns valores possíveis para font-family: Fontes e cores

49 Alguns valores possíveis para font-family: Fontes e cores

50 Alguns valores possíveis para font-family: Fontes e cores

51 Alguns valores possíveis para font-family: Fontes e cores

52 Alguns valores possíveis para font-family: Fontes e cores

53 Fontes e cores Cores na web Nome: black, white. HEX: # (#000), #ffffff (#fff).

54 Fontes e cores Cores na web RGB: rgb(0, 0, 0), rgb(255,255,255). RGBa: rgba(0, 0, 0, 1), rgba(0,0,0,0).

55 Alinhamento de texto Propriedades tipográficas Alinhamento: text-align. Cor: color.

56 Background, bordas e sombreamento Bordas e plano de fundo Bordas: border, border-color, border-style, border-width. Plano de Fundo: background, background-color, background-image, background-position, background-size.

57 Background, bordas e sombreamento Sombras Para criação de sombras, utilizamos: box-shadow. Observação: Alguns navegadores exigem a declaração de propriedades específicas (Mozilla Firefox, por exemplo);

58 Background, bordas e sombreamento Sombras Exemplo 1:

59 Background, bordas e sombreamento Sombras Exemplo 2:

60 Background, bordas e sombreamento Sombras Exemplo 3:

61 Unidades de medida O CSS reconhece diversos tipos de unidades de medidas e podemos classificá-las em dois tipos: Medidas absolutas: pixels, centímetros, picas, pontos e polegadas; Medidas relativas: rem, em, vh, vw, ex, porcentagem;

62 Unidades de medida Medidas mais comuns utilizadas: pixels: unidade absoluta, dependente da desindade de pixels do dispositivo; rem: relativa ao tamanho da letra M da fonte utilizada documento HTML; em: relativa ao tamanho da letra M da fonte utilizada no elemento pai do seletor.

63 Unidades de medida O pixel como unidade de medida Os pixels são os valores mais comuns e fáceis de se usar. São unidades absolutas e seu tamanho não varia. Ou seja, 1px será sempre 1px.

64 Unidades de medida em como unidade de medida O cálculo da unidade depende do tamanho da fonte declarada no elemento pai do elemento selecionado. A fórmula de cálculo é: target : contexto = result

65 Unidades de medida em como unidade de medida No exemplo abaixo, qual seria o tamanho em em do elemento <strong> dentro do <p>?

66 Unidades de medida em como unidade de medida Fórmula: target : contexto = result 10 (px) : 20 (px) = 0.500em

67 Unidades de medida rem como unidade de medida O rem é uma unidade nova, mas muito usada; O cálculo da unidade rem depende do tamanho da fonte declarada no root (html). A fórmula de cálculo é: target : root = result Dica: Conversor de pixels para em e rem (

68 Unidades de medida Unidades de medida

69 Unidades de medida Unidades de medida E porque utilizamos em e rem ao invés de pixels? Por causa da grande variedade de dispositivos e telas. Pixels são definidos em relação ao dispositivo (mídia) de exibição; As medidas em e rm são relativas ao tamanho da fonte herdada. Então, é mais confiável definir o tamanho da fonte por uma unidade que é abstraída de sua própria medida do que por algo que depende da tela;

70 Estilizando listas Listas Como já vimos anteriormente, temos dois tipos de listas no HTML: ul e ol; Podemos estilizar estas listas para remover os indicadores (bullets e números) e mudar a orientação (lado a lado, etc). Para isso, utilizamos as propriedades list-style do CSS: list-style-type, list-style-position e list-style-image.

71 Estilizando listas Listas Exemplo 1:

72 Estilizando listas Listas Exemplo 2:

73 Aplicando o CSS em um arquivo HTML Mãos à obra! 20 minutos: Crie um projeto simples com uma página HTML e um arquivo CSS externo para gerar a seguinte representação (ver slide seguinte):

74 Aplicando o CSS em um arquivo HTML

75

76

77 Referências 1. SILVA, Maurício Sammy. Fundamentos de HTML5 e CSS3. Capítulos 4, 5, 6, 7. 1ª ed. São Paulo: Novatec, p. 69 a ARAÚJO, Leandro. Programação Web com HTML e CSS. Aulas 1 a 5. Manaus: BuriTech, EIS, Diego. Uma breve história do CSS. Disponível em: < Acesso em 31/03/ W3C. CSS Specifications. Disponível em: < Acesso em 31/03/2017.

78 Referências 5. Intentor from Tatootine. Precedência de seletores CSS. Disponível em: < Acesso em 31/03/ Caelum. Porque usar em no seu CSS hoje em dia? Disponível em: < Acesso em 31/03/ W3C BR. Unidades CSS. Disponível em: < Acesso em 31/03/ ARRIGONE, Ricardo. Entendendo o atributo box-shadow na CSS3. Disponível em: < Acesso em 31/03/2017.

79 Referências 9. MULLER, Guilherme. Sintaxe e seletores CSS. Disponível em: < Acesso em 31/03/ W3 Schools. CSS Web Safe Font Combinations. Disponível em: < Acesso em 02/04/ Tutorials Point. CSS Measure Units. Disponível em: < Acesso em 02/04/2017.

80 Para saber mais 1. NERDCAST. Nerdcast 256 Cegos, nerds e loucos (Acessibilidade). Áudio, 61 minutos. Disponível em < cegos-nerds-e-loucos/> Acesso em 06/04/ HIPSTERS TECH. Web Hipsters #201 Acessibilidade Web. Áudio, 43 minutos. Disponível em < Acesso em 06/04/2017.

81 Eder Martins Franco facebook.com/edermartinsfranco linkedin.com/in/efranco23/ moodle.franco.eti.br