Apresentação do PowerPointacademy.franco.eti.br/material/aula4_academy_html_css_js.pdf · AULA 4...
Transcript of Apresentação do PowerPointacademy.franco.eti.br/material/aula4_academy_html_css_js.pdf · AULA 4...
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
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);
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
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
• 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;
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)
Aplicando o CSS em um arquivo HTML
Três possibilidades:
• Utilizando a tag link e criando um arquivo externo:
Aplicando o CSS em um arquivo HTML
Três possibilidades:
• Utilizando a tag link e criando um arquivo externo:
Aplicando o CSS em um arquivo HTML
Três possibilidades:
• Utilizando a tag link e criando um arquivo externo:
Aplicando o CSS em um arquivo HTML
Três possibilidades:
• Utilizando a tag link e criando um arquivo externo:
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 bodypara algum tom de cinza.
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.
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).
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);
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
• 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.
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):
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-shadow-nas-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/sintaxe-seletores-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
[email protected] [email protected]
facebook.com/edermartinsfrancolinkedin.com/in/efranco23/
moodle.franco.eti.br