HTML e CSS

Curso de Análise e Desenvolvimento de Sistemas (ADS)

Unidade Curricular: Webdesign
Professora: Jéssica Zanelato Soares
Conteúdo
● Manipulação de imagens;
● CSS - Folhas de Estilo.
Manipulação de imagens - GIMP
● Faça o download da imagem do botão que está no AVA
● Abra o GIMP - ferramenta para edição de imagens
○ Abra a imagem
Manipulação de imagens - GIMP
● No canto direito, você vai ver as camadas que fazem parte desta imagem
(apenas uma)
● Clique com o botão direito e selecione adicionar canal alfa, o que permite
trabalharmos com fundo transparente
Manipulação de imagens - GIMP
● No canto superior esquerdo, em ferramentas, selecione a varinha mágica
● Depois clique na imagem, selecionando o fundo branco
Manipulação de imagens - GIMP
● Para aumentar a precisão da remoção do fundo branco, clique em “Selecionar” >
“Aumentar”. 1px é o suficiente neste caso. Clique em OK.
Manipulação de imagens - GIMP
● No teclado pressione delete, o fundo branco deverá sumir.
Manipulação de imagens - GIMP
● Vamos exportar nossa imagem como PNG para poder utilizar posteriormente.
CSS
● CSS: Cascading Style Sheeets (Folhas de Estilo em Cascata);
● CSS define como os elementos HTML serão exibidos na tela;
● CSS controla o layout de diversas páginas ao mesmo tempo
○ No HTML 3.2 a tag <font> surgiu e logo se tornou uma dor de cabeça para os
desenvolvedores, pois as definições precisavam ser copiadas para cada página.

● São armazenados em arquivos externos .css.

CSS - Regras
● CSS cria regras aos elementos HTML;
● Utilizamos no header a TAG style para criar nossas folhas de estilo;
● Uma regra contém duas partes: seletor e declaração.
CSS - Regras
CSS - Google Fonts
CSS - Regras
● Podemos especificar vários atributos para vários elementos;
● No exemplo abaixo para as TAGS h1, h2 e h3 definimos a fonte como arial e cor da fonte
como blue.
CSS
● Para melhor organizar nosso site, podemos inserir as folhas de estilo em um
arquivo separado do HTML;
● Para chamar o arquivo CSS na página adicionamos o seguinte comando:
● <link href=“css/nome_arquivo.css” type=“text/css” rel=“stylesheet”/>
■ HREF: arquivo do tipo css;
■ Type: especifica o tipo de documento;
■ Rel: especifica a relação do arquivo HTML com o CSS.
CSS
CSS - Seletores
Seletor Significado Exemplo

Seletor Universal Aplica-se a todas as *{}

TAGs Seleciona todos os elementos da página

Seletor de Texto Seleciona TAGs pelo tipo. h1, h2, h3 {}

Seleciona as TAGs h1, h2 e h3.

Seletor de Classe Seleciona uma TAG cujo o .note{}

atributo class tem o valor Seleciona qualquer TAG cujo atributo class
especificado. tenha o valor note.

p.note{}
Seleciona todos os parágrafos cujo o atributo class esteja especificado
como note

Seletor de ID Seleciona uma TAG cujo #introducao{}

atributo id tem o valor Seleciona a TAG cujo o atributo id tem o valor “introducao”.
especificado.
CSS - Seletores
Seletor Significado Exemplo

Seletor de Filho Seleciona um elemento li>a{}

que é filho direto de outro. Seleciona quaisquer elementos <a> que são filhos de um
elemento <li>. Mas os outros elementos <a> não são
afetados.

Seletor de Descendente Seleciona um elemento descendente p a {}

de outro elemento que é especificado. Seleciona quaisquer elementos <a> que residem dentro de
um elemento <p>.

Seletor de Irmão Adjacente Seleciona um elemento que é o irmão h1 + p {}

próximo de outro. Seleciona o primeiro elemento <p> depois de qualquer
elemento <h1>.

Seletor de Irmão Geral Seleciona um elemento que é um h1~p {}

irmão de outro, embora ele não precise Se houver dois elementos <p> que fossem irmãos de um
ser o elemento diretamente elemento <h1>, essa regra se aplica aos dois <p>.
precedente.
CSS - index.html
CSS - estilo.css
CSS - visualização no navegador
Resolvendo com CSS o exercício 3 da aula 3
● Vamos criar uma página para vender tênis online;
● Nesta página criaremos uma tabela que contenha os campos imagem, nome e preço.
HTML
CSS
Exercício de Fixação
● Crie uma página de contato de funcionários;
● Nesta página utilize uma tabela sem borda e com cores nas linhas alternadas;
● Os campos da tabela são nome, cidade e contato.
HTML
CSS
Exercício de Fixação
● Crie uma página web para venda de livros online;
● A página deverá conter pelo menos 5 livros;
● Deve conter: imagem, título clicável, preço e
descrição;
● Exemplos: