Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Criação de páginas com CSS3
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
DESENVOLVIMENTO
DE SISTEMAS PHP
Maurício de Oliveira Saraiva
Criação de páginas
com CSS3
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
� Aplicar formatação em elementos de uma página web com CSS3.
� Desenvolver classes e seletores de Id com CSS3.
� Usar media query para diferentes dispositivos.
Introdução
Páginas Hyper Text Markup Language (HTML), ou linguagem de marcação
de hipertexto, são criadas para realizar a apresentação de dados na web.
Para formatar essas páginas, dispomos de folhas de estilo em cascata, do
inglês cascading style sheets (CSS), que servem para organizar e estilizar o
conteúdo por meio de instruções e comandos que permitem apresentar
elementos HTML de forma padronizada, proporcionando redução de
esforço e aumento de produtividade.
Neste capítulo, você irá estudar a formatação em elementos de uma
página web com CSS3, classes e seletores de Id com CSS3 e media query
para diferentes dispositivos.
Formatação de elementos de uma página web
com CSS3
Com a disseminação do HTML5, a formatação de alguns elementos em
uma página HTML deixou de ser uma boa prática. Instruções como <font
color=“red”>, que eram usadas para definir a fonte e a cor de um texto,
deixaram de fazer parte da especificação para dar lugar à estilização com
CSS (SILVA, 2015).
Atualmente, existe uma divisão de responsabilidades para a exibição de
conteúdo em uma página web. Com o HTML ficou a parte estrutural, como
<header>, <nav>, <aside>, <section>, <article>, entre outros que
definem áreas específicas, criadas para permitir a pesquisa semântica em
documentos HTML. A cargo do CSS, ficou com a responsabilidade de pro-
ver a estilização, isto é, a definição da aparência das páginas, que envolve
o preenchimento de cores, a formatação de fontes, as cores e tamanhos, os
espaçamentos e outros.
Essa separação proporcionou criar códigos-fonte de páginas web mais
organizados, uma vez que a formatação visual não fica misturada com o
conteúdo HTML, facilitando o entendimento, flexibilizando a aparência e
reduzindo o esforço do programador.
É possível aplicar estilos com CSS em uma página web de diversas ma-
neiras. As mais conhecidas são: a configuração da tag <style>, dentro do
próprio documento HTML; e a indicação de um arquivo externo de estilos,
incorporado pela instrução <link>. Por ser mais adequado, a utilização de
um arquivo externo é o modo que vamos considerar neste capítulo, visto que
pode ser aproveitado para outros documentos, sem a necessidade de replicar
código-fonte (EIS; FERREIRA, 2012).
Para utilizar um arquivo CSS, você deve realizar a chamada dele na seção
<head> do seu documento HTML. Essa chamada deve ser realizada pelo
comando <style rel=“stylesheet” href=“estilo.css”>, em que
estilo.css indica o nome do arquivo que será incorporado (FREEMAN;
ROBSON, 2014). Veja um exemplo na Figura 1.
Figura 1. Incorporação de um arquivo CSS.
Assim que um arquivo de estilos é incorporado à sua página HTML, todos
os elementos recebem a formatação definida no arquivo CSS automatica-
mente. Isso significa que, se você mudar a formatação de algum elemento no
Criação de páginas com CSS32
arquivo de estilos, todas as páginas que incorporam esse arquivo terão sua
apresentação modificada.
Para criar um arquivo de estilos, basta definir as propriedades dos seletores
e salvar em um arquivo com a extensão CSS. É possível incorporar mais de
um arquivo de estilo, no entanto, você precisa ter cuidado para que as defini-
ções de um arquivo não repitam as de outro, pois o navegador irá utilizar as
definições do arquivo incorporado por último.
As definições de estilo podem ser aplicadas a qualquer elemento de um
documento HTML, desde o próprio corpo da página, definido pela tag <body>,
até itens específicos, como os títulos de <h1> à <h6>. Para definir os estilos,
edite o arquivo CSS e indique o seletor e suas propriedades, conforme você
verá a seguir.
Textos
Textos podem ser estilizados em vários elementos dentro de uma página
web, ou seja, qualquer elemento que contenha texto pode ter uma formatação
específica, como o corpo da página, um parágrafo, um título ou as linhas de
uma tabela. Essa formatação envolve a fonte, a cor, o tamanho, a indentação,
o alinhamento e várias outras propriedades.
Para formatar um elemento, você deve especificar o seletor (h1, p, etc.) e as
suas propriedades (font-family, font-size, color, etc.) (FREEMAN;
ROBSON, 2014), conforme demonstrado na Figura 2.
Figura 2. Texto com CSS3.
3Criação de páginas com CSS3
� Font-family: define a fonte do seletor. Se o navegador não suportar
a primeira fonte, ele tentará usar a próxima e, assim por diante, até
encontrar uma fonte que seja compatível. É importante destacar que
o navegador utiliza as fontes instaladas no computador do usuário
para exibir o conteúdo, por isso é necessário a indicação de mais de
uma fonte.
� Font-size: especifica o tamanho da fonte, que pode ser representado
em pixels (px), pixels/16 (em), porcentagem (%) ou constantes pré-
-definidas (small, medium, large, etc.).
� Text-align: define o alinhamento do texto por meio de constantes,
como margem à esquerda (left), à direita (right), centralizado (center),
justificado (justify), etc.
� Color: define a cor do texto. Você pode configurar a cor por meio de
constantes que indicam o nome da cor em inglês (black), pelo sistema
RGB (0, 0, 0) ou com valores em hexadecimal (#000000). Nesse caso,
todos os três exemplos se referem à cor preta.
� Text-indent: configura a indentação da margem da primeira linha
do parágrafo. Você pode definir o valor da propriedade da mesma forma
que define font-size.
Veja um exemplo de apresentação de texto com CSS3 na Figura 3.
Figura 3. Apresentação de texto com CSS3.
Criação de páginas com CSS34
Saiba mais sobre formatação de textos com CSS3 no
link (SILVA, 2016a).
https://goo.gl/AC9K13
Caixas
Em um documento HTML, cada elemento é representado por um box, isto é,
por uma caixa retangular que abriga o seu conteúdo. Em geral, essas caixas
são definidas para <div>, que são elementos que abrigam outros elementos.
No entanto, as caixas podem ser criadas para qualquer outro elemento, como
parágrafos, botões, títulos, etc. (SILVA, 2012).
Sendo uma caixa, é possível atribuir as seguintes propriedades: conteúdo
(content), espaçamento (padding), borda (border) e margem (margin). Cada
uma dessas propriedades define um item das dimensões da caixa, como você
pode ver na Figura 4.
Figura 4. Propriedades de uma caixa.
� Conteúdo (content): define o que será exibido pela caixa.
� Espaçamento (padding): especifica um espaço entre o conteúdo e a
borda da caixa.
5Criação de páginas com CSS3
� Borda (border): representa a espessura da borda.
� Margem (margin): configura o espaço entre a caixa e a margem página.
Para definir o tamanho de uma caixa, você deve fazer um cálculo que acrescente
tanto largura como altura nas dimensões de espaçamento e borda. Isso significa que
uma caixa cujo conteúdo possua 200px de largura, 10px de espaçamento e 2px de
borda vai ocupar 212px de largura total. No entanto, para evitar inúmeros cálculos,
no CSS3 foi criada uma propriedade chamada box-sizing, que modifica o comporta-
mento da caixa garantindo que ela obedecerá a largura definida pela propriedade
width, independentemente das dimensões de espaçamento e borda, dessa forma ela
reduz o tamanho do conteúdo para se encaixar na largura definida, respeitando as
propriedades padding e border.
Além das propriedades citadas, as caixas possuem diversas outras que
permitem apresentar os elementos com estilos avançados, como efeito gra-
diente, sombra, rotação, entre outros. Na Figura 5, você pode ver um exemplo
de estilização com caixa no CSS3.
Figura 5. Estilizando box com CSS3.
� Width/height: especificam a largura e a altura do box.
� Left/top: essas propriedades definem a posição do box na página.
� Border: especificao tipo e a espessura da borda.
� Position: define a representação do layout da caixa.
Criação de páginas com CSS36
� Padding: representa o espaçamento entre o conteúdo e a borda.
� Box-sizing: define que a largura e a altura compreenderão o tamanho
máximo do box.
� Box-shadow: estabelece as propriedades da sombra da caixa.
� Background: define o preenchimento da caixa, incluindo efeitos
gradiente.
� Transform: aplica rotação à caixa.
Veja, na Figura 6, a apresentação do box no CSS3.
Figura 6. Apresentação de box com CSS3.
Saiba mais sobre gradientes com CSS3 no link (SILVA,
2016b).
https://goo.gl/5izT6c
7Criação de páginas com CSS3
Classes e seletores de Id com CSS3
Na seção anterior você viu que pode definir diversas propriedades para os
seletores com CSS. No entanto, as propriedades eram definidas de uma única
maneira para cada seletor e, consequentemente, todos os elementos que usassem
aquele seletor teriam o mesmo estilo.
Imagine que, em uma página web, o seletor do parágrafo esteja definido
com a cor azul, que combina com o layout da página. Nesse mesmo site, existe
a opção de gerar um relatório HTML para ser impresso e que, por ser mais
formal, necessita que os parágrafos estejam na cor preta.
Isso traria sérios problemas, pois essa questão teria de ser resolvida por
meio de propriedades de estilo que ficariam misturadas com os elementos
HTML, prejudicando a legibilidade, a flexibilidade e a organização do con-
teúdo das páginas web.
Para resolver esse problema, vamos usar seletores de Classe e seletores de
Id. Esses seletores permitem que você atribua diferentes estilos para elementos
do mesmo tipo, como parágrafos. Com isso, é possível ter dois estilos distintos
para o texto das páginas, sendo um para a exibição na tela e outro para o
relatório em HTML que será impresso (SILVA, 2012).
Seletor de classe
Os seletores de classe são úteis para definir estilos diferentes para elementos
HTML do mesmo tipo. Isso significa que você pode declarar diversos estilos,
com propriedades distintas, e selecionar aqueles que desejar para aplicar aos
seus elementos.
Apesar de ser mais comum o uso de apenas um seletor de classe em cada
elemento HTML, é possível aplicar estilos de mais de um seletor de classe.
Nos casos em que as propriedades se sobrepõem, o navegador utilizará o estilo
da propriedade da classe que for chamada primeiro.
Você pode criar um seletor de classe específico para determinado tipo de
elemento HTML, como colunas de tabelas, por exemplo, ou criar seletores
de classe para uso genérico, isto é, que podem ser utilizados em elementos
de qualquer tipo.
Para criar um seletor de classe, inicialmente você deve especificar um
nome para ele. Esse nome deve significar algo que referencie o estilo que será
aplicado. Você pode escolher quaisquer caracteres para nomear os seletores
de classe, exceto caracteres especiais e o caractere espaço em branco (EIS;
FERREIRA, 2012).
Criação de páginas com CSS38
Não defina o nome do estilo conforme alguma propriedade, como uma cor, pois,
futuramente, pode haver a necessidade de trocar a cor das páginas e o nome do estilo
pode gerar confusão. Como boa prática, utilize sempre nomes que representam algo
sobre o layout de uma forma geral, evitando caracteres especiais e números sequenciais,
como estilo1, estilo2, etc.
Veja, na Figura 7, a declaração de um seletor de classe para um tipo defi-
nido. Nessa declaração, as classes paragrafo_moderno e paragrafo_classico
estão referenciadas para o seletor p, que significa parágrafo, indicados nas
linhas 1 e 8. Dessa forma, essas classes somente irão atribuir as propriedades
definidas em elementos do tipo parágrafo, mesmo que sejam chamadas em
elementos de outros tipos.
Figura 7. Seletores de classe para parágrafo.
Para usar os seletores de classe criados, você precisa realizar as chamadas
na página HTML pela indicação de cada classe, junto aos elementos desejados,
conforme modelo a seguir:
1 <p class=”paragrafo _ moderno”>Tudo pode ser tirado de
2 uma pessoa, exceto uma coisa: a liberdade de escolher sua atitude
3 em qualquer circunstância da vida.<br />
4 Viktor Frankl
5 </p>
9Criação de páginas com CSS3
1 <p class=”paragrafo _ classico”>Tudo pode ser tirado de
2 uma pessoa, exceto uma coisa: a liberdade de escolher sua atitude
3 em qualquer circunstância da vida.<br />
4 Viktor Frankl
5 </p>
Note, na Figura 8, que o primeiro parágrafo está usando a classe para-
grafo_moderno e o segundo a classe paragrafo_classico, isso faz o primeiro
parágrafo ser apresentado em preto, com alinhamento justificado, ao passo
que o segundo, está apresentado em cinza com alinhamento à esquerda.
Figura 8. Apresentação de seletores de classe.
Para criar seletores de classe genéricos, ou seja, que podem servir para
qualquer tipo de elemento HTML, você não deve inserir o seletor na declaração
de classe, mantendo apenas o nome criado, precedido de um ponto, conforme
apresentado na Figura 9.
Figura 9. Apresentação de seletores de classe.
Criação de páginas com CSS310
Nesse caso, as classes criadas podem ser usadas em qualquer tipo de
elemento HTML, desde que as propriedades sejam compatíveis. Assim, as
seguintes aplicações da classe texto_moderno são válidas nesse contexto:
1 <p class=”texto _ moderno”>Tudo pode ser tirado de uma
2 pessoa, exceto uma coisa: a liberdade de escolher sua atitude em
3 qualquer circunstância da vida.<br />
4 Viktor Frankl
5 </p>
6 <body class=”texto _ moderno”>
7 Tudo pode ser tirado de uma pessoa, exceto uma coisa: a liberdade
8 de escolher sua atitude em qualquer circunstância da vida.<br />
9 Viktor Frankl
10 </body>
Seletor de Id
Diferentemente de um seletor de classe, que pode ser usado por diversos
elementos HTML de uma página web, um seletor de Id só pode ser usado
uma única vez dentro do documento. A nomenclatura é muito parecida com
a do seletor de classe genérico, tendo como única diferença a troca do ponto
“.” pelo sustenido “#”, como você pode observar na Figura 10.
Figura 10. Apresentação de seletores de Id.
A declaração titulo_principal, além de formatar o elemento com esse
estilo, associa a ele um identificador único dentro da página web (SILVA,
2015), conforme representado na Figura 11.
1 <h1 id=”titulo _ principal”>Seletores de id com
2 CSS3</h1>
11Criação de páginas com CSS3
Figura 11. Apresentação de seletor de Id.
Se você comparar o seletor de Id com o seletor de classe, aparentemente não
verá muita utilidade, já que ele pode ser utilizado somente em um elemento
da página. No entanto, o seletor de Id tem outras finalidades, além de aplicar
formatação ao elemento.
Ele é utilizado por rotinas escritas na linguagem de programação Javascript,
que permite tratar os elementos HTML de uma página web por meio de seus
identificadores únicos.
Apesar de um seletor de Id ser utilizado apenas por um único elemento HTML, os
elementos de uma página web podem chamar, também, um ou mais seletores de classe
para completar ou padronizar determinado layout. A sintaxe de um elemento HTML com
chamada de seletor de classe e seletor de Id simultâneos pode seguir o seguinte exemplo:
1 <h1 id=“titulo _ principal” class=“titulo _
2 classico”>Seletores com CSS3</h1>
Saiba mais sobre seletores com CSS3 no link (WORLD
WIDE WEB CONSORTIUM, c2004-2008).
https://goo.gl/fHnyR
Criação de páginas com CSS312
Media query para diferentes dispositivos
Media query é um recurso disponível em CSS para aplicar estilos em páginas
web de acordo com as características do dispositivo utilizado para acessá-la.
Isso significa que determinadas propriedades de CSS serão aplicadas apenas
se as características desse dispositivo atenderem a determinados requisitos
(SILVA, 2012).
A linguagem HTML foi criada para ser portável, isto é, para apresentar
seu conteúdo em diferentes tipos de dispositivos de acesso. No entanto, é
impossível construir uma página web que se adapte automaticamente aos
diferentes tipos e tamanhosde tela existentes, uma vez que a visualização de
um documento HTML em uma tela de computador é diferente da visualização
em um smartphone.
Além disso, imagine uma página web que apresenta conteúdo de notícias
composto por menus de navegação para outras notícias, publicidade, cabe-
çalho e rodapé. Se quisermos imprimir essa notícia em papel, desejamos
que esses itens adicionais não sejam impressos, ou seja, queremos apenas
a notícia.
Todas essas questões são resolvidas com media types. Esse recurso per-
mite aplicar estilos conforme o tipo de dispositivo, como handheld, braile,
embossed, print, projection, screen, speech e outros. No exemplo a seguir,
media=“screen” indica que os estilos do arquivo CSS serão aplicados se o
dispositivo for colorido e de alta resolução, como um desktop.
1 <link rel=“stylesheet” href=“estilo _ screen.css”
2 media=“screen”>
3 <link rel=“stylesheet” href=“estilo _ hand.css”
4 media=“handheld”>
Apesar de media type definir o tipo do dispositivo de acesso à página para
aplicar determinados estilos, como um handheld, encontramos outro problema.
Atualmente, os dispositivos móveis dispõem de hardware parecido com os de
desktops, isto é, possuem telas coloridas e com alta definição, fazendo com
que esse critério fique ultrapassado.
Para isso, o CSS3 apresenta o recurso media query, que pode avaliar di-
versas características para decidir qual estilo aplicar à página web. Assim,
em vez de avaliar apenas o tipo do dispositivo, o navegador irá avaliar se as
características do dispositivo atendem aos requisitos esperados, independen-
temente do seu tipo.
13Criação de páginas com CSS3
O media query pode ser aplicado na chamada do CSS pela tag <link> e,
também, pode fazer parte do conteúdo do arquivo CSS. Nesse caso, sua chamada
ocorre da mesma forma como a de um arquivo CSS qualquer, e o tratamento
é realizado dentro desse arquivo de estilos. Nos exemplos a seguir, o estilo
será aplicado apenas nos dispositivos com resolução máxima de 800 pixels.
Media query na chamada do CSS:
1 <link rel=“stylesheet” href=“estil.css” media=“(max
2 -width: 800px)”>
Media query dentro de um arquivo CSS:
1 @media (max-width: 800px) { … }
Você pode combinar media query com operadores lógicos para montar
expressões complexas. Essa combinação é chamada de media feature, sendo
os seguintes operadores suportados: only, not, or e and (SILVA, 2012).
� Only: aplica os estilos apenas em navegadores que suportam media query.
1 <link rel=“stylesheet” href=“est.css” media=“Only
2 screen and (color)”>
� Not: indica uma situação de negação à expressão media query aplicada,
isto é, not (monochrome) representa que o dispositivo deve ser colorido.
1 @media not (monochrome) { … }
� Or: une diversas expressões e aplica o estilo se pelo menos uma delas
for verdadeira. O operador or pode ser substituído por uma vírgula:
1 @media screen or (min-width: 900px) { … }
� And: une diversas expressões e aplica o estilo apenas se todas elas
forem verdadeiras:
1 @media (min-width: 800px) and (orientation: lan-
2 dscape) { … }
Existem diversas características de media feature que podem ser usadas
em conjunto com media query. Algumas dessas características são:
� aspect-ratio
� color
� color-index
� device-aspect-ratio
Criação de páginas com CSS314
� device-height
� device-width
� grid
� height
� monochrome
� orientation
� resolution
� scan
� width
Acesse o link ou código a seguir para saber mais sobre
media query (MOZILLA, c2005-2017).
https://goo.gl/o1td6E
Um exemplo prático do uso de media queries é o código a seguir. Aplica-se
o plano de fundo azul para páginas com até 640 px de largura e vermelho para
páginas com até 480 px de largura. Acima de 640 px, o comportamento-padrão
será assumido, ou seja, será mantida a página branca.
15Criação de páginas com CSS3
Entre as propriedades que podem ser usadas, as mais comuns são: min-
-width, min-height, max-width, max-height, width e height. A partir delas,
podemos, por exemplo, adaptar as páginas para apresentar o comportamento
responsivo, ajustando-as adequadamente conforme os diferentes tamanhos
de tela.
EIS, D.; FERREIRA, E. HTML5 e CSS3: com farinha e pimenta. São Paulo: Lulu.com, 2012.
FREEMAN, E.; ROBSON, E. Use a cabeça! Programação em HTML 5. Rio de Janeiro: Alta
Books, 2014.
MOZILLA. Usando media queries. [S.l.], c2005-2017. Disponível em: <https://developer.
mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries>. Acesso em: 06 dez. 2017.
SILVA, M. S. A propriedade CSS font. [S.l.]: Maujor, 2016a. Disponível em: <http://www.
maujor.com/tutorial/propriedades-css-para-estilizacao-de-fontes.php>. Acesso em:
06 dez. 2017.
SILVA, M. S. CSS3: desenvolva aplicações web profissionais com uso dos poderosos
recursos de estilização das CSS3. São Paulo: Novatec, 2012.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec, 2015.
SILVA, M. S. Gradiente linear das CSS3. [S.l.]: Maujor, 2016b. Disponível em: <http://
www.maujor.com/tutorial/css3-gradientes-lineares.php>. Acesso em: 06 dez. 2017.
WORLD WIDE WEB CONSORTIUM. Seletores. São Paulo: W3C, c2004-2008. Disponível
em: <http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletores>. Acesso
em: 06 dez. 2017.
Criação de páginas com CSS316
Continue navegando
Materiais relacionados
352 pág.
176 pág.
286 pág.
113 pág.
Perguntas relacionadas
Compartilhar