Livro II

•

UNIP

petase7593

01/08/2022

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Redes de Computadores

65.004 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

85
PROGRAMAÇÃO WEB RESPONSIVA
Unidade II
5 INICIANDO COM O CSS3
5.1 Criando e organizando o projeto
Imagine que tenha chegado o momento de você ser apresentado formalmente para alguém de
quem já ouviu falar, mas que não tinha encontrado pessoalmente. Para que tudo dê certo nesse primeiro
encontro, você combina o local e o horário de encontro, enfim, organiza a situação. Algo semelhante
deve ocorrer na preparação do nosso ambiente de trabalho.
Vamos preparar o ambiente criando um novo projeto e organizando as nossas pastas da forma
mostrada na figura a seguir.
Site Robo
CSS imagens vídeos index.html
Figura 157 – Fluxo de organização da pasta do projeto
Observação
Utilizaremos como base para o desenvolvimento das páginas HTML
desta unidade os conhecimentos que adquirimos na unidade I.
Dentro do arquivo index.html, inseriremos um código com a estrutura básica de uma página HTML,
conforme mostrado na figura a seguir.
86
Unidade II
Figura 158 – Página index.html com estrutura básica inserida
Quando o objetivo é garantir uma formatação uniforme em todas as páginas de um site, o uso das
folhas de estilo em cascata (Cascading Style Sheets) faz com que nosso trabalho seja simplificado.
Essa folha de estilo é um mecanismo que adiciona estilos a elementos do HTML, como, por exemplo,
cor de fundo, espaçamentos, fontes etc. Assim, o CSS oferece a possibilidade de irmos além das
barreiras de estilo impostas pelo HTML puro.
Criaremos um arquivo CSS para adicionar estilos nas páginas HTML do nosso site. Para isso, dentro
de editor de texto, criaremos um arquivo CSS por meio do menu “File”, opção “New File”, conforme
mostrado na figura a seguir.
Figura 159 – Menu para criação de novo arquivo no Microsoft Visual Studio Code
Logo após o novo arquivo ser aberto, vá ao menu “File” e selecione a opção “Save”.
Figura 160 – Menu para salvar novo arquivo no Microsoft Visual Studio Code
87
PROGRAMAÇÃO WEB RESPONSIVA
Na opção seguinte, navegue até a pasta em que criou o seu projeto. Na pasta do projeto, acesse a
pasta CSS criada anteriormente. Na opção “Nome”, insira “styles” e, em “Tipo”, escolha CSS. Feito isso,
clique na opção “Salvar”. Nosso arquivo de estilos CSS foi criado e, embora vazio, ele agora pode ser
utilizado para definir diversas configurações de estilo em nossas páginas.
Figura 161 – Opções para salvar arquivo no Microsoft Visual Studio Code
Após salvar o arquivo, ele estará na pasta CSS dentro da pasta do projeto, conforme mostrado na
figura a seguir.
Figura 162 – Arquivo styles.css salvo na pasta CSS do projeto
5.2 Chamando o CSS3
Para que seja possível utilizar o CSS do arquivo que criamos na nossa página index.html, é necessário
dizer para o HTML onde se encontra o arquivo de folhas de estilo. Logo, precisamos criar um novo link.
Observação
Existem links que nos levam a outros documentos dentro do próprio
site, por exemplo, outras subpáginas e há aqueles que nos levam a fontes
externas, ou seja, nos direcionam a outros sites.
88
Unidade II
Assim, criaremos um link para importar nosso arquivo CSS, conforme mostrado na figura a seguir.
Figura 163 – Link para o arquivo styles.css dentro da tag <head> da página index.html
Note que criamos um link dentro do <head>, ou seja, ele é um elemento que não faz parte do corpo
da página. Além disso, colocamos qual é a relação do link. No caso, como temos uma folha de estilos,
trata-se de um stylesheet.
5.3 Sintaxe do CSS
Com o que já vimos, podemos editar nosso arquivo CSS. Para isso, vamos entender como funciona a
sintaxe do CSS com o auxílio da figura a seguir.
Figura 164 – Sintaxe do CSS
O seletor, no caso em estudo, pode ser uma tag ou uma classe. Trataremos a respeito posteriormente.
As propriedades devem ser declaradas e, em seguida, o mesmo precisa ocorrer com os valores. Como no
exemplo visto, que modifica a tag <h1> para a cor azul e o tamanho de 12 pixels, o código explicado
anteriormente poderia ser codificado da maneira mostrada na figura a seguir.
Figura 165 – Exemplo de CSS
Esse código não faz parte do nosso projeto, é apenas uma amostra da estrutura do CSS.
5.4 Estilizando o <body> com as propriedades de background
Nosso primeiro passo com o CSS será estilizar a tag <body> com várias propriedades de background.
Vamos, primeiramente, alterar a cor do nosso background da página index.
89
PROGRAMAÇÃO WEB RESPONSIVA
Figura 166 – Estilizando background do body no arquivo styles.css
Note que mesmo sem nenhum código extra na nossa página HTML, o fundo da página ficou todo
azul, como mostrado na figura a seguir.
Figura 167 – Página index.html executada no navegador após alteração no styles.css
Podemos definir a cor de várias formas, tanto pelo nome quanto pelo código RGB ou pelo código
Hexadecimal. Na figura a seguir, temos um exemplo de alteração da cor feita com o uso do código RGB.
Figura 168 – Alteração de cor com o uso do RGB no styles.css
Vejamos, na figura a seguir, um exemplo de alteração da cor feita com o uso do código Hexadecimal.
Figura 169 – Alteração de cor com o uso do Hexadecimal no styles.css
90
Unidade II
Se estava divertido colocar cor no fundo de nossa página, agora ficará melhor ainda, pois inseriremos
imagens com o elemento background-image.
Inicialmente, acesse o site Pixabay, procure uma imagem de robô e faça o download dela, como já
mostrado na unidade I. Em nosso projeto, utilizaremos a figura a seguir, mas você poderá usar aquela
que mais lhe agradar.
Figura 170 – Imagem de robôs baixada do site Pixabay
Logo após fazer o download da imagem, salve-a na pasta “imagens” que foi criada dentro do projeto.
Essa pasta irá armazenar todas as imagens que iremos utilizar.
Figura 171 – Pasta “imagens” criada no projeto após receber a imagem baixada no site Pixabay
Em nosso arquivo styles.css, iremos alterar o que se mostra na figura a seguir.
Figura 172 – Alteração feita no arquivo styles.css para inserção de uma imagem como background
91
PROGRAMAÇÃO WEB RESPONSIVA
Se atualizarmos a página index.html, ela apresentará o aspecto mostrado na figura a seguir.
Figura 173 – Página index.html atualizada após a alteração do background-image no arquivo styles.css
Observação
A página em que está o arquivo .html que estamos editando encontra-se
na pasta “Páginas”, enquanto a imagem encontra-se na pasta “imagens”.
Ambas as pastas estão na raiz do projeto: portanto, o ../ faz com que voltemos
à raiz do projeto e, assim, coloquemos o endereço da pasta de imagens.
Você ainda deve estar se perguntando o motivo de voltarmos uma pasta. A razão é termos criado uma
pasta chamada de CSS e colocado nosso arquivo CSS lá dentro. Então, nós precisamos chegar à pasta
“imagens”, que é onde se encontra a imagem que baixamos. Obviamente, sem voltarmos um diretório, é
impossível acessarmos a pasta que queremos. Isso pode ser melhor entendido se relembrarmos o fluxo
de pastas, conforme mostrado na figura a seguir.
Site Robo
CSS imagens vídeos index.html
Figura 174 – Navegação entre pastas do projeto
92
Unidade II
Note que a imagem, por padrão, repete-se quando executamos a página index.html no navegador.
Caso não seja essa a nossa intenção, podemos usar a propriedade background-repeat, conforme
mostrado na figura a seguir.
Figura 175 – Inserção do background-repeat no arquivo styles.css
O resultado obtido será uma imagem única, no tamanho original do arquivo, como fundo do site,
conforme mostrado na figura a seguir.
Figura 176 – Página index.html atualizada após a
alteração do background-repeat no arquivo styles.css
Podemos trabalhar com duas imagens de fundo ao mesmo tempo utilizando a propriedade
background-repeat. Para vermos como isso funciona, iremos fazer o download de outra imagem
qualquer e inseri-la na pasta imagens do nosso projeto. A imagem escolhida para nossos exemplos foi a
mostrada na figura a seguir. Ela é chamada de robos02.png.
93
PROGRAMAÇÃO WEB RESPONSIVA
Figura 177 – Segunda imagem de robôs baixada do site PixabayImplementaremos o código a seguir dentro do arquivo styles.css.
Figura 178 – Inserção da segunda imagem como background
Note que a primeira imagem não se repete, mas a segunda sim.
Figura 179 – Página index.html executada no navegador após a inserção da segunda imagem
Podemos escolher o tamanho da imagem. Vamos continuar utilizando o no-repeat para facilitar o
entendimento e deixar apenas uma imagem como background.
94
Unidade II
Figura 180 – Configuração do background-size
Como resultado, teremos uma imagem gigante e estourada, como mostrado na figura a seguir, pois
não fazemos ideia de quantos pixels tem o monitor da pessoa que acessará nosso site, sem contar a
perda de qualidade na imagem.
Figura 181 – Página index.html em execução no navegador após inserir o tamanho da imagem em pixels
Observação
Uma imagem estourada tem o aspecto de uma foto que foi superexposta
à luz.
Para conseguirmos colocar a imagem no plano de fundo inteiro e distorcê-la o menos possível,
podemos utilizar, no lugar de pixels, valores, porcentagens, ativando o repeat novamente, conforme
mostrado na figura a seguir.
95
PROGRAMAÇÃO WEB RESPONSIVA
Figura 182 – Configuração do background-size em porcentagem
Note que, no caso em análise, a imagem ocupará 100% da página, não importando o
tamanho do browser.
Agora que já aprendemos um pouco sobre background-size, adotaremos essa configuração para
continuarmos nosso projeto.
Figura 183 – Página index.html em execução no navegador após inserir o tamanho da imagem em porcentagem
5.5 Utilizando fontes de terceiros
Nosso site precisa ser épico. Logo, necessitamos escolher tudo do bom e do melhor para ele! Assim,
fontes padrões não nos satisfazem. Precisamos de fontes novas e mais legais. Para isso, acessaremos
https://fonts.google.com/ e procuraremos alguma fonte interessante.
96
Unidade II
Figura 184 – Site https://fontes.google.com
Para definirmos nossa fonte, clicaremos no símbolo de “+ Select this type” que aparece logo ao lado
direito do nome da fonte escolhida.
Figura 185 – Escolha de fonte no site https://fontes.google.com
Você irá perceber um ponto vermelho no canto direito superior da tela. Caso queira deixar o mouse
em cima do logo, irá ver a opção “View your selected families”.
Figura 186 – Visão das fontes selecionadas no site https://fontes.google.com
Clicando na opção indicada, você verá uma pequena janela com diversas opções de escolha referentes
à fonte que selecionamos. Note que, na opção <link>, podemos copiar um bloco de código para inserir
em nossa página. É exatamente isso o que iremos fazer.
97
PROGRAMAÇÃO WEB RESPONSIVA
Figura 187 – Opções para fontes selecionadas no site https://fontes.google.com
Adicionaremos o link à nossa página index.html dentro do <head>, conforme mostrado na
figura a seguir.
Figura 188 – Inserção do link para a fonte selecionada dentro da tag <head> da página index.html
Dessa forma, teremos acesso à fonte escolhida durante a confecção de nossa página. O nome da
fonte que importamos é Itim. Posteriormente, ele será importante.
Saiba mais
Para conhecer e adquirir novas fontes para o seu site, acesse:
Disponível em: https://fonts.google.com/. Acesso em: 19 abr. 2021.
98
Unidade II
5.6 Inserindo e estilizando o <main> e aprendendo sobre o canal alpha
Vamos definir como será disposto nosso conteúdo principal. Devemos colocar o <main> dentro
do nosso <body> para que seja possível o navegador entender o que acontece. Além disso, vamos
estabelecer um estilo próprio para ele.
Figura 189 – Inserção da tag <main> dentro do <body> da página index.html
Apenas os atos de abrir e de fechar a tag já são suficientes para que possamos trabalhar o CSS dela.
Então, vamos lá.
No nosso arquivo CSS, digite o código mostrado na figura a seguir.
Figura 190 – Configuração do <main> dentro do arquivo styles.css
Vamos entender cada parte que será feita no processo de estilização. Como seletor, temos a tag
<main>, ou seja, tudo o que estiver dentro dela receberá os estilos indicados na figura a seguir.
Figura 191 – Configuração do rgba do background-color
Já aprendemos como escrever cores em RGB. No entanto, desta vez, usamos o código RGBA, isso
significa que o canal alpha está presente. Mas, o que é canal alpha? A resposta é simples, é onde se
encontra a transparência.
Portanto, quando colocamos a cor RGB com o canal alpha, estamos definindo o grau de transparência
que o objeto terá. O valor dessa transparência é medido na variação entre 0 e 1, sendo que 0 corresponde
a algo totalmente visível e 1 a algo totalmente invisível. No nosso exemplo, inserimos 0.6 a essa variável.
O <padding> é um recurso que nos ajuda com o espaçamento entre o conteúdo e as bordas.
Diferentemente da margem, que dá o espaçamento externo, ele dá o espaçamento interno.
Figura 192 – Configuração do padding
99
PROGRAMAÇÃO WEB RESPONSIVA
O <margin-top> cria uma margem com o topo do site. Usamos, em geral, o pixel para definir o
<margin-top>, mas também podemos empregar porcentagem.
Figura 193 – Configuração do margin-top
Por fim, temos o <border-radius>, que define o arredondamento das esquinas do <main> utilizando
como referência o raio das bordas. Veja as imagens das figuras a seguir.
Figura 194 – Configuração do border-radius
Figura 195 – Funcionamento do border-radius
Ao olharmos no navegador, poderemos notar que logo em cima da página, aparece uma linha
transparente. Colocaremos mais conteúdo dentro dessa linha, conforme mostrado na figura a seguir.
Figura 196 – Site em execução no navegador, após a inserção e a configuração do <main>
100
Unidade II
5.7 Containers <div> e classificação de tag
Dividiremos nosso conteúdo em pequenos containers, que, como o nome já sugere, são espaços
separados em que os conteúdos ficam guardados. Primeiramente, precisaremos encontrar um logo para
o site. Volte ao site do Pixabay, encontre uma imagem de robô de sua preferência, faça o download dela
e salve-a na pasta de imagens de seu projeto com o nome robologo.png, a extensão do arquivo pode ser
jpg. No nosso caso, a pasta de imagens ficará da maneira mostrada na figura a seguir.
Figura 197 – Pasta de imagens do projeto após inserirmos a imagem do logo do robô
Agora que já temos uma imagem para o nosso logo, digitaremos o código mostrado na figura a
seguir na nossa página index.
Figura 198 – Criação da tag <div> dentro da tag <main> na página index.html
A <div> que inserimos foi classificada como “logo”. O nome “logo” foi dado por nós, e poderíamos
ter escolhido qualquer outro. Dentro da <div>, colocamos a imagem referente ao logo da nossa página
e editamos seu estilo no CSS, conforme mostrado na figura a seguir.
Figura 199 – Edição do logo dentro do arquivo styles.css
Note que, em vez de usarmos como seletor a tag que vamos modificar, utilizamos a classe que
criamos, pois, na mesma página, teremos várias <div> que podem ou não ser diferentes. Logo, o mais
prudente é colocarmos a classe como seletor.
101
PROGRAMAÇÃO WEB RESPONSIVA
Figura 200 – Configuração dos itens <margin> e
<text-align> dentro do arquivo styles.css
O item <margin> define o espaçamento entre os elementos, enquanto <text-align> faz o alinhamento
do texto, que, no caso em estudo, queremos que fique no centro. Independentemente de colocarmos
uma imagem ou um texto, o alinhamento será feito da mesma maneira.
Figura 201 – Página index.html em execução no navegador após a configuração do logo
5.8 Estilizando tags de título
Vamos voltar a trabalhar com títulos, mudando suas propriedades com classes que já aprendemos a
fazer. Para isso, insira o código da figura a seguir na página index.html.
Figura 202 – Criação das tags <h1> e <h2> dentro do <main> da página index.html
102
Unidade II
Podemos colocar essas classificações com as mesmas características, basta adicionarmos mais classes
na mesma declaração no CSS.
Figura 203 – Configuração das classes .logo, .manchete, .headline no arquivo styles.cssNote que, no navegador, é possível perceber que a cor da fonte pode apresentar conflito com a cor
do fundo. Por isso, vamos mudá-la para facilitar a visualização do texto.
Figura 204 – Site em execução no navegador após a configuração
do .logo, .manchete, .headline no arquivo styles.css
Como o problema é generalizado para todas as classes, o mais sensato é colocarmos a estilização dentro
do <body>, a fim de que todas as alterações mostradas na figura a seguir recebam os estilos herdados.
Figura 205 – Configurações de fonte para o <body> no arquivo styles.css
103
PROGRAMAÇÃO WEB RESPONSIVA
Note que estamos usando a fonte que baixamos com o elemento font-family e o color para pintarmos
nossa fonte de branco.
Figura 206 – Site em execução no navegador após a configuração da fonte no styles.css
5.9 Inserindo vídeo na nossa página
Chegou um momento muito esperado, vamos colocar vídeos na nossa página HTML. Para isso, será
preciso encontrarmos um vídeo para o site.
Observação
Volte ao site Pixabay e encontre um vídeo de robô de sua preferência.
Para isso, basta alterar as configurações de busca de imagens para vídeos.
Faça o download do vídeo e salve-o na pasta de vídeos de seu projeto com
o nome videorobo.mp4.
104
Unidade II
Em nosso caso, a pasta de vídeos ficará como mostrado na figura a seguir.
Figura 207 – Pasta de vídeos do projeto após a inserção do vídeo do robô
Agora que já temos o vídeo do robô, inseriremos o código da figura a seguir na página index.html,
na sequência da tag <main>.
Figura 208 – Inserção do vídeo do robô na página index.html
Assim como a tag <img> busca uma imagem, a <source> procura um recurso (ou uma fonte), que,
no caso, é um vídeo. De preferência, fazemos a declaração no CSS separadamente das outras, pois pode
ser que seja necessário aplicarmos algumas mudanças com o tempo. Portanto, vamos deixá-la com as
mesmas características do logo, mas em uma declaração diferente.
Figura 209 – Configuração do vídeo do robô no arquivo styles.css
O resultado obtido é o nosso site munido de um recurso de vídeo.
105
PROGRAMAÇÃO WEB RESPONSIVA
Figura 210 – Site em execução no navegador após a configuração do vídeo
5.10 Estilizando a tag <article>, fazendo um primeiro artigo, e utilizando a
tag <hr>
Faremos o nosso primeiro artigo do site, contendo parágrafos e imagem. Para isso, insira o código
mostrado na figura a seguir na sequência da tag <main>, na página index.html.
Figura 211 – Inserção de um artigo na página index.html
Mesmo sem colocarmos estilos na tag <article>, podemos ver que ela já herda estilos do <body>.
Utilizaremos também a tag <hr>, que insere uma linha entre um conteúdo e outro.
106
Unidade II
Figura 212 – Site em execução no navegador após a inserção de um artigo
Vamos sobrepor os estilos, conforme indicado na figura a seguir.
Figura 213 – Configuração do artigo no arquivo styles.css
Fizemos o seguinte: alinhamos o texto no centro, mudamos o estilo da fonte, especificamos o
tamanho da fonte como 20 pixels e a deixamos em uma cor de tom rosado.
Figura 214 – Site em execução no navegador após a configuração do artigo no styles.css
107
PROGRAMAÇÃO WEB RESPONSIVA
5.11 Trabalhando com estilização de tabelas
Agora que já conhecemos o básico de tabelas, vamos aprender a estilizá-las com o CSS e a utilizar
novas tags. Para isso, insira o código mostrado na figura a seguir na sequência da página index.html.
Figura 215 – Inserção de tabela na página index.html
108
Unidade II
As novas tags que vimos nesse código são <thead> e <tbody>, que funcionam para separar o
cabeçalho do corpo da tabela. Trata-se de uma ferramenta didática fundamental para o navegador.
Vamos estilizar separadamente a <div> e a <table> que se encontra dentro da <div>. Para isso,
insira o código mostrado na figura a seguir no arquivo CSS.
Figura 216 – Inserção de estilo para a tabela no arquivo styles.css
O primeiro trecho do CSS diz respeito à <div>, que terá margem de 30 pixels, texto alinhado no
centro e largura de 100%. A segunda parte do CSS refere-se à tabela que se encontra dentro da <div>,
que terá background em um tom de rosa e determinado nível de transparência, por isso, utilizamos
o código RGBA. No mais, a configuração é parecida com a da transparência que fizemos no <body>,
utilizando <padding> e <border-radius>.
Figura 217 – Site em execução no navegador após a configuração da tabela no styles.css
109
PROGRAMAÇÃO WEB RESPONSIVA
6 AVANÇANDO COM O CSS3
6.1 Nova paginação
Criaremos uma pasta chamada de “páginas” na nossa estrutura. Dentro dela, faremos três novas
páginas HTML, como mostrado na figura a seguir.
Figura 218 – Criação de novas páginas no projeto
As páginas criadas dentro da referida pasta são as elencadas a seguir.
• fonte.html
• posicionamento.html
• texto.html
• sobre.html
• contato.html
• formulário.html
• pseudoclasse.html
Para facilitar nossa vida, por enquanto, colocaremos um código básico em todas essas novas páginas
para que, no decorrer dos passos seguintes, seja possível acessá-las, como mostrado na figura a seguir.
Figura 219 – Criação de 7 páginas dentro do site – Modelo padrão
110
Unidade II
Coloque em cada página seu próprio título <h1>, como mostrado no exemplo da figura a seguir.
Figura 220 – Alteração das tags <title> e <h1> nas páginas criadas de acordo com o próprio nome
Ao executarmos qualquer uma das páginas criadas, teremos como resultado o que se mostra na
figura a seguir.
Figura 221 – Página fonte.html em execução no navegador
Note que a página importou toda a configuração do arquivo styles.css realizada anteriormente.
6.2 Criando menus
Agora, temos uma grande quantidade de páginas para administrar. Não vamos customizar todas,
mas elas serão úteis para criamos um menu com diversas opções de acesso.
111
PROGRAMAÇÃO WEB RESPONSIVA
Nosso menu deve conseguir acessar as páginas com facilidade. Logo, dentro do index, colocaremos
o código básico mostrado na figura a seguir.
Figura 222 – Criação de tag <ul> para ser utilizada como menu
No início do <body> utilizamos um elemento <nav>, antes usaríamos a tag <div>, e atribuímos
um ID. O elemento <nav> foi nomeado “menu”. Dentro dessa <nav>, inserimos uma <ul> e várias <li>.
Portanto, criamos uma lista de links, conforme já visto quando falamos sobre HTML.
Figura 223 – Lista de links criada na página index.html
Mudaremos essa lista para que ela se pareça cada vez mais com um menu. Dentro do nosso arquivo
CSS, começamos a estilização do zero, pois criaremos um id para resetar os estilos da tag <ul> ao menu,
conforme mostrado na figura a seguir.
112
Unidade II
Figura 224 – Customização da tag <ul> dentro do <nav>, menu no arquivo styles.css
No código anterior, retiramos as margens, ou seja, deixamos o padding e o margin como 0. Excluímos
os bullets das opções, isto é, colocamos o list-style como none.
Figura 225 – Página index.html em execução no navegador após as alterações realizadas
Note que, desta vez, não usamos uma classe, mas, sim, um id. Afinal, qual é a diferença entre eles?
As classes (class) nada mais são do que uma forma simples de identificar um grupo de elementos.
Elas podem, assim, formatar vários elementos de apenas uma vez. Já os ids (id) são uma forma de
identificar um elemento único. Eles são identificadores particulares de dado elemento e somente dele.
Com o objetivo de o nosso menu ficar na horizontal, temos que fazer as suas opções ficarem uma ao
lado da outra. Para isso, basta atribuirmos um display:inline; para a tag <li>. Essa atribuição fará todas
as opções ficarem em uma linha horizontal.
Figura 226 – Inclusão de opção no arquivo styles.css para deixar a lista na forma horizontal
113
PROGRAMAÇÃO WEB RESPONSIVA
Após a alteração, o resultado de nossa página será o mostrado na figura a seguir.
Figura 227 – Página em execução após a inserção da opção para deixar a lista na forma vertical
Nosso menu horizontal está quase pronto. Precisamos formataros links dele para que eles não
fiquem tão próximos uns dos outros.
No CSS, faça com que todos os links que estejam dentro da tag <li> (#menu ul li a) tenham características
de elementos de bloco, mas não quebrem linha. Dessa forma, conseguiremos formatar características como
largura, altura, margin e padding como se os links fossem blocos. Agora, dê um espaço entre a borda do
menu e o texto. Para isso, use o <padding> (padding: 2px 10px;).
Podemos aproveitar o momento para definir o visual que deverá ter o link: cor de fundo, letra etc.
Figura 228 – Alteração no arquivo styles.css para formatar menu horizontal
Após a customização anterior, nossa lista ficou visualmente parecida com um menu horizontal,
conforme mostrado na figura a seguir.
Figura 229 – Site em execução com menu horizontal criado
114
Unidade II
Terminaremos de inserir as customizações em nosso menu. Para isso, introduziremos o bloco de
códigos mostrado na figura a seguir em nosso arquivo style.css.
Figura 230 – Customização final do menu
Após a customização final, podemos notar que, ao passar o mouse nos itens do menu, eles apresentam
um efeito visual, como mostrado na figura a seguir.
Figura 231 – Site em execução com menu horizontal concluído
6.3 Pseudoclasse e pseudoelemento
Na unidade anterior, utilizamos pseudoelementos na estilização do nosso conteúdo. Um
pseudoelemento é um identificador adicionado a um seletor que permite que seja estilizada apenas
uma parte específica do elemento selecionado. Trata-se de um recurso útil quando queremos mudar, por
exemplo, a primeira letra do título ou a primeira linha do parágrafo.
Sua sintaxe é bem simples, conforme mostrado no exemplo da figura a seguir, que não será inserido
em nosso projeto.
Figura 232 – Exemplo de pseudoelemento
É possível utilizar apenas um pseudoelemento em um seletor. Ele deve aparecer depois da declaração
de um elemento simples. A seguir, temos uma lista com os pseudoelementos mais utilizados.
• ::after: cria um pseudoelemento que é o último filho do elemento selecionado.
• ::before: origina um pseudoelemento que é o primeiro filho do elemento atingido.
115
PROGRAMAÇÃO WEB RESPONSIVA
• ::cue: possibilita a customização de legendas, em vídeos, por exemplo.
• ::first-letter: seleciona a primeira letra da primeira linha de um bloco, se ela não for precedida
por qualquer outro conteúdo, como imagens ou tabelas embutidas, em sua linha.
• ::first-line: aplica estilos à primeira linha de um elemento de nível de bloco. Observe que o
comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a
largura do documento e o tamanho da fonte do texto.
• ::selection: utiliza estilos à parte de um documento destacado pelo usuário, como clicar e arrastar
o mouse sobre o texto.
• ::slotted (): representa qualquer elemento que tenha sido colocado em um slot dentro de um
modelo HTML.
• ::backdrop: é capaz de criar um pano de fundo que esconde o conteúdo por trás de um elemento
posicionado no topo de uma pilha de elementos.
• ::placeholder: customiza o texto, o que possibilita a criação de uma moldura em torno dele.
• ::marker: seleciona a caixa do marcador de um item da lista, que normalmente contém um
marcador ou um número.
• ::spelling-error: significa um segmento de texto que o user-agent sinalizou como digitado
incorretamente.
• ::grammar-error: quer dizer um segmento de texto que o user-agent sinalizou como
gramaticalmente incorreto.
6.4 Estilizando o texto
Chegou o momento de trabalharmos um pouco mais com a estilização do nosso texto. Vamos, então,
usar uma página específica para testarmos novas funções. Começaremos a codificar nossa página de
estilização de texto com um CSS específico dela.
Crie um arquivo chamado de texto.css dentro da pasta CSS do nosso projeto:
Figura 233 – Arquivo texto.css
116
Unidade II
O código para nossa página arquivo texto.html será o mostrado a seguir.
Figura 234 – Página texto.html
Nossa página texto.html terá o visual mostrado na figura a seguir quando a executamos no navegador.
Figura 235 – Página texto.html em execução no navegador
6.4.1 Text-align
A propriedade text-align é usada para definirmos o alinhamento horizontal de um texto. Um texto
pode ser alinhado à esquerda ou à direita, estar centralizado ou justificado.
O exemplo mostrado na figura a seguir exibe o alinhamento ao centro, com o texto alinhado à
esquerda e à direita. Vale notar que o alinhamento à esquerda é o padrão se o sentido do texto for
da esquerda para a direita e que no caso do alinhamento à direita é o contrário.
Quando a propriedade text-align é configurada para justificar, cada linha é esticada para que tenha
largura igual. As margens esquerda e direita são retas, como ocorre em revistas e em jornais.
117
PROGRAMAÇÃO WEB RESPONSIVA
Figura 236 – Customização das tags <h1>, <h2>, <h3> e <h4> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 237 – Página texto.html em execução no navegador após a customização das tags <h1>, <h2>, <h3> e <h4>
6.4.2 Text-decoration
O text-decoration é uma propriedade usada para definirmos ou removermos decorações do texto.
O text-decoration: none; é frequentemente empregado para retirarmos sublinhados dos links. Os outros
tipos efetivamente mudam o texto. Vejamos um exemplo na figura a seguir.
118
Unidade II
Figura 238 – Customização do text-decoration para as tags <h1>, <h2>, <h3> e <h4> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 239 – Página texto.html em execução no navegador após a customização do text-decoration
6.4.3 Text-transform
A propriedade text-transform é usada para especificar letras maiúsculas e minúsculas em um texto.
Ela pode ser usada para transformar todo o texto em letras maiúsculas ou minúsculas e para capitalizar
a primeira letra de cada palavra. Vejamos um exemplo na figura a seguir.
119
PROGRAMAÇÃO WEB RESPONSIVA
Figura 240 – Customização do text-transform para as tags <h1>, <h2>, <h3> e <h4> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 241 – Página texto.html em execução no navegador após a customização do text-transform
120
Unidade II
6.4.4 Text-indent
A propriedade text-indent é usada para especificar o recuo da primeira linha de um texto. Vejamos
um exemplo na figura a seguir.
Figura 242 – Customização do text-indent para a tag <h4> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 243 – Página texto.html em execução no navegador após a customização do text-indent na tag <h4>
6.4.5 Letter-spacing
A propriedade de espaçamento letter-spacing é usada para especificar o espaço entre os caracteres em
um texto. O exemplo da figura a seguir mostra como aumentar ou diminuir o espaço entre os caracteres.
Figura 244 – Customização do letter-spacing para as tags <h1> e <h2> no arquivo texto.css
121
PROGRAMAÇÃO WEB RESPONSIVA
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 245 – Página texto.html em execução no navegador após a customização do letter-spacing nas tags <h1> e <h2>
6.4.6 Line-height
A propriedade line-height é usada para especificar o espaço entre as linhas. Vejamos um exemplo
na figura a seguir.
Figura 246 – Customização do line-height para as tags <h3> e <h4> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 247 – Página texto.html em execução no navegador após a customização do line-height nas tags <h3> e <h4>
122
Unidade II
6.4.7 Text-direction
A propriedade text-direction é usada para alterar a direção do texto de um elemento. Vejamos um
exemplo na figura a seguir.
Figura 248 – Customização do text-direction para a tag <h1> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.Figura 249 – Página texto.html em execução no navegador após a customização do text-direction na tag <h1>
6.4.8 Word-spacing
A propriedade word-spacing é usada para especificar o espaço entre as palavras em um texto.
O exemplo a seguir mostra como aumentar ou diminuir o espaço.
Figura 250 – Customização do word-spacing para as tags <h2> e <h3> no arquivo texto.css
123
PROGRAMAÇÃO WEB RESPONSIVA
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 251 – Página texto.html em execução no navegador após a customização do word-spacing nas tags <h2> e <h3>
6.4.9 Text-shadow
A propriedade text-shadow adiciona sombra ao texto. O exemplo a seguir especifica a posição da
sombra horizontal (3px), da sombra vertical (2px) e a cor da sombra (vermelha).
Figura 252 – Customização do text-shadow para a tag <h4> no arquivo texto.css
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 253 – Página texto.html em execução no navegador após a customização do text-shadow na tag <h4>
124
Unidade II
No quadro a seguir, temos uma lista que resume as propriedades de texto e as suas funcionalidades.
Quadro 1 – Propriedades de texto e suas funcionalidades
Propriedade Descrição
color Define a cor do texto
direction Especifica a direção do texto/da escrita
letter-spacing Aumenta ou diminui o espaço entre os caracteres em um texto
line-height Define a altura da linha
text-align Especifica o alinhamento horizontal do texto
text-decoration Especifica a decoração adicionada ao texto
text-indent Especifica o recuo da primeira linha em um bloco de texto
text-shadow Especifica o efeito de sombra adicionada ao texto
text-transform Controla a capitalização do texto
text-overflow Especifica como o conteúdo excedido que não é exibido deve ser sinalizado para o usuário
unicode-bidi Define ou retorna se o texto deve ser substituído para suportar vários idiomas no mesmo documento quando usado junto com a propriedade direction
vertical-align Define o alinhamento vertical de um elemento
white-space Especifica como o espaço em branco dentro de um elemento é manipulado
word-spacing Aumenta ou diminui o espaço entre palavras em um texto
6.5 Estilizando fontes
Existem dois tipos de nomes de famílias de fontes, a saber:
• Generic family: grupo de famílias de fontes com aparências semelhantes, como “Serif” ou “Monospace”.
• Font family: família de fontes específicas, como “Times New Roman” ou “Arial”.
Vejamos os casos mostrados no quadro a seguir.
Quadro 2 – Famílias de fontes
Generic family Font family Descrição
Serif Times New RomanGeorgia
A fonte Serif tem pequenas linhas nas extremidades
de alguns caracteres
Sans-serif ArialVerdana
As fontes Sans não têm as linhas nas extremidades
dos caracteres
Monospace Courier NewLucida Console Todos os caracteres Monospace têm a mesma largura
Vamos agora editar a nossa página fonte.html. Trabalharemos com o CSS de maneira diferente
nela. Em vez de chamarmos um arquivo externo, por exemplo, o arquivo styles.css ou o texto.css,
criaremos a configuração do CSS dentro da própria página HTML. Tal configuração ficará dentro da
tag <style>. Inicialmente, deixaremos nossa página com a configuração mostrada na figura a seguir.
125
PROGRAMAÇÃO WEB RESPONSIVA
Figura 254 – Página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 255 – Página fonte.html executada no navegador
6.5.1 Font-family
O conjunto de fontes de um texto é definido com a propriedade font-family. Ela deve conter vários
nomes de fontes como um sistema de fallback. Se o navegador não suportar a primeira fonte, ele
tentará a próxima e assim por diante. Comece com a fonte desejada e termine com uma família genérica
para permitir que o navegador escolha uma fonte semelhante na família genérica, se nenhuma outra
estiver disponível.
126
Unidade II
Observação
Se o nome de uma família de fontes possuir mais de uma palavra, ele
deverá estar entre aspas, como: “Times New Roman”.
Mais de uma família de fontes deve ser especificada em uma lista separada por vírgulas:
Figura 256 – Customização da tag <h1> dentro do css interno na página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 257 – Página fonte.html executada no navegador após a customização da fonte
6.5.2 Font-style
A propriedade font-style é usada principalmente para especificar texto em itálico. Ela tem três
valores, que são mostrados a seguir.
• Normal: o texto é mostrado normalmente.
• Italic: o texto é mostrado em itálico.
• Oblique: o texto é mostrado em direção oblíqua, de modo semelhante ao que ocorre no itálico.
127
PROGRAMAÇÃO WEB RESPONSIVA
Vejamos o exemplo da figura seguir.
Figura 258 – Customização do font-style dentro do CSS interno na página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 259 – Página fonte.html executada no navegador após a customização do font-style
6.5.3 Font-size
A propriedade font-size define o tamanho do texto. Ser capaz de gerenciar o tamanho do texto é
uma habilidade importante no design da web. No entanto, não se deve usar ajustes de tamanho de fonte
para fazer com que os parágrafos pareçam cabeçalhos ou com que os cabeçalhos pareçam parágrafos.
Sempre use as tags HTML adequadas, como <h1> - <h6> para títulos e <p> para parágrafos. O valor do
tamanho da fonte pode ser absoluto ou relativo.
O tamanho absoluto:
• define o texto para um tamanho especificado;
• não permite que um usuário altere o tamanho do texto em todos os navegadores, o que é uma
desvantagem em termos de acessibilidade;
• é útil quando o tamanho físico da saída é conhecido.
128
Unidade II
O tamanho relativo:
• define o tamanho em relação aos elementos circundantes;
• permite que um usuário altere o tamanho do texto em navegadores.
6.5.3.1 Mudando o tamanho da fonte com pixels
Definir o tamanho do texto com pixels oferece controle total sobre o arquivo. Vejamos o exemplo
mostrado na figura a seguir.
Figura 260 – Customização do font-size dentro do CSS interno na página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 261 – Página fonte.html executada no navegador após a customização do font-size
129
PROGRAMAÇÃO WEB RESPONSIVA
6.5.3.2 Mudando o tamanho da fonte com “em”
Para permitir que os usuários redimensionem o texto, no menu do navegador, muitos desenvolvedores
usam “em” em vez de pixels. A unidade de tamanho é recomendada pelo W3C, sendo que 1em é igual
ao tamanho da fonte atual. O tamanho do texto padrão nos navegadores é de 16px. Então, o tamanho
padrão de 1em é 16px. Ele pode ser convertido de pixels para “em” pela seguinte relação: (tamanho em
pixels)/16 = (tamanho em “em”).
Vejamos o exemplo mostrado na figura a seguir.
Figura 262 – Customização do font-size utilizando “em” dentro do CSS interno na página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 263 – Página fonte.html executada no navegador após a customização do font-size utilizando “em”
130
Unidade II
6.5.3.3 Font-weight
A propriedade font-weight especifica a carga de uma fonte, deixando-a normal ou em negrito.
Vejamos o exemplo mostrado na figura a seguir.
Figura 264 – Customização do font-weight utilizando “em” dentro do CSS interno na página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 265 – Página fonte.html executada no navegador após a customização do font-weight utilizando “em”
6.5.3.4 Font-variant
A propriedade font-variant especifica se um texto deve ou não deve ser exibido em fonte small-caps.
Em uma fonte de letras minúsculas, todas as letras minúsculas são convertidas em letras maiúsculas.
No entanto, as letras maiúsculas convertidas aparecem em um tamanho de fonte menor do que as
maiúsculas originais no texto.
Vejamos o exemplo mostradona figura a seguir.
131
PROGRAMAÇÃO WEB RESPONSIVA
Figura 266 – Customização do font-variant utilizando “em” dentro do CSS interno na página fonte.html
Após essa customização, nossa página ficará com o visual mostrado a seguir.
Figura 267 – Página fonte.html executada no navegador após a customização do font-variant utilizando “em”
No quadro a seguir, temos algumas propriedades das fontes:
Quadro 3 – Propriedades das fontes
Propriedade Descrição
font Define todas as propriedades da fonte em uma declaração
font-family Especifica a família de fontes para o texto
font-size Especifica o tamanho da fonte do texto
font-size Especifica o estilo da fonte para o texto
font-variant Especifica se um texto deve ou não ser exibido em uma fonte small-caps
font-weight Especifica a carga de uma fonte
132
Unidade II
Saiba mais
Para conhecer melhor sobre o CSS, veja a documentação disponível em:
MDN WEB DOCS. CSS tutoriais. Mdn Web Docs, 18 abril 2021a. Disponível
em: https://cutt.ly/kvIiUiI. Acesso em: 19 abr. 2021.
Resumo
Na unidade II, vimos como criar estilos em nossas páginas. Para isso,
utilizamos o CSS. Usamos arquivos CSS externos e também criamos
seletores dentro da própria página HTML.
Começamos alterando as cores das páginas, criamos no arquivo CSS
externo a configuração da cor do body e alteramos a cor no próprio
CSS, o que faz com que a página importe essa configuração e retire as
configurações de estilos do HTML, deixando-as por conta do CSS.
Acessamos o site Pixabay e aprendemos a fazer o download de imagens e
de vídeos livres para utilização na internet. Inserimos em nossa página uma
imagem como background e realizamos diversos testes, redimensionando a
imagem de fundo para que ela ficasse com a aparência desejada. Utilizamos
fontes de terceiros do site de fontes da Google e fizemos a importação de
fontes para nossa página. Efetuamos a customização de fontes por meio do
CSS, alterando padrão de títulos, parágrafos etc.
Observamos como funciona o canal alpha e como operam os containers.
Abordamos as classificações das tags, funcionalidades importantíssimas na
criação dos estilos das páginas. Estudamos a estilização de tabelas a fim de
aprimorarmos o padrão criado na unidade anterior e deixarmos o visual
delas mais limpo e profissional.
Realizamos a criação de nosso primeiro menu, gerado por uma lista
não ordenada, customizado praticamente do zero em nosso arquivo
de estilo do CSS.
Por fim, trabalhamos com pseudoclasses e pseudoelementos e
executamos a customização de texto utilizando as propriedades text-align,
text-decoration, text-transform, text-indent, letter-spacing, line-height,
text-direction, word-spacing e text-shadow.
133
PROGRAMAÇÃO WEB RESPONSIVA
Exercícios
Questão 1. Analise o conteúdo da figura a seguir.
Figura 268
Com base na análise e nos seus conhecimentos, avalie as asserções a seguir e a relação entre elas.
I – Na figura, vemos a estilização da tag <head>.
porque
II – Na figura, vemos a alteração da cor do background da página index (arquivo styles.css).
Assinale a alternativa CORRETA.
A) A primeira asserção é verdadeira, e a segunda é falsa.
B) A primeira asserção é falsa, e a segunda é verdadeira.
C) As duas asserções são falsas.
D) As duas asserções são verdadeiras, e a primeira justifica a segunda.
E) As duas asserções são verdadeiras, e a primeira não justifica a segunda.
Resposta correta: alternativa B.
Análise das asserções
I – Asserção falsa.
Justificativa: na figura, vemos a estilização da tag <body>, e não da tag <head>.
II – Asserção verdadeira.
Justificativa: na figura, vemos a alteração da cor do background da página index (arquivo styles.css)
para a cor amarela (yellow).
134
Unidade II
Questão 2. Com base nos seus conhecimentos, avalie as asserções a seguir e a relação entre elas.
I – Em uma página web, existem links que nos levam a outros documentos dentro do próprio site
(outras subpáginas) e links que nos levam a fontes externas (outros sites).
porque
II – Não podemos adicionar hyperlinks com a tag <a> dentro do <body>.
Assinale a alternativa CORRETA.
A) A primeira asserção é verdadeira, e a segunda é falsa.
B) A primeira asserção é falsa, e a segunda é verdadeira.
C) As duas asserções são falsas.
D) As duas asserções são verdadeiras, e a primeira justifica a segunda.
E) As duas asserções são verdadeiras, e a primeira não justifica a segunda.
Resposta correta: alternativa A.
Análise das asserções
I – Asserção verdadeira.
Justificativa: de modo geral, podemos dizer que há dois tipos de links:
• aqueles que nos direcionam a outros documentos dentro do próprio site (outras subpáginas);
• aqueles que nos direcionam a fontes externas (outros sites).
II – Asserção falsa.
Justificativa: é normal utilizarmos hyperlinks com a tag <a> dentro do <body> de uma página HTML.