Apresentação do PowerPointacademy.franco.eti.br/material/aula4_academy_html_css_js.pdf · AULA 4...

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

seletor {propriedade: valor;

}

Regra CSS

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;

Entendendo o CSS

Regras

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)

Entendendo o CSS

Regras

Entendendo o CSS

Comentários

Aplicando o CSS em um arquivo HTML


Três possibilidades:

• Atributo style:



• Utilizando a tag style:



• Utilizando a tag link e criando um arquivo externo:


#ficaadica


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;


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:


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:


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



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



#id {}

prevalece sobre

.classe {}

prevalece sobre

tag {}


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


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.


Pseudo-classes

• São tipos de classes especiais não definidas pelo desenvolvedores;

• Exemplo mais comum: comportamentos da tag a em determinados eventos:


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.


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

Alguns valores possíveis para font-family:

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.


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


Sombras

• Exemplo 1:


Sombras

• Exemplo 2:


Sombras

• Exemplo 3:

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


• No exemplo abaixo, qual seria o tamanho em em do elemento <strong> dentro do <p>?

Unidades 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/)

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:


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

Apresentação do PowerPointacademy.franco.eti.br/material/aula4_academy_html_css_js.pdf · AULA 4...

Documents

Transcript of Apresentação do PowerPointacademy.franco.eti.br/material/aula4_academy_html_css_js.pdf · AULA 4...