UNIDADE III

Desenvolvimento de
Software para Internet

Prof. Salatiel Marinho

 Agenda

 Introdução ao CSS3.

Fonte: https://pixabay.com/photos/technology-computer-black-code-1283624/
 Introdução ao CSS3

 CSS significa Cascading Style

Sheets, e a ideia por trás dele é
muito simples e prática. Os
documentos CSS são gerados
apenas com a finalidade de
estilizar (ou seja, efetuar a gestão
de cores, tamanho, layout, posição
e muito mais) o conteúdo de um
documento de marcação HTML.

Fonte: https://pixabay.com/photos/code-computer-css-it-monitor-1797778/
 Introdução ao CSS

 O CSS foi originalmente

criado para garantir a
redução de quantidade de
marcação utilizada em um
documento HTML para ditar
assim a aparência de um
trecho específico.

Fonte: autoria própria.

Introdução ao CSS – exemplo

Fonte: autoria própria.

 Introdução ao CSS

 Existe também a opção

Vamos estudar CSS3
de verificar a execução
da página acionando o
botão F12 do teclado e
visualizando as
interações da página.

Fonte: autoria própria.

 Introdução ao CSS

 Exemplo de regra de estilo vermelho em negrito

agora definida em styles.css, esse arquivo deve
ser salvo com a extensão .css.

Fonte: autoria própria.

 Introdução ao CSS

 Podemos notar imediatamente a diferença. Para reutilizar a regra em outra linha, precisamos
apenas adicionar class = "boldred" como um atributo para nossa tag, sendo assim, se
precisarmos alterar a regra de estilo de vermelho para azul, em que todos os elementos que
utilizarem essa regra sofreram alterações para uma cor azul sem precisar tocar em nenhuma
marcação HTML.

Fonte: https://pixabay.com/photos/coding-programming-css-1853305/
 Interatividade

CSS significa Cascading Style Sheets e é muito simples e prático. Os documentos CSS são
gerados apenas com a finalidade de:

a) Armazenar informação.
b) Validar informação.
c) Corrigir informação.
d) Excluir informação.
e) Estilizar informação.
 Resposta

CSS significa Cascading Style Sheets e é muito simples e prático. Os documentos CSS são
gerados apenas com a finalidade de:

a) Armazenar informação.
b) Validar informação.
c) Corrigir informação.
d) Excluir informação.
e) Estilizar informação.
 Agenda

 Seletores.

Fonte: https://pixabay.com/photos/technology-computer-black-code-1283624/
 Seletores

 Os seletores de ID geralmente são utilizados deliberadamente para gerar um controle de

hierarquia em um documento CSS e atua em pleno uso da natureza em cascata
da tecnologia.
 A cascata pode ser utilizada com grande efeito quando conseguimos encadear seletores,
porque nos possibilita aprofundar a marcação HTML, sem ter que ter certeza de que ditamos
apenas a aparência da marcação.

Fonte:
https://pixabay.com/p
hotos/code-coding-
programming-css-
2620118/
 Seletores

 Sendo assim, iremos supor que por um momento estamos desenvolvendo um documento
HTML contendo postagens de notícias acadêmicas.
 Todas as publicações de notícias no documento precisam em definição obedecer ao mesmo
conjunto de regras de estilo e, como tal, assumem a mesma aparência para cada publicação
de notícia.
 Cada postagem pode ser exibida em um plano de fundo de cor diferente do restante da
página e sempre deve ter cabeçalhos em negrito em azul com texto de parágrafo menor
em vermelho.

Fonte:
https://pixabay.com/photos
/code-html-digital-coding-
web-1076533/
 Seletores – exemplo


Notícia 1

Estamos estudando a unidade 3

Notícia 2

A unidade 4 está chegando...

Fonte: autoria própria.

Fonte: autoria própria.

Seletores – exemplo

Fonte: autoria própria.

Seletores – exemplo

Seletor Direto
Fonte: autoria própria.
Seletores – exemplo

Seletor Universal
Fonte: autoria própria.
 Interatividade

O ____________ de ID geralmente é utilizado deliberadamente para gerar um controle de

hierarquia em um documento CSS e atua em pleno uso da natureza em cascata da tecnologia.
O termo que falta no texto é:

a) Rastreador.
b) Integrador.
c) Valor.
d) Seletor.
e) Versionador.
 Resposta

O ____________ de ID geralmente é utilizado deliberadamente para gerar um controle de

hierarquia em um documento CSS e atua em pleno uso da natureza em cascata da tecnologia.
O termo que falta no texto é:

a) Rastreador.
b) Integrador.
c) Valor.
d) Seletor.
e) Versionador.
 Agenda

 Estudo de cores.

Fonte: https://pixabay.com/photos/technology-computer-black-code-1283624/
 Estudo de cores

 No esquema numérico hexadecimal, os dígitos são definidos e contabilizados de 0 a F, em

vez de 0 a 9, como no sistema numérico decimal normal, ou seja, quando nós observamos
atentamente, notamos que podemos ajustar todos esses valores em 4 bits e, como o número
máximo de 4 bits que pode representar em decimal como o 15, então 0 a F realmente
significa 0 a 15.

Fonte: https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/
 Estudo de cores

 RGB é a abreviatura de um sistema de cores aditivas em que o Vermelho, o Verde e o Azul

são combinados de várias formas de modo a reproduzir um largo espectro cromático.
 Os valores de cores RGB são suportados em todos os navegadores.
 Um valor de cor RGB é especificado com: rgb (vermelho, verde, azul).
 Cada parâmetro (vermelho, verde e azul) define a intensidade da cor como um número
inteiro entre 0 e 255.
 Por exemplo, rgb (0, 0, 255) é renderizado como azul, porque o parâmetro azul é definido
como seu valor mais alto (255) e os outros são definidos como 0.

Fonte: https://pixabay.com/photos/abstract-
desktop-background-3225698/
Estudo de cores

Desenvolvimento de Software para Internet

Unidade 3

Fonte: autoria própria.

 Estudo de cores

 Se as cores nomeadas não atuarem de forma suficiente e a notação hexadecimal for muito
complicada para o nosso estudo, temos uma boa notícia sabendo que, com o CSS3, existe a
possibilidade de definir suas cores utilizando apenas um dos quatro novos tipos de dados, ou
seja, esses tipos são utilizados basicamente de maneira que especificando-os como uma
palavra-chave seguida por um conjunto de valores de parâmetros entre parênteses. Os
valores entre parênteses podem assumir um valor fixo ou um valor percentual.

Fonte:
https://pixabay.com/phot
os/abstract-desktop-
background-3225698/
 Interatividade

RGB é a abreviatura de um sistema de cores aditivas em que ___________________ são

combinados de várias formas de modo a reproduzir um largo espectro cromático. Quais são as
cores da combinação?

a) Branco, Amarelo e Verde.

b) Azul, Vermelho e Branco.
c) Vermelho, Verde e Azul.
d) Vermelho, Amarelo e Verde.
e) Azul, Vermelho e Verde.
 Resposta

RGB é a abreviatura de um sistema de cores aditivas em que ___________________ são

combinados de várias formas de modo a reproduzir um largo espectro cromático. Quais são as
cores da combinação?

a) Branco, Amarelo e Verde.

b) Azul, Vermelho e Branco.
c) Vermelho, Verde e Azul.
d) Vermelho, Amarelo e Verde.
e) Azul, Vermelho e Verde.
 Agenda

 Geradores de fontes.

Fonte: https://pixabay.com/photos/technology-computer-black-code-1283624/
 Geradores de fontes

 Durante quase toda a vida útil da especificação HTML/CSS, muitos desenvolvedores e

designers da web ficaram restritos ao mesmo conjunto principal de fontes para sua tipografia
de atuação. Caso quiséssemos utilizar uma determinada fonte, frequentemente
precisávamos preparar o texto em um pacote artístico ou processador de texto que tivesse
acesso à fonte desejada e, na sequência, salvar a imagem como um arquivo de imagem
compatível com o browser ou até mesmo como uma captura de tela do seu processador de
texto para utilizarmos no nosso documento HTML.

Fonte:
https://pixabay.com/photos/font-
lead-set-book-printing-705667/
 Geradores de fontes

 Erros de ortografia e alterações simples de texto levavam um tempo longo para serem
corrigidas e isso realmente era uma tarefa árdua para qualquer outra coisa além dos banners
ou manchetes simples.

 Sendo assim, embora houvesse uma quantidade de frustrações em torno do uso de fontes,
havia também boas e sólidas razões para se restringir as coisas, e essas praticamente se
resumiam a diferenças de plataforma.

Fonte:
https://pixabay.com/photos/font-
lead-set-book-printing-705667/
 Geradores de fontes

 Os browsers antigos não eram tão capazes quanto os browsers de hoje, e muitos sistemas
operacionais tinham apenas uma quantidade limitada de fontes instaladas, sendo assim, por
isso os comitês de HTML formularam uma lista de fontes conhecidas que estavam
praticamente garantidas em qualquer plataforma com qualquer tipo de fonte e
browser gráfico.

Fonte:
https://pixabay.com/photos/font-
lead-set-book-printing-705667/
 Geradores de fontes

 Pode dar a entender que não atuava com a fonte original, e muitos designers simplesmente
desmoronavam pelo fato de não renderizarem corretamente

Fonte:
https://pixabay.com/photos/font-
lead-set-book-printing-705667/
 Geradores de fontes

 Por exemplo, se nós especificássemos Impact Bold, sans-serif, qualquer plataforma que
tivesse o Impact Bold instalado seria exibida como pretendido, ou seja, se a fonte não
estivesse disponível, o sans-serif seria utilizado como padrão.

Fonte:
https://pixabay.com/photos/font-
lead-set-book-printing-705667/
Geradores de fonte – exemplo

Fonte: https://fonts.google.com/

Fonte: https://www.fontsquirrel.com/
 Interatividade

Caso quiséssemos utilizar uma determinada fonte, frequentemente precisávamos preparar o

texto em um pacote artístico ou processador de texto que tivesse acesso à fonte desejada e,
na sequência, salvar a imagem como um arquivo de:

a) Texto.
b) Imagem.
c) Matemático.
d) Modelo.
e) Versionador.
 Resposta

Caso quiséssemos utilizar uma determinada fonte, frequentemente precisávamos preparar o

texto em um pacote artístico ou processador de texto que tivesse acesso à fonte desejada e,
na sequência, salvar a imagem como um arquivo de:

a) Texto.
b) Imagem.
c) Matemático.
d) Modelo.
e) Versionador.
 Referências

COYIER, C. Named colors and hex equivalentes. CSS-TRICKS, 2012. Disponível em:
https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/. Acesso em: 15 jun.
2020.
FONT SQUIRREL. Disponível em: https://www.fontsquirrel.com/. Acesso em: 15 jun. 2020.
GOOGLE. Disponível em: https://fonts.google.com/. Acesso em: 15 jun. 2020.
LOTAR, A. Programando com ASP.NET MVC. São Paulo: Novatec, 2011.
MANZANO, J. A. N.; TOLEDO, S. A. Guia de orientação e desenvolvimento de sites – HTML,
XHTML, CSS e JavaScript/JScript. 2. ed. São Paulo: Erica, 2010.
ATÉ A PRÓXIMA!