Introdução ao CSS3

Prévia do material em texto

101
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.
102
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.
103
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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
104
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.
105
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
106
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
107
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
108
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 siteou 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.
109
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
110
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.
111
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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
112
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
113
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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
114
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.
115
DESENVOLVIMENTODE SOFTWARE PARA INTERNET
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.
116
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
117
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
É 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
118
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”.
119
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
120
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.
121
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
122
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
123
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
124
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
125
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
126
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 
127
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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 
128
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.
129
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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.
130
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 
131
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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
132
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.
133
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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 globaisde 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.
134
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.
135
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
 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:
136
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.
137
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
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