Livro-Texto - Unidade III

DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
Unidade III
5 ESTAÇÃO CSS3
5.1 CSS3
5.1.1 Introdução a CSS3
Assim como as novas especificações do HTML 5, o CSS3 (ou CSS versão 3, para ser mais preciso)
é definido como um conjunto mais recente de especificações projetadas para efetuar o molde,
assim proporcionando a experiência de modelar e definir exatamente quais recursos a versão mais
recente do CSS possui.
O CSS3 também não é um “novo CSS” como muitas pessoas pensam; como o HTML5, é
retrocompatível com tudo o que veio antes. No futuro, no entanto, haverá uma incrível quantidade de
novas funcionalidades, permitindo uma infinidade de possibilidades criativas que simplesmente não
existiam nas versões anteriores.
Figura 83 – Exemplo de estrutura HML5 com CSS
Preste muita atenção à tag do link no cabeçalho, conforme ilustrado a seguir, pois ela tem por
definição um arquivo com o nome de styles.css, ou seja, ele é um arquivo com o nome (ou similar) que
iremos apresentar na maior parte do nosso código CSS.
101
Unidade III
No entanto, se modificarmos o nome, precisamos lembrar de que usamos um nome diferente ao criar
documentos HTML básicos para experimentar. Existe também a opção de verificar a execução da página
acionando o botão F12 do teclado e visualizando as interações da página, conforme apresentado a seguir.
Figura 84 – Ferramentas do navegador Google Chrome mostrando o arquivo CSS falhando ao carregar
Se a página HTML não localizar um link com arquivo CSS, nenhuma das regras que se encontram no
CSS serão aplicadas a ela.
Saiba mais
A utilização do browser Google Chrome é uma recomendação. Para

realização da instalação desse browser, acessar o link disponível em:
FAÇA mais com o novo Chrome. Google. Disponível em: https://www.

google.pt/intl/pt-PT/chrome/. Acesso em: 21 set. 2020.
O seguinte artigo nos dá uma explanação sobre a utilização do modo

desenvolvedor do browser Google Chrome:
USE as ferramentas de desenvolvedor do Google Chrome para verificar tags.

Ajuda do Campaign Manager. Support Google. 2020. Disponível em: https://
support.google.com/dcm/answer/2828688?hl=pt-BR. Acesso em: 21 set. 2020.
102
5.1.2 Definindo CSS
CSS vem de 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.
Sendo assim, embora o objetivo do código HTML seja estruturar o documento, o CSS tem em sua
existência a definição de como esse conteúdo é apresentado ao usuário final da web.
De modo básico, o CSS foi originalmente gerado para garantir a redução de quantidade de marcação
que estava sendo utilizada em um documento HTML para ditar, assim, a aparência de um trecho
específico de HTML, conforme apresentado a seguir.
Figura 85 – Exemplo de código pré-CSS
Como podemos ver no código HTML apresentado na figura anterior, é necessário muito mais
marcação para produzir um cabeçalho simples, em uma linha, em negrito e vermelho, do que a maioria
dos que são utilizados atualmente, conforme apresentado a seguir:
Figura 86 – A saída produzida pelo exemplo de código pré-CSS
103
Unidade III
As regras CSS resolvem dois desses problemas imediatamente apresentados no código. Primeiro, eles
geralmente têm por definição as regras que compõem a aparência do texto em um arquivo apartado, ou
seja, isso significa que um designer ou qualquer pessoa da área gráfica pode reajustar facilmente essas
regras, sem ter necessidade de se preocupar com o código no arquivo HTML.
Em segundo lugar, conseguem promover a reutilização de uma regra em diversos elementos através
da utilização do atributo class, o que significa que podemos especificar as configurações somente uma
vez e informar a marcação quando utilizá-las.
Exemplo de regra de estilo vermelho em negrito, agora definida em styles.css, esse arquivo deve ser
salvo com a extensão .css.
Quadro 8
.boldred
{
font-family: serif;
font-size: 20pt;
color: red;
}
Podemos notar imediatamente a diferença, para reutilizar a regra em outra linha, precisamos
apenas adicionar class = “boldred” como um atributo para nossa tag, sem precisar alterar a regra
de estilo de vermelho para azul, sendo que todos os elementos que utilizarem essa regra sofrerão
alterações para uma cor azul sem precisar tocar em nenhuma marcação HTML.
5.1.3 Seletores CSS
Os seletores de ID geralmente são utilizados deliberadamente para gerar um controle de hierarquia

em um documento CSS e atuam em pleno uso da natureza em modelo cascata da tecnologia.
A cascata pode ser utilizada com grande efeito quando conseguimos encadear seletores, porque
nos possibilita aprofundar a marcação HTML, sem precisar ter certeza de que ditamos apenas a
aparência da marcação.
Exemplo de aplicação
Sendo assim, suponhamos 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.
104
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 e em azul com texto de parágrafo menor em vermelho, conforme
implementação realizada na figura.
Figura 87 – Implementação de CSS
Embora o código possa funcionar muito bem e produza a saída desejada (conforme apresentado
na figura a seguir), podemos tirar vantagem da natureza em cascata do CSS, sendo que seria possível
tornar possível as coisas um pouco mais óbvias – até o ponto em que nosso HTML e CSS pudessem estar
descrevendo suas próprias intenções.
105
Unidade III
Figura 88 – Resultado da implementação de CSS
Desde que os elementos estejam dentro de uma seção que tenha o ID nomeado, eles serão coloridos
de acordo. Devemos observar também que o comportamento em cascata pode ser apresentado de
maneira que não se aplica apenas a seletores baseados em ID, conforme apresentado a seguir.
Figura 89 – Exemplo de código CSS utilizando seletores de classe
106
O uso de um seletor em cascata com base em classe, como o citado, pode reutilizar sua classe
de notícias em diversos lugares em seu HTML, e qualquer elemento h1 ou p adicionado dentro desse
elemento assumirá automaticamente a aparência dos cabeçalhos azuis com texto vermelho.
5.1.4 Pseudosseletores
Assim como o “pseudocódigo”, o pseudosseletor não é um seletor completo por si só, mas uma extensão
para um seletor existente. O exemplo mais conhecido disso é o foco utilizado nas tags de âncora HTML.
Um pseudosseletor funciona alterando uma regra existente para estar ativa, sendo que apenas em
um cenário determinado, que no caso de estar em semelhança, é quando o usuário passa o mouse sobre
o elemento em questão, conforme apresentado a seguir.
Figura 90 – Exemplo para apresentar o seletor pseudo-hover
Antes do CSS3, havia também o pseudo-hover (conforme apresentado na figura a seguir), que
gerava a possibilidade de trabalhar em todos os navegadores; normalmente, era possível aplicar apenas
a tags de âncora HTML, que eram passadas, visitadas, ativas e vinculadas, utilizadas para estilizar tags de
âncora para feedback visual, sendo assim, dependendo de um usuário ter visitado ou não o link.
107
Unidade III
Figura 91 – Exemplo para apresentar o código CSS do pseudo-hover
Infelizmente, a partir do CSS3, embora esses estilos ainda funcionem conforme o esperado, o número
de opções que podem ser modificadas por eles foi estritamente limitado, isso foi ocasionado em resposta
a uma invasão de privacidade, onde proprietários de sites mal-intencionados os usavam para rastrear se
os usuários haviam visitado um determinado site ou não.
Saiba mais
Recomenda-se a leitura da Lei n. 13.709/18 (Lei Geral de Proteção

de Dados – LGPD):
BRASIL. Presidência da República. Casa Civil. Subchefia para Assuntos

Jurídicos. Lei n. 13.709, de 14 de agosto de 2018. Lei Geral de Proteção
de Dados Pessoais (LGPD). Brasília, 2018. Disponível em: http://www.
planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm. Acesso
em: 17 set. 2020.
5.1.5 Seletores diretos
Esse é o mais simples de todos os seletores disponibilizados e, como o próprio nome sinaliza, é
utilizado para selecionar de maneira direta um nome de elemento conhecido, ou seja, também é possível
encontrar os termos de tipo de seletores, seletores de elemento e seletores de tag.
108
Não existe uma terminologia estabelecida para esse tipo de seletor e tem por definição que sua
utilização depende muito do fabricante do browser, ou seja, para fins de desenvolvimento proprietário,
utilizamos o seletor direto simplesmente porque estamos segmentando de forma direta uma entidade
nomeada, conforme apresentado na figura a seguir:
Figura 92 – Exemplo para apresentar o código CSS dos seletores diretos hover
Depois que esse item é adicionado a uma folha de estilos (CSS), qualquer item na marcação HTML do
documento que consistir em uma marca <p> </p> será apresentado em cor verde, conforme ilustrado
a seguir, linhas de 4 a 9, independentemente de sua classe, ID ou qualquer outra situação.
Lembrete
Aplica-se um estilo de cor verde para a tag <p>, ou seja, todo texto
inserido na página envolvido com ela será apresentado nessa cor.
Sendo assim, vale lembrar que é possível combinar seletores básicos, para selecionar facilmente
apenas os elementos h1, que são descendentes de divs.
5.1.6 Seletor universal (*)
O seletor target all realiza o trabalho exatamente como o próprio nome diz: tem como premissa
localizar tudo o que pode no espaço em que está operando, ou seja, isso significa que, se estivermos
dentro de um seletor com base em ID, tudo o que estiver sob o controle desse seletor será afetado.
109
Unidade III
A utilização do símbolo * (asterisco) determina imediatamente que ele se comporte como um

curinga, sendo o que mais ganha campo de desenvolvimento e selecionando o máximo possível.
No início, essa ação pode ser encarada com bons olhos, até que repentinamente percebamos o quanto
a nossa página fica mais lenta em um dispositivo móvel ou até mesmo em uma página com milhões de
elementos alinhados.
O seletor universal foi desenhado e implementado, pensando principalmente nas possibilidades

de se fazer mudanças radicais como parte de uma configuração inicial, ou até mesmo como gerar
uma definição de um modelo CSS inteiro de uma página para um conjunto conhecido de padrões, por
exemplo, como margens de 0 pixel e sem bordas.
Normalmente, é utilizado em redefinições CSS para inicializar em um estado conhecido, sendo que
muitas das conhecidas estruturas de interface do usuário de front-end realizam uso extensivo dela para
colocar sua página em um estado conhecido antes de efetuar, assim, qualquer estilo personalizado que
eles possam disponibilizar para o seu trabalho.
O seletor universal deverá ser utilizado com muita moderação, visto que sua esfera de influência
deve ser a menor possível, para não onerar de forma drástica o desempenho de nossas páginas web,
conforme apresentado na figura a seguir.
Figura 93 – Exemplo para apresentar o código CSS do seletor universal
A propriedade margin, conforme ilustrado na figura a seguir, simplesmente adiciona uma margem
ao elemento. Podemos utilizar qualquer medida Css (px, pt, em, %…) como tamanho da propriedade
margin, além disso conseguimos atribuir valores negativos.
110
Quadro 9
#elemento {
margin-top: 15px; /* – propriedade que define a margem superior de um elemento
margin-right: 10px; /* – propriedade que define a margem direita de um elemento
margin-bottom: 25px; /* – propriedade que define a margem inferior de um elemento
margin-left: 35px; /* – propriedade que define a margem esquerda de um elemento
}
O padding, também ilustrado na figura a seguir, tem um funcionamento muito similar ao do margin,
porém, em vez de dar um espaçamento externo, ele realiza o espaçamento interno da página.
Quadro 10
#elemento {
padding-top: 25px; /* – propriedade que define o espaço de preenchimento superior de um elemento
padding-right: 45px; /* – propriedade que define o espaço de preenchimento no lado direito de um elemento
padding-bottom: 35px; /* – propriedade que define o espaço de preenchimento inferior de um elemento
padding-left: 15px; /* – propriedade que define o espaço de preenchimento no lado esquerdo de um elemento
}
#elemento { padding: 25px 15px; } /* Top/bottom – right/left */
#elemento { padding: 25px; }/* top/right/bottom/left */
Deve-se ter cuidado ao utilizar o padding, pois ele aumenta a largura do elemento. Caso seu
elemento tenha um width de 200px e utilizarmos um padding-left de 50px, ele vai passar a ter uma
largura de 250px. Então, sempre que necessário, deve-se compensar o padding do elemento reduzindo
o width ou o height.
Figura 94 – Margin/padding – CSS
111
Unidade III
Depois que incluímos em algum lugar próximo à parte superior do nosso arquivo de estilo,
podermos ter certeza de que, imediatamente, nenhuma das suas regras terá margens ou preenchimento
aplicados a elas.
Lembrete
A propriedade margin simplesmente adiciona uma margem ao elemento.

Pode-se utilizar qualquer medida Css (px, pt, em, %...) como tamanho, além
disso pode-se atribuir valores negativos.
O padding tem um funcionamento muito similar ao do margin, porém,

em vez de dar um espaçamento externo, ele realiza o espaçamento
interno da página.
5.1.7 Seletor adjacente
O seletor adjacente proporciona uma seleção dos elementos imediatamente próximos um do outro
e funciona apenas uma vez para cada ocorrência, conforme apresentado a seguir.
Figura 95 – Exemplo de marcação HTML para demonstrar o seletor adjacente
112
Aplicando-se a regra de CSS, conforme apresentado na figura, teremos a seguinte marcação:
Figura 96 – Exemplo de regra CSS para demonstrar o seletor adjacente
Sendo assim, obtém-se o resultado ilustrado no browser conforme apresentado a seguir:
Figura 97 – Resultado da aplicação do seletor adjacente
113
Unidade III
Somente o elemento p próximo ao elemento h1 seria alterado para uma cor vermelha, ou seja, a
segunda linha de texto (e quaisquer outras que possam seguir) permaneceriam inalteradas, assim como
os próprios elementos h1.
5.1.8 Seletor de atributo
No CSS3, no entanto, os seletores de atributos são extremamente poderosos e possibilitam que

possamos montar um estilo bastante inteligente dos elementos. Primeiramente, precisamos definir o
que realmente é um seletor de atributos.
Ao contrário dos seletores que já estudamos nessa unidade, um seletor de atributos não é considerado
uma construção de caractere único que fica entre dois destinos, e sim um apêndice com diversos
caracteres para uma regra principal, que contém suas próprias regras de processamento interno.
Os seletores de atributos podem ser definidos como um conjunto personalizado de expressões

de pesquisa, especificamente para identificar elementos com base no valor ou parte de um atributo
anexado a eles ao longo de sua estrutura, conforme apresentado na figura.
Figura 98 – Exemplo de marcação HTML com atributos personalizados
E possível ver no exemplo citado na figura que criamos uma lista não padrão e bastante ordenada
que contém itens como elementos do tipo âncora, porém isso não é nada incomum, é algo que
podemos certamente nos acostumar em observar nos links de navegação em documentos HTML.
O que fizemos, no entanto, foi utilizar o atributo rel para marcar a relação do link, especificando assim,
se é externo ou interno.
114
Se quisermos estilizar os dois tipos diferentes de maneiras distintas, poderíamos, então, em teoria,
apenas adicionar uma classe, como .internal ou .external, porém pode haver situações em que a marcação
HTML pode ser gerada dentro de um processo sobre o qual não se tenha esse controle, sendo assim, talvez
não seja possível adicionar classes de saída dessa maneira.
Então aqui entra em ação o seletor de atributos. Pode-se utilizá-lo para direcionar um atributo
nomeado específico dentro do elemento e, pode-se empregá-lo não somente para segmentar uma
sequência completa, mas como parte de um nó.
Primeiro, vamos observar a figura a seguir, como podemos aplicá-los de links anteriores. Vamos
adicionar as seguintes regras de estilo à nossa folha de estilos, sendo que iremos supor que já fizemos a
inclusão do HTML anterior ao nosso documento.
Figura 99 – Exemplo de regras do seletor de atributos
Apenas usando duas regras distintas, segmentamos de maneira fácil os dois tipos diferentes de links,
simplesmente por causa da diferença no atributo rel (conforme figura anterior). A principal vantagem
do estudo realizado é que agora não precisamos nos preocupar em garantir que uma classe específica
seja aplicada a um determinado link, tornando a manutenção do documento muito mais fácil, ágil e
menos propensa a erros, conforme apresentado a seguir.
115
Unidade III
Figura 100 – Resultado da aplicação de regras do seletor de atributos
Utilizamos o atributo “rel” para definir um relacionamento interno ou externo em um elemento

âncora. Em termos das especificações do W3C, essa provavelmente não seria a melhor forma de se fazer
isso e, muito provavelmente o HTML poderia falhar na validação se fosse testado com uma ferramenta
de validação do HTML 5, porém isso não significa que precisamos voltar a usar um atributo de classe.
Exemplo de aplicação
Vamos imaginar por um instante que todos os seus links externos tenham uma URL totalmente
qualificada, e todos os seus links internos tenham apenas uma folha de página relativa, ou seja, nesse
caso, poderia se escrever a marcação da seguinte maneira, como apresentado a seguir:
Figura 101 – Resultado da aplicação de regras do seletor de atributos
Se examinarmos a diferença nos atributos href, podemos perceber que todos os links externos
começam com “http: //” e os internos não, ou seja, se utilizarmos o seletor “o valor do atributo começa
com”, agora podemos estilizar facilmente os externos com uma cor diferente.
O que abordamos aqui nem sequer arranhou a superfície do potencial disponível, levando-se em
consideração especialmente quando se trata de seletores de atributos, porém no HTML5, há um novo
conceito de atributo chamado atributo de dados, que assume a forma de dados seguida praticamente
por um nome personalizado, por exemplo:
• data-username
• data-recordindex
116
É possível utilizar esses atributos de dados em qualquer elemento, para qualquer finalidade, e ainda
mais quando efetuamos a combinação com os seletores corretos, eles permitem utilizar o HTML5 para
descrever facilmente suas próprias intenções e principalmente seu estilo.
5.1.9 Seletor de foco
Como o próprio nome sugere, o foco é utilizado quando um elemento de entrada tem foco em um
documento, ou seja, isso geralmente é utilizado em formulários para destacar um campo ativo aguardando
o seu preenchimento, conforme apresentado a seguir.
Figura 102 – Exemplo de marcação simulada de formulário HTML
117
Unidade III
Na sequência, iremos adicionar uma regra simples a nossa folha de estilo:
Figura 103 – Aplicando CSS
Para o nosso exemplo, qualquer elemento que possa receber o foco do usuário irá alterar a cor,
conforme especificado quando o foco for alternado:
Figura 104 – Resultado do exemplo apresentado no navegador
Importante ressaltar que consideramos foco quando o cursor está piscando no input selecionado, no
nosso exemplo poderia ser no campo “nome do usuário” ou “e-mail”.
118
5.1.10 Seletor ativado ou desativado
Entre os muitos dos novos atributos que podem facilmente ser aplicados aos elementos na
especificação do HTML5 está o atributo desativado (disabled). Podemos utilizá-lo como qualquer
outro atributo simplesmente adicionando “disabled” a um elemento em sua marcação, conforme
apresentado a seguir.
Figura 105 – Exemplo de marcação simulada de formulário HTML com elementos desativados
Na sequência, adicionaremos uma regra simples a nossa folha de estilo: se removermos o atributo
desativado do elemento, a entrada retornará facilmente ao seu estado original, sendo assim, essa regra
geralmente é muito utilizada para apresentar campos somente de leitura em um editor de registros ou
até mesmo para mostrar campos que não são aplicáveis ao formulário atual, por exemplo, poderíamos
realizar uma marcação de um formulário para que os campos de endereço pudessem ser visualizados
apenas quando uma caixa de seleção para enviar e-mail para esse endereço estivesse marcada, conforme
apresentado a seguir.
119
Unidade III
Figura 106 – Exemplo de aplicação de regra CSS para estilizar elementos desabilitados
Se utilizássemos a estrutura da interface do usuário do bootstrap, poderíamos observar que alguns

elementos, quando utilizados em um formulário, têm um pequeno círculo vermelho de parada apresentado
sobre eles quando se passa o mouse com um ponteiro. Ou seja, isso é realizado da mesma maneira,
utilizando a regra desativada para alterar o estilo do ponteiro do mouse. O pseudosseletor ativado é o
contrário lógico de desativado e aplica o estilo fornecido a um elemento que não está desativado.
Observação
Bootstrap pode ser definido como um framework web com

código‑fonte aberto para fins de desenvolvimento de componentes de
interface e front-end para sites e aplicativos web que utilizam HTML, CSS e
JavaScript, baseado praticamente em modelos de design para a tipografia,
contribuindo para uma melhor experiência do usuário em um site amigável
e principalmente responsivo.
Saiba mais
Para conhecer melhor sobre esse assunto, recomendamos a leitura da

documentação do bootstrap em:
GETBOOTSTRAP. Introdução. Disponível em: https://getbootstrap.com/

docs/4.4/getting-started/introduction/. Acesso em: 22 set. 2020.
120
Conforme apresentado na figura a seguir, um elemento é classificado como ativado, quando, por
exemplo, não há motivo para desativá-lo, ou especificamente, quando não possui um atributo desativado
aplicado, ou seja, pode-se observar que um elemento também pode ser classificado como desativado se a
propriedade boolean (true/falsa) desativada do elemento estiver configurada como true em seu objeto de
documento utilizando JavaScript. Como em outros seletores, a responsabilidade de habilitar e desabilitar
pode ser feita explicitamente com base no estado do elemento. Isso significa que não é necessário garantir
que nos elementos corretos existam, por exemplo, as classes aplicadas corretamente.
Figura 107 – Exemplo de regra CSS para estilizar elementos ativados
Observação
Em ciências exatas e tecnológicas, boolean pode ser definido como um

tipo de dado primitivo que possui dois valores (0 – falso e 1 – verdadeiro),
denominado boolean em uma honrosa homenagem a George Boole, que
diante de seus estudos, determinou um sistema de lógica algébrica pela
primeira vez em meados do século XIX.
5.1.11 Seletor válido ou inválido
Um dos ótimos recursos incrementados ao HTML5 é a validação do lado do browser, que pode
ser utilizada para fazer com que o browser efetue uma validação das entradas de um formulário
antes de enviá-lo.
121
Unidade III
Com o seletor desabilitado, os pseudosseletores aqui se aplicam a elementos somente quando

utilizados aos atributos e a marcações extras, fornecidos na especificação.
As alterações podem não ser tão óbvias no início, porém, se observarmos a caixa de nome de usuário,
poderemos visualizar que agora ela possui um atributo obrigatório, ou seja, a entrada de e-mail, no
entanto, não possui mais um tipo de texto, agora ele tem um tipo de e-mail.
Figura 108 – Exemplo de marcação simulada de formulário HTML com elementos validáveis
122
Conforme apresentado na figura a seguir, o nome do usuário aparece imediatamente vermelho,

porque é obrigatório, portanto, até ser preenchido, será classificado como inválido. O e-mail é válido
pois apenas apresentamos que ele deve ter sua entrada validada como um endereço de e-mail, por
exemplo, não afirmamos que isso seria necessário como entrada, portanto, ter um e-mail em branco
pode ser considerado válido.
Figura 109 – Exemplo de regras de validação CSS3
No entanto, se iniciarmos a nossa digitação, ele mudará para vermelho e voltará a verde até que a
entrada seja sinalizada corretamente ou removida por completo, conforme ilustrado a seguir:
Figura 110 – Resultado do exemplo de regras de validação CSS3
Utilizar válido e inválido é uma excelente maneira de fornecer feedback ao usuário, mas vê-los
imediatamente assim que o formulário é apresentado geralmente não é considerada uma boa prática.
123
Unidade III
Observação
Feedback pode ser definido como a informação que o emissor obtém da

reação do receptor a sua mensagem, ou seja, tem por finalidade servir para
avaliar os resultados da transmissão.
Sendo assim, por esse motivo, normalmente não os utilizamos diretamente aos elementos de
entrada, de forma geral anexamos a um nome de classe/ID e, em consequência, verificamos, aplicamos
e utilizamos JavaScript quando o formulário é enviado.
5.1.12 Seletor verificado
O pseudosseletor marcado é utilizado ao atuar com elementos de caixa de seleção e rádio, ou seja,
sua premissa é simples e prática: se o elemento estiver marcado ou selecionado, essa regra será aplicada;
caso contrário, não será.
Figura 111 – Exemplo de maneira simples de caixas de seleção e botões de opção
124
Como as caixas de seleção e os botões de opção não alteram a cor, utilizaremos uma estratégia
muito diferente para esse exemplo, e iremos alterar o tamanho dos controles, sendo assim, iremos
adicionar as seguintes regras a nossa folha de estilos, conforme apresentado a seguir:
Figura 112 – Exemplo de estilos CSS que demonstram o uso do pseudosseletor verificado
A utilização de seletores verificados como este é o método utilizado, por exemplo, pelos kits de
ferramentas da interface do usuário, como o materialize e o bootstrap, para produzir botões de alternância
e rádio personalizado e verificar grupos desenvolvidos a partir de listas de ícones. Caso desejássemos
criar caixas de seleção personalizadas, bastaria combinar esse padrão com pseudoelementos, como
antes e depois, para assim adicionar/remover conteúdo dinamicamente a sua marcação, conforme
ilustrado a seguir.
125
Unidade III
Figura 113 – Resultado do exemplo de estilos CSS que demonstram o uso do pseudosseletor verificado
Saiba mais
O materialize é um framework front-end responsivo que é baseado

totalmente em material design, porém o que diferencia o materialize
de outros frameworks front-end, como o bootstrap, por exemplo, é que
o materialize é completamente baseado no material design do Google,
enquanto o bootstrap tem como base de construção a primeira linguagem
de design para dispositivos móveis e na linguagem de design plano. Para
saber mais sobre esse assunto, recomendamos a seguinte leitura:
MATERIALIZE. Materializecss. Disponível em: https://materializecss.

com/. Acesso em: 22 set. 2020.
6 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 observamos atentamente, notamos
que podemos ajustar todos esses valores em 4 bits e, como esse número máximo pode representar em
decimal como o 15, então 0 a F realmente significa 0 a 15.
Se dobrarmos isso, os 4 bits se tornarão 8 bits e o máximo que poderíamos seria ajustar para 255,
então FF (nosso maior número hexadecimal) se tornará 255 (nosso maior número decimal), sendo
que nosso objetivo aqui não é transformar isso em uma lição de matemática hexadecimal, e sim
demonstrar apenas que um valor de cor é composto de 256 (0 a 255) níveis de vermelho, verde e azul,
com 0 sendo nenhuma cor e 255 sendo o valor máximo de cor. Por exemplo, se quiséssemos um cinza
126
médio, poderíamos utilizar 127 para os valores de vermelho, verde e azul, que, quando traduzidos,
forneceriam #7F7F7F.
6.1 Nomes das cores
O CSS2 introduziu nomes próprios para algumas cores, mas elas não foram realmente divulgadas;
isso, no entanto, foi bastante expandido com CSS3, conforme apresentado a seguir.
Tabela 4 – Os 147 nomes de cores CSS3
Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor
AliceBlue #F0F8FF Gainsboro #DCDCDC MistyRose #FFE4E1
AntiqueWhite #FAEBD7 GhostWhite #F8F8FF NavajoWhite #FFDEAD
Aqua #00FFFF Gold #FFD700 Navy #000080
Aquamarine #7FFFD4 GoldenRod #DAA520 OldLace #FDF5E6
Azure #F0FFFF Gray #808080 Olive #808000
Beige #F5F5DC Grey #808080 OliveDrab #6B8E23
Bisque #FFE4C4 Green #008000 Orange #FFA500
Black #000000 GreenYellow #ADFF2F OrangeRed #FF4500
BlanchedAlmond #FFEBCD HoneyDew #F0FFF0 Orchid #DA70D6
Blue #0000FF HotPink #FF69B4 PaleGoldenRod #EEE8AA
BlueViolet #8A2BE2 IndianRed #CD5C5C PaleGreen #98FB98
Brown #A52A2A Indigo #4B0082 PaleTurquoise #AFEEEE
BurlyWood #DEB887 Ivory #FFFFF0 PaleVioletRed #DB7093
CadetBlue #5F9EA0 Khaki #F0E68C PapayaWhip #FFEFD5
Chartreuse #7FFF00 Lavender #E6E6FA PeachPuff #FFDAB9
Chocolate #D2691E LavenderBlush #FFF0F5 Peru #CD853F
Coral #FF7F50 LawnGreen #7CFC00 Pink #FFC0CB
CornflowerBlue #6495ED LemonChiffon #FFFACD Plum #DDA0DD
Cornsilk #FFF8DC LightBlue #ADD8E6 PowderBlue #B0E0E6
Crimson #DC143C LightCoral #F08080 Purple #800080
Cyan #00FFFF LightCyan #E0FFFF RebeccaPurple #663399
DarkBlue #00008B LightGoldenRodYellow #FAFAD2 Red #FF0000
DarkCyan #008B8B LightGray #D3D3D3 RosyBrown #BC8F8F
DarkGoldenRod #B8860B LightGrey #D3D3D3 RoyalBlue #4169E1
DarkGray #A9A9A9 LightGreen #90EE90 SaddleBrown #8B4513
DarkGrey #A9A9A9 LightPink #FFB6C1 Salmon #FA8072
DarkGreen #006400 LightSalmon #FFA07A SandyBrown #F4A460
DarkKhaki #BDB76B LightSeaGreen #20B2AA SeaGreen #2E8B57
DarkMagenta #8B008B LightSkyBlue #87CEFA SeaShell #FFF5EE
DarkOliveGreen #556B2F LightSlateGray #778899 Sienna #A0522D
DarkOrange #FF8C00 LightSlateGrey #778899 Silver #C0C0C0
DarkOrchid #9932CC LightSteelBlue #B0C4DE SkyBlue #87CEEB
DarkRed #8B0000 LightYellow #FFFFE0 SlateBlue #6A5ACD
127
Unidade III
Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor Nome da cor Hexadecimal Cor
DarkSalmon #E9967A Lime #00FF00 SlateGray #708090
DarkSeaGreen #8FBC8F LimeGreen #32CD32 SlateGrey #708090
DarkSlateBlue #483D8B Linen #FAF0E6 Snow #FFFAFA
DarkSlateGray #2F4F4F Magenta #FF00FF SpringGreen #00FF7F
DarkSlateGrey #2F4F4F Maroon #800000 SteelBlue #4682B4
DarkTurquoise #00CED1 MediumAquaMarine #66CDAA Tan #D2B48C
DarkViolet #9400D3 MediumBlue #0000CD Teal #008080
DeepPink #FF1493 MediumOrchid #BA55D3 Thistle #D8BFD8
DeepSkyBlue #00BFFF MediumPurple #9370DB Tomato #FF6347
DimGray #696969 MediumSeaGreen #3CB371 Turquoise #40E0D0
DimGrey #696969 MediumSlateBlue #7B68EE Violet #EE82EE
DodgerBlue #1E90FF MediumSpringGreen #00FA9A Wheat #F5DEB3
FireBrick #B22222 MediumTurquoise #48D1CC White #FFFFFF
FloralWhite #FFFAF0 MediumVioletRed #C71585 WhiteSmoke #F5F5F5
ForestGreen #228B22 MidnightBlue #191970 Yellow #FFFF00
Fuchsia #FF00FF MintCream #F5FFFA YellowGreen #9ACD32
Em qualquer lugar em que precisarmos especificar uma cor em suas regras de CSS, poderíamos
utilizar esses nomes de cores.
Saiba mais
Se em alguns momentos do desenvolvimento não se lembra dessas cores,

anexo aqui dois links interessantes, que irão auxiliar muito nessa pesquisa:
BISQUE. Colors Commutercreative. Disponível em: http://www.colors.

commutercreative.com. Acesso em: 22 set. 2020.
O site CSS-Tricks não lista apenas as cores, mas também os valores de

#rrggbb para cada uma delas.
COYIER, C. Named colors and hex equivalentes. CSS-Tricks, janeiro de

2012. Disponível em: https://css-tricks.com/snippets/css/named-colors-
and-hex-equivalents/. Acesso em: 22 set. 2020.
Ao utilizar o nome da cor transparente, tornamos o objeto ao qual está aplicando o valor da cor
100% transparente, sendo assim, não há como variar o nível de transparência usando nomes de cores e
valores hexadecimais, porém podemos definir a regra CSS de opacidade em um elemento, a menos que
colocássemos como escolha a utilização de valores diretos de cores.
128
6.2 Valores das 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, eles são utilizados basicamente
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.
• # 7F7F7F
• rgb (127, 127, 127)
• rgb (50%, 50%, 50%)
Todos esses três valores, quando utilizados em qualquer lugar no CSS em que uma cor possa ser
especificada, resultarão na geração da mesma cor.
6.3 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 utilizar no documento HTML.
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 frustaçõ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.
Os browsers antigos não eram tão capazes quanto aqueles 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.
Não trataremos apenas de Windows e Mac, pois no início dos anos 1990 havia mais variações de
Unix e Linux e suas distribuições em seus ambientes desktop específicos. Então, nessa mesma época
(anos 1990), iniciou-se uma padronização utilizando itens como X11 e gerenciadores de janelas, como
Gnome e KDE, que auxiliaram nesse trabalho.
129
Unidade III
Observação
Gnome é um projeto de software livre que atende como área de

atuação o ambiente de trabalho, de mesmo nome (para os usuários), e a
sua plataforma de desenvolvimento (para os desenvolvedores), sendo que
o projeto dá ênfase de maneira especial à usabilidade, acessibilidade e
internacionalização.
KDE é uma comunidade internacional de software livre que desenvolve

um conjunto de aplicativos multiplataforma desenhados e customizados
para o funcionamento em conjunto com sistemas tais como: Linux, Solaris
Microsoft Windows e Apple Mac OS X.
Só para se ter uma ideia da lista de fontes básicas restritas que quase sempre garantiam o
trabalho, tem-se:
• Sans-serif
• Serif
• Fantasy
• Cursive
• Monospace
Se quiséssemos especificar nossa fonte utilizando uma dessas opções, primeiramente obteríamos
a versão dessa plataforma e, embora nem sempre fosse exatamente idêntica, a aparência, o estilo e a
sensação estariam próximas o suficiente para que o layout do nosso design não fosse muito afetado e
prejudicado no resultado de sua apresentação.
Dependendo da plataforma de uso, também é possível disponibilizar substituições a serem utilizadas,

onde geralmente, em sites desenvolvidos em máquinas Windows, veríamos fontes descritas, tais como:
Times, “Times New Roman”, Serif.
Por exemplo, se especificássemos Impact Bold, Sans-serif, qualquer plataforma que tivesse Impact
Bold instalada seria exibida como pretendido, ou seja, se a fonte não estivesse disponível, a Sans-serif
seria utilizada, como padrão.
Não existia uma fonte original e muitos designers simplesmente desmoronavam pelo fato de não
renderizarem corretamente, porém com o CSS3, houve uma implementação de correção, que fornece
agora a capacidade de empacotar fontes em diferentes formatos com seu aplicativo da web, fazer o
130
download do servidor e utilizá-las se detectar que a plataforma de destino não as tem disponíveis, ou
até mesmo no caso de não estarem aderentes.
Isso ainda não significa que não se deva utilizar a lista de fontes seguras da web, porém basta uma
perda de conectividade e estaremos de volta à estaca zero.
6.4 Gerando uma fonte adequada
Talvez a maneira mais eficiente de usar uma fonte para o design seja utilizar o site Font Squirrel, que
pode ser utilizado basicamente para converter uma fonte do seu sistema em um kit instantaneamente
utilizável de regras e folhas de estilo CSS3.
Saiba mais
Visite o site:
FONT Squirrel. Webfont Generator. Disponível em: https://www.

fontsquirrel.com/tools/webfont-generator. Acesso em: 22 set. 2020.
Utilizá-lo é muito simples; precisa clicar, adicionar fontes e selecionar os arquivos que deseja
adicionar, sendo que, depois de adicionar as fontes que deseja converter, necessita clicar na caixa de
contrato para continuar, e o Font Squirrel irá converter as fontes, conforme apresentado a seguir.
Figura 114 – Representação do upload da fonte
131
Unidade III
Figura 115 – Localizando a fonte
Saiba mais
Para a realização do exemplo anterior, em que a fonte Photograph foi

usada, indicamos:
https://www.dafont.com/pt/
Quando finalizar, um link de download será apresentado para um arquivo zip, que contém a fonte
em diversos formatos compatíveis com a web, além de diversos arquivos CSS e exemplos de marcação
HTML mostrando como utilizá-lo, conforme apresentado a seguir.
132
Figura 116 – Representação do download do kit
Uma alternativa é a utilização de fontes do diretório de fontes abertas do Google Fonts, que faz
questão de utilizar essa ferramenta para possibilitar que todas as fontes listadas no site sejam utilizáveis
nos designs de páginas web.
Com o Google Fonts, podemos pesquisar, filtrar e comparar qualquer uma das fontes da lista e,
depois de escolher a fonte que desejamos utilizar, poderemos adicioná-la a uma coleção ou ver exemplos
rápidos de sua utilização.
Saiba mais
Visite:
https://fonts.google.com/
A página de utilização rápida é particularmente útil porque lista tudo o que precisamos saber para
adicionar de forma prática e ágil essa fonte a nossa página web.
Seguindo as instruções na página de utilização rápida e copiando e colando o código de amostra

fornecido, podemos utilizar a fonte diretamente das redes globais de entrega de conteúdo do Google,
para que seja carregada rapidamente e não precise se preocupar com o download e adicioná-lo ao seu
próprio servidor web.
133
Unidade III
Se optarmos por adicioná-lo a uma coleção, podemos continuar adicionando outras fontes e tudo
apareceria no nosso painel “Coleção”, na parte inferior da página, conforme ilustrado a seguir.
Figura 117 – Representação do Google Fonts
Resumo
Nesta unidade, vimos como podemos combinar e integrar técnicas

de desenvolvimento web, tais como o CSS, que, de fato, enriquece todo
o desenvolvimento do aplicativo web, principalmente tratando de sua
recursividade (bootstrap), disponibilizando, assim, a visualização de páginas
tanto em desktop quanto em smartphones e tablets, sem perder sua
qualidade. Conceitos de CSS enriqueceram o desenvolvimento do aplicativo
web, bem como todo o trabalho como o de aplicação de suas propriedades.
Todos os exemplos que foram apresentados ao longo deste livro-texto têm
como premissa a utilização de um código semelhante e procurará desenvolver
sobre esse código.
Finalmente, ressaltamos que, assim como as novas especificações do

HTML5, CSS3 (ou CSS versão 3, para ser mais preciso), pode ser definido
como o conjunto mais atualizado de especificações projetadas para moldar,
modelar e definir precisamente quais recursos a versão mais recente do CSS
possui atualmente.
Nos estudos de cores, observamos que 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 observamos
atentamente, notamos que podemos ajustar todos esses valores em 4 bits
e, como esse número máximo pode ser representado em decimal como o
15, então de 0 a F realmente significa de 0 a 15.
134
Exercícios
Questão 1. (Cespe 2020) Assinale a opção que indica a propriedade usada no CSS3 para definir o
alinhamento de um elemento inline com relação ao seu elemento-pai.
A) alignment-baseline
B) alignment-adjust
C) background-image
D) background-position
E) line-boxes
Resposta correta: alternativa A.
Análise da questão
Justificativa: para responder corretamente à questão é preciso lembrar que o CSS é desenvolvido em
cascata ou na forma linear. Isso significa que ele segue uma hierarquia – Pai e filho.
Convém lembrar, também, que a classificação do tipo inline é usada quando se quer aplicar um estilo
a uma única ocorrência de um documento.
Para alinhar elemento inline (elemento-filho) com relação ao seu elemento-pai, usa-se a tag
alignment-baseline.
Questão 2. (AOCP 2016) Considere que foi desenvolvido o seguinte código CSS em um arquivo
externo chamado styles.css:
E que também foi criado o seguinte XHTML na mesma pasta que o arquivo style.css:
135
Unidade III
Quando esse XHTML for executado em um navegador web que implemente as especificações mais
atuais do CSS, como ficará a aparência do texto entre as tags <h1> e </h1>?
A) Tamanho: padrão; fonte: arial; cor: vermelha.
B) Tamanho: 36pt; fonte: arial; cor: vermelha.
C) Tamanho: 36pt; fonte: comic sans ms; cor: verde.
D) Tamanho: padrão; fonte: comic sans ms; cor: vermelha.
E) Tamanho: padrão; fonte: padrão; cor: verde.
Resposta correta: alternativa C.
Análise da questão
Justificativa: a ordem de prioridade das tags é:
> 1. tags inline
> 2. tags internas e externas
A questão apresenta duas tags, uma interna e outra externa, declaradas na sessão <head>. Elas
terão a mesma prioridade. Além disso, há uma tag inline dentro do elemento <h1>, que terá prioridade
sobre as demais.
136
Para as duas tags de mesma prioridade, terá preferência a que for declarada por último, que no
caso da questão é a tag <h1> dentro da tag <style> do segundo bloco de código. Ela sobrescreverá os
atributos da tag que for declarada antes.
Ou seja:
> tag externa define a cor da fonte (vermelho), a família (arial) e o tamanho (36pt)=> color:red /
family:arial / size:36pt
> tag interna, que foi declarada depois (portanto, tem mais prioridade), define a cor da fonte (azul)
e família (comic sans) => color:azul / family:comic sans / size:36pt
> tag inline define apenas uma nova cor (verde) => color:verde / family:comic sans / size:36pt <-
essa será a configuração aplicada
Tamanho: 36pt; fonte: comic sans ms; cor: verde
137

Livro-Texto - Unidade III

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Livro-Texto - Unidade III

Enviado por

Direitos autorais:

Formatos disponíveis

DESENVOLVIMENTO DE SOFTWARE PARA INTERNET

5.1.1 Introdução a CSS3

Figura 83 – Exemplo de estrutura HML5 com CSS

A utilização do browser Google Chrome é uma recomendação. Para

FAÇA mais com o novo Chrome. Google. Disponível em: https://www.

O seguinte artigo nos dá uma explanação sobre a utilização do modo

USE as ferramentas de desenvolvedor do Google Chrome para verificar tags.

5.1.2 Definindo CSS

Figura 85 – Exemplo de código pré-CSS

Figura 86 – A saída produzida pelo exemplo de código pré-CSS

5.1.3 Seletores CSS

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

Todas as publicações de notícias no documento precisam em definição obedecer ao mesmo conjunto

Figura 87 – Implementação de CSS

Figura 88 – Resultado da implementação de CSS

Figura 89 – Exemplo de código CSS utilizando seletores de classe

Figura 90 – Exemplo para apresentar o seletor pseudo-hover

Figura 91 – Exemplo para apresentar o código CSS do pseudo-hover

Recomenda-se a leitura da Lei n. 13.709/18 (Lei Geral de Proteção

BRASIL. Presidência da República. Casa Civil. Subchefia para Assuntos

5.1.5 Seletores diretos

5.1.6 Seletor universal (*)

A utilização do símbolo * (asterisco) determina imediatamente que ele se comporte como um

O seletor universal foi desenhado e implementado, pensando principalmente nas possibilidades

Figura 93 – Exemplo para apresentar o código CSS do seletor universal

Figura 94 – Margin/padding – CSS

A propriedade margin simplesmente adiciona uma margem ao elemento.

O padding tem um funcionamento muito similar ao do margin, porém,

5.1.7 Seletor adjacente

Figura 95 – Exemplo de marcação HTML para demonstrar o seletor adjacente

Aplicando-se a regra de CSS, conforme apresentado na figura, teremos a seguinte marcação:

Figura 96 – Exemplo de regra CSS para demonstrar o seletor adjacente

Sendo assim, obtém-se o resultado ilustrado no browser conforme apresentado a seguir:

Figura 97 – Resultado da aplicação do seletor adjacente

5.1.8 Seletor de atributo

No CSS3, no entanto, os seletores de atributos são extremamente poderosos e possibilitam que

Os seletores de atributos podem ser definidos como um conjunto personalizado de expressões

Figura 98 – Exemplo de marcação HTML com atributos personalizados

Figura 99 – Exemplo de regras do seletor de atributos

Figura 100 – Resultado da aplicação de regras do seletor de atributos

Utilizamos o atributo “rel” para definir um relacionamento interno ou externo em um elemento

Figura 101 – Resultado da aplicação de regras do seletor de atributos

5.1.9 Seletor de foco

Figura 102 – Exemplo de marcação simulada de formulário HTML

Na sequência, iremos adicionar uma regra simples a nossa folha de estilo:

Figura 103 – Aplicando CSS

Figura 104 – Resultado do exemplo apresentado no navegador

5.1.10 Seletor ativado ou desativado

Se utilizássemos a estrutura da interface do usuário do bootstrap, poderíamos observar que alguns

Bootstrap pode ser definido como um framework web com

Para conhecer melhor sobre esse assunto, recomendamos a leitura da

GETBOOTSTRAP. Introdução. Disponível em: https://getbootstrap.com/

Figura 107 – Exemplo de regra CSS para estilizar elementos ativados

Em ciências exatas e tecnológicas, boolean pode ser definido como um

5.1.11 Seletor válido ou inválido

Com o seletor desabilitado, os pseudosseletores aqui se aplicam a elementos somente quando

Conforme apresentado na figura a seguir, o nome do usuário aparece imediatamente vermelho,

Figura 109 – Exemplo de regras de validação CSS3

Figura 110 – Resultado do exemplo de regras de validação CSS3

Feedback pode ser definido como a informação que o emissor obtém da

5.1.12 Seletor verificado

Figura 111 – Exemplo de maneira simples de caixas de seleção e botões de opção

O materialize é um framework front-end responsivo que é baseado