2018216 19936 Aula+002+ +HTML+e+CSS

Prévia do material em texto

Programação para internet
Prof. Marcelo Sudo
HTML e CSS
Objetivos:
Continuar o aprendizado de HTML e 
CSS e praticar.
Seletores do CSS
 Os seletores podem se aplicar para:
 Uma tag HTML;
 Um ID específico;
 Ou criar uma classe para aplicar em elementos
HTML.
Seletores do CSS
 Um seletor CSS pode conter mais de um seletor
simples. Entre os seletores simples, que pode incluir
um elemento de combinação.
 Há quatro combinadores diferentes:
 Seletor descendente (espaço);
 Seletor filho (>);
 Seletor irmão adjacente (+);
 Seletor irmão em geral (~).
Seletor descendente
 O seletor descendente corresponde a todos os
elementos que são descendentes de um elemento
especificado.
 É utilizado um espaço em branco entre os seletores.
Seletor descendente
Seletor filho
 O seletor filho seleciona todos os elementos que são
os filhos imediatos de um elemento especificado.
 É utilizado o sinal de maior (>) entre os seletores.
Seletor filho
Seletor irmão adjacente
 O seletor irmão adjacente seleciona todos os
elementos que são os irmãos adjacentes de um
elemento especificado.
 Elementos irmãos devem ter o mesmo elemento pai,
e "adjacente" significa "imediatamente a seguir“.
 É utilizado o sinal de mais (+) entre os seletores.
Seletor irmão adjacente
Seletor irmão em geral
 O seletor de irmão em geral seleciona todos os
elementos que são irmãos de um elemento
especificado.
 É utilizado o sinal de til (~) entre os seletores.
Seletor irmão em geral
Seletor por atributo
 Define um estilo para um elemento que possua
alguma atributo, ou algum atributo com valor
específico.
 É utilizado colchetes [].
 Exemplos:
 a[target] { }
 input[type=“text”] { }
 [title~=“flower”] { } Contendo flower
 [class^=“top”] { } Iniciado com top
 [class$=“test”] { } Terminado com
Seletor por atributo
CSS e Versões
 Assim como o HTML, o CSS também possuem
versões, e a versão mais atual é o CSS3.
 O CSS3 trouxeram novas possibilidades de
formatação, como por exemplo:
 border-radius: bordas arredondadas;
 text-shadow: efeito de sombra;
 transform: efeitos 2D e 3D;
 animation: animação.
Compatibilidade de 
navegadores
 Antes de utilizar qualquer recurso, principalmente de
HTML5 e CSS3, verifique a compatibilidade dos
navegadores.
 Teste em todos os navegadores para garantir que irá
funcionar o site.
Combinações de cores
 Site com palheta de cores:
 https://color.adobe.com/
HTML Media
 Tags <audio> e <video> para exibição de conteúdo
multimídia.
 Umas das novidades do HTML5.
 Antes era necessário plugins, como por exemplo, 
flash player.
 Os formatos suportados dependem de versão de
navegador.
Tag <audio>
 Utilizado para reproduzir um áudio.
 Pode ser definido diferentes formatos de arquivo na
tag <source>. O navegador utilizará o primeiro
formato reconhecido.
Tag <video>
 Utilizado para reproduzir um vídeo.
 Pode ser definido diferentes formatos de arquivo na
tag <source>. O navegador utilizará o primeiro
formato reconhecido.
Tags Media x Streaming
 As tags de mídia possuem a mesma característica
de um streaming, que é começar a exibir a mídia a
medida que é feito o download.
 O Streaming é protegido, o arquivo não é feito o
download do arquivo integral.
Exercício
 Crie uma página de autenticação, com os campos:
 Login: campo texto;
 Senha: campo senha;
 Botão de login.
 Crie um arquivo CSS separado para definir o estilo
da página.
Exercício
Exercício
 Faça um exemplo utilizado as tags de mídias (audio
e video).
 Faça o download de um arquivo de áudio e vídeo da
internet para testes.