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

v1.2 06/04/2017

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

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.

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

Introdução

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.

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

Introdução CSS Versões: 1996 CSS1 1998 CSS2 2003 CSS 2.1 2014 CSS3

Entendendo o CSS

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.

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

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

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

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

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;

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

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

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

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;

Regras Entendendo o CSS

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)

Regras Entendendo o CSS

Comentários Entendendo o CSS

Aplicando o CSS em um arquivo HTML

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

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

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

#ficaadica Aplicando o CSS em um arquivo HTML

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;

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:

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:

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.

Principais regras e propriedades

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.;

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á.

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

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".

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.

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:

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.

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.

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.

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

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

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).

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

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.

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

Background, bordas e sombreamento Sombras Exemplo 1:

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;

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.

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.

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

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

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

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 (http://pxtoem.com/)

Unidades de medida Unidades de medida

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;

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.

Estilizando listas Listas Exemplo 1:

Estilizando listas Listas Exemplo 2:

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):

Aplicando o CSS em um arquivo HTML

Referências 1. SILVA, Maurício Sammy. Fundamentos de HTML5 e CSS3. Capítulos 4, 5, 6, 7. 1ª ed. São Paulo: Novatec, 2015. p. 69 a 180. 2. ARAÚJO, Leandro. Programação Web com HTML e CSS. Aulas 1 a 5. Manaus: BuriTech, 2014. 3. EIS, Diego. Uma breve história do CSS. Disponível em: <https://tableless.com.br/uma-breve-historia-do-css/>. Acesso em 31/03/2017. 4. W3C. CSS Specifications. Disponível em: <https://www.w3.org/style/css/specs>. Acesso em 31/03/2017.

Referências 5. Intentor from Tatootine. Precedência de seletores CSS. Disponível em: <http://intentor.com.br/precedencia-de-seletores-css/>. Acesso em 31/03/2017. 6. Caelum. Porque usar em no seu CSS hoje em dia? Disponível em: <http://blog.caelum.com.br/porque-usar-em-no-seu-css-hoje-em-dia/>. Acesso em 31/03/2017. 7. W3C BR. Unidades CSS. Disponível em: <https://www.w3.org/style/examples/007/units.pt_br.html/>. Acesso em 31/03/2017. 8. ARRIGONE, Ricardo. Entendendo o atributo box-shadow na CSS3. Disponível em: <http://www.linhadecodigo.com.br/artigo/3633/entendendo-o-atributo-box-shadownas-css3.aspx>. Acesso em 31/03/2017.

Referências 9. MULLER, Guilherme. Sintaxe e seletores CSS. Disponível em: <http://guilhermemuller.com.br/pt/elearning/html_css_basico/licao/2/sintaxeseletores-css>. Acesso em 31/03/2017. 10. W3 Schools. CSS Web Safe Font Combinations. Disponível em: <https://www.w3schools.com/cssref/css_websafe_fonts.asp>. Acesso em 02/04/2017. 11. Tutorials Point. CSS Measure Units. Disponível em: <https://www.tutorialspoint.com/css/css_measurement_units.htm>. Acesso em 02/04/2017.

Para saber mais 1. NERDCAST. Nerdcast 256 Cegos, nerds e loucos (Acessibilidade). Áudio, 61 minutos. Disponível em <https://jovemnerd.com.br/nerdcast/nerdcast-256- cegos-nerds-e-loucos/> Acesso em 06/04/2017. 2. HIPSTERS TECH. Web Hipsters #201 Acessibilidade Web. Áudio, 43 minutos. Disponível em <http://hipsters.tech/acessibilidade-web-hipsters-21/> Acesso em 06/04/2017.

Eder Martins Franco eder.franco@fpf.br efranco23@gmail.com facebook.com/edermartinsfranco linkedin.com/in/efranco23/ moodle.franco.eti.br