Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Crie sua conta grátis para liberar esse material. 🤩
Já tem uma conta?
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
Aprenda a construir com menos
tempo e esforco layouts para web
Dedico este eBook a todos os Galuchos,
forma carinhosa que uso para chamar
os seguidores do Chief of Design.
Por me inspirarem a fazer duas coisas
que amo: criar e comunicar.
E também as pessoas que tem câncer e
precisam de ajuda. Que esse pequeno
gesto lhes ajude um pouco e que tam-
bém inspire outros a fazerem o mesmo.
HTML 5: a evolução! ���������������������������������������������������������������������������������������������������������������������������������������������������������������� 103
As diferenças entre o XHTML e o HTML5 �������������������������������������������������������������������������������������������������������������������������������� 107
<!DOCTYPE html> ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 108
Definição das principais novas tags do HTML5 ���������������������������������������������������������������������������������������������������������������������� 112
Diferença entre Section e Article ������������������������������������������������������������������������������������������������������������������������������������������������ 114
O que é CSS? ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 116
Folha de Estilos em Cascata ����������������������������������������������������������������������������������������������������������������������������������������������� 117
Como funciona o CSS? Parte 1 - Sintaxe ������������������������������������������������������������������������������������������������������������������������� 121
Como funciona o CSS? Parte 2 - Vinculando as folhas de estilos ao documento HTML ������������������������������������ 128
Inline ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 128
Incorporadas ����������������������������������������������������������������������������������������������������������������������������������������������������������������� 129
Externas ������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 130
Como funciona o CSS? Parte 3 - Tipos de seletores ���������������������������������������������������������������������������������������������������� 136
Como funciona o CSS? Parte 4 - Propriedades mais usadas ���������������������������������������������������������������������� 143
Background ������������������������������������������������������������������������������������������������������������������������������������������������������������������� 148
Formatando textos ��������������������������������������������������������������������������������������������������������������������������������������������������������������� 167
Color ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 173
Font-family �������������������������������������������������������������������������������������������������������������������������������������������������������������������� 174
Font-weight ������������������������������������������������������������������������������������������������������������������������������������������������������������������ 178
Text-decoration������������������������������������������������������������������������������������������������������������������������������������������������������������ 185
Outras propriedades para estilizar textos ������������������������������������������������������������������������������������������������������������� 187
Sumário
Apresentação ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������10
Ferramentas necessárias para o desenvolvimento �����������������������������������������������������������������������������������������������������22
Afinal, o que é HTML? ����������������������������������������������������������������������������������������������������������������������������������������������������������������26
A evolução do HTML: ����������������������������������������������������������������������������������������������������������������������������������������������������29
W3C������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������29
Metas do W3C e Padrões Web (web standards) �����������������������������������������������������������������������������������������������������30
Tags HTML �����������������������������������������������������������������������������������������������������������������������������������������������������������������������30
Sintaxe HTML ������������������������������������������������������������������������������������������������������������������������������������������������������������������32
Sintaxe das tags em elementos nulos (vazios ou void) ����������������������������������������������������������������������������������������36
Tags entre Tags ���������������������������������������������������������������������������������������������������������������������������������������������������������������37
Conhecendo tags estruturais básicas em um arquivo HTML ������������������������������������������������������������������������������38
Uma forma inusitada de memorizar estas tags ������������������������������������������������������������������������������������������������������42
Indentação �����������������������������������������������������������������������������������������������������������������������������������������������������������������������44
Árvore do documento (hierarquia) �����������������������������������������������������������������������������������������������������������������������������44
Tags mais usadas em todos os HTMLs ������������������������������������������������������������������������������������������������������������������������������47
(Utilizando o Princípio 80/20) ������������������������������������������������������������������������������������������������������������������������������������������������47
<div> ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������49
<p> ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������52
<ol>, <ul> à <li> ����������������������������������������������������������������������������������������������������������������������������������������������������������������55
<img> ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������59
<span> �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������71
<h1> à <h6> ����������������������������������������������������������������������������������������������������������������������������������������������������������������������76
Codificação do site Galucho ������������������������������������������������������������������������������������������������������������������������������������������������ 348
7.1 - Montara estrutura HTML comum em todas as páginas do site dentro da página modelo ����������������������� 350
O corpo do site ������������������������������������������������������������������������������������������������������������������������������������������������������������� 350
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 351
O menu de navegação ������������������������������������������������������������������������������������������������������������������������������������������������ 353
A área que abriga o logo do site ����������������������������������������������������������������������������������������������������������������������������� 353
A área que abriga o slogan ���������������������������������������������������������������������������������������������������������������������������������������� 354
O Box de conteúdo ������������������������������������������������������������������������������������������������������������������������������������������������������ 354
O Rodapé ����������������������������������������������������������������������������������������������������������������������������������������������������������������������� 355
7.2 - Estilizar, com folhas de estilo, a estrutura padrão do site para resoluções menores que 480 pixels ����� 358
A “body” e o corpo do site ����������������������������������������������������������������������������������������������������������������������������������������� 359
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 363
O Box de conteúdo ������������������������������������������������������������������������������������������������������������������������������������������������������ 377
7.3 - Estilizar a estrutura para resoluções de no mínimo 480 pixels ������������������������������������������������������������������������ 384
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 392
7.4 - Estilizar a estrutura para resoluções de até no mínimo 767 pixels ����������������������������������������������������������������� 396
O topo ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 396
O rodapé ������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 402
7.5 - Estilizar a estrutura para resoluções de até no mínimo 991 pixels ����������������������������������������������������������������� 404
Considerações importantes ������������������������������������������������������������������������������������������������������������������������������������������������ 189
Box Model �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 205
Padding �������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 216
Diferenças entre margin e padding ������������������������������������������������������������������������������������������������������������������������� 217
Border ����������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 219
Box-model (Exemplo completo) ������������������������������������������������������������������������������������������������������������������������������ 223
Como funciona o CSS? Parte 4.5 - Outras propriedades importantes ��������������������������������������������������������������������� 231
Position, top, right, bottom e left ����������������������������������������������������������������������������������������������������������������������������� 231
Z-index ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 245
List-style ������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 251
Float �������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 259
Box-sizing �������������������������������������������������������������������������������������������������������������������������������������������������������������������� 270
Clear ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ 277
Display ��������������������������������������������������������������������������������������������������������������������������������������������������������������������������� 281
Max-width, min-width, max-height e min-height ������������������������������������������������������������������������������������������������ 304
Box-shadow ������������������������������������������������������������������������������������������������������������������������������������������������������������������ 320
Text-shadow ����������������������������������������������������������������������������������������������������������������������������������������������������������������� 324
Introdução ao Design Responsivo ������������������������������������������������������������������������������������������������������������������������������������ 329
Proposta para a construção de site ��������������������������������������������������������������������������������������������������������������������������������� 341
Estrutura do site ��������������������������������������������������������������������������������������������������������������������������������������������������������� 343
Wireframe ��������������������������������������������������������������������������������������������������������������������������������������������������������������������� 344
7.6 - Salvar cópias do modelo para construção das Páginas Home e Portfólio ���������������������������������������������������� 406
7.7 - Completar o restante dos códigos HTML da Home Page ���������������������������������������������������������������������������������� 411
7.8 - Finalizar a estilização da Home Page para resoluções menores que 480 pixels ����������������������������������������� 415
Estilizando o slideshow���������������������������������������������������������������������������������������������������������������������������������������������� 416
Estilizando o texto da missão do site ��������������������������������������������������������������������������������������������������������������������� 421
Estilizando a galeria de imagens ����������������������������������������������������������������������������������������������������������������������������� 422
7.9 - Finalizar a estilização da Home Page para resoluções de até no mínimo 480 pixels ��������������������������������� 424
7.10 - Finalizar a estilização da Home Page para resoluções de até no mínimo 767 pixels ������������������������������ 426
7.11 - Finalizar a estilização da Home Page para resoluções de até no mínimo 991 pixels ������������������������������ 429
7.12 - Completar o restante dos códigos HTML da página de portfólio ������������������������������������������������������������������ 432
7.13- Finalizar a estilização da página de portfólio para resoluções menores que 480 pixels ������������������������� 438
7.14 - Finalizar a estilização da página de portfólio para resoluções de até no mínimo 481 pixels ����������������� 444
7.15 - Finalizar a estilização da página de portfólio para resoluções de até no mínimo 767 pixels ���������������� 445
7.16 - Finalizar a estilização da página de portfólio para resoluções de até no mínimo 991 pixels ����������������� 446
O mundo começa agora. Apenas começamos... ����������������������������������������������������������������������������������������������������������� 448
Referências Bibliográficas ��������������������������������������������������������������������������������������������������������������������������������������������������� 452
Agradecimentos ��������������������������������������������������������������������������������������������������������������������������������������������������������������������� 456
Arquivos e exercícioisutilizados no ebook ��������������������������������������������������������������������������������������������������������������������� 457
Sobre o Autores - David Arty ����������������������������������������������������������������������������������������������������������������������������������������������� 459
Sobre o Autores - Ed Francisco ������������������������������������������������������������������������������������������������������������������������������������������ 460
CLIQUE AQUI
ou acesse www.ebookhtmlcss.com/video
Conheça o nosso curso em vídeo de HTML & CSS
avançado: CSS2, CSS3, CSS Flexbox e CSS Grid
http://www.ebookhtmlcss.com/video
http://www.ebookhtmlcss.com/video
10 11
Estamos no século da informação, da internet, da tecnologia.
Tudo no mundo muda muito rápido e tudo mudou principalmente nos últimos 20 anos. E a In-
ternet e a WEB propiciaram boa parte dessas mudanças em todos os aspectos.
Tudo hoje em dia, praticamente, gira em torno da internet. Usamos a internet para tudo: comprar
roupas, alimentos, falar com algum parente distante, pagar contas, chamar táxi e etc.
Essa mudança afetou todas as áreas inclusive, claro, a do trabalho. Novas profissões começaram
a “bombar” e outras praticamente sumiram, principalmente quando se trata das áreas de comu-
nicação e informação.
E hoje em dia falar de comunicação sem levar em conta a WEB é um sacrilégio.
Por isso a internet demanda muita mão de obra em todas as partes do processo: desde o design,
até o atendimento de suporte. Eu comecei a trabalhar por causa dessa demanda. Eu nasci profis-
sionalmente, praticamente na web.
Essa demanda está há muito tempo aquecida e por isso muita gente quer entrar para surfar nessa
onda. E é muito provável que você aí queira também, não é?
Então se você almeja ser um surfista profissional, surfando nas ondas da web,
você pode trabalhar como Web Designer, Front-End, Desenvolvedor, etc. Porém
para isso se tornar realidade uma coisa é certa: terás que saber como funciona a
web. E a web nasceu, basicamente, com uma linguagem de marcação chamada
HTML.
Claro que dependendo da profissão escolhida você precisará se especializar em HTML ou no mí-
nimo “saber como funciona”. Ao longo da minha carreira percebi grandes dificuldades das pesso-
as, principalmente, os oriundos do design gráfico, publicidade e criativos em geral, em aprender
essa linguagem de marcação. Percebi essa dificuldade principalmente quando comecei a minis-
Apresentação
12 13
Por que ler este E-book?
Forneço-te o conhecimento necessário para você criar suas primeiras páginas de internet e in-
terpretar os códigos mais comumente usados.
Você será capaz de ver o que você planejou sendo renderizado nos navegadores e em diferentes
dispositivos do que jeito que sempre quis. E ainda será capaz de executar a manutenção de sites
já existentes.
E aí você me indaga: Mas como será isso? De que forma pretendes resolver meu problema?
Qual o diferencial deste E-book?
Calma! Logo, logo lhe contarei isso, po-
rém antes quero que reflita algo sobre o
comportamento humano em relação à
aprendizagem e em relação à motivação.
Aprendizagem
Desde que nascemos absorvermos infor-
mações do ambiente externo, muitas de-
las vindas dos nossos pais e pessoas que
nos cercam.
Desde bebezinhos aprendemos aos pou-
cos a nos comunicar, com alguns erros,
erros estes corrigidos com o tempo, até
que chegamos à fase pré-escolar de for-
ma que já conseguimos nos fazer enten-
der.
trar aulas, aos 23 anos, de Web Design.
Após lançar o blog Chief of Design essa constatação só aumentou através do “feedback” de vários
leitores do blog. Por causa disso eu sempre pensei em tentar ensinar HTML/CSS de um jeito di-
ferente do modo comum visto por aí, mas eu relutava em fazê-lo ora seja por questão de tempo,
ora por pensar que minhas ideias eram ”muito loucas”, e por aí vai…
Eu sei que neste momento você pode estar um pouco desconfiado desse novo método, ressabia-
do se irá aprender HTML mesmo...
Mas você gostaria de criar sites de forma mais fácil, né ?
Gostaria de ter mais independência para atuar como freelancer e até aumentar a sua renda
com isso?
Gostaria de aperfeiçoar o seu currículo e até trabalhar com isso?
Gostaria de não ficar “perdido” quando precisa fazer alguma alteração em um site?
Gostaria de construir seu próprio blog com mais embasamento?
Então, deixe essas desconfianças, pois eu trago para você, neste E-book a oportunidade de virar
o jogo.
Preparado? Então vamos nessa!
14 15
dade. E como já disse acima, constatei isso ao lecionar aulas em cursos de Web design, no dia a
dia, no “feedback” do público do Chief através de pesquisas, e-mails e mensagens.
Entretanto, você, com a certeza de que o mundo inteiro aprende facilmente, gasta sua energia
tentando uma, duas, três e mais algumas vezes sem sucesso e cai na armadilha da desmotivação.
Daí para não se passar de “burro” é preferível arrumar uma desculpa e desistir, reforçando o mito
que aprender HTML é fácil.
Primeiro é que não existe essa de “burro”. Segundo é que as pessoas não são iguais. Sendo assim
o que é fácil para um, pode não ser para outros. E para encerrar, se você já teve contato alguma
vez com HTML e CSS, é bem provável que você teve a falsa percepção que é tudo muito compli-
cado e o que você sentiu de verdade, na sua percepção, é que essas linguagens são um saco.
Só a verdade não é bem essa. Pelo contrário meu amigo, Galucho! Aprender HTML e CSS é muito
legal, desde que a forma que for passada para você não seja tão somente uma receita de bolo
mecânica e desmotivadora que ocupe sua memória, não te transmita significados e te canse a
ponto de que no dia seguinte você não se lembre de nada.
Vou te mostrar que é possível enxergar e mesclar formas diferentes de entender questões.
Pense comigo:
As pessoas podem ser motivadas ao aprendizado por métodos diferentes.
Algumas aprendem linguagens apenas repetindo o que um tutor fornece e isso
basta para que elas achem o conteúdo fácil. Já outras precisam de simbologias
e significados que se relacionem com um conhecimento prévio para que o con-
teúdo seja absorvido facilmente.
Consegues enxergar isso?
Tendo explicado as questões sobre aprendizagem e motivação, chegou a hora de te falar o que
este livro propõe e como a proposta se apresentará.
Lógico que nesta fase estamos longe da pronúncia perfei-
ta, porém já temos fluência e até então nos comunicamos
facilmente sem sermos ainda apresentados à gramática,
ou seja, para fazer-se entender você precisa ter fluência na
Língua Portuguesa e não necessariamente ser um letrado.
Então anota aí:
Para aprender construir suas primeiras páginas
de internet você precisará ter fluência nas lin-
guagens HTML e CSS.
Mas a frente de explico como isso é possível.
Motivação
Sabemos que muitas pessoas tem facilidade em aprender
linguagens para construção de sites. Isto é fato.
O problema é que estatal “facilidade” já se tornou um mito
na web que pode parecer absurdo questioná-la. Conse-
quentemente este mito já se impregnou na mente de mui-
tos através da comunidade web.
Isto é uma crença que cada vez mais pertence ao imagi-
nário coletivo de quem trabalha com isso. Basta digitar no
Google “HTML é fácil” e temos 167 milhões de resultados.
Fica difícil apostar que não. Concorda?
Só que na verdade muitas pessoas não tem essa tal facili-
1716
Isso quer dizer também que 80% das ações (a grande
maioria) que você se mata executando te leva para me-
nor parte dos resultados. Que cansativo, né?
Essa relação 80/20 não é precisa, é algo aproximado.
Agora tente observar em nosso universo prático. Por
exemplo, uma empresa de produtos de limpeza que tem
uma gama enorme de produtos, certamente somente
cerca de 20% destes produtos estão relacionados com os
80% de lucro da empresa. Sacou?
A gente não quer que você, que está começando agora,
fique se matando com 80% de sobrecarga de informação
que só te trará 20% dos resultados.
Por isso este livro foca na melhor informação (os tais
20%, se lembra?) para que você tenha mais tempo livre
e mais resultados. Consequentemente com este tempo
livre você pode descansar a mente e reempregar em ou-
tras atividades.
Reafirmo que uma das propostas do livro é focar nos fun-
damentos que trazem efetivamente a maior parte dos
resultados, que já podem ser aplicados em poucos dias
até que lhe traga a “fluência” necessária para assumir seus
primeiros projetos.
É um atalho para seu aprendizado. Ok?
Acredito que só de saber que você trabalhará com o
que realmente trará resultados efetivos já é algo muito
Neste livro proponho que você se jogue efetivamente no mundo prático e não fique aguardando
conhecer todos os fundamentos, todas tags, toda a sintaxe e semântica das linguagens só para
depois você ter a confiança de construir seus sites.
Não que não seja importante aprender todas as normas e regras que o HTML e CSS exigem, pelo
contrário, mas o tempo que você levará para aprender algo que você usará poucas vezes, você
pode investir nos conceitos mais utilizados. Isso te dará a “fluência” necessária.
Aos poucos, quando seus projetos exigirem outros elementos você vai incorporando-os em suas
habilidades. Como uma criança que vai juntando o quebra cabeça da comunicação. Como o
motorista, que já habilitado, vai aos poucos ganhando confiança no trânsito. Ele não tem como
aprender tudo de uma vez, entretanto a cada novo trecho de pista que enfrenta com responsa-
bilidade , ele se tornar um motorista cada vez melhor.
Agora, habilitado, sentado no banco do motorista, com o carro na garagem, lendo a surrada
apostilha de CFC (Centros de Formação de Condutores) pela enésima vez, ninguém chega à
praia, não é? Isto é “overload” de informação com zero de prática.
Este livro te estimulará a não ficar esperando o momento certo para agir. Porque esperar causa
paralisação e o momento certo nunca chega.
Não deixe o medo de se sentir incompleto te paralisar!
Agora vou te mostrar que não é preciso estar 100% pronto para por a mão na massa.
Você conhece o Principio 80/20 de Vilfredo Pareto?
Este princípio se demonstra mais ou menos assim: Cerca de 80% dos resultados que obtemos
estão relacionados com 20% dos nossos esforços. E o que isso quer dizer?
Quer dizer, que de todas as ações (100%) que você aplica em algo, 20% delas são responsáveis
por 80% dos resultados. Que doido!!!
18 19
• Conforme as etapas anteriores forem cumpridas, partiremos para a aplicação prática. Cada
elemento explicado no conteúdo, seguindo a ordem de apresentação, será demonstrado em
um layout predefinido. Teremos aqui a oportunidade de praticar e automatizar nossas habili-
dades básicas e fundamentais (os 20%) enquanto trabalhamos em outras mais avançadas.
• Também forneceremos links para os exemplos e para arquivos, onde você poder baixar para
seu computador e comparar com o que você fez.
• E por fim, pausa para descanso, Galucho! Isso mesmo, descanso. Sabe por quê?
Não adianta você passar horas em cima de uma assunto pensando que assim irá aprender mais
rápido. O cérebro satura, “a cabeça pesa”... Ele (o cérebro) tem pouca capacidade de absorver
novos conhecimentos em grandes períodos de tempo. Por isso precisamos fracionar os estu-
dos para conseguirmos absorver melhor o conhecimento que adquirimos.
“Você precisa de motivação para aprender HTML/CSS, e não de paciência.”
A fim de melhorar o aprendizado e assimilação do conteúdo doE-book que, por vezes, é bastante
técnico, inserimos no E-book certos símbolos e gráficos.
A seguir segue uma descrição de cada um:
Este é o “Chefinho”. E ele está aqui para te ajudar na compreensão do ebook.
Portanto o nosso chefinho aparecerá em exemplos, dicas e observações im-
portantes. Fique ligado e sempre que ele aparecer e preste atenção.
motivador, não é mesmo? Mas talvez para alguns ainda não seja o suficiente.
Então o que mais proponho apresentar para manter sua motivação em alta durante seus estudos?
Não tem jeito! Em algum momento deste livro você terá que repetir códigos como em uma recei-
ta de bolo. Isto é necessário para que você adquira conhecimentos prévios que te ajudarão nos
exercícios mais avançados. Porém, sempre que possível, deixaremos esta tarefa mais agradável.
Sabemos que quanto mais repetimos uma tarefa mais ficamos bons nela. A repetição nos serve
para ganhar um nível mínimo de competência. Mas, fala sério... Ficar repetindo exercícios muitas
vezes é muito chato.
Portanto, para não cair no mar de lama da desmotivação que é a grande responsável pelas desis-
tências e pelas desculpas que reforçam o mito que aprender HTML e CSS é fácil (mas pode ser),
iremos apresentar o conteúdo deste livro da seguinte forma:
• Apresentação da sintaxe para construção dos elementos das linguagens HTML e CSS.
• Sempre que aplicada a sintaxe ela virá acompanhada de uma explicação semântica dos ele-
mentos.
• Sempre que possível, usaremos uma apresentação lúdica dos elementos.
O cérebro retém informação com mais facilidade enquanto você se diverte, sente algum tipo
de prazer ou emoção.
• Repetição mecânica dos exemplos. Porém com pouca carga para não cair na armadilha da
desmotivação (lembra-se?)
• Sempre que possível apresentar os exemplos embutindo as habilidades já adquiridas e soman-
do a experiências, conhecimentos prévios e a outros tipos de associações. Isso faz com que
nosso cérebro experimente outros contextos de aprendizagem.
20 21
Bom, agora que você já sabe um pouco mais sobre o E-book , espero que tenha uma agradável
leitura e um aprendizado efetivo. Como reforço eu te peço disciplina e dedicação, OK?
Então, vamos começar a aprendizagem!!!
Seja bem-vindo. :D
Este retângulo trajeado indica que existem informações, notas, links, dicas e
observações importantes que devem ser lidos dentro do contexto e de imedia-
to para que sejam compreendidos corretamente. Este tipo de retângulo pode
aparecer tanto na cor vermelha, branca ou azul e com a companhia ou não do
“Chefinho”. Então, fique atento!
Você pode (deve) reportar possíveis erros que encontrar aqui nesta obra.
Para isso basta mandar um email para contato@chiefofdesign.com.br.
Todos os arquivos usados nos exemplos, de todas as partes, estarão disponíveis
para você na internet, para que você possa baixá-los e compará-los (sem co-
piar, hein!) com os arquivos que você criou aí na sua máquina.
Você encontrará esses links ao longo do ebook (nos encerramentos de certos
tópicos) e também no final, na página de referências.
Ao longo do ebook você pode encontrar alguns links inseridos dentro dos
conteúdos. Estes links são conteúdos complentares, ao assunto que está sen-
do tratado, para que você possa acessar depois.
Fique atento quando algum código aparecer diretamente nas páginas.
Dentro dos próprios exemplos, ao invés de conteúdo fictício, podem estar di-
cas que te ajudarãono seu percurso.
<tag>
<outraTag>
DICAS
</outraTag>
</tag>
Um dos pontos fundamentais do ebook é a pausa para o descanso.
Não adiantar ficar horas a fio estudando. Seu cérebro não armazenará tudo
de uma vez. Estude , mas reserve um tempinho para o desncaso também.
22 23
Antes de começar a colocar a mão na massa, você precisará equipar-se de ferramentas que irão
auxiliar-te no desenvolvimento dos exercícios, no entendimento dos mesmos e também do con-
teúdo como um todo.
Basicamente precisaremos de um computador (óbvio), um navegador e um editor de texto.
Navegador
Para conferirmos nosso HTML precisaremos fundamentalmente de um navegador (browser) mo-
derno. Não importa o sistema operacional nem o dispositivo.
Mas recomendo que você baixe, pelo menos, os principais navegadores na sua máquina:
Google Chrome, Mozila Firefox e Internet explorer.
Ainda podemos também baixar o Opera, o Safari da Apple...
Mas a escolha é sua. Normalmente o Google Chrome, por usar webkit (motor de renderização)
assim como o Opera e o Safari, por si só já nos dá um resultado satisfatório.
O mais importante é ter em mente que sempre ao desenvolvemos, precisaremos testar nossos
sites e aplicações em vários navegadores. Precisamos que nossos projetos suporte os principais
e/ou ao máximo de navegadores possíveis. Isso se chama “Cross-Browser”.
Ferramentas necessárias
para o desenvolvimento
24 25
Existem vários softwares com esse fim:
Dreamweaver, NetBeans, Eclipse, WebStorm, etc.
Você pode usar qual preferir, qual se sentir mais à vontade.
Nos exemplos deste livro usarei o Sublime Text. O Sublime Text é gratuito, leve, tem vários plu-
gins e tem um visual bem agradável.
Você pode baixá-lo, se quiser, no site:
www.sublimetext.com.
Como o principal objetivo é primeiro fazer você ganhar fluência, deixaremos para outra oportu-
nidade o uso de outros softwares de testes e de edição mais avançados.
Com essas ferramentas, citadas acima, em mãos já podemos partir para a próxima fase.
Vamos lá? :)
Para desenvolver os projetos normalmente uso o Google Chrome e o Firefox, mas isso varia. Eu
recomendo que usemos, nos exemplos, o Chrome porque já vem com um depurador embutido, e
vamos precisar de um depurador para nos ajudar, e também por ser um dos mais populares nave-
gadores.
Editor de texto.
Para criar documentos HTML e
CSS precisamos de um editor de
texto sem formatação ou algum
ambiente de desenvolvimento in-
tegrado (IDE).
IDE são softwares que geralmente
contém um editor de texto, mais
um depurador e um gama de re-
cursos e plugins, que podem ser
WYSIWYG ou não. IDE ajudam, e
muito, no nosso cotidiano de de-
senvolvimento.
WYSIWYG é uma sigla em inglês
que significa “What You See Is
What You Get” ou “O que você vê
é o que você obtém”. Esse termo é usado para definir softwares onde você já vê o resultado, ou algo
muito similar, enquanto cria.
Então, podemos usar até o “Bloco de Notas“ se quisermos, todavia é mais interessante usar algum
editor software específico para isso e que nos ajudará mais no entendimento da matéria, na orga-
nização e otimização dos processos.
26 27
HTML = “HyperText Markup
Language”
OU
Linguagem de
Marcação de Hipertexto
Afinal, o que é HTML?
28 29
A evolução do HTML:
• 1991 - HTML;
• 1994 - HTML 2;
• 1996 - Surgimento do CSS 1 + JavaScript (veremos mais para frente o que é CSS);
• 1997 - HTML 4;
• 1998 - CSS 2;
• 2000 - XHTML 1;
• 2002 - Tableless;
• 2009 - HTML 5 (Em 2004 surgiu um grupo o WHATWG, em 2011 este junta-se à W3C para con-
solidar o HTML5);
• 2014 - HTML5 (em 28 de outubro de 2014 HTML5 se tornou uma recomendação oficial do
W3C).
W3C
Fundado em 1994, por Tim Berners-Lee, o W3C (World Wide Web Consortium) é uma organização
sem fins lucrativos composta por cerca de 400 membros cuja missão é levar a World Wide Web
ao seu potencial máximo, desenvolvendo protocolos e diretrizes que garantam o crescimento a
longo prazo da Web.
HTML é uma linguagem de marcação que foi inventada na década de 1990 por um cientista cha-
mado Tim Berners-Lee.
A finalidade inicial era tornar possível o acesso e a troca de informações, de documentações e de
pesquisas, entre cientistas de diferentes universidades.
O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o
HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.
O HTML se popularizou através do primeiro browser da história: O Mosaic.
Mosaic - browser desenvolvido por Marc Andreessen na década de 1990. Desde então vários de-
senvolvedores e fabricantes de browsers surgiram utilizando o HTML como base.
O HTML é uma linguagem universal na internet para distribuir informação e conteúdo. Ele é ba-
seado no conceito de Hipertexto, ou seja, ligações/conexões entre elementos como imagens,
documentos, vídeos, áudios, palavras, etc.
O hipertexto é uma forma não linear de distribuir e dispor os conteúdos no meio digital.
Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz
do HTML.
O HTML é a linguagem que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e
etc) na Web.
30 31
vídeo, são inseridos através de tags.
Por exemplo, um parágrafo que você encontra em um texto na web é, ou deveria ser, marcado
com uma tag que faça o navegador identificar o elemento como um parágrafo. Para isso será ne-
cessário de uma tag específica denominada “p”.
Mas chega de teoria e vamos à prática. O que você quer saber mesmo é como é que se faz para
mostrar o conteúdo nas páginas, certo? Então vamos ao que chamamos de sintaxe, ou seja, a
forma de montar o código HTML.
Para isso vamos primeiro entender como se “mexe” com as tags e depois como montar uma es-
trutura HTML básica. Ok?
Vamos nessa!
Metas do W3C
• Web para todos.
• Web em qualquer dispositivo.
• Web como uma base de conhecimento.
• Web confiável e segura.
Padrões Web (web standards)
Os Padrões Web são as recomendações do W3C (World Wide Web Consortium), as quais são des-
tinadas a orientar os desenvolvedores para o uso de boas práticas a fim de tornar a web acessível
para todos.
“Não faça seu site de qualquer jeito Faça certo!!! Utilize os padrões Web.”
Tags HTML
Todo documento HTML é feito a partir de elementos de marcações e estes são formados através
de tags. Estas marcações definem o tipo de conteúdo e informam ao navegador como ele deve
ser apresentado na página.
Tags são marcas específicas que marcam delimitando o conteúdo e informando ao navegador
sobre que tipo de informação se trata (um título, um parágrafo, uma lista). Toda tag contém um
nome (nome da marca) e este também dá designação ao elemento HTML.
Todo elemento visual que você identifica em uma página web, desde um texto, uma foto ou um
32 33
Para constituir o elemento HTML precisamos de dois tipos de tags mais o conteúdo. Os dois tipos
de tags são:
• A tag de abertura que marca o início do elemento: <tag>.
• E a tag de fechamento que marca o fim do elemento: </tag>.
A diferença entre elas é que na tag de fechamento existe uma barra “/”.
Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento representa o
conteúdo. E este será processado segundo o comando contido na tag.
Para exemplificar vamos usar o elemento HTML que marca parágrafos.
Começamos com a tag de abertura:
Sintaxe HTML
Já sabemos que todo elemento HTML é formados por tags. As tags tem o seguinte formato:
Começam com um sinal de menor “<”, terminam com um sinal de maior “>” e entre esses sinais
vai o nome da tag do elemento que queremos inserir em nosso documento.
34 35
E as tags não podem ter espaços entre os sinais de maior para o comando. Ex: < tag>.
As tags podem ser escritas tanto em maiúsculo quanto minúsculo, entretanto por questões de
estética e também por indicação dos padrões web e boas práticas, recomenda-se todo o uso
em minúsculo. Exemplo:
<TAG> - válido, mas é não é uma boa prática.<tag> - boa prática.
Resumindo:
Basicamente o código para inserir um elemento HTML segue a lógica apresentada acima, mas
como toda a regra existe exceções, com as tags não seria diferente!
É o que vamos ver a seguir ao conhecermos os “elementos nulos”.
<tag>Conteúdo a ser visualizado na página web</tag>
Primeiro inserimos o sinal de menor, em seguida o nome da tag do elemento “parágrafo”. E para
finalizar, inserimos o o sinal de maior.
Resultado:
Simples assim!
Posteriormente colocamos o conteúdo textual que desejamos apareça no parágrafo.
Resultado:
E para finalizar colocamos a tag de fechamento. Resultado:
Meu primeiro parágrafo!
Meu primeiro parágrafo!
36 37
Estas são as tags de elementos nulos:
• area,
• base,
• br,
• col,
• hr,
• img,
• input,
• link,
• meta,
• param.
Com o advento do HTML5
foram adicionadas, nesta lista, as tags:
• command,
• keygen,
• source.
Não é preciso que você se preocupe em memorizá-las, Galucho. Foque em saber que elas exis-
tem e como funciona a forma de escrever a sintaxe do código, ok?
Tags entre Tags
Um elemento HTML pode conter outra tag entre suas tags, e quantas forem necessárias.
Isso define uma hierarquia entre os elementos: o elemento externo pode ser definido como ele-
mento pai e a interno como elemento filho.
Vejo exemplo:
Sintaxe das tags em elementos nulos (vazios ou void)
Elementos nulos são marcações que só possuem tag de abertura. Elas têm um fechamento
automático.
Essas tags não podem conter texto ou elementos aninhados dentro deles, já que não possuem
tags de fechamento.
Exemplo:
<input/> texto - Errado .
<input> texto </input> - Errado.
<input/> - Certo.
Em arquivos XHTML estas tags possuem auto-fechamento, ou seja, a barra (/).
Já para especificação W3C em HTML5 não necessita de auto-fechamento, apesar de não trazer
efeito algum ao elemento seu uso. Vamos ver como fica a sintaxe?
Em XHTML: <tag/>
Em HTML: <tag>
38 39
Este é o elemento “html” que dá início a estrutura. Você pode notar a presença do sinal de menor
e maior mais o nome do elemento que forma a tag de abertura. E notar no fechamento que re-
petimos a mesma regra, porém adicionando uma barra antes do nome do elemento.
Agora iremos aplicar o que vimos sobre tags dentro de tags. O elemento “html” englobará todas
as demais tags que formam um documento HTML. Entenda-se documento HTML como o arqui-
vo que será interpretado pelos navegadores para formar uma página web.
Você digitará entre as tags de abertura e fechamento do elemento HTML as tags de um elemento
chamado “head”. Ficará da seguinte forma:
Como você já sabe muito bem as tags seguem o modelo de abertura e fechamento. O elemento
“head” está contido dentro do elemento “html”. Eles são elementos filho e pai respectivamente.
Esta hierarquia, consideramos como árvore do documento ( assunto que ainda será abordado).
Dando prosseguimento... Agora vamos colocar o terceiro elemento básico que é o “title” entre as
tags do elemento “head”. E ficará assim:
Vou exemplificar melhor sobre hierarquia depois,
porque antes precisamos entender uma estrutu-
ra básica de HTML, no tópico a seguir.
Conhecendo tags estruturais básicas em um arquivo HTML
Finalmente você mexerá no Sublime Text (ou se preferir outro editor de texto). Agora vamos fazer
nosso primeiro código. E nele vamos inserir tags HTML fundamentais. Então, abra o Sublime Text
( ou o seu editor favorito) e vamos começar!
Em qualquer página de internet de qualidade que se preze você encontrará está uma estrutura
básica de tags. Portanto abra seu editor de texto e inicie um novo arquivo. Iremos usar todos os
conceitos para construção de tags que vimos anteriormente. Começaremos pela tag raiz de todo
e qualquer página HTML. Digite:
<tag>
<outraTag>
Conteúdo
</outraTag>
</tag>
40 41
Veja a seguir:
Significado das tags usadas:
<html></html>: São tags que delimitam o documento HTML. É a raiz deste documento.
<head></head>: São tags que delimitam o cabeçalho. É onde se encontra outros elementos de
cabeçalho.
<title></title>: Correspondem ao título que você vê na parte superior do seu navegador (barra
de ferramentas). São tags contidas dentro do elemento “head” (<head></head>) e que dá o nome
da página. Além disso elas fornecem um título para a página quando ela é adicionada aos favo-
ritos e para visualização nos resultados de buscas.
<body></body>: Estas tags são responsáveis por mostrar todo o conteúdo de uma página. É o
“corpo da página”. E é dentro delas que ficam outras tags específicas para inserção de conteúdo
e de divisão de seções.
Em seguida entre as tags de abertura e fechamento do elemento “title” coloque um título que
você deseja para a sua página. Por exemplo: “Minha primeira página web”.
E para encerrar a estrutura básica colocaremos um elemento de suma importância em um docu-
mento HTML. Falo do elemento “body”. Ele ficará sempre entre as tags do elemento “html”.
Entretanto a sua tag de abertura sempre virá após a tag de fechamento do elemento “head”.
42 43
enquanto você se diverte. E com certeza você não terá que cansar de repetir várias vezes para
memorizar estas tags, basta se lembrar desta imagem ao lado.
Esta obra de vanguarda (hehe) procura associar os nomes, em inglês, de elementos HTML às
particularidades que vemos em um indivíduo comum. (associação que outros autores já fizeram
também, diga-se de passagem.)
Brincando com os elementos ,da forma mais estranha possível, você facilita a fixação.
Isto vai de encontro com a aprendizagem significativa de David (não, eu!), o Ausubel (grande psi-
cólogo de educação americano). Onde os novos conhecimentos que se adquirem relacionam-se
com o conhecimento prévio que a pessoa já possui.
Você pode até não ser ainda “expert” em HTML, porém você sabe o que é um corpo. Esse seu co-
nhecimento prévio que agora, propositalmente, uso para te ajudar.
Fica até mais fácil de você lembrar o elemento “head”, que literalmente significa cabeça, a uma
cabeça. Tão obvio! Para associar tag body (corpo) usei o restante do corpo do indivíduo. O ele-
mento “title” está dento de head, da cabeça. Associasse então o individuo da imagem verbalizan-
do um título com um balão.
Lógico que isto não se aplica a todo mundo. Uns memorizam repetindo um exemplo, outros as-
sociando a algo já experimentado.
Quando você estiver definitivamente escrevendo esses códigos não precisará lembrar-se desta
imagem. Será algo automático e você estará em outro nível onde usará este seu conhecimento
para associar e absorver conhecimentos mais avançados.
Bom... Você já deve estar entendendo como a montagem do código HTML funciona. Entretanto
ele está muito bagunçado. No tópico a seguir você vai aprender como a deixá-lo organizado.
Uma forma inusi-
tada de memorizar
estas tags
O uso dos elementos: html,
head, title e body é pratica-
mente “mandatório” para o
bom andamento do seu códi-
go. Isso quer dizer que sempre
você estará usando-os. Talvez
você memorize-os logo de
cara.
Entretanto pode ser que al-
guns não tenham essa facilida-
de. Para isso nada melhor que
uma imagem lúdica, somada a
um pouco de imaginação, para
fixar o conceito na memória.
É... Este carinha é quem você
está imaginando mesmo. (o
que não faço para te ajudar,
hein? :D)
Como já disse, na introdução
deste livro, o cérebro retém in-
formação com mais facilidade
44 45
Através da indentação fica
mais fácil identificar um ele-
mento aninhado em outro e
também a forma como eles
se relacionam.
Para compreendermos este
relacionamento devemos en-
tender o conceito de árvore
do documento.
Um conhecimento que é
absorvido, pela maioria das
pessoas, é sobre a árvore ge-
nealógica de uma família.
Usaremos esse conhecimen-
to prévio para explicar o fun-
cionamento da árvore de um
documento.
Em qualquer família existe o
grau de parentesco que de-
termina a relação entre seus
integrantes.
De forma similar, na árvore
do documento, os elementos
da marcaçãose relacionam
entre si como se relacionam
os integrantes de uma família.
Indentação
Indentação é o ato de indentar. Ele consiste em organizar seu código para que ele fique estetica-
mente agradável e principalmente legível.
Isto é muito importante para que possamos encontrar determinada informação ou código, quan-
do estamos criando um site ou fazendo sua manutenção. E como fazemos isso?
Basta criar espaços em branco ou usar a tecla “TAB” em nosso código HTML. Precisamente antes
da tags de aberturas.
Veja no exemplo abaixo:
Árvore do documento (hierarquia)
Como você pode ver, nos exemplos encontrados nos tópicos anteriores, existem elementos den-
tro de outros elementos. Isso é possível através de tags de um elemento que ficam entre as tags
de abertura e de fechamento de outro elemento. Esse processo de inserir um elemento dentro de
outro chamamos de “aninhamento.
SEM Indentação COM Indentação
4746
Tags mais usadas em todos os HTMLs
(Utilizando o Princípio 80/20)
Como já dito neste livro, quando Tim Berners-Lee criou o HTML, a finalidade inicial era trocar
informações e acessar documentação de pesquisa entre cientistas de diferentes universidades.
Até então o aspecto das páginas era bastante simples.
Antes disto, toda a informação para leitura era concentrada na mídia impressa. Para um trabalho
escolar era normal frequentar bibliotecas a procura de livros, revistas, etc.”
Conforme a web foi evoluindo surgiram os primeiros navegadores, portais de notícias, provedo-
res de acesso e serviços de buscas.
Com o tempo surgiram outras versões de HTML. Os hardwares e a conexão na internet também
avançaram. O custo de acesso baixou o que estimulou o crescimento do número de usuários.
Sites institucionais eram criados aos montes. E finalmente, no ponto onde eu queria chegar, a
mídia impressa começou a migrar uma parte de seus esforços ao universo digital para angariar
seguidores.
E você deve estar se perguntando: “O que isso tem a ver com as tags mais usadas?”
E eu te digo: Tudo!!!
Porque as tags mais usadas são aquelas que dão significados a linguagens visuais que encontra-
mos no meio impresso. Hoje em dia uma página web é como fosse um espelho digital de uma
Tags mais Usadas(20%) = Site HTML(80%)
Para entender, usamos os elementos HTML que já conhecemos até o momento. Existem elemen-
tos HTML pai, filho, irmãos, ancestrais, descendentes, entre outros.
A imagem anterior, que representa a árvore do documento, nos possibilita identificar o relacio-
namento de hierarquia entre os elementos.
Segue o que podemos identificar na nossa árvore:
• O elemento “html” é pai dos elementos “head” e “body”.
• O elemento “title” é filho do elemento “head”. E o inverso, obviamente, “head” é pai de “title”.
• Os elementos “html” e “head” são ancestrais de “title”.
• O elemento title é descendente do elemento “html”.
Depois que estamos acostumados com HTML é possível presumir a hierarquia entre os elemen-
tos simplesmente observando um bloco de notícias com textos, imagens e outros elementos
visuais em uma página web.
Porém, para confirmar, deve sempre conferir o código fonte.
Outra coisa que podemos notar é que além de existir elementos dentro de outros elementos,
existem aqueles que estão no mesmo nível de hierarquia. Observando os códigos anteriores no-
tamos este nível de hierarquia entre os elementos “head” e “body”.
48 49
E a partir daí você pode ter certeza: Você terá agora duas estratégias poderosas em seu poder
para construir suas primeiras páginas de internet! São eles:
• O conhecimento prévio sobre a sintaxe de tags HTML;
• O conhecimento prévio sobre as tags estruturais fundamentais, já vistas neste livro, somadas
as tags mais usadas em páginas web, que iremos apresentar a seguir.
E essas duas estratégias juntas é que proporcionarão os 20% de esforços que resultarão nos 80%
de resultados. Então o que falta agora é apresentar as tags mais usadas no HTML.
Você vai se impressionar ao saber como os elementos desses “códigos aterrorizantes”, a primei-
ra vista, são bastante familiares aos elementos visuais que você costuma ver em uma revista ou
jornal.
Vamos então às tags:
<div>
São tags que delimitam blocos de conteúdo. Este bloco serve de contêiner e pode agrupar e ani-
nhar outros elementos (filhos) como; parágrafos, imagens, listas, entre outros. Como também
estar dentro de outro bloco “div” (elemento pai).
Apesar de não existir representação se-
mântica para esse elemento ele é muito
usado para dividir seções em uma página
web.
Exemplo:
página de revista. Lógico que não em sua totalidade, o usuário é passivo diante de uma revista
gráfica. Mas sim, em comparação com uma época jurássica na timeline da web, onde as tags já
existiam, porém os sites eram abarrotados de frames e layouts estruturados em tabelas, também
de elementos, navegações e menus em flash ou em javascript, como protagonistas.
Devemos agradecer as empresas de comunicação, as revistas, os jornais, as editoras por aderi-
rem à internet. Isso com certeza não foi o fator mais importante, mas contribuiu para o desenvol-
vimento de tecnologias para produção de conteúdo dinâmico sem espaço para firulas.
Agradecemos também aos pioneiros do HTML por desenvolver elementos que representam ana-
logicamente tudo o que sempre foi usado no meio impresso agora também para web. E a W3C
por criar os padrões web.
Agora...Você já notou quais os elementos visuais mais comuns em uma página de revista?
Só para citar alguns:
• Blocos;
• Parágrafos;
• Listas;
• Imagens;
• Títulos e Subtítulos;
E é este o conhecimento prévio sobre os elementos visuais que desde a época das primeiras lei-
turas você adquiriu.
Você lembra quando a sua professora do ginásio dizia: “Pula uma linha, parágrafo…” ( eu espero
não parecer um “velhaco” relembrando tal passagem).
De lá para cá, você adquiriu esse conhecimento com a escrita, a leitura e até com a diagramação,
caso trabalhe com isso. E não é por coincidência que esses elementos visuais se encontram e
estão entre os mais usados do HTML junto com as tags estruturais apresentadas neste livro.
50 51
Agora um exemplo prático
encontrado no Blog Chief of
Design.
Na imagem ao lado temos
a seção de um artigo sobre
User Experience (Recomendo
que leia depois!).
Como se trata de uma seção,
o bloco que agrupa os conte-
údos visuais deste artigo está
usando o elemento “div”.
O código foi gerado por um
Gerenciador de conteúdo
chamado “Wordpress” que
inseriu mais 2 Divs aninha-
das (elementos filhos) dentro
da seção.
DIV (elemento pai): contêiner
da seção que agrupa todos
os elementos (títulos, textos,
imagem).
DIV (descendente): contêiner
da seção que mostra o nome
do autor do artigo.
DIV (descendente): contêiner
da seção que agrupa os ele-
<html>
<head>
<title>
Minha primeira página web
</title>
</head>
<body>
<div>Bloco 1</div>
<div>Bloco 2</div>
</body>
</html>
Abra seu editor e digite estas linhas de código acima, salve como o nome minha-primeira-pagi-
na-web.html e depois abra o
arquivo em seu
navegador.
Agora será possível ver algo
na página, como na imagem
abaixo:
Nota: O aspecto visual de alguns elementos HTML
só são definidos através de estilos CSS que, para fins
didáticos, não está sendo aplicado neste exemplo.
http://chiefofdesign.com.br/user-experience/
http://chiefofdesign.com.br/user-experience/
52 53
Agora salve, veja no navegador e…
...Decepção total! Que zica é essa?
De onde surgiram estes caracteres estranhos?
Pois bem! Sem motivo para pânico caso isso tenha acontecido com você. Se não aconteceu,
ótimo. Entretanto é bom saber com agir nesses casos. Vamos tomar duas ações:
Primeira ação:
Existe uma tag denominada “meta”(meta tags). Ela fornece informações importantes sobre o
documento HTML.
Trataremos dela de forma mais completa em outro tópico. Por enquanto é importante que você
saiba que ela também é responsável por informar o formato de codificaçãode caracteres.
Portanto para deixar a codificação do nossa página do jeito que queremos você deve inserir logo
após a tag de abertura do elemento “head” o seguinte código:
mentos HTML que geram os parágrafos do texto do artigo e a imagem.
<p>
Estas tags já foram apresentadas a você, elas delimitam parágrafos, elementos em abundância
tanto na web quanto na mídia impressa.
Vamos aproveitar incrementando um pouco mais o código do arquivo minha-primeira-pagina-
-web.html. Insira um parágrafo entre as tags dos dois elementos “div”, como a seguir:
<html>
<head>
<title>Minha primeira página web</title>
</head>
<body>
<div>
<p>Este é um parágrafo que está inserido dentro do elemento HTML “div”
(primeiro bloco desta página).
Este parágrafo é descendente do elementos “div”, “body” e “html”.</p>
</div>
<div>
<p>Este é um paragráfo do segundo bloco da página.
Nele eu posso colocar um texto que complemente o assunto
tratado no bloco anterior.</p>
</div>
</body>
</html>
OBS: Leia os textos em todos os códigos
de exemplos, pois possuem dicas!
54 55
Agora que a codificação está OK, podemos prosseguir.
Enquanto houver a necessidade de incluir textos e consequentemente incluir mais parágrafos
basta usar o elemento HTML “p”. Veja no exemplo anterior como existem mais de um parágrafo.
Para continuar com as tags mais usadas falaremos de agora não só de um elemento HTML e sim
de um grupo que trabalhando juntos formam as famosas listas.
<ol>, <ul> e <li>
Este conjunto de tags são usadas para marcar conteúdo em listas.
Todo o conteúdo em que você precisa exibir, uma sequência, um procedimento, ou uma relação
de elementos de um tema comum podem ser consideradas listas.
Exemplos:
• Sequência de preparo de uma receita;
• Lista de planetas do sistema solar;
O código da página , agora, então ficará assim:
<html>
<head>
<meta charset=”UTF-8”>
<title>Minha primeira página web</title>
</head>
<body>
<div>
<p>Este é um parágrafo que está inserido dentro do elemento HTML “div”
(primeiro bloco desta página). Este parágrafo é descendente do
elementos “div”, “body” e “html”.</p>
</div>
<div>
<p>Este é um paragráfo do segundo bloco da página. Nele eu posso colocar um
texto que complemente o assunto tratado no bloco anterior.</p>
</div>
</body>
</html>
Segunda ação:
Antes ou, dependendo do seu editor HTML preferido, na hora de salvar seu documento, é bom
se certificar que ele esteja configurado para codificação UTF-8. No editor que sugerimos (Subli-
me Text) basta na hora de salvar escolher a opção “Save with Encoding” e em seguida escolher a
opção “UTF-8”. Vamos ver o resultado?
<meta charset=”UTF-8”>
56 57
Listas não ordenadas:
São poucos os sites que não possuem uma lista não ordenada, pois se trata de um elemento
importante para construção de menus e outros tipos de navegação que falaremos mais à frente.
Mas está é uma função que é executada com outros elementos HTML. A grande função das listas
não ordenadas é listar itens de forma mais livre, sem o rigor de ordenamento encontrado nas
listas ordenadas.
As tags para determinar este tipo de lista são <ul></ul>. O elemento HTML “ul” vem do inglês
Unordered list (lista não ordenada). Para entendermos melhor a diferença entre o elemento HTML
“ul” e o “ol” basta imaginar a descrição de uma receita de bolo, por exemplo.
Para apresentar os ingredientes não precisa de ordem então usamos “ul”, já para apresentar o
preparo do bolo é indicado usar “ol”, pois é preciso seguirmos uma sequência lógica. Não que
você seja obrigado, com uma faca no pescoço a seguir esta lógica. No dia a dia com certeza você
usará mais “UL” do que “OL”.
E existem sites que só usam de forma livre “ul” onde poderia ser “ol”. Porém entenda quando é
semanticamente mais apropriado usar um ou outro. Assim como o elemento HTML “ol”, o “ul”
necessita de trabalhar em conjunto com as tags filhas <li></li> para surtir efeito.
• Lista de com tipos de programas para editar imagens.
• Lista de itens de navegação do seu site.
E essass listas podem ser ordenadas ou não ordenadas.
Vamos conferir?
Listas ordenadas:
As listas ordenadas enumeram, ou dispõem em ordem, os elementos apresentados, e são
marcados pelas tags <ol></ol>. O elemento HTML “ol” vem do inglês ordered list (lista orde-
nada). E é apropriada para aplicar as listas com elementos que apresentam uma sequência a
seguir, como um procedimento, por exemplo. Por isso o motivo de enumerar os elementos.
Porém esta tag só define o tipo de lista e não tem efeito algum se não trabalhar em conjunto com
as tags filhas <li></li>.
O elemento HTML “li” (list item) é o responsável por apresentar cada elemento, ou se preferir cha-
mar de outro jeito, item da lista. Vamos exemplificar adicionando mais códigos a nossa página
minha-primeira-pagina-web.html:
<ol>
<li>Eu sou o primeiro item desta lista ordenada e posso ser usada como o primeiro item a
seguir de um sequência. Por exemplo, o primeiro ingrediente a usar em uma receita
culinária;</li>
<li>Eu sou o segundo item a seguir desta lista ordenada;</li>
<li>Eu sou o terceiro e último item a seguir desta lista ordenada.</li>
</ol>
Agora ao visualizar no navegador veja que o os itens foram organizados numericamente.
Você não precisa fazer esta tarefa de forma manual. Veja abaixo:
58 59
<img>
Este é um elemento nulo. Você lembra do conceito? (Senão lembra volte na página 36).
O <img> é responsável por marcar imagens e através de alguns atributos adicionais informar ao
navegador em que caminho se encontra a imagem, em que tamanho ele deve ser inserido na pá-
gina, especificar um título e também um texto alternativo para ser exibido quando a imagem não
for encontrada no caminho especificado ou para os deficientes visuais que usam leitores de tela.
Muita informação, não é? Calma, Galucho, que já vamos explicar cada detalhe.
Primeiro vamos a sintaxe, por partes.
Caminho da imagem:
Antes de qualquer coisa é importante saber que as extensões de arquivos de imagens comuns
em páginas web são o jpg, o png e o gif. E outro conceito importante, a saber, é que elementos
HTML podem possuir atributos.
Atributos são comandos extras a um elemento. Cada atributo possui um nome e um valor e são
inseridos dentro da tag de abertura. Uma tag pode ter um ou mais atributos. No caso da tag
<img> podem ser usados mais que um atributo.
Simulando uma tag com atributos temos:
Voltando a nossa tag <img>, o caminho da imagem é o endereço (URL = Localizador uniforme de
recursos) indicado pelo atributo “src” do elemento HTML “img” onde o navegador deve localizar
o arquivo de imagem. Para isso são necessários os seguintes itens:
<tag nome-do-atributo=”valor-do-atributo”></tag>
Então siga o mesmo procedimento anterior, mas ao invés de <ol> utilize <ul>.
Vamos ver como fica?
Se você usa o editor de texto Microsoft Word ou similar (conhecimento prévio), nele você tem
a opção de definir as listas ordenadas resultando em “bullets”, esses símbolos na frente de cada
ítem da lista. Com o HTML isso ocorre automaticamente. Entretanto existem listas que não apa-
recem estes símbolos, como em muitos menus por exemplos.
Quando você perceber isso saiba que é devido a uma escolha do desenvolvedor do site que atra-
vés de um código de estilo CSS, optou por ocultá-los.
Existem outras tags usadas para listas de definição, todavia como elas não estão entre as mais
usadas partiremos para outro elemento.
Desta vez falaremos sobre o elemento responsável por inserir imagens em sites.
Sigam-me os bons! :D
60 61
Observações importantes:
• Em arquivos XHTML o auto-fechamento é feito na tag de abertura (uso da barra):
<img src=”arquivos/imagens/pato.jpg” />
• É imprescindível que não existam erros de digitação no caminho da imagem, pois isso acarre-
tará no que é chamadode “link quebrado”. E a imagem não aparecerá.
• Da mesma forma o caminho da imagem deve estar correto para imagem aparecer no site.
Caso seu arquivo de imagem esteja dentro de um diretório que não for o mesmo do arquivo
HTML deve-se colocar o caminho, com os diretórios internos no atributo “src”, até a imagem.
• img : é o nome da tag do elemento;
• src= : significa search (localizar). Indica a url (endereço-caminho) onde está o arquivo
de imagem;
• “ “ : contém o endereço da imagem. O que estiver entre aspas é nome do caminho da imagem.
Este caminho pode ser formado só pelo nome do arquivo + a extensão do arquivo de imagem
(jpg, png, gif). Tipo:
“nome-do-arquivo.jpg”;
Ou em conjunto com um diretório, por ex: “pasta-de-imagens/nome-do-arquivo.jpg”;
Ou com conjunto de diretórios, por ex:
“arquivos-do-site/pasta-de-imagens/nome-do-arquivo.jpg”;
Analisando todo caminho da imagem conclui-se que:
<img src=”caminho onde se encontra o arquivo de imagem
(nome(s) do(s) diretório(s) e/ou nome do arquivo) + um ponto
+ extensão do arquivo de imagem”>
Exemplo de inserção de uma imagem:
<img src=”arquivos/imagens/pato.jpg”>
Veja como fica o resultado no navegador.
62 63
Exemplo 3:
Existirá momentos que a imagem que você quer inserir, não sei o porquê, está em um diretório
um nível acima da onde se encontra o arquivo HTML e você quer chamá-lo via código.
Então, como proceder?
Quando você começar a criar seus projetos aconselho que organize, na medida do possível, suas
pastas e arquivos de seus sites no mesmo diretório ou em diretórios em níveis abaixo de onde
se encontra seus arquivos HTML, porque isso facilita seu trabalho. Porém quando não tiver jeito
proceda da seguinte forma: insira no atributo “src” dois pontos e uma barra antes do arquivo de
imagem.
Segue o comando:
<img src=”../arquivo-de-imagem.jpg” >
Entendendo a sintaxe: os dois
pontos seguidos pela barra
significam que o arquivo de
imagem não está no mesmo
diretório que o arquivo HTML
e nem em seus subdiretórios.
A imagem, está sim, em um
diretório de nível acima em
relação ao arquivo HTML.
Veja a figura ao lado para en-
tender:
Os exemplos a seguir mostram o endereço da imagem relativo ao arquivo HTML
minha-primeira-página-web.html.
Exemplo 1:
Imagem no mesmo diretório
do arquivo HTML.
Exemplo 2:
Imagem localizada em dire-
tório dois níveis abaixo (sub-
diretórios) do diretório onde
se encontra o arquivo HTML.
Se você usa, ou já usou o sis-
tema Windows, possui co-
nhecimento prévio para en-
tender a lógica dos caminhos
de um arquivo. Isso porque é
similar a árvore de diretórios
usada no Windows que você
manipula quando clica nas
pastas até chegar no arquivo
desejado. A diferença é que
no atributo “src” em vez de
cliques você digita barras se-
parando cada pasta até che-
gar ao arquivo da imagem.
64 65
Note que tanto a imagem (pato.jpg) quanto o arquivo HTML (minha-primeira-página-web.html)
estão em caminhos diferentes:
• Imagem: arquivos/imagens/pato.jpg.
• Arquivo HTML: paginas-html/minha-primeira-página-web.html.
Como já citado, todos os endereços de imagens usados até agora são “relativos” ao arquivo HTML
minha-primeira-página-web.html.
Existe também uma forma onde o endereço é considerado “absoluto”, ou seja, completo. Isso
acontece quando inserimos uma imagem hospedada em outro site ou até mesmo em nosso site.
Para isso basta colocar o endereço completo da imagem. Tomamos como exemplo o logo do
Blog Chief of Design. Ele se encontra no seguinte endereço:
http://chiefofdesign.com.br/wp-content/themes/optimizePressTheme/themes/3/images/
chief-of-design.png
Você achou longo, não é mesmo? Para entendê-lo vamos “desmembrá-lo” em três partes:
• http://chiefofdesign.com.br/ - Este é o endereço principal do site, onde fica o diretório raiz;
• wp-content/themes/optimizePressTheme/themes/3/images/ - Aqui estão os sub-diretórios.
Eles são compostos, neste caso, por seis pastas (veja a separação por barras);
• chief-of-design.png - E finalmente o arquivo de imagem do logo.
Para inserir a imagem basta colocar o endereço (url) no atributo “src”.
<img src=”http://chiefofdesign.com.br/wp-content/themes/optimizePressTheme/themes/3/ima-
ges/chief-of-design.png” >
Com isso, obtemos o resultado:
<img src=”../pato.jpg” >
E quanto mais níveis acima um arquivo de imagem estiver, mais será necessária a inclusão dos
“dois pontos seguido pela barra”.
<img src=”../../pato.jpg” >
(../../ ) = Dois níveis acima.
<img src=”../../../pato.jpg” >
(../../../ ) = Três níveis acima.
Exemplo 4:
Pode acontecer também de a imagem
que você quer inserir esteja em um
subdiretório que pertence a um dire-
tório de nível acima ao arquivo HTML
que você está trabalhando.
Veja o comando abaixo:
<img src=”../sub-diretorio/sub-di-
retorio/arquivo-de-imagem.jpg” >
Resultado:
<img src=”../arquivos/imagens /pato.
jpg” >
66 67
Visualmente não ficou um primor. Porém não era este o objetivo.
Encerramos por aqui este tópico sobre inserção de imagem. Mas o assunto imagem continua.
Agora iremos falar sobre dimensões das imagens.
Dimensões das imagens
Se considerarmos os exemplos de inserção de imagens em uma página web exibidos até agora
notamos que não especificamos os tamanhos das imagens e isso não as impediu de aparecer no
navegador no tamanho correto. Porém é indicado você usar os atributos de dimensão de ima-
gens para o navegador reservar a área em que a imagem deverá aparecer.
Os atributos usados são o “width” para largura e “height” para altura, e o valor adotado para medi-
da é o pixel(px). A imagem do pato que estamos usando na página minha-primeira-página-web.
html tem 300px de largura e 169px de altura. Vamos ver agora como atribuir estes valores na tag
“img”.
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” >
Simples assim. Sabendo as dimensões das imagens basta colocar seus valores nos seus respecti-
vos atributos.
Você pode também manipular os valores para mais ou para menos, mas isso se constitui em
um mau uso dos atributos, resultando em deformação da
imagem ou diminuição da performance. Saiba o porquê:
Originalmente sabemos que a imagem do pato tem 300
por 169 pixels. (confira a imagem ao lado).
Entretanto você gostaria que ela fosse maior e decide au-
Já sei!
Você gostaria de ver esse logo dentro do arquivo minha-primeira-página-web.html que estamos
usando, certo?
Então vamos lá?
Agora veja o resultado no navegador:
68 69
Esta imagem foi definida com tama-
nho 50% menor que o arquivo (pato.
jpg). Apesar de aparentemente me-
nor quando visualizada no navega-
dor, ele continua sendo o mesmo ar-
quivo, com o mesmo tamanho (300
por 169) e com o mesmo peso. Olhe a
próxima imagem e veja como ela se
apresenta menor e sem deformações
aos nossos olhos.
Porém o peso da imagem continua o
mesmo. Agora imagine uma página
com dezenas de imagens redimensionadas através do HTML sendo que os arquivos de imagens
encontrados nos subdiretórios são bem maiores?
O quão rápido este site poderia ser, e não é? Isso é um erro primário que você não deve cometer.
Existem sistemas que automatizam as imagens através de programação. Fora isso, procure redi-
mensionar as imagens, em seu editor de imagem preferido, com as medidas exatas as encontra-
das nos atributos “width” e “height” antes de subi-las ao diretório de destino.
Texto alternativo:
Eis aqui um atributo importante para questões de acessibilidade. O atributo “alt” coloca um texto
alternativo a imagem, isto é, quando, por algum motivo a imagem não aparecer, um texto que
representa a imagem aparecerá sem seu lugar.
Mas a importância deste atributo vai além disto. Este texto alternativo é lido por leitores de telas,
o que facilita o uso de sua página por pessoas com algum tipo de deficiência visual. O leitor de
tela possibilita o usuário ouvir a descrição da imagem.
mentá-la através dos atribu-
tos do elemento HTML “img”.
Conforme você aumenta
duas, três, “n”vezes, a ima-
gem fica “pixelizada” perden-
do sua qualidade e definição
(veja a imagem ao lado).
A deformação visual ocorrerá
também quando você alterar
somente uma das dimen-
sões, tanto para mais quanto
para menos.
Veja o exemplo abaixo:
Mas a pior alteração de todas não resulta em deformidade visual perceptível, e sim na perda de
performance da página.
Logo, seu site demora preciosos segundo para carregar devido a possuir imagens de dimensões
maiores que aqueles valores atribuídos na tag “img”.
Entenda o código abaixo:
<img src=”arquivos/imagens/pato.jpg” width=”150” height=”85” >
70 71
digital. Apesar de aparente complexidade, com um pouco de prática você verá que não tem mis-
tério seu uso com HTML.
Segue a sintaxe final do nosso exemplo com a a imagem do pato:
O código HTML e os arquivos usados até
esta etapa se encontram neste link para download.
<span>
“span” é um elemento neutro para renderização de texto. Apesar de não adicionar nenhuma
semântica ao documento ele pode ser usado para alterar estilos visuais, através do CSS, de um
trecho de texto de outro elemento HTML.
Por exemplo: Você tem um texto de um parágrafo na cor preta e dentro deste texto você quer
enfatizar um trecho importante com outra cor.
Em revistas é comum ver pequenos trechos destacados de forma visual diferenciada para desta-
car algo importante na reportagem. No HTML existem vários elementos com esta função mais o
“span” é um dos mais utilizados.
Veja como seria a aplicação:
<p>Estou digitando um parágrafo com o texto na cor preta.
Porém <span>este trecho quero enfatizá-lo com a cor vermelha</span>.
Faço isso porque considero importante destacá-lo.</p>
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato” title=”Pato”>
Como um profissional web você deve atender as necessidades dos usuários e este atributo é algo
de fácil implementação. Basta adicionar o “alt” seguido de um sinal de igual (=) e um texto curto,
que descreve de forma sucinta a imagem, entre aspas. Veja só:
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato”>
E ainda existe outra vantagem de usar este atributo. Os buscadores usam o uso destes textos para
identificar as imagens nos sites e classificá-las nos resultados de buscas. Portanto é um desper-
dício omitir o uso deste atributo.
Título da imagem:
E para finalizar agora falaremos sobre o atributo “title”. Esse atributo coloca um título para sua
imagem. Não é um atributo essencial para o elemento HTML “img”, e é até usado em outros ele-
mentos.
Pode até ser que o título que você decida colocar seja o mesmo texto encontrado no atributo
“alt”, mas não necessariamente. O “alt” descreve a imagem, e o “title” dá um título. Veja a sintaxe:
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato”
title=”Pato”>
Quando o usuário repousa o mouse sobre imagem que usa o “title” ele vê tipo uma legenda com
o título da imagem.
Caminho completo com os atributos básicos:
Ufa! Quanta coisa falamos sobre imagens.
Estas são encontradas aos montes para informar e embelezar tanto na mídia impressa como na
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-1.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-1.zip
72 73
<br>
Ele é um elemento nulo muito usado também em construção de páginas.
Em arquivos XHTML o auto-fechamento é feito na tag de abertura (uso da barra), assim: <br/>.
E em HTML usa-se a versão sem barra: <br>
Sua função é inserir uma quebra de linha em textos. Só que ele é tão prático de usar, que é
comum cair na tentação de usá-lo para fazer coisas fora de sua função. Vamos entender agora:
Imagine a descrição de um endereço residencial. Seus dados são comumente separados por
linhas, porém sem fugir da ideia central, que é informar o endereço. Este é um caso positivo de
aplicação do elemento “br”.
Para exemplificá-lo vamos usar o endereço do MASP - Museu de Arte de São Paulo Assis Chate-
aubriand:
Avenida Paulista, 1578 - Cerqueira César.
São Paulo - SP.
CEP: 01310-200.
Aplicaremos agora o código:
<p>Avenida Paulista, 1578 - Cerqueira César<br>
São Paulo - SP<br>
CEP: 01310-200</p>
Note que o texto foi quebrado duas
vezes e continuou nas linhas seguintes.
Note que o simples fato de colocar as tags “span”
não surti efeito algum visualmente.
Isto ocorre porque se faz necessário um códi-
go CSS específico aplicado ao elemento HTML
“span”, como você pode ver a seguir:
<p> Estou digitando um parágrafo com o texto na cor preta. Porém <span style=”color:#f00”>es-
te trecho quero enfatizá-lo com a cor vermelha</span>. Faço isso porque considero importante
destacá-lo.</p>
Não se preocupe com o código adicional na tag de abertura do elemento “span”. Ele será aborda-
do no assunto CSS. Estamos usando aqui só para efeito de demonstração.
Vamos ver o resultado:
Agora é possível ver o trecho enfatizado na cor vermelha.
74 75
Veja que na forma correta não se usa tag <br>, porque ela não foi feita para isso. Você pode ques-
tionar: “Ah! Eu testei aqui é deu certo! Consegui o espaçamento que queria entre as duas ‘DIVs’.
Entretanto não podemos esquecer que o HTML é uma linguagem de marcação. Para a tarefa de
estilizar usamos o CSS. Para espaçamento existem propriedades específicas no CSS. Ok?
Outro exemplo de bom uso da tag <br> são poemas. Em poemas é muita comum a quebra de
linha. Após cada verso, se inseri a quebra de linha. Exemplo com o poema de Luís de Camões,
“Amor é fogo que arde sem se ver”:
<p>Amor é fogo que arde sem se ver;<br>
É ferida que dói, e não se sente;<br>
É um contentamento descontente;<br>
É dor que desatina sem doer. </p>
E em caso de existência de estrofes (conjunto de versos) é indicado a separação em
parágrafos. Entáo a continuação desse poema viria dentro de outra tag <p>.
<p>É um não querer mais que bem querer;<br>
É um andar solitário entre a gente;<br>
É nunca contentar-se de contente;<br>
É um cuidar que se ganha em se perder. </p>
O código HTML e os arquivos usados até esta etapa
se encontram neste link para download.
O que acontece é que pela facilidade de aplicação usa-se as quebras em situações não indica-
das. Segue dois exemplos:
1. Usar a tag <br> para simular parágrafos:
Este é o primeiro parágrafo de um assunto qualquer. <br><br>
Este é o segundo parágrafo. <br><br>
Forma correta:
<p>Este é o primeiro parágrafo de um assunto qualquer. </p>
<p>Este é o segundo parágrafo</p>
2. Forçar espaçamentos:
<div><p>Quero que este bloco fique com certa distância do bloco a seguir. </div><br><br>
<br><br>
<div><p>Consegui isso abarrotando meu código com quebras de linha. </div>
Forma correta:
<div><p>Quero que este bloco fique com certa distância do bloco a seguir. </p></div>
<div><p>Consegui isso através do CSS.</p></div>
OBS: Às vezes alguns gerenciadores de conteúdo (CMS), geram
algumas tags <br> de forma automática e em locais indesejados
em sua página. Fique atento!
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-2.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-2.zip
76 77
Os três primeiros cabeçalhos ( h1, h2 e h3) são os que a gente vê mais com frequência nos có-
digos de sites. Eles representam chamadas de maior atenção em um artigo de blog ou em uma
notícia publicada em um portal, da mesma forma que costumamos ver em jornais no mundo
off-line. E é associando a manchetes de jornais que explicaremos como funciona a hierarquia das
heading tags.
Quando você compra um jornal existe sempre aquela manchete estampada na capa que é sobre
a notícia principal do dia. Em alguns jornais geralmente ela fica até destacada com tamanho gi-
gante e na parte superior do topo, tipo:
“Designers estão entre os profissionais mais bem-sucedidos, bem remunerados e felizes
do mercado.” (só que não :/)
Nos blocos posteriores ou laterais da capa são mostrados assuntos também importantes, sóque
em segundo plano. Estes assuntos estão um nível abaixo de importância na hierarquia da infor-
mação em relação à manchete principal.
A gente percebe até o nível de importância pelo tamanho da fonte usada no título. E quanto me-
nor o bloco de notícia, menor o tamanho do título e o nível de importância.
Para exemplificar melhor vamos localizar alguns títulos em uma capa de um jornal de grande
circulação no Brasil.
<h1> à <h6>
Chegamos a um grupo de elementos fundamentais, principalmente para atrair a atenção dos
usuários, as Heading tags. Na mídia impressa seriam similares aos títulos e subtítulos.
Estes elementos devem ser usados como indicadores de títulos das seções e subseções dentro de
um documento HTML. São denominados também como cabeçalhos ou títulos de uma seção de
documento. Podem ser usados para marcação de títulos, subtítulos, legendas, títulos alternativos
e slogans.
As tags de cabeçalhos são classificadas em seis tipos, sendo <h1></h1> (cabeçalho nível 1) usadas
para os títulos de seção mais importantes e <h6></h6> (cabeçalho nível 6) o menos importante.
Veja a diferença entre os seis elementos:
<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<h4>Este é o cabeçalho 4</h4>
<h5>Este é o cabeçalho 5</h5>
<h6>Este é o cabeçalho 6</h6>
Crie um novo arquivo HTML com a es-
trutura básica já vista e insira o código
acima. Salve o arquivo com o nome de
“heading-tags.html”. Agora veja como
ficou no navegador (figura ao lado).
Perceba na imagem que o nível de im-
portância se destaca até visualmente
pelo tamanho da fonte entre as tags.
Nota: Como neste tópico o assunto é cabeçalho ignoraremos outros elementos,
como imagens e parágrafos, por exemplo, que não contribuem neste contexto. Nesta
capa peço para você ignorar o logo do jornal e foque no restante das seções.
78 79
A outra seção fica logo abaixo, possui dimensão e tamanho da fonte menor. Apesar do título bem
destacado, ele é ligeiramente menor que a manchete principal. Sendo assim, dentro do contexto
do Box Principal, optamos por deixá-lo em segundo nível de importância com a cor roxa.
Tendo identificado os elementos do Box Principal, a pergunta é? Caro Galucho, como você usaria
a hierarquia de títulos encontrada no jornal para transpor o conteúdo da capa para uma página
web usando os códigos HTML?
Você já sabe qual título é o mais importante e também quais os menos importantes neste Box
Principal da capa. Você também já sabe quais “heading tags” representam mais ou menos impor-
tância em um documento HTML. Basta agora associar o que você enxerga no papel e aplicar no
digital. Vamos começar?
Para esses exercícios podemos usar “divs” para separar as seções no código assim como são se-
paradas no jornal. Para iniciar inserimos no documento as tags fundamentais. Você se lembra?
<html>
<head>
<meta charset=”UTF-8”>
<title></title>
</head>
<body>
<div>
</div>
</body>
</html>
Primeiramente coloque entre as tags “title” o seguinte título do documento: “Trabalhando com
Heading Tags”. Em seguida abra e feche tags “div” para criar um bloco. Este bloco representará a
área que delimita a capa do jornal. Você como desenvolvedor deve enxergar a necessidade de
delimitar a área do seu site. E quando você olha esta capa de jornal qual é área que a delimita?
Consideraremos a dimensão total da capa como área limite. Então abra um novo documento em
Temos dois grandes boxes:
• Um na centro-direita,
maior na dimensão, ocu-
pando grande parte da
capa onde se destacam as
notícias mais importantes;
• Outro menor, localizado
a esquerda onde tem as
chamadas para notícias
secundárias.
Eles estão separados por uma
borda vertical e um espaça-
mento. Começaremos nossa
análise no box maior. Vamos
identificá-lo como Box Prin-
cipal.
Notamos que neste box vemos
duas seções. Uma seção maior
onde destacamos a manchete
principal da edição com a cor
rosa (nível 1), sendo que den-
tro desta seção tem um box
menor, com assunto (“PT, de
donos das ruas a coadjuvan-
te”) complementar a manche-
te principal, cujo título desta-
camos com a cor roxa (nível 2).
Nível de importância dos títulos
em ordem decrescente:
Nível 1.
Nível 2.
Nível 3.
80 81
Para continuar é preciso verificar se existem ainda elementos dentro do bloco principal. Qual-
quer elemento encontrado será irmão, e virá depois de “h1”, obedecendo a sequência de conteú-
do apresentado no Bloco principal.
Como não estamos ainda considerando imagens e parágrafos temos então uma pequena seção
na região inferior direita e dentro dela possui o título “PT, de donos das ruas a coadjuvante”. Por-
tanto esta pequena seção pode ser considerada um bloco com marcação do elemento “div” e
com um elemento filho “h2” para abrigar o título desta seção.
Você deve se perguntar. Por que o título da seção não é “h1”? Simples! Este é um título de um
assunto complementar a manchete principal, convém então aplicá-lo o nível 2 de importância.
Vamos ao código?
<html>
<head>
<meta charset=”UTF-8”>
<title>Trabalhando com Heading Tags</title>
</head>
<body>
<div>
<div>
<h1>Novos protestos fecham estradas e ruas pelo país</h1>
</div>
<div>
<h2>PT, de donos das ruas a coadjuvante</h2>
</div>
</div>
</body>
</htm>
Não estamos trabalhando com imagens neste tópico, entretanto para a página ficar com um as-
pecto visual melhor vamos colocar trechos iniciais dos parágrafos das manchetes em suas devi-
das seções para melhorar a compreensão.
seu editor, digite o código a seguir e salve o arquivo como “heading-tags.html”.
<html>
<head>
<meta charset=”UTF-8”>
<title>Trabalhando com Heading Tags</title>
</head>
<body>
<div>
</div>
</body>
</html>
Iremos construir agora o bloco que nomeamos de Box Principal. Como se trata de um bloco o
colocaremos aninhado na “div” existente. Dentro do box principal devemos inserir as informa-
ções de forma hierárquica.
E o que notamos logo de cara em nível de importância?
Notamos a manchete principal. E como ela está como maior destaque deve ser marcada com o
elemento de maior importância das tags de cabeçalho, o h1. Veja como fica a marcação:
<html>
<head>
<meta charset=”UTF-8”>
<title>Trabalhando com Heading Tags</title>
</head>
<body>
<div>
<div>
<h1>Novos protestos fecham estradas e ruas pelo país</h1>
</div>
</div>
</body>
</html>
82 83
O que importa aqui é entender que através da sintaxe que usamos para marcar os cabeçalhos,
conseguimos transmitir a hierarquia das informações e a semântica aos elementos, em uma tela
digital da mesma forma que transmitimos na mídia impressa.
Veja como visualmente tanto a manchete principal do meio impresso quanto a do digital se des-
tacam frente aos outros elementos visuais.
E se quiséssemos continuar com essa associação poderíamos até ir além e relacionar o impresso
ao digital, e dependendo do layout e grid usado, com títulos de menos destaque através de ele-
mentos “h3, h4, h5, h6”.
Nota: Por causa da tradução do elemento HTML “title”, que também é título, talvez
traga um pouco de confusão. Portanto saiba que apesar de ambos serem “títulos”, o
elemento “title” não está relacionado ao cabeçalho no sentido da palavra. Sem contar
que este é um elemento único e indispensável dentro do documento HTML.
Outro fator de confusão é que por muitas vezes, os responsá-
veis pelos conteúdos de sites colocam os textos entre as tags
“title” também entre as tags de cabeçalho do elemento “h1”.
Isso porque estas tags contribuem para a otimização do site
para os motores de buscas (SEO) e acredita-se que a inserção
de palavras chaves nos dois elementos é um fator importante
na classificação dos resultados no Google e outros buscado-
res.
Então é mais prático usar o mesmo texto (Não é uma regra).
Mas o assunto aqui é HTML, não SEO.
<html>
<head>
<meta charset=”UTF-8”>
<title>Trabalhando com Heading Tags</title>
</head>
<body>
<div>
<div>
<h1>Novosprotestos fecham estradas e ruas pelo país</h1>
<p> Atos de Centrais mobilizaram menos que manifestações...</p>
</div>
<div>
<h2>PT, de donos das ruas a coadjuvante</h2>
<p> Sem as camisas e bandeiras vermelhas do partido...</p>
</div>
</div>
</body>
</htm>
Confira o Resultado no código e no navegador:
Lógico que o resultado visu-
almente não é o mesmo que
a capa do Jornal. Nem deve-
ria.
Não estamos usando CSS, a
tipografia é diferente, os tex-
tos estão incompletos, não
tem imagens e nem está “dia-
gramado”.
84 85
pronta e no navegador a página precisa unir os arquivos necessários que se apresentarão na tela.
Portanto toda vez que você olhar um índice de uma revista ou chamada de jornal poderá associ-
á-los a um hiperlink.
Mas focando, agora, no universo web, o elemento HTML “a” permite efetuar hiperligações com
outras páginas de outros sites, com páginas de um mesmo site, linkar para um endereço de
e-mail, como também para uma parte específica dentro de uma mesma página.
Uma coisa importante a saber, antes de entender como efetuar a construção de links, é a relação
entre o documento de origem e de destino que estão sendo vinculados. Para isso vamos conhe-
cer os três diferentes tipos de caminhos que usamos para vincular páginas.
Caminhos absolutos e relativos a documentos
Você se lembra de quando falamos sobre caminho da imagem no tópico sobre o elemento HTML
“img”? Iremos agora potencializar seus conhecimentos sobre caminhos que é aplicado tanto para
construção de links, quanto para imagens e outros tipos de elementos que precisam referenciar
caminhos para documentos e arquivos.
Caminhos absolutos:
Quando você pretende vincular (linkar) outra página ou arquivo
utilizando um caminho absoluto você precisa colocar o endereço
completo desta página.
Geralmente ele é formado por:
1. Um protocolo HTTP ou HTTPS;
<a></a>
Chegamos a um elemento que desde o surgimento das primeiras páginas web é responsável pelo
o processo de navegar por um mundo de informações através dos cliques. O elemento HTML “a”
é responsável pela construção de hiperlinks. E com certeza não deveria de ficar de fora da lista
de elementos mais usados página web.
Você pode usá-lo tanto dentro de parágrafos, como em uma navegação formada por listas “li”.
Você pode embuti-los dentro de títulos “h1”, transformar imagens em elementos clicáveis, para
que em segundos (ou menos) acesse qualquer documento em outro servidor.
Eles possibilitam tornar a sua leitura aleatória. E talvez esteja aí a grande diferença entre o meio
digital e o meio impresso. Em uma revista não existe uma forma para que quase simultaneamen-
te você consiga acessar outro documento em outra revista. Mas de qualquer forma existe uma
pequena semelhança entre os meios.
Analogicamente você sempre “nave-
gou” entre páginas de uma revista ao
perceber uma matéria interessante no
índice. Você folheou até chegar a pá-
gina do assunto desejado. Isso é muito
semelhante ao processo de linkar para
uma parte específica de uma página ou
para outra página do mesmo site.
Só que em uma revista a página já está
O código HTML e os arquivos usados até
esta etapa se encontram neste link para download.
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-3.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-3.zip
86 87
Mas também podemos usar quando queremos vincular uma página de um site, para outra página
do mesmo site. Não que seu uso seja um erro, porém é o menos indicado, porque, por exemplo,
caso um dia precise mudar o site de servidor terá que mudar todos os links também.
Caminhos relativos
O caminho relativo passa a informação da localização do arquivo de destino em relação à pági-
na atual, ou seja, a localização do arquivo destino é em relação à posição da página HTML onde
você faz a vinculação. É o tipo de vinculação que você fez no tópico sobre o elemento “img”.
O caminho relativo é possível apenas quando o documento no qual você está trabalhando e o
destino do link estão no mesmo espaço do servidor em que o domínio está localizado.
Por exemplo, você quer linkar a página da url http://seusite.com/servicos.html, a página http://
seusite.com/minha-empresa/contato.html . Aqui é possível porque elas pertencem ao mesmo
domínio http://seusite.com/.
O arquivo da página “Serviço” fica no diretório raiz do domínio: servicos.html .
2. Um domínio, exemplo:
• seusite.com
• seusite.com.br
3. E um sistema de arquivos contando ou não com diretórios (pastas), por exemplo:
• servicos.html
• minha-empresa/contato.html.
E juntando todos esses elementos chegamos ao caminho absoluto. Veja abaixo exemplos:
http://seusite.com/servicos.html
http://seusite.com/minha-empresa/contato.html
Geralmente usamos o caminho absoluto quando queremos vincular um documento/página ex-
terna, de outro servidor, em relação ao nosso site.
Meu Site Site do
Fulano
88 89
Tipos de ligação.
1 - Ligação para outros sites:
É com este tipo de ligação que te apresentamos a sintaxe básica para construção de hiperlinks.
Este tipo de ligação ocorre quando a url de destino se encontra em um domínio diferente em
relação ao seu site. Para isso devemos utilizar um caminho absoluto.
Digamos que você quer apontar uma página sua para a página inicial do portal UOL.
Confira o resultado:
Para entender vamos por partes:
O elemento “a” necessita de uma tag de abertura e a de fechamento. Portanto usamos <a></a>;
Entre as tags será colocado o texto, ou imagem, que quando clicados fará com que o navegador
acesse a página de destino. Veja:
<a>texto ou imagem</a> (no exemplo anterior o texto é “UOL”.)
Só que somente é possível acessar alguma página quando dentro da tag de abertura colocamos
o atributo “href” com a url de destino pretendida. Somente assim o texto ou imagem entre as tags
se tornarão hiperlinks capazes de acionar o comando de acesso à outra página através de um
clique. Simples assim:
<a href=”url de destino”>texto ou imagem</a>
<a href=”url-de-destino”>texto ou imagem</a>
Agora imagine um outro caso: o arqui-
vo da página “Contato” fica em um dire-
tório que está um nível abaixo em rela-
ção ao arquivo “servicos.html”. Dentro
da pasta “minha-empresa”.
Portanto para linkar a página “Contato”
relativamente a página serviços, bas-
ta inserir o caminho “minha-empresa/
contato.html”.
Caso você queira linkar a página “Servi-
ços” a página “Contato” o caminho re-
lativo se apresenta inversamente.
A página “servicos.html” está um nível
acima então, assim como você apren-
deu no tópico sobre o elemento “img”,
você deve inserir dois pontos seguidos
por uma barra (../) para indicar o cami-
nho relativo.
Resultado: ../servicos.html
Agora que você já conheceu e reforçou seu conhecimento sobre caminhos de documentos, está
na hora de codificar o elemento html “a”. Faremos isso enquanto aprendemos os tipos de liga-
ções.
<a href=”http://www.uol.com.br/”>UOL</a>
90 91
<html>
<head>
<meta charset=”UTF-8”>
<title>Trabalhando com links</title>
</head>
<body>
<div>
<h1>Exemplos de links</h1>
<p>Neste página aplicaremos diversos
tipos de linkagem. Confira a seguir.</p>
<div>
<h2>Ligação para site externo</h2>
<p><a href=”http://www.uol.com.br/”>UOL</a></p>
<p><a href=”http://www.uol.com.br/”>www.uol.com.br</a></p>
<p><a href=”http://www.uol.com.br/”>
Coloco aqui o texto que bem entender</a></p>
<p><a href=”http://www.uol.com.br/”>
<img src=”arquivos/imagens/pato.jpg”
width=”300” height=”169” alt=”Imagem de um pato”></a></p>
</div>
</div>
</body>
</html>
Veja o resultado na imagem ao lado:
Ao clicar em qualquer link ou na imagem o usuário será
direcionado para página do UOL. Isso porque quem de-
termina o destino é a url inserida do atributo “href” inde-
pendente do texto usado entre as tags. Porém,Galucho, é
importante que texto, ou imagem, reflita o conteúdo que
o usuário irá encontrar na página de destino (óbvio!).
Novamente o resultado:
<a href=”http://www.uol.com.br/”>UOL</a>
Você pode colocar o texto que quiser entre as tags de abertura e fechamento que o resultado será
o mesmo:
<a href=”http://www.uol.com.br/”>www.uol.com.br</a>
<a href=”http://www.uol.com.br/”>Coloco aqui o texto que bem entender</a>
Você já está habilitado para trabalhar com imagens. Agora você pode torná-las clicáveis, basta
colocá-las entre dentro do elemento “a”:
<a href=”http://www.uol.com.br/”>
<img src=”arquivos/imagens/pato.jpg” width=”300” height=”169” alt=”Imagem de um pato”>
</a>
Lógico que o ideal seria a imagem do logo do UOL, mas para fins didáticos entenda que qualquer
imagem clicável pode dire-
cionar o usuário para onde
você quiser.
Agora pegaremos todos es-
tes exemplos e juntaremos
dentro de uma nova página
HTML.
Abra um novo documento
em seu editor, digite o código
abaixo e salve como “exem-
plos-de-link.html”:
92 93
Agora salve o documento como “home.html” e abra-o no navegador.
E vamos ver algumas informações importantes.
Conceitualmente em informática, barra de menu é uma região encontrada em softwares, aplica-
tivos, sites, entre outros, onde se apresentam menus para funções diversas.
No caso de sites, acessar páginas ou parte de páginas. Porém vamos deixar, por enquanto a fun-
ção dele um pouco de lado,
para atentar ao fato que cada
menu é um item. E todos os
itens juntos formam uma lis-
ta de itens.
Portanto, uma barra de menu
nada mais é que uma lista de
itens cuja função é ligar pá-
ginas ou partes de uma pági-
na que podem ser acessadas
com cliques.
Isso justifica o uso dos ele-
mentos “ul” e “li” como ascen-
dentes do elemento HTML “a”.
ul - Determina a barra do
menu como uma lista
não ordenada;
li - Marca cada menu como
um item de uma lista;
a - Atribui a função de link
para cada item do menu.
2 - Ligações entre páginas de um mesmo site:
Pensar nestas ligações é uma das ações mais importantes na hora de projetar um layout. Elas são
elementos da navegabilidade e de toda linkagem interna de um site. Quando você aponta um
link para outra página de um mesmo site você dá oportunidade para o usuário conhecer conte-
údos relacionados e o mantém por mais tempo dentro do site.
Você identifica este tipo de ligação facilmente nas barras de navegação superior e de rodapé, e
em barras verticais de navegação. É comum encontrar também links dentro do corpo de conte-
údos que apontam para outros conteúdos do mesmo site.
Para entender vamos a mais um exemplo. Crie um novo arquivo chamado “home.html”.
O bom deste exemplo, é que além de aplicar novos conhecimentos sobre o elemento HTML “a”,
é que reforçamos os conhecimentos adquiridos sobre listas, parágrafos e Heading tags.
Então digite a seguinte código:
<html>
<head>
<meta charset=”UTF-8”>
<title>Home - Página inicial do meu site</title>
</head>
<body>
<div>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”servicos.html”>Serviços</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
<h1>Home</h1>
<p>Bem-vindo ao meu site</p>
</div>
</body>
</html>
94 95
Nota importante:
Para a página “Serviços” não use o “c com cedilha (ç)”. Em urls é indicado o uso de palavras sem
caracteres que tenham acentos, cedilhas, til (~) ou espaços. Isto devido ao fato de pessoas de
outros países não possuírem teclados que atendam estes caracteres, ou alguns navegadores que
também não suportam.
Outro detalhe: usamos urls com extensão do arquivo .html, entretanto as urls sendo caminhos
para arquivos, se conclui que podem apontar para arquivos de diversas extensões que apresen-
tam desde páginas, passando por imagens, vídeos, animações, entre outras. Em relação a pági-
nas web as extensões mais usadas são: .html, .htm, .php, .asp.
Também é comum você encontrar urls que não apresentam
extensão. Essas são chamadas de urls amigáveis. Exemplo:
http://seusite.com.br/contato ou http://seusite.com.br/contato/
(com barra no final)
Na verdade os arquivos destas páginas possuem uma extensão
que é alterada no servidor, através de certas regras, mudando
como seu caminho deve ser apresentado. Mas este assunto foge
do escopo deste livro. Citamos somente para seu conhecimen-
to, porque certamente você fará uma ligação com este tipo de
url em projetos futuros.
Tendo esclarecido esse conceito, você pode agora clicar em cada item do menu, porém nada
acontecerá. Nenhuma página se abrirá. E o motivo é simples: faltam construir as páginas de des-
tino “Sobre”, “Serviços” e “Contato”.
Esta missão eu deixo para você, meu amigo Galucho. Portanto pare a leitura e tente fazer sozinho.
Tudo o que você deve fazer é criar mais 3 arquivos com a mesma estrutura do arquivo “home.
html”. Para cada um deles você deve alterar o texto do cabeçalho “h1” e o texto entre as tags “title”,
conforme o nome que você irá salvar a página.
O menu não sofrerá alterações, ou seja, para a página “sobre.html”, o texto do cabeçalho será “So-
bre”. O texto entre as tags “title” pode ser algo do tipo “Sobre meu site” (use sua imaginação, mas
sempre coloque a palavra chave que você usa para salvar a página. No caso a palavra “sobre”).
Quanto ao texto do parágrafo você pode usar um conteúdo qualquer relacionado com o tema.
E para encerrar, obviamente, salve o arquivo como “sobre.html”. Repita o processo em todos os
arquivos.
Depois de encerrado este exercício, corretamente, você será capaz de navegar entre as 4 páginas.
Por aqui, neste livro, construiremos as mesmas páginas só que incrementando novos conheci-
mentos sobre hiperlinks.
96 97
Sendo assim, ao clicarmos no link temos o seguinte resultado:
Você também pode marcar o envio para mais que um e-mail, basta separá-los por vírgulas.
<a href=”emailqualquer@exemplo.com,outroemail@exemplo.com”>Envie-nos um e-mail</a>
É possível também utilizar o recurso com cópia (cc) e com cópia oculta (bcc).
<a href=”emailqualquer@exemplo.com?cc=outroemail@exemplo.com&bcc=emaildousuariol@
exemplo.com&subject=Um assunto qualquer”>Envie-nos um e-mail</a>
3 - Ligação para um endereço de e-mail
Este tipo de ligação faz com que um software de e-mail seja aberto quando clicamos no link,
desde que instalado na máquina do usuário. O bacana é que o endereço de e-mail que você co-
loca no atributo “href” aparece automaticamente no campo “para” do formulário de criação do
e-mail. O que resta ao usuário é preencher os campos que faltam e enviar a mensagem. Vamos
ver a sintaxe desta ligação que é bem simples.
<a href=”mailto:emailqualuqer@exemplo.com”>Envie-nos um e-mail</a>
A diferença para os outros tipo de ligação é o uso de um endereço de email e o parâmetro “mail-
to:” que o precede.
Para praticar vá até o arquivo contato.html que você criou no tópico sobre “Ligações entre pági-
nas de um mesmo site” e inclua a código do link acima no corpo da página, abaixo da nossa lista,
confome o exemplo as seguir:
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”servicos.html”>Serviços</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
<h1>Contato</h1>
<p>Para esclarecer suas dúvidas
<a href=”mailto:emailqualuqer@exemplo.com”>
envie-nos um e-mail
</a>
</p>
98 99
<div>
<h2 id=”destino”>Posição onde o navegador direcionará o usuário</h2>
<p>Conteúdo que quero que o usuário leia ao clicar no link...</p>
</div>
Note que onde se encontra o “id” denominado “destino” será exatamente o ponto onde o nave-
gador vai direcionar o usuário ao clicar no link. O quefalta agora é definir o ponto de partida, o
link. Vamos a ele:
<a href=”#destino”>Me leve para o conteúdo que quero que o usuário leia.</a>
PLIM! Esta feita a mágica. Basta colocar o nome do “id” precedido pelo símbolo “#” dentro do
atributo “href”.
Para praticar peço que abra o arquivo “servicos.html” no endereço que fornecemos a seguir e
substitua o antigo arquivo “servicos.html” construído por você e que encontra em seu computa-
dor. (http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-4.zip)
Neste arquivo você terá uma navegação extra sobre os tipos de serviços oferecidos.
O código é o seguinte:
<p>Abaixo segue relação de nossos serviços:</p>
<ul>
<li><a href=”#servico01”>Serviço 1</a></li>
<li><a href=”#servico02”>Serviço 2</a></li>
<li><a href=”#servico03”>Serviço 3</a></li>
</ul>
Você deve ter notado que os “ids” que os links levarão serão respectivamente id=”servico01”, id=”-
servico02” e id=”servico03”. Veja a seguir:
4 - Ligação para uma parte específica dentro de uma mesma página
Opa, Galucho! Estamos agora no quarto tipo de ligação utilizando o elemento HTML “a” e bem
próximos de finalizar o tópico sobre as tags mais usadas em códigos HTML. Você está cada vez
mais habilitado a desenvolver coisas corriqueiras somente com essa pequena lista de códigos. É
o princípio dos 80% de resultados com apenas 20% do conhecimento padrão.
Agora vamos te mostrar um recurso bacana que você pode utilizar para direcionar o usuário para
um conteúdo interessante só que dentro da mesma página. Isto é bastante utilizado em algo que
chamamos de “One Pages”.
Você já deve ter interagido com uma “One Page”. Estes são sites de página única onde cada clique
no menu direciona para uma seção na mesma página. Uma grande parte dos portfólios que você
encontra na web é feita utilizando este tipo de ligação. Inclusive o meu também é. Pelo menos
até a data que escrevo este livro.
Geralmente você vê este direcionamento sendo executado de forma suave, deslizando. Isso é
devido a um script específico. Mas como o assunto aqui é HTML você verá que este movimento
será abrupto, porém funcional.
Este tipo de ligação também se aplica em conteúdos longos em que a página rola bastante e
você quer dar uma possibilidade do usuário pular trechos do conteúdo. Vamos entender o que é
necessário para isso:
Primeiro você vai precisar definir o ponto de destino, ou seja, o lugar que você quer levar o usu-
ário quando ele clicar no link. Obviamente este ponto não se encontra em uma página externa
(alguns casos sim). Quando você definir o ponto encontre a tag de abertura mais próxima, não
importa qual. Nela você vai colocar um atributo a qual chamamos de “id”.
Exemplo de aplicação em um título de cabeçalho “h2”:
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-4.zip
100 101
Observações importante:
• Você pode usar o caminho de forma mais completa que também obterá resultado:
<li><a href=”serviço.html#servico01”>Serviço 1</a></li>
• Você também pode linkar para outras partes específicas de outras páginas. Por exemplo, linkar
da página contato.html para o trecho na página de serviços que fala sobre o “Serviço 3”:
<li><a href=”contato.html#servico03”>Serviço 1</a></li>
• Existe outra forma de fazer esta ligação com uma parte especifica dentro do site. Utiliza-se o
elemento HTML “a” tanto no ponto de partida quando no destino, ou seja, é necessário dois
links. Diferentemente do método visto onde qualquer outro elemento pode ser destino.
O link de destino deste outro método recebe o atributo “name” no lugar do “id” e não possui o
atributo “href”. Optamos por não aprofundar sobre ele por ser menos utilizado atualmente e por
não ser válido no HTML5. Caso queira conhecê-lo melhor visite a documentação W3C neste
link: http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.1
• O atributo “id” pode ser usado em praticamente todos os elemen-
tos HTML. Só que o nome escolhido para ele não pode ser repeti-
do dentro de um arquivo HTML. Ele deve ser único.
Algumas regras para nomes de “id”:
1. Deve conter pelo menos um caractere;
2. Não deve conter quaisquer caracteres de espaço;
3. Todos os valores são w.
(tanto faz letras maiúsculas, quanto minúsculas.)
<div id=”servico01”>
<h2>Serviço 1</h2>
<p>Lorem ipsum dolor sit amet, consec-
tetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna ali-
quam erat volutpat. Ut wisi enim ad…</p>
</div>
Aqui colocamos somente um trecho do códi-
go. Em seu arquivo estará completo.
Note que desta vez o “id” está no elemento
HTML “div”, poderia também estar em “h2”, pois
ambos estão posicionados no começo do con-
teúdo sobre o “Serviço 1”.
O mesmo ocorre com “Serviço 2” e “Serviço 3”.
O texto usando entre as tags <p></p> é o fa-
moso Lorem ipsum utilizado para preencher o
espaço de texto enquanto ainda não se tem o
conteúdo final. Desconsidere-o.
Ao clicar nos links dos serviços o usuário é di-
recionado a parte específica da página cujo
conteúdo é dedicado.
Veja ao lado o resultado no navegador.
http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.1
102 103
HTML 5: a evolução!
Parabéns!!!
Se sinta orgulhoso pelo que aprendeu e celebre sua evolução!
Com os conhecimentos adquiridos até aqui você já é capaz de desenvolver o HTML de um sim-
ples site institucional com informações básicas sobre a empresa, algumas imagens, informações
de contato e navegação entre as páginas.
E com isso encerramos aqui o tópico sobre as
tags mais usadas no HTML.
Depois de tanto estudo e dedicação, sugiro que
você dê uma pausa para descansar.
Esse é um dos itens do sistema 80/20, você se
lembra?
Descanse um pouco e depois desse intervalo
volte a praticar tudo o que você viu até agora,
bele?
E se prepare porque nos próximos capítulos ire-
mos continuar a nossa grande jornada.
O código HTML e os arquivos usados
até esta etapa se encontram
neste link para download.
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-full.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-full.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-full.zip
http://ebookhtmlcss.com/arquivos/capitulo-2/arquivos-para-download-full.zip
104 105
Semântica
Dar sentido à estrutura. A semântica é o principal pilar do HTML5. Um conjun-
to de tags mais poderoso, juntamente com RDFa, microdados, microformatos,
que permitem um reconhecimento mais claro, fluente e organizado da infor-
mação.
Armazenamento local
Mais rápido e eficiente, uma aplicação não precisa mais de uma conexão con-
tínua para armazenar dados. Podemos trabalhar mesmo se não houver cone-
xão com a internet, graças o HTML5. Agora temos a possibilidade de armaze-
namento Local, IndexDB e outras APIs para arquivos.
3D, Gráficos e Efeitos
Com SVG, Canvas, WebGL e CSS3 com recursos 3D, pode-se utilizar efeitos
visuais fantásticos nativos, presentes nos modernos navegadores.
Performance e Integração
Aplicativos Web com conteúdo dinâmico mais rápido e com uma variedade
de técnicas e tecnologias. Com isso o site fica mais leve e o tempo de carre-
gamento do site fica menor.
Abaixo veremos um poucos sobre essas novas possibilidades e tecnologias que o HTML5 nos
trouxe:
Já sabemos que o HTML apresenta o
conteúdo e usa url para vincular ar-
quivos externos como imagens, víde-
os, páginas, etc.
Agora vamos um pouco mais adiante
e falaremos do HTML5.
Provavelmente você deve ter lido
e/ou ouvido falar dele.
O HTML 5 vem sendo desenvolvido e
planejado há bastante tempo, prati-
camente desde 2004 quando come-
çaram os primeiros testes.
O HTML5 é a nova e atual versão do
HTML reconhecida pelo W3C. Ele pro-
porcionou inúmeras possibilidades e
novas e melhores definições.
Somado ao CSS 3 mais JavaScript,
essa nova linguagem possibilitou a
criação de coisas que antes só pode-
ríamos fazer com outras linguagens
ou métodos.
Novas tags surgiram, novosatributos
e a possibilidade de páginas mais in-
terativas, leves, acessíveis e semânti-
cas.
106 107
As diferenças entre o XHTML e o HTML5
A versão que antecedeu o HTML 5 é o XHTML ( EXtensible HyperText Markup Language ou em
Português Linguagem Extensível para Marcação de Hipertexto. ).
O XHTML combinava as tags de marcação HTML com regras da XML a fim de melhorar acessibi-
lidade, semântica e etc. Ela foi recomendada pelo W3C até a oficialização da nova linguagem o
nosso amado HTML5.
Essa nova versão do HTML veio para atualizar o código com novas tags, eliminando algumas e
modificando outras.
Veremos agora as principais diferenças e as novidades que o HTML 5 nos proporcionou.
Antiga Estrutura:
Uma das maiores diferenças no HTML5 para as antigas versões é a ausência da referência de
DTD ( Document Type Definition ou Definição de Tipo de Documento). Essa informação era pas-
sada através da declaração <! DOCTYPE> que vem no início de cada página HTML.
O <! DOCTYPE> é uma declaração (não é uma tag), que serve como um indicador para os na-
vegadores sobre qual versão do HTML a página foi escrita.
Então, antigamente no XHTML tínhamos 3 tipos de DOCTYPE:
PS: Mais a frente, nos próximos capítulos, iremos destrinchar o que é CSS. Por enquanto, não
se preocupe muito se você ainda não sabe o que é ou como usar porque logo você saberá.
Acesso aos dispositivos
Com o HTML5 não precisamos mais do Adobe Flash, ou outros aplicativos para
acessarmos Câmera, Microfone, sensor de movimento e gravidade, Geo loca-
lização. Pode-se requerer determinado dispositivo para usarmos em eventos,
com integração com contatos, por exemplo.
Conectividade
Conectividade mais eficiente com possibilidades de mais chats em tempo
real, jogos mais rápidos e melhor comunicação. Através de WebSockets e
Server-Sent Events a conexão entre cliente e servidor ficou mais eficiente .
Multimídia
Áudio e vídeo nativos sem a necessidade de plugins externos. Essas novas
funções ainda não são renderizadas de forma homogenia entre os navega-
dores, mas já podemos usá-las sem medo de ser feliz.
Performance e Integração
CSS3 oferece uma ampla gama de estilização com mais efeitos, reforçando e
melhorando a aplicação da web sem prejudicar a sua estrutura semântica e/
ou o seu desempenho. Além disso, o Web Open Font Format (WOFF) oferece
flexibilidade e controle tipográfico muito além de qualquer coisa que a web
já tenha oferecido.
108 109
Um dos casos dessa simplificação é a meta tag CHARSET que é usada para indicar o formato de
codificação de caracteres usados no documento. Antigamente era assim:
<meta http-equiv = “Content-Type” content = “text / html; charset = utf-8”>
Com o HTML5 ficou assim:
<meta charset = “UTF-8”>
Bem mais fácil, não é?
A estrutura do corpo do HTML também ficou mais simples e ganhou mais semântica.
Para mostrar essas mudanças iremos usar um “wireframe” simples de um site com um topo, uma
seção com conteúdo, uma parte lateral e um rodapé.
Veja, na próxima página, como era:
OBS: O UTF-8 serve para além dos 128 caracteres básicos, os símbolos gráficos, também
sejam codificados da maneira correta, como caracteres acentuados do português, por exemplo.
• Para documentos tipo Strict:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd”>
• Para documentos tipo Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xht-
ml1/DTD/xhtml1-transitional.dtd”>
• Para documentos tipo Frameset:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset/ >
No HTML5 essa declaração ficou bem mais simples e fácil:
<!DOCTYPE html>
Essa simplificação se repete também nas metas tags , como veremos a seguir.
Meta Tags
Meta tags são tags de dados. São tags que fornecem informações (metadados) sobre o docu-
mento HTML. As tags <meta> não serão exibidos na página para o usuário.
Elas são tags específicas para os robôs dos navegadores e buscadores (Google, por exemplo).
As metas tags são usadas para especificar a descrição da página, palavras-chaves, autor do docu-
mento, quando foi modificada pela última vez, entre outros. Elas sempre devem estar dentro da
tag <head> do documento HTML.
110 111
Já com o HTML5, através das tags, dizemos aos robôs o tipo de conteúdo que será exibido. Ga-
nhamos tags semânticas, ou seja, damos significado ao conteúdo pelas tags.
Confira como ficou mais semântico com o HTML5:
Antigamente usávamos muitas divs para estruturar um site. Usávamos “ids e class” (não se pre-
ocupe com isso agora, iremos ver mais a frente. Mas saiba que elas servem para dar identidade
a uma tag.) para diferenciar e para estilizarmos essa divs, mas semanticamente elas não diziam
nada para o navegador. Não informavam a importância e nem a hierarquia das tags no docu-
mento HTML.
112 113
Nav:
A nav, como você é um Galucho esperto e já deve imaginar, serve para a navegação. Ela é usada
para os principais blocos de navegação do site, seja a condução dentro de seções da própria pá-
gina ou para navegação que nos levas a outras páginas.
Quando colocamos a navegação do nosso site dentro da tag <nav>, dizemos aos leitores de tela,
para deficientes visuais, e robôs do Google que essa é uma navegação importante do site.
Aside:
A tag aside serve para conter conteúdos relacionados ao conteúdo principal, por exemplo: barras
laterais, citações destacadas, propagandas, links de navegação para redes sociais, enfim, qualquer
conteúdo que possa ser entendido como à parte do conteúdo principal da página. Pense assim,
Galucho: basicamente umm conteúdo que se você tirar da página não prejudicará o sentido do
conteúdo principal.
Apesar do nome, o aside não é somente e necessariamente para ser usado na barra lateral do site.
Você pode inserir um aside dentro de um footer ou dentro de um article, por exemplo.
Footer:
O elemento footer é o rodapé (apesar de não precisarem necessariamente estar no final da página
ou de um artigo, mas normalmente estão). Ele serve para agrupar conteúdos que normalmente
colocamos no rodapé, como por exemplo, informações de direitos autorais, dados de quem es-
creveu o conteúdo, links para documentos relacionados, etc.
Assim como o header, podemos ter mais de um footer numa mesma página e dentro de outros
elementos.
Definição das principais novas tags do HTML5
Section:
A section representa uma seção genérica de um documento. Serve para agrupar conteúdos do
documento e de acordo com o tema. Mas cuidado, ele tem valor semântico, logo se pretendes
usar um contêiner, ou bloco, de conteúdo genérico e/ou só para estilização use a tag div, que não
possui valor semântico.
Article:
O elemento article é semelhante à section, entretanto ele tem significado mais específico para
conteúdo. Ele funciona para marcarmos um conteúdo do tipo artigo de um blog ou uma matéria
de jornal que pode ser lido e ter sentindo independentemente do site em que é encontrado. Cabe
a você decidir usar a tag article baseando-se no conteúdo apresentado no seu site.
Uma forma de saber se devemos ou não usar e, que muitos indicam, é se perguntar: esse conte-
údo é apropriado para se publicar em um feed RSS?
E também: Esse conteúdo faz sentido independentemente da página em que está publicado?
Independentemente do contexto no qual foi incluído?
Header:
O header serve para agrupar o cabeçalho de uma seção. Tudo que componha um cabeçalho
pode ser agrupado por ele: navegação, títulos e subtítulos, ajudas introdutórias, sumário de se-
ção, formulário de pesquisa, logotipo que fica no topo do site, etc.
Podem existir vários “header” dentro de uma página e também dentro de outros elementos.
Por exemplo: o header principal que agrupa os elementos do topo do site (logotipo, navegação,
etc), um header de uma section (com um “breadcrumb” e botões de compartilhamento para re-
des sociais) e um para o article (com o título e um olho de matéria).
115114Parabéns!!!
Agora você já sabe o que é, de onde vem e as principais características do HTML 5, além das pos-
sibilidades que ele nos fornece. Em breve colocaremos em prática tudo o que aprendemos!
Diferença entre Section e Article
Existe certa confusão sobre quando usar article ou section e vice e versa. No início do HTML5
essa questão era bem mais frequente. Hoje em dia essa questão está mais amena e melhor
compreendida, mas mesmo assim ainda existem dúvidas, principalmente nos novatos.
O importante é ter em mente que section serve para as separamos as seções do documento.
Usa-se section para dividir o conteúdo em diferentes sessões e ele pode conter ou até mesmo
estar dentro de um article, de outras tags e até mesmo de outro section.
O elemento é menos especifico que o article e até que outras das novidades do HTML5.
Mas ele ainda assim tem valor semântico, en-
tão não devemos usar section apenas para fins
de estilização. Caso precise de um elemento
somente por questões de design e estilização,
deve-se usar um elemento mais genérico, no
caso a velha e conhecida div (<div>).
Já a tag article serve para o conteúdo princi-
pal do seu site. Usa-se article para o conteúdo
mais relevante do documento. É o que o seu
leitor entrou pra ler e que ele gostaria de ter
em seu feed. E um article também pode ser
aninhado dentro de um section, dentro de
outros elementos e até de outro igual.
Então lembre-se que section é mais genérico
e divide o conteúdo em seções enquanto que
article é um elemento mais específico e que
serve para colocar os principais conteúdos
do documento.
116 117
CSS = “Cascading Style
Sheets”
OU
Folha de
Estilos em Cascata
O que é CSS?
118 119
Já com o CSS você executaria tal tarefa em um minuto.
Então, no nosso caso fictício, com CSS você mudaria as cores dos subtítulos de azul para verme-
lho, sem fazer nenhuma alteração no HTML, alterando apenas o arquivo CSS de forma rápida e
simples (desde que o site tenha sido codificado corretamente utilizando um arquivo CSS exter-
no).
Usar elementos HTML para fins de apresentação é algo obsoleto e nada inteligente. Portanto, por
mais que tais tags ainda possam funcionar, não as utilize. Sempre que a questão for de design,
estética e apresentação, use CSS.
Como citado, no exemplo anterior, o CSS é escrito em um novo documento, entretanto existem
outras opções de aplicação. Iremos ver como usamos essa linguagem na prática, mas antes va-
mos entender como ela funciona.
O que é o efeito cascata do CSS?
O CSS usa o efeito cascata.
“Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso (importância,
prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se
que há um conflito de regras e será aplicada aquela que tiver maior peso (importância, priorida-
de) determinada pela ordem do efeito cascata.” Fonte: Maujor
E a ordem do efeito cascata do CSS é: Herança, Especificidade e Importância
Herança
Sabe herança familiar? Quando um filho herda do pai características genéticas e/ou os bens que
ele tinha?
CSS é uma linguagem de estilos que define o layout de documentos escritos com linguagem de
marcação, no caso o nosso HTML.
Ele adiciona um estilo a uma página e altera a forma visual de como ela é apresentada.
O CSS foi uma revolução no design para web. Ele executa:
• controle do layout de vários documentos a partir de uma simples folha de estilos;
• controle preciso do layout;
• aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
• avançadas técnicas de desenvolvimento;
• separa a estrutura do design - agilidade e performance.
O CSS é o responsável pelo visual de um site. Através dele aplicamos as cores, determinamos os
tamanhos, os pesos (no caso de fontes), bordas, imagens, etc. Com isso, separa-se a linguagem
de marcação (HTML) da camada de apresentação (estética, design) do site.
E essa alteração aparecerá em todo o site. E isso independentemente se o meu site tem 1 ou 100
documentos HTML.
Em versões anteriores do HTML existiam elementos que eram específicos para apresentação,
como por exemplo, <b>, <i>, <font>, <center>, <big>, etc. Eles eram utilizados para adicionar
certas características visuais ao documento.
Mas imagine que você tem uma tarefa de criar uma página com 50 subtítulos. E lhe foi deter-
minado aplicar a cor azul a todos eles. Logo, para deixá-los com a cor azul você usa <font co-
lor=”blue”>, aplicando manualmente, em todos os subtítulos da página.
Porém na manhã seguinte seu chefe pede para que você mude todos os subtítulos para a cor
vermelha. Sem opção, (claro que você poderia pedir demissão, hehehe) você teria refazer tudo
novamente, perdendo bastante tempo nessa refação indo em cada tag para mudar a cor.
121120
Como funciona o CSS? Parte 1 - Sintaxe
O CSS tem a sua própria sintaxe e estrutura. Uma regra CSS é composta por um seletor, uma pro-
priedade e um valor. Vamos conhecê-la?
Logo, para criar uma declaração CSS, seguimos os seguintes passos: Apontamos o seletor;
• Abrimos e fechamos chaves {};
• Dentro de chaves determinamos a propriedade e o valor;
• E caso precise aplicar mais de uma declaração ( propriedade + valor) utilizamos ponto e vírgula
(;) ao final da declaração (após o valor), para separá-las.
Seletor : é o elemento HTML identificado por seu nome, classe, ID, etc;
e para o qual a regra será aplicada (por exemplo: p, h1, form, .minhaclasse, :hover, etc.).
O seletor funciona como se fosse um “alvo”. Eu aponto para o CSS qual tag ele aplicará o estilo
que determinei, na regra CSS.
Propriedade : é a característica que será estilizada, de um elemento HTML , no CSS.
Existem inúmeras propriedades CSS, por exemplo: font, color, background, etc.
Valor : é a aparência que será assumida pela propriedade CSS . Então, a propriedade
define o que iremos estilizar enquanto que o valor define como ou quanto será estilizado.
Por exemplo: Eu quero determinar que o tamanho de um subtítulo, do meu documento HTML,
será 14px. A propriedade para mudar o tamanho da fonte é font-size e o valor da propriedade
seria 14px. Com isso teríamos o seguinte resultado:
seletor { propriedade: valor; }
O CSS tem esse sistema, portanto os elementos filhos herdam as declarações do elemento pai,
simples assim. Por padrão ele já herda os estilos dos elementos pai, mas caso isso não ocorra e
você queira forçar, você pode usar o valor ”inherit“ no css.
Especificidade
É quando você diz ao CSS qual elemento você quer que ele formate. Você faz isso através do
seletor. O seletor seria a identificação de um elemento HTML. Iremos ver mais a frente como
funciona os seletores.
Importância
A importância é uma exceção da regra. Usamos a declaração “!important” para aplicá-la. Essa
declaração torna a especificidade do elemento que a contém maior do que qualquer declaração
dentro do CSS.
Nota: Não devemos usar o !important toda vez que as declarações,
por algum motivo, não estiverem funcionando.
O !important é indicado apenas para situações extremas. Como
como exemplo, quando você não fez o código, ele chegou até você
todo mal estruturado, sujo, e você precisa urgentemente corrigir um
“bug” (erro) crítico no site.
Caso contrário, devemos usar o princípio nativo do CSS de especi-
ficidade e herança, evitando ao máximo “sujeiras” no nosso código.
122 123
Agora para potencializar seu entendimento vamos associar os elementos que formam um bolo,
e suas características, com os elementos que formam uma página (elementos do HTML) e suas
características visuais (estilos CSS).
Você deve estar se perguntando: “Bolo? Mas eu não sei fazer bolo!”. Para nossa associação basta
gostar de bolo, ou pelo menos conhecer um bolo.
Você já sabe que um documento HTML dispõe de tags para formar uma página. Imaginemos
agora os principais elementos que formam um bolo como se fosse elementos HTML e atribuire-
mos o formato de tags para estes elementos.
Esqueça osingredientes. Quando você olha um bolo, quais são os principais elementos que po-
demos listar? Olhando de fora para dentro temos:
• Cobertura;
• Dependendo do bolo, algumas camadas da massa assada (no nosso exemplo duas camadas:
superior e inferior.);
• Recheio.
Agora imaginemos no formato de tags. Como a cobertura é o elemento externo em relação aos
outros, classificaremos como uma tag que engloba as outras tags. Então teremos:
<cobertura>
<camada superior do bolo>
</camada superior do bolo>
<recheio>
</recheio>
<camada inferior do bolo>
</camada inferior do bolo>
</cobertura>
h2 { font-size: 14px; }
No exemplo assim acima informo que todo elemento “h2” encontrado no documento HTML terá
um tamanho de fonte (font-size) de 14 pixel.
Conforme a sintaxe, utilizamos primeiro o seletor para dizer ao nosso navegador:
“Ei navegador, selecione todos os
elementos h2 presentes neste
documento HTML.”
Agora navegador se prepare para
receber um valor para o tamanho
de fonte de todos os elementos h2
presentes no documento.”
“Navegador, atribua o valor 14px
ao tamanho de fonte para que to-
dos os elementos h2 selecionados
recebam este valor.”
h2 { font-size: 14px; }
h2 { font-size: 14px; }
Depois alertamos o navegador sobre uma propriedade comum a todos elementos de textos como o
h2:
O navegador já está ciente que trabalhará com a propriedade “font-size” então damos o
comando:
h2 { font-size: 14px; }
Na sintaxe CSS, o conjunto de propriedades e valores que encontramos entre as chaves {} é cha-
mado de declaração e o seletor funciona como uma ligação entre o HTML e a esta declaração.
124 125
“Elemento HTML”
do bolo Seletor Propriedades Valores
Cobertura Cobertura
• Sabor
• Cor
• Chocolate
• Marrom
Camada superior
do bolo
Camada superior
do bolo
• Largura
• Altura
• Comprimento
• Sabor
• Cor
• 30 cm
• 5 cm
• 50 cm
• Chocolate
• Marrom
Recheio Recheio
• Sabor
• Cor
• Prestígio
• Branco
Camada inferior
do bolo
Camada inferior
do bolo
• Largura
• Altura
• Comprimento
• Sabor
• Cor
• 30 cm
• 5 cm
• 50 cm
• Chocolate
• Marrom
AVISO: Reforçando que algumas propriedades citadas nesta aplicação não exis-
tem em CSS, como por exemplo, “sabor”. Esta é uma característica do bolo que
usamos agora somente para associar com propriedades CSS.
Nosso código CSS ainda não está completo para estilizar a cobertura do bolo. Não adianta saber-
mos que a cobertura tem como propriedades sabor e cor se não definimos qual sabor e qual a
cor. Portanto agora vamos dar valores para estas propriedades.
Como você é o “desenvolvedor” (confeiteiro) deste bolo você verificou no “Briefing” que o cliente
precisa que o bolo tenha sabor de chocolate. Portanto você define que a cobertura tem sabor
de chocolate e cor marrom. Agora basta colocar estes valores no campo destinado a valores na
estrutura CSS. Vamos ver como fica?
cobertura { sabor: chocolate;
cor: marrom;}
Agora sim temos uma cobertura “estilizada”. Podemos dizer que a cobertura que antes não era
nada, agora tem sabor chocolate e cor marrom (poderia ser branco se o bolo fosse de chocolate
branco, por exemplo).
E você pode replicar os conceitos para os outros três elementos restantes do bolo. Quando você
pensa em folhas de estilo, você pensa em que tipos de características (propriedade) um elemen-
to possui e como vai selecioná-lo (seletor) para que você possa atribuir a qualidade (valor) para
cada tipo de característica identificada.
Olhe os elementos do bolo e suas propriedades na tabela a seguir:
126 127
Preferi adotar um recheio diferente com sabor e cor diferente da cobertura. Não sei se você no-
tou que tanto a camada superior do bolo quanto a inferior possui os mesmos valores. E quando
isso acontece você pode adotar uma versão da sintaxe CSS que possibilita juntar dois seletores
que possuem propriedades iguais.
Veja a sintaxe:
seletor 1 , seletor 2 { propriedade: valor;}
Você pode ter “N” seletores separados por vírgulas. Com isso você diminui o tamanho do arquivo
CSS e fica mais organizado. Confira como o código ficou reduzido:
cobertura {
sabor: chocolate;
cor: marrom;
}
camada superior do bolo , camada inferior do bolo {
largura: 30cm;
altura: 5cm;
comprimento: 50cm;
sabor: chocolate;
cor: marrom;
}
recheio {
sabor: prestígio;
cor: branco;
}
Com isso terminamos de estilizar o bolo. Usamos o seu conhecimento prévio sobre “bolos” para
compreender como funciona a sintaxe básica CSS. :) Mais a frente vamos trazer essa nova expe-
riência associativa para o campo de batalha real com verdadeiros códigos CSS e HTML.
A partir desta tabela vamos completar o CSS dos elementos restantes:
cobertura {
sabor: chocolate;
cor: marrom;
}
camada superior do bolo {
largura: 30cm;
altura: 5cm;
comprimento: 50cm;
sabor: chocolate;
cor: marrom;
}
recheio {
sabor: prestígio;
cor: branco;
}
camada inferior do bolo {
largura: 30cm;
altura: 5cm;
comprimento: 50cm;
sabor: chocolate;
cor: marrom;
}
128 129
Incorporadas
É considerada incorporada quando as regras de uma folha de estilo são declaradas na seção head
do documento HTML dentro do elemento HTML “style”. Este elemento é dedicado especialmente
para abrigar informações sobre estilos para o documento. Veja sintaxe:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<style type=”text/css”>
h2 { font-size:18px;}
</style>
<title>Exemplo de folha de estilo incorporada</title>
</head>
<body>
<h2>Este título possui 18 pixels de tamanho. Valor declarado na regra CSS incorporada
no documento entre as tags “style”</h2>
</body>
</html>
Você pode usar folhas de estilos incorporadas quando o estilo for aplicado somente para uma
página. Qualquer tipo de alteração nas regras CSS só serão aplicadas no documento onde a folha
de estilo esteja incorporada. Para que uma regra seja aplicada em todas as páginas de um site o
ideal é trabalhar com folhas de estilos externas.
Nota: Na tag de abertura do elemento “style”, temos o atributo “type” cujo valor é “text/css”.
O atributo “type” indica que tipo de conteúdo será utilizado no elemento “style”. O valor
“text/css” diz que o conteúdo é CSS, portanto, estamos especificando o tipo de folha de esti-
lo utilizada no documento. Porém no HTML5, não é obrigatório especificar. Sendo assim, no
HTML5, podemos utilizar apenas <style>.
Como funciona o CSS? Parte 2 - Vinculando as fo-
lhas de estilos ao documento HTML
Brincando com associações desenvolvemos a sintaxe das folhas de estilos, mas ainda está tudo
meio solto. Você não sabe como vincular o CSS aos documentos HTML e é isso que veremos
agora.
Basicamente existem três formas de vincular. Estas formas determinam a localização das folhas
de estilos e as classificam em três tipos:
• Inline;
• Incorporadas;
• Externas.
Inline
Este tipo faz com que as regras CSS sejam declaradas dentro de uma tag de abertura usando o
atributo “style”. Veja a sintaxe abaixo:
<h2 style=”font-size: 18px”>Este título possui 18 pixels de tamanho</h2>
Não indicamos que se faça o uso do tipo inline indiscriminadamente, pois ele mistura a marcação
HTML com a apresentação, que de certa forma é um retrocesso a uma época que o HTML também
tinha a função de estilizar. Este método nos priva de todas as vantagens das folhas de estilos e
só deve ser usada em casos excepcionais quando seu uso for mais imprescindível que os outros
tipos que iremos mostrar.
130 131
• rel=”stylesheet” - O atributo “rel” descreve o conteúdo do arquivo de destino. Neste caso, o
conteúdo se trata de uma folha de estilo.
• href=”estilo.css” - O atributo “href” já é um velho conhecido nosso. Neste caso ele especifica
a localização do arquivo CSS. Reforçando que assim como as imagens, arquivos CSS podem
se localizar no mesmo diretório do documento HTML, em outros níveis de diretórios e até em
outros servidores.
Agora veja a sintaxe aplicadano arquivo HTML e no arquivo CSS:
1. Arquivo HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Exemplo de folha de estilo externa linkada</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<h2>Este título possui 18 pixels de tamanho. Valor declarado na regra CSS dentro do
arquivo “estilo.css”
</h2>
</body>
</html>
Externas
Uma folha de estilo externa é quando as regras CSS são declaradas em um arquivo separado do
arquivo HTML que você trabalha. Um arquivo de folha de estilo tem a extensão .css.
Exemplos: estilo.css, style.css, qualquer-nome.css.
É muita vantajoso trabalhar com arquivos CSS pois além de separar a marcação (HTML) da
apresentação (CSS), você pode alterar um estilo de um site inteiro com uma simples edição nas
regras definidas nesta folha de estilos externa (arquivo CSS).
Mas como vincular este arquivo CSS ao documento HTML? Existem duas formas de se fazer isso: a
primeira e mais comum é “linkando” o arquivo da folha de estilo externa. A segunda é importando.
Primeiro vamos mostra a sintaxe da “linkagem” externa. Para isso é hora de conhecer melhor
o elemento HTML “link”.
Esta é a sintaxe que você deve usar para vincular um arquivo externo ao documento HTML. Note
que você não precisa do elemento “style”. O elemento “link” é suficiente. Observe que ele é um
elemento nulo e deve estar localizado entre as tags <head></head>
Ele pode possuir mais alguns atributos, mas os que mostraremos abaixo é basicamente o que
você precisa para linkar o seu CSS.
Nota: Essa “linkagem” não é executa pelo elemento HTML “a” e sim pelo elemento “link”. O ele-
mento “a” estabelece uma relação com o arquivo de destino (abre outro arquivo ou página). Já
o elemento ‘link” estabelece uma relação entre o documento HTML e o conteúdo do documen-
to de destino. No caso “stylesheet” (folha de estilo).
<link rel=”stylesheet” href=”estilo.css”>
132 133
Como resultado teremos uma página com fundo amarelo e um título com 18 pixels de tamanho.
Confira:
Bom... Agora vamos mostrar como importar um arquivo CSS.
Um exemplo de importação que podemos imaginar é quando você quer separar as seções do site
em arquivos CSS diferentes, para que você possa encontrar mais facilmente um item que você
precisa alterar em uma manutenção no futuro.
2. Arquivo CSS:
Crie um novo arquivo no seu editor e insira o seguinte código na sua folha de estilos:
h2 { font-size:18px;}
Simples assim. Note que como só estilizamos o elemento H2, o arquivo CSS contém somente
estes dados que você inseriu. E também não precisa estar entre as tags <style></style>. Podemos
,se assim acharmos melhor, também estilizar o elemento body, por exemplo, colocando uma cor
de fundo (background-color) amarela.
Veja como fica:
body {background-color: yellow}
h2 { font-size:18px;}
Para que a aparência seja alterada é preciso que salve as modificações no arquivo “estilo.css”.
Certifique-se que seu editor salve diferentes extensões de arquivos para web.
Geralmente basta definir o nome do se arquivo e escolher a extensão .css dentre as
opções lá existentes.
134 135
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Exemplo de folha de estilo externa importada</title>
<style type=”text/css”>
@import url(“estilo.css”);
</style>
</head>
<body>
<h2>Este título possui 18 pixels de tamanho.
Valor declarado na regra CSS dentro do arquivo “estilo.css”</h2>
</body>
</html>
Se atente a sintaxe:
<style type=”text/css”>
@import url(“estilo.css”);
</style>
Perceba que é necessário abrir e fechar as tags do elemento HTML “style”. Dentro delas temos a
regra @import responsável por importar todas as regras do arquivo “estilo.css”. O url(“”) representa
a localização do arquivo CSS a ser importado. O caminho pode ser relativo ou absoluto.
Visualmente o resultado será o mesmo que obtemos na página web do tópico sobre
linkagem externa.
Um site comum possui um topo, um menu, uma coluna lateral (sidebar), uma coluna de largura
maior e um rodapé.
No nosso exemplo, a gente criaria arquivos CSS separados para estilizar essas regiões do site
separadamente. Ficaria algo do tipo: “topo.css”, “menu.css” e assim por diante. E estes arquivos
seriam importados através da regra @import.
Vamos agora a sintaxe:
1. Arquivo CSS:
body {background-color: yellow}
h2 { font-size:18px;}
Usaremos as mesmas regras do exemplo usado na linkagem externa. Nada muda. Podemos salvar
o arquivo com o mesmo o nome (“estilos.css”).
2. Arquivo HTML:
O arquivo HTML é similar ao do exemplo usado na linkagem. A alteração importante está entre
as tags do elemento HTML “head”. Confira:
Nota: O exemplo descrito acima é para fins didáticos. Deve-se sempre levar em conta, em seu
planejamento, se o uso deste recurso pode afetar o desempenho do seu site. O emprego dele
em um site muito grande e com muito acesso talvez não se justifique porque o carregamento
total da página pode ser considerado “pesado”.
136 137
• O seletor de tipo;
• O seletor de id;
• O seletor de classe;
• O seletor pseudo-classe para links com mouse sobre eles;
• E o seletor universal.
Seletor de tipo
Este tipo de seletor é usado para selecionar elementos HTML de um mesmo tipo. Usamos em
exemplos anteriores com o elemento “body” e o “h2”. É aplicado quando você quer estilizar todas
as marcações de um elemento específico em todo um site independente de quantas vezes ele
aparece. Por exemplo, se temos 10 parágrafos em um documento e uso o seletor de tipo para
que o elemento “p” fique em negrito, todos os 10 parágrafos assim ficarão (isso se nenhum outro
seletor especifico sobrescrever a regra).
p { font-size:12px;}
Por falar em seletor específico... Vamos ao seletor de id!
Seletor de id
Ele serve para selecionar um elemento HTML que tenha o atributo “id” nomeado com o nome
do seletor. Na regra CSS o seletor id é identificado pelo símbolo “#” seguido pelo nome que você
especificou (ou especificará) no atributo do elemento HTML.
Para entender melhor, veja os códigos abaixo.
HTML: <h2 id=”um”>Este título possui 18 pixels de tamanho.</h2>
CSS: #um { font-size:18px;}
O código HTML e os arquivos usados até esta etapa
se encontram neste link para download.
Como funciona o CSS?
Parte 3 - Tipos de seletores
Existe uma diferença fundamental entre nosso exemplo do bolo (lembra?) e os códigos que
estamos aprendendo neste E-book. No exemplo do bolo ficamos livres para criar tags imaginárias
e principalmente propriedades CSS.
Com certeza isso serviu para você entender a sintaxe. Entretanto, para estilizarmos um site, temos
que seguir um padrão específico que determina os tipos de propriedades que usaremos para
cada tipo de elementos. Esse padrão deve seguir as recomendações da W3C.
Não é a proposta deste E-book destrinchar toda as recomendações W3C. Você se lembra do
esquema 80/20? Você agora precisa de fluência, por isso focaremos nos tipos de seletores e
propriedades mais usadas para que você consiga aplicar tranquilamente em um site.
Começaremos com os tipo de seletores mais usados. A lista de tipos é imensa e você pode conferir
neste link (http://www.w3.org/TR/selectors/). Porém, eu recomendo você não clicar neste link
tão cedo.
Aguarde que seus conhecimentos iniciais se solidifiquem antes de você avançar neste caminho.
Com 5 seletores que mostraremos você já será capaz de estilizar um site com tranquilidade.
São eles:
http://ebookhtmlcss.com/arquivos/capitulo-3/arquivos-para-download-5.zip
http://ebookhtmlcss.com/arquivos/capitulo-3/arquivos-para-download-5.zip
http://www.w3.org/TR/selectors/
138 139
Note que o uso dos atributos “class” é similar ao “id”. O nome usado em “class” deverá ser usado
no seletor da folha de estilo precedido por um ponto (.um).
Outra coisa que percebemos é que repetimos a “class” em dois momentos no código, no elemento
“h2” e no “p”. Isto é permitido, fazendo dele um tipo de seletor bastante flexível.
Você pode aplicaruma mesma regra para diversos elementos dentro de um mesmo documento
HTML. É uma das formas mais utilizadas para dar aparência aos elementos de interfaces.
Seletor de tipo “a” + pseudo-classe “hover”
O “a:hover” é usado em hiperlinks para aplicar um estilo quando o usuário passa o mouse sobre
o elemento, como por exemplo, mudar a cor do texto do link. Você encontra este tipo de efeito
em vários sites por aí.
Vamos a um exemplo:
HTML:
<a href=”pagina-de-destino.html”>Página de destino</a>
CSS:
a {color: blue; }
a:hover {color: red;}
Veja que o seletor “a” deixa o link azul. Mas quando se coloca o mouse sobre o link ele ficará
vermelho. Assim que se retira o mouse ele volta a ficar azul.
Detalhe importante: Cada “id” especificada é única e não deve existir repetição dentro
de um mesmo documento HTML. Você pode repetir o atributo “id”, porém com nomes diferentes.
<h2 id=”um”>Aqui estou usando o id como nome “um”</h2>
<p id=”um”>Estou repetindo o mesmo id (ERRONEAMENTE) em um
mesmo documento dentro deste parágrafo”</p>
Seletor de classe
Ele serve para selecionar um elemento HTML que tenha o atributo “class” nomeada com o nome
do seletor. Na regra CSS o seletor class é identificado por um ponto (.) seguido pelo nome que
você especificou (especificará) no atributo do elemento HTML.
Para entender veja os códigos abaixo:
HTML:
<h2 class=”um”>Este título possui 18 pixels de tamanho.</h2>
<p class=”um”>Estou repetindo o mesmo id em um mesmo documento dentro deste parágrafo”.</p>
CSS:
.um { font-size:18px;}
140 141
Seletor universal
Ele é representado pelo caractere “*” e se aplica a todos elementos de uma página. Ele é geral-
mente usado para “resetar” propriedades aplicadas automaticamente pelos navegadores. Cada
navegador tem seu jeito próprio de aplicar seus padrões de estilos. Ao “resetar” esses estilos atra-
vés do seletor universal, você “zera” qualquer estilo pré-definido e tem a liberdade de definir as
regras CSS sem a interferência dos navegadores.
Para você ter uma ideia existem duas propriedades CSS muitas usadas e que já vem pré-definidas
em alguns navegadores e que influenciam na aparência de certos elementos HTML. São elas as
propriedades “margin” e “padding” (explicarei a utilização delas mais a frente). Para impedir que
isso acontece basta aplicar a sintaxe a seguir atribuindo o valor zero nas duas propriedades. Veja:
* {
margin: 0
padding: 0;
}
Com isso todos elementos da página web terão propriedades “resetadas” deixando você livre para
atribuir o valor que você bem entender para os elementos que queira aplicar essas propriedades.
Mas agora você pode estar se perguntando: “Quais propriedades eu devo utilizar no reset?”
Você pode adotar nas primeiras páginas o seguinte código em sua folha de estilo:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
border: none;
}
Este efeito também acontecerá quando você preferir usar “id” ou “class” no lugar do seletor do
tipo “a”. Veja:
HTML usando atributo “id”:
<a href=”pagina-de-destino.html” id=”link_id”>Página de destino</a>
CSS:
#link_id {color: blue;}
#link_id:hover {color: red;}
E HTML usando atributo “class”:
<a href=”pagina-de-destino.html” class=”link_class”>Página de destino</a>
CSS:
.link_class {color: blue; }
.link_class:hover {color: red;}
Uma “pseudo-classe” é parecida com uma “class”, mas não são definidos por quem está
desenvolvendo e tem a função de adicionar efeitos em seletores, ou em parte deles.
Você pode conferir, depois, mais sobre pseudo-classe visitando o site da W3C no link:
http://www.w3.org/TR/selectors
http://www.w3.org/TR/selectors/
143142
Como funciona o CSS?
Parte 4 - Propriedades mais usadas
Existe uma infinidade de propriedades. Algumas são usadas com muita frequência e outras com
frequência menor, em casos específicos.
Em vez de apresentar uma lista extensa e tediosa com todas as propriedades, optamos por apre-
sentar e explicar as propriedades de uso mais frequente. Agora é para valer!!!
Começaremos montando a estrutura básica do HTML que você já conhece, e com um box entre
as tags “body”. Também colocaremos um “algo a mais” que explicaremos logo, logo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title></title>
</head>
<body>
<!-- Invólucro para abrigar os box internos -->
<div class=”wrapper”>
</div>
<!-- Fim do invólucro -->
</body>
</html>
Você encontrará os principais tipos de regras CSS neste site: http://www.cssreset.com/
Ou em uma pesquisa rápido no Google.
Com o tempo e o ganho de experiência você conseguirá criar o seu próprio reset.
Enfim chegamos em um dos fundamentos principais do CSS.
Quando damos valores às propriedades CSS, os elementos HTML selecionados tomam formas,
cores, ganham posicionamentos nas telas e até podem ser animados.
Então, agora vamos a prática , utilizando o método 80/20, para aprender as propriedades mais
usadas do CSS.
http://cssreset.com/
144 145
Agora que já sabe o que é e como criar um comentário se atente ao comentário do código da
nossa página. O texto dentro do comentário “Invólucro para abrigar os box internos” quer dizer
que um box maior irá abrigar internamente outros box (elementos filhos). “Wrapper” é o nome do
atributo class da div que abrigará todos os elementos, e significa invólucro. Poderíamos, e você
pode, usar outro nome. Optamos por “wrapper” por que é um nome comum em diversos sites
principalmente em gerenciadores de conteúdo.
Próximo passo agora é aplicar estilos aos elementos apresentados até agora.
Inicialmente colocaremos os estilos iniciais dentro do elemento HTML “style” entre as tags “head”.
Usaremos o seletor universal para “resetar” as margins e padding e iremos estilizar os elementos
dentro de “body”, começando por ele mesmo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title></title>
<style type=”text/css”>
* {
margin:0;
padding:0;
}
body {
font-family: Tahoma, Arial, sans-serif;
font-size: 16px;
line-height: 16px;
background: #a8c8ca url(img/bg.png);
color: #444444;
}
Salvaremos este documento como “estrutura.html”.
Agora vamos interpretar a estrutura criada:
• Vemos que o código não possui ainda nada de CSS;
• É opcional colocar um título entre as tags “title” já que se trata apenas de uma página de mo-
delo. Optamos por não colocar;
• Existe uma novidade. São dois textos entre estes símbolos: <!-- e -->. Estes símbolos são cha-
mados de comentários.
Comentários servem para organizar e identificar trechos de códigos. São uma mão na roda que
facilitam a manutenção, pois você pode usar para explicar algo importante no código.
Detalhe: os comentários não são exibidos no navegador.
Compreenda a sintaxe:
1. Você abre o bloco de comentários com um sinal de < (menor que), um ponto de ! (exclama-
ção), seguido por -- (dois hifens):
<!--
2. Depois você coloca o comentário que deseja.
3. Para fechar o bloco de comentários você utiliza -- (dois hifens), seguido pelo sinal de > (maior
que):
-->
Exemplo:
<!-- Isto é um comentário -->
</style>
</head>
<body>
<!-- Invólucro para abrigar os
box internos -->
<div class=”wrapper”>
</div>
<!-- Fim do invólucro -->
</body>
<html>
146 147
Sabemos que o seletor universal aplica estilos a todos elementos HTML. Você se lembra dos có-
digos do bolo? Para o elemento “cobertura” determinamos duas características que ela possui
como propriedades: sabor e cor.
cobertura { sabor: chocolate;
cor: marrom; }
Assim como também para os elementos representados pelo seletor universal atribuímos carac-
terísticas necessárias para o projeto, no caso as propriedades “margin” e “padding”. E determina-
mos o valor zero. Aguarde só mais um pouco que mais a frente aprofundarei sobre essas proprie-
dades. Agora é hora de aprender com estilizar os “fundos” de sites.
Você deve se lembrar da sintaxe CSS do exemplo do bolo e chocolate,certo? Só que agora temos
propriedades, valores e seletores reais! Esta sintaxe vai ser responsável para atribuir valores de
propriedades para os elementos HTML setados pelos seletores.
Começamos pelo seletor universal *. No nosso código CSS ele determina que as propriedades
“margin” e “padding” têm valor zero.
Caso tenha dificuldade em identificar quem é seletor, quem é propriedade e quem é valor, veja o
gráfico a seguir para refrescar sua memória.
148 149
O que você vê é uma página sem conteúdo, logicamente porque no HTML só inserimos tags sem
conteúdo. E você também vê um fundo de cor azul coberto por quadriláteros. Para entender como
obtemos este fundo vamos avaliar a sintaxe aplicada ao exemplo. O elemento HTML “body” recebeu
a seguinte sintaxe:
background: #a8c8ca url(img/bg.png);
Meu amigo Galucho, você deve achar agora o valor desta propriedade visualmente um pouco com-
plexo. Entretanto não tem grande mistério. O segredo é que existem dois valores separados por um
espaço. O valor “#a8c8ca” e o valor “url(img/bg.png)”. Estes valores representam duas propriedades
que foram unificadas dentro da propriedade background. À isso chamamos de “declaração única”.
Background-color e Background-image
Se existem dois valores que foram unificados dentro de uma declaração, seria possível existir pro-
priedades específicas para estes valores? A resposta é sim. A propriedade “background” possui va-
riantes. Veja a seguir as declarações separadas com suas respectivas propriedades:
background-color: #a8c8ca;
background-image: url(img/bg.png);
Vendo assim separado fica mais fácil de entender, né? Background-color é uma propriedade que
determina a cor do fundo. Já background-image determina uma imagem de fundo.
Os caracteres #a8c8ca são uma representação do sistema hexadecimal para apresentação de cores
para web. É uma recomendação da W3C que você use este sistema para garantir que as cores se
apresentem corretamente nos navegadores.
Para definir uma cor através de um código hexadecimal ele deve seguir algumas regras.
Veja:
Como funciona o CSS? Parte 4.1 - Background
Seguindo a sequência ,da formatação da página modelo, o próximo elemento a avaliarmos sobre
o estilo é o “body”. E com este elemento que conheceremos uma propriedade bastante utilizada
que é o “background”.
Ela serve para definir as características de fundos dos elementos HTML. É responsável por atribuir
valores de cor, posicionamento, imagens para fundos, entre outros. Para dar prosseguimento va-
mos recordar nosso código CSS:
body {
background: #a8c8ca url(img/bg.png);
color: #444444;
font-family: Tahoma, Arial, sans-serif;
font-size: 16px;
line-height: 16px
}
Veja que com isso uma sim-
ples página em branco apre-
senta finalmente um visual
colorido através do CSS.
E só para antecipar este fun-
do será utilizado em uma
proposta montagem de site
que você verá ainda neste
E-book. :D
150 151
Lógico que leva um certo tempo para
quem é iniciante entender todo esse
funcionamento. Porém, para o bem
geral da nação, os editores de ima-
gem fornecem esses valores.
Quando você projeta seu layout no
Photoshop ou Fireworks você pode
através da ferramenta “conta-gotas”
selecionar a cor de um elemento e
obter o código hexadecimal da cor
no painel “ Color Picker”.
Daí é só colocar no código CSS.
Você chegou a ver neste livro decla-
rações de cores usando nomes em
inglês, tipo {color: blue}. Entretanto
para fins práticos indicamos o siste-
ma hexadecimal que é muito usado.
Você vai encontrar outros sistemas
de cor em códigos CSS. É possível,
que no futuro, alguns deles possam
até ser mais aplicados que o hexade-
cimal, por causa da possibilidade de
se mexer com a opacidade de cores.
Segue abaixo alguns sistemas existentes que podemos usar no CSS:
• Sistema RGB
• Sistema RGBA
• Sistema HSL
• Sistema HSLA
• Ele pode ter seis dígitos e deve começar com o símbolo #.
Exemplo:
#FFFFFF - Este código possui os seis dígitos e determina a cor branca.
• Os seis dígitos devem estar entre 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E a F.
Sendo F o maior valor.
E esses grupos são divididos em 3 grupo de dois caracteres. Veja a seguir:
#FF0000
Este código possui três pares; FF, 00, 00. Juntos eles determinam a cor vermelha.
A ordem dos pares, da esquerda para direita, representa o sistema de cores RGB (Red, Green, Blue)
reproduzindo as cores através da “mistura” das cores aditivas Vermelha, Verde e Azul. Sendo que
o primeiro par corresponde a quantidade de cor vermelha, o segundo corresponde a cor verde e
o terceiro a cor azul.
Os dígitos no sistema hexadecimal representados por números têm valores mais baixos compa-
rados as letras, indicando cores mais escuras. Isso explica o porquê o código #000000 é a cor
preta, pois indica ausência total de cor. Cada par 00 representa 0% de uma das cores do sistema
RGB. Portanto a cor preta tem 0% de vermelho, 0% de verde e 0% de azul.
Ao contrário o código #FFFFFF que é cor branca indica a presença total de cores, isto é, 100% de
vermelho, 100% de verde e 100% de azul. Tudo porque cada par FF indica 100% de cor. A mistura
de das cores primárias aditivas a 100% resulta em branco.
Para fixar melhor vamos a cor vermelha (#FF0000):
Da esquerda para direita temos o símbolo #. Depois 100% de vermelho indicado pelo par FF. Se-
guindo por 0% de verde indicado pelo par 00. E para finalizar 0% de azul indicado pelo par 00.
152 153
A imagem que usamos como background tem somente 18 por 18 pixels que através de uma de-
claração CSS é repetida, tanto na vertical, quanto na horizontal, quantas vezes forem necessárias.
Ela traz a ilusão que é uma imagem criada em editor através de linhas em plano de fundo azul.
Só que na verdade é uma pequena imagem construída com traços negros, formando um “quase
quadrilátero, sem fundo algum e salvo como PNG transparente.
Mas porque tudo isso? (Você deve se perguntar). Essa “manobra” faz que o site carregue sensivel-
mente mais rápido do que colocar uma imagem de fundo de grandes dimensões para conseguir
o mesmo efeito visual.
Para continuar na nossa proposta 80/20 nós não aprofundaremos nesses sistemas. Pedimos que,
neste primeiro momento, você foque no hexadecimal até ficar bem seguro na sua aplicação.
Para consulta posterior visite este link onde se encontra uma ótima fonte sobre todos os sistemas
de cores: http://tableless.com.br/sobre-cor-e-webdesign/
Voltando ao nosso exemplo, caso aplicássemos esta declaração: {background-color: #a8c8ca;}
E excluíssemos esta: {background-image: url(img/bg.png);}. Veríamos somente a cor de fundo:
Talvez você imaginasse que
aquele fundo azul com li-
nhas em diagonais cruza-
das fosse algo feito em um
editor visual. Em parte sim,
mas sem usar nada da cor
azul. Vou explicar:
Você já deve ter visto ima-
gens de fundo, principal-
mente em topos de sites,
onde a imagem é uma fo-
tografia que praticamente
cobre a largura do navega-
dor. Entretanto em alguns
casos, como o do exem-
plo, não justifica este tipo
de uso. É nesta hora que
o profissional Designer ou
Desenvolvedor se diferen-
cia dos ditos “sobrinhos”.
Você deve “usar menos para
conseguir mais”.
http://tableless.com.br/sobre-cor-e-webdesign/
154 155
horizontal, vertical ou em ambas continue uniforme. Veja no gráfico a seguir:
O primeiro exemplo possibilita a repetição, lado a lado(de um pequeno trecho extraído do design,
projetado e salvo como imagem, tanto verticalmente como horizontalmente) via CSS. Veja que o
resultado no navegador será conforme projetado, sem deformações. Isso diminuirá o tempo de
carregamento dessa imagem muitas vezes em relação ao uso da arte completa.
Já no segundo exemplo você até pode inserir um pequeno trecho, porém o resultado não será o
mesmo do projetado devido ao design ter muitos detalhes. Isso impossibilita a extração de algum
trecho mínimo da imagem, que repetido lado a lado, forme um design completo e sem deforma-
Agora veja o inverso. A imagemde fundo gerada através da declaração “background-image: url
(img/bg.png)” sem a declaração de cor “background-color: #a8c8ca”.
Desvendamos a mágica por trás das cortinas! O background com CSS pode ser formado com
cores e imagens. Mas também nada impediria da imagem de 18 por 18 pixels não ter fundo trans-
parente. Isso depende de o quanto de performance o site conseguirá.
Porém essa técnica só é possível com uma imagem que repetida diversas vezes, seja na posição
156 157
Veja a declaração única: com o “repeat”:
background: #a8c8ca url(img/bg.png) repeat;
Bom... Mas se “repeat” é padrão e não precisa ser declarado, isso quer dizer que existem outros
valores, com outras funções, e que precisam de declaração. Vamos a eles?
• background-repeat: repeat-x;
Usamos “repeat-x” quando queremos que a imagem de fundo se repita no sentido horizontal.
Veja a seguir a versão ampliada resultado da sintaxe:
body {background: #a8c8ca url(img/bg.png) repeat-x;}
• background-repeat: repeat-y;
Quando queremos que uma imagem de fundo se repita no sentido vertical, usamos “repeat-y”.
Veja a seguir a versão ampliada resultado da sintaxe:
body {background: #a8c8ca url(img/bg.png) repeat-y;}
ção. O resultado se torna insatisfatório.
Neste caso é indicado a inserção via CSS da imagem projetada inteira, o que levará ao um au-
mento no tempo de carregamento do site. O que nem sempre pode ser considerado um proble-
ma. Existem muitos sites que utilizam uma imagem gigante de background. A percepção de velo-
cidade de um site pode variar em cada público alvo e em cada dispositivo usado para acessá-lo.
Agora você já sabe como o fundo do nosso exemplo foi construído, entretanto um detalhe ficou
oculto no código: não existe uma propriedade ou valor que diga que a imagem de fundo (bg.
png) deva repetir. Vamos entender porque a seguir.
Background-repeat
A declaração única que usamos para o fundo do site é:
background: #a8c8ca url(img/bg.png);
Que é a junção das declarações abaixo:
• background-color: #a8c8ca;
• background-image: url(img/bg.png);
• background-repeat: repeat;
Temos uma propriedade nova para seu conhecimento: o “background-repeat”, cujo valor é “re-
peat”. Mas por que o valor repeat não aparece na declaração única?
O valor “repeat” indica que uma imagem deve repetir tanto na horizontal, quanto na vertical. E
ele não está na declaração única porque tanto faz. É um padrão do CSS que indica que a imagem
vai repetir no eixo X (horizontal) e no eixo Y (vertical).
Então as ações de indicar ou não o valor “repeat” estão ambas corretas.
158 159
Com isso podemos falar sobre uma propriedade CSS que posiciona a imagem de fundo em dife-
rentes pontos de um bloco, a propriedade “background-position”.
Background-position
Apesar de não ser usada no elemento “body” do nosso exemplo, passaremos os princípios básicos
por acreditarmos que é uma propriedade muito usada.
Na figura anterior, a imagem ficou no topo e na extremidade esquerda no elemento body. Não
declaramos o “background-position” pois este é o padrão CSS. Porém dentro de um bloco você
pode deslocar a imagem de fundo para diferentes posições. Digamos que você quer deslocar a
imagem para o canto superior direito do bloco estilizado.
Logo, você deve incluir nos valores para onde você quer a imagem fique posicionada. Para isto
você pode usar a seguinte sintaxe:
nome-do-seletor {
background: url(endereço-da-imagem.jpg) no-repeat top right;
}
Neste exemplo usamos a
propriedade “background”
para adicionar as posições
que queremos. Este é um
jeito simplificado de posi-
cionar a imagem.
Mas se preferirmos pode-
mos também usar a pro-
• background-repeat: no-repeat;
O valor “no-repeat” é usado quando não queremos que uma imagem se repita. Portanto ela apa-
recerá somente uma vez. Veja a seguir a sintaxe:
body {background: #a8c8ca url(img/bg.png) no-repeat;}
Note que a nossa imagem não se repetiu e ficou no canto esquerdo superior do navegador.
160 161
• Exemplo 1:
nome-do-seletor {background: url(endereço-da-imagem.jpg) no-repeat 200px 300px;}
Neste exemplo você está posicionando a imagem de fundo em 200 pixels à esquerda em relação
a borda do bloco e a 300 pixels do topo.
Clique aqui e veja na prática o resultado.
• Exemplo 2:
nome-do-seletor {background: url(endereço-da-imagem.jpg) no-repeat 50% 70%;}
Neste exemplo você está posicionando a imagem de fundo 50% a sua esquerda em relação a
borda do bloco e a 70% do topo.
Clique aqui e veja na prática o resultado.
Background-attachment
Para encerramos o assunto sobre background falaremos sobre a propriedade “background-at-
tachment”. Ela serve para fixar uma imagem de background na tela, mesmo quando “rolamos” a
tela, quando usamos o valor “fixed”. E quando usamos o valor “scroll” o fundo acompanha a rola-
gem. Este é o comportamento padrão. Veja a seguir como funciona na prática.
• background-attachment: fixed;
nome-do-seletor {background: url(endereço-da-imagem.jpg) no-repeat 300px 100px fixed;}
Clique aqui e veja na prática o resultado. (Role a tela e perceba que o logo fica fixo.)
priedade específica do background-position (caso já tenha especificado uma de imagem com
“background” ou “background-image” ). Como veremos a seguir.
Valores de posições para o topo:
• background-position: top left;
• background-position: top center;
• background-position: top right;
Valores de posições para o centro:
• background-position: center left;
• background-position: center center;
• background-position: center right;
Valores de posições para a região inferior do bloco:
• background-position: bottom left;
• background-position: bottom center;
• background-position: bottom right;
Agora pratique desenvolvendo com uma imagem de seu computador.
Use o código fonte dos exemplos anteriores como guia.
Esses são posicionamentos básicos. Mas você também pode usar coordenadas para posicionar
uma imagem de fundo. Para isso você definirá primeiro um valor à esquerda em relação ao bloco
e depois com um a valor em relação ao topo.
Você pode usar os valores com pixels, porcentagens ou outro tipo de unidade aplicada a web.
Veja exemplos a seguir.
http://ebookhtmlcss.com/arquivos/capitulo-4.1/background-position-200-300.html
http://ebookhtmlcss.com/arquivos/capitulo-4.1/background-position-200-300.html
http://ebookhtmlcss.com/arquivos/capitulo-4.1/background-position-50-70.html
http://ebookhtmlcss.com/arquivos/capitulo-4.1/background-position-fixed.html
162 163
Nota importante:
Seguindo a proposta do livro, algumas propriedades avançadas não foram apresentadas, entretan-
to deixaremos uma fonte de pesquisa para você consultar assim que você já estiver dominando as
propriedades mostradas neste tópico, ok?
CSS3 – Propriedade background
http://tableless.com.br/css-3-propriedade-background/
Neste artigo você conhecerá como colocar múltiplos backgrounds
com CSS, além de conhecer as propriedades background-origin,
background-size e background-clip.
Como usar linear-gradient em CSS de forma consciente?
http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/
Neste outro artigo você conhecerá como através da propriedade
“background-image” você pode criar fundos degrades entre cores
we sem uso de imagens.
• background-attachment: scroll;
Para que a imagem de fundo “role” tanto faz a declaração ou não do valor “scroll”.
Compare exemplos abaixo:
nome-do-seletor {background: url(endereço-da-imagem.jpg) no-repeat 200px 300px scroll;}
nome-do-seletor {background: url(endereço-da-imagem.jpg) no-repeat 200px 300px;}
Clique aqui e veja na prática o resultado.
O código HTML e os arquivos usados até esta
etapa se encontram neste link para download.
http://tableless.com.br/css-3-propriedade-background/
http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/
http://ebookhtmlcss.com/arquivos/capitulo-4.1/background-position-scroll.html
http://ebookhtmlcss.com/arquivos/capitulo-4.1/arquivos-para-download-6.zip
http://ebookhtmlcss.com/arquivos/capitulo-4.1/arquivos-para-download-6.zip164 165
body {
background-color: #a8c8ca;
background-image: url(img/bg.png);
background-repeat: repeat;
background-position: top left;
background-fixed: scroll;
}
Ou usando, preferencialmente, a declaração única (Note que não é necessário declarar as pro-
priedades background-repeat, background-position e background-fixed, pois estão com valores
padrão).
body {
background: #a8c8ca url(img/bg.png);
}
Resumo do tópico
Este tópico sobre background foi tão intenso que merece até um resumo para uma consulta rá-
pida.
Você agora é capaz, através do CSS, de inserir imagens de fundo em um site com diferentes pro-
priedades. E não somente em um fundo de site, como também em qualquer elemento HTML que
você deseje. Você pode fazer isso listando as propriedades na declaração:
nome-do-seletor {
background-image: url(endereço-da-imagem.jpg);
background-color: #ffff00;
background-repeat: no-repeat;
background-position: top right;
background-fixed: fixed;
}
Ou usando, preferencialmente, a declaração única com menos código e de mais fácil manuten-
ção:
nome-do-seletor {
background: url(endereço-da-imagem.jpg) #ffff00 no-repeat
top right fixed;
}
Já para o fundo do elemento “body” do exemplo utilizado neste tópico podemos também listar
as propriedades (não indicado):
167166
Como funciona o CSS?
Parte 4.2 - Formatando textos
Encerramos o assunto background. Entretanto, você pode ter notado, no código CSS do exemplo
principal (primeiro) desse assunto que encerramos, que existiam propriedades extras que não
influenciaram em nada na apresentação visual do elemento “body”. Para recordar vamos rever o
código a seguir com as propriedades destacadas:
body {
background: #a8c8ca url(img/bg.png);
color: #444444;
font-family: Tahoma, Arial, sans-serif;
font-size: 16px;
line-height: 16px;
}
Você deve estar se perguntando: Se não influenciou em nada porque foram usadas? Por que elas
estão dentro da declaração?
Para explicar isso vamos falar mais profundamente agora sobre herança. E uma boa forma de
explicar herança é usando as propriedades de textos CSS, isto é, aprenderemos dois assuntos im-
portantes dentro de um tópico só. :D
Herança
Como já citado neste E-book, os elementos filhos herdam as declarações do elemento pai. Isso é
herança. E quando colocamos uma declaração que não será usada diretamente em um elemento
é porque intencionalmente queremos que ela seja herdada pelos elementos filhos.
Parabéns!!!
Encerramos por aqui o tópico sobre background CSS. Propomos novamente que você dê uma
pausa para descansar. É o esquema 80/20, lembra-se?
Você obteve muitas informações até aqui, então celebre muito que o você aprendeu com uma pausa!
Volte depois e pratique todas as propriedades mostradas, pois você as verá com bastante frequ-
ência tudo isso que aprendeu.
O código HTML e os arquivos usados até esta etapa se
encontram neste link para download.
http://ebookhtmlcss.com/arquivos/capitulo-4.1/arquivos-para-download-6.zip
http://ebookhtmlcss.com/arquivos/capitulo-4.1/arquivos-para-download-6.zip
168 169
#bloco_um, #bloco_dois {
font-family: arial, sans-serif;
}
</style>
</head>
<body>
<div id=”bloco_um”>
<h1>Todos os elementos dentro
desta “div” herdam a cor vermelha
de “body”</h1>
<p>Eu sou vermelho.</p>
<p>O espaço entre linhas neste bloco é de 20 pixels, herdado de “body”.</p>
</div>
<div id=”bloco_dois”>
<h1>Assim como o bloco anterior, todos os elementos dentro desta “div”
herdam a cor vermelha de “body”</h1>
<p>Eu sou também vermelho.</p>
<p>O espaço entre linhas neste bloco é de 20 pixels, herdado de “body”.</p>
</div>
</body>
</html>
Nota: Reforçando um conceito que vimos lá no exemplo do bolo, quando você tem
propriedades e valores comuns entre dois ou mais seletores é indicado uni-los em uma
só declaração. Isto faz que se economize código, tempo e melhore a performance do site.
No exemplo acima, na declaração onde o “#bloco_um” e o “#bloco_dois” possui o mesmo
tipo de fonte (font-family: arial, sans-serif;). Então basta que se coloque uma vírgula
entre os seletores para que eles recebam a mesma declaração.
seletor1, seletor2, seletor3, seletor1400 {propriedade: valor}
Visualmente o elemento “body” já está pronto com o background que colocamos no tópico an-
terior. Isso porque ele não contém conteúdo de forma direta. Porém os elementos descendentes
dele contêm. E é aí que surgi a herança CSS, ou seja, os elementos que existem dentro de body
(filhos, netos, etc.) podem receber estas propriedades automaticamente. E o bom disso é que não
precisamos digitar as mesmas propriedades toda vez que criamos um elemento novo, basta que
ele herde as características declaradas no elemento pai “body”. Sacou?
E principalmente porquê fica mais fácil de fazer alterações no site todo modificando poucas li-
nhas de código e sem perder tempo caçando propriedades em tudo que é elemento.
Mas atenção! Existem propriedades que não são herdadas. São elas:
background, border clip, content, counter, clue, display, float, height, left, margin, outline, over-
flow, padding, page-break, pause, play-during, position, right, table-layout, text-decoration, top,
unicode-bidi, vertical-align, width, z-index.
Dessas citadas a cima, você já conhece o background.
Agora, iremos criar um pequeno exemplo para você entender a herança de forma prática.
E como prometido, Galucho, de quebra já apresentaremos algumas propriedades CSS para textos.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Formatando textos</title>
<style type=”text/css”>
body {
color: #ff0000;
line-height: 20px;
}
170 171
Quando você quer que herde, você simplesmente omite uma declaração fazendo prevalecer a
declaração existente no elemento pai, certo? Então para que não exista nenhuma herança deve-
-se fazer o contrário.
Coloque uma nova declaração atribuindo valor diferente para a propriedade do elemento que
você quer diferenciar. Esse novo estilo irá se sobrepor em relação ao estilo declarado no elemen-
to pai. Vamos ver na prática fazendo uma pequena alteração no código anterior.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Formatando textos 2</title>
<style type=”text/css”>
body {
color: #ff0000;
line-height: 20px;
}
#bloco_um, #bloco_dois {
font-family: arial, sans-serif;
}
#bloco_dois {
color: #007f39;
line-height: 60px;
}
</style>
</head>
<body>
<div id=”bloco_um”>
<h1>Todos os elementos dentro desta “div” herdam a cor vermelha de “body”</h1>
<p>Eu sou vermelho.</p>
<p>O espaço entre linhas neste bloco é de 20 pixels, herdado de “body”.</p>
</div>
<div id=”bloco_dois”>
<h1>Diferentemente do bloco anterior, todos os elementos dentro desta “div” não herdam a cor vermelha
de “body”. Somos verdes.</h1>
<p>Eu sou verde.</p>
<p>O espaço entre linhas neste bloco é de 60 pixels, diferente do bloco anterior que herdou 20 pixels
de “body”.</p>
</div>
</body>
</html>
Agora veja o resultado. Os elementos internos das “divs” bloco_um e bloco_dois herdam a cor
vermelha (color:#ff0000) e o espaço entre linhas (line-height: 20px) declaradas no elemento
“body”.
Mas e quando não queremos que uma propriedade seja herdada?
172 173
Color
Só com os exemplos anteriores que você viu creio que você já sacou que esta propriedade é res-
ponsável por atribuir cor a textos.
Para usá-la basta que você atribua um valor a propriedade de forma similar ao que você já viu
quando falamos sobre background-color, lembra?
Neste E-book focaremos em usar como valor o sistema hexadecimal. Porém, assim como em ba-
ckground-color você também pode adotar outros os sistemas RGB, RGBA e HSL.
A sintaxe para a propriedade color:
seletor_qualquer {color: valor da cor; } (valor #FFF, por exemplo)
Line-height
É uma propriedade de dimensionamento que permite estipular espaçamento entre linhas.
Os valores usadospara esta propriedade podem ser de diferentes unidades de medidas CSS como
px, cm, em, %, etc. E também um número (1, 2, 3).
Quando falamos sobre herança mostramos dois exemplos sobre o uso desta propriedade utili-
zando como unidade o pixel.
Você deve ter percebido também que valores maiores determinam espaçamentos maiores, inde-
pendente da unidade de medida que você escolher.
Esta propriedade é algo que você pode ter total domínio rapidamente. Sugerimos que você faça
testes com valores fixos em pixels, também com porcentagens e com valores em números.
Resultado:
Com as modificações no código, so-
mente a família da fonte (font-family:
arial, sans-serif) permaneceu a mes-
ma. Mudamos a cor do bloco dois e o
espaço entre linhas.
E com isso encerramos o assunto he-
rança por aqui!
Você deve ter percebido que usamos
três propriedades que dão estilos para
textos. “Color”, “line-height” e “font-
-family”.
Aprofundaremos mais sobre elas e
apresentaremos outras mais. Come-
çaremos com a propriedade “color”.
174 175
seletorqualquer {
font-family: nome da fonte da família 1,
nome da fonte da família 2,
nome genérico;
}
E agora um exemplo prático (para os exemplos usaremos o seletor ID, mas poderia ser class, ou
até mesmo de tipo.):
#nome-do-seletor { font-family: “Times New Roman”, Palatino, serif; }
Note que neste exemplo usamos dois nomes de fontes de família e o nome da família genérica
“serif”. Primeiro o navegador procurará pela por Times New Roman, caso não encontre procurará
por Palatino, e na ausência desta procurará por uma fonte semelhante da família genérica serif.
As famílias de fontes são definidas pelo nome (Times New Roman, Palatino). Você pode notar
também que para nomes derivados de família deve-se usar aspas.
Exemplo: “Times New Roman”, “Palatino Linotype”, “Book Antiqua”.
E o nome da família genérica pelo nome genérico (serif).
Os tipos de famílias genéricas que podemos definir são:
• serif (por exemplo, Times)
• sans-serif (por exemplo, Helvetica)
• cursive (por exemplo, Zapf Chancery)
• fantasy (por exemplo, Western)
• monospace (por exemplo, Courier)
A sintaxe para a propriedade line-height é a seguinte:
seletor_qualquer {line-height: valor da propriedade com a unidade escolhida por você;}
Veja um exemplo prático:
p {
line-height: 20px;
}
Font-family
É a propriedade que define o tipo de fonte que será aplicada ao elemento textual. Existem dois
tipos de valores: o primeiro é o nome da fonte da família (Tahoma, Arial, Helvética, etc) e o se-
gundo é o nome da família genérica (serif, sans-serif, cursive, monospace e fantasy).
Para entender mais sobre classificações de tipografia é indicado que depois você leia estes dois
artigos do blog Chief of Design: http://chiefofdesign.com.br/guia-tipografia-parte-01/ e http://
chiefofdesign.com.br/guia-tipografia-parte-02/ .
Na sintaxe CSS você pode usar mais que um nome da família de fontes, o que é indicado. E mais
indicado ainda é usar no final um nome da família genérica. Isto porque o navegador irá procurar
pelas fontes indicadas por você até encontrar alguma e caso elas não estejam disponíveis ele terá
a liberdade para escolher uma fonte semelhante na família genérica.
Na declaração CSS as fontes são listadas e separadas por vírgulas. Isso indica, diferentemente da
sintaxe que vimos na propriedade background, que cada valor é uma alternativa, e que somente
um valor será escolhido. Esse valor escolhido geralmente é o primeiro valor declarado que o na-
vegador encontrar disponível.
Agora, vamos entender a sintaxe?
http://chiefofdesign.com.br/guia-tipografia-parte-01/
http://chiefofdesign.com.br/guia-tipografia-parte-02/
http://chiefofdesign.com.br/guia-tipografia-parte-02/
176 177
E os valores que podemos definir estão dentro da classificação a seguir:
• CSS Absolute-size: xx-small, x-small, small, medium, large, x-large, xx-large. ‘Medium é o valor
padrão.
• CSS Relative-size: larger (maior), smaller (menor). Eles diminuem ou aumentam o valor da
fonte baseados no valor definido na fonte-pai.
• Lenght: Especifica um tamanho absoluto da fonte. Entre as unidades você pode usar px (pi-
xels), cm (centímetros), pt (points), etc.
Você perceberá que a unidade pixels é amplamente utilizada. E a usaremos na nossa proposta
de projeto. Será sempre indicado unidades relativas (“porcentagem”, “em”, “rem”), porém quando
você decidir usar uma unidade fixa indicamos usar pixels.
• Percentagem: Uma porcentagem que especifica um tamanho de fonte absoluto em relação ao
tamanho da fonte do elemento pai (Nota rápida: Também usamos porcentagem para atribuir
valores de dimensões de blocos, assunto a ser tratado mais a frente).
• Unidades relativas “em” e “rem”: Estas unidades funcionam semelhantes as porcentagens, e
muitos a consideram “ideais” pra o desenvolvimento web por contribuírem na construção de
sites responsivos. Porém elas exigem que se efetuem pequenos cálculos matemáticos para
conversão do valor em pixels .
A seguir, confira um exemplo prático:
body {
font-size: 16px;
}
Indicamos que você foque seu aprendizado na unidade pixel, porque você encontrará muito
desta unidade por aí em manutenções de site. Lembrando que ela, além de ser usada em fontes,
Uso de fontes seguras
Hoje em dia, com o avanço do CSS, temos a opção de usar diferentes fontes através do @font-
-face. Você já deve ter visto por aí sites usando diferentes fontes e eu posso até tentar adivinhar
que, após ter visto o quanto que elas são bacanas, você vai querer usá-las em seus projetos. Po-
rém vamos focar no nosso compromisso do 20/80, lembra-se?
Por enquanto foque em fontes comuns que sabemos que todo usuário possui em suas máquinas.
E quando você se sentir seguro, aí sim, comece a projetar com fontes diferentes. Mas sem preju-
dicar a legibilidade e leiturabilidade do conteúdo do site, ok?
Para trabalhar com fontes mais complexas você precisará de mais recursos que não cobriremos
neste E-book , para não fugir ao nosso objetivo.
Você pode consultar mais sobre o assunto nesses links:
• http://www.w3.org/TR/CSS21/fonts.html#font-family-prop;
• http://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/ e
• http://tableless.com.br/font-face-fonts-externas-na-web/.
A seguir vamos falar sobre a propriedade que mexe com o tamanho das fontes.
Font-size
Esta é a propriedade que determina o tamanho da fonte de um texto, como você dever ter perce-
bido nos exemplos que até aqui usamos. Seu uso é bastante simples bastando apenas que após
declarar esta propriedade, defina-se os valores em uma determinada unidade de tamanho.
A sintaxe para a propriedade font-size é a seguinte:
seletor_qualquer { font-size: valor da propriedade com a unidade escolhida por você;}
http://www.w3.org/TR/CSS21/fonts.html%23font-family-prop
http://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/
http://tableless.com.br/font-face-fonts-externas-na-web/
178 179
lares aos valores normal e bold.
A sintaxe para essa propriedade é bem simples. Veja:
seletor_qualquer {
font-weight: valor da propriedade com a unidade escolhida por você;
}
Exemplo prático:
p {
font-weight: bold;
}
Font-style
Você pode usar esta propriedade para valores “normal”, “oblique” ou “italic”.
Normal é o valor padrão. O valor oblique (oblíquo) representa a uma versão inclinada a direita da
forma normal. Já italic (itálico) representa uma forma cursiva com inclinação a direita.
Dependendo da fonte escolhida praticamente é imperceptível a diferença entre os valores obli-
que e italic. O valor italic é o mais encontrado quando esta propriedade é declarada.
também é usada para determinar tamanho de blocos (veremos a mais a frente). Como o uso de
unidades relativas como “%”, “em” e “rem” exigem um tempo maior para assimilação, deixaremos
uma fonte para consulta posterior. Assim que você já estiver dominando o uso de tamanhos de
fonte em pixels, estude as unidades relativas ( http://tableless.com.br/unidade-pixels-em-rem/).
Font-weight
Esta propriedade serve para determinar o peso da fonte. É uma propriedade que você usará bas-
tante em textos na web, principalmente por causa de um valor que é capaz de “negritar” um texto
selecionado. O valor que proporciona este negrito é o “bold”.
Quando não declaramos esta propriedade o texto recebe o valor padrão que é “normal”.
Segue uma relação de pesos que você pode testar e aplicar em seus projetos, Sendo que o valor
maior representa maior peso:
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
E aqui outros valores possí-
veis:
normal, bold, bolder, lighter.
Os valores 400, 700, são simi-
http://tableless.com.br/unidade-pixels-em-rem/%20
180 181
Veja que no resultado que o texto que recebeu o valor
“small-caps” apesar das letras estarem como maiúsculas
o tamanho não é o mesmo de um texto normal digitado
com letras maiúsculas. Claro que também dependendo
da fonte utilizada mais ou menos variações podem existir.
Font
É isso aí, Galucho! Cobrimos bastante coisas importantes sobre fonte. Aliás, sobre propriedades
variantes que englobam a propriedade “font”. Digo isso porque existem outras propriedades para
formatação de texto que ainda serão apresentadas a seguir.
O intuito agora é, assim como vimos em background, juntar todas as propriedades vistas até aqui
em uma declaração única usando a propriedade “font”. Vamos nessa?
A decisão é sua de declarar todas ou algumas propriedades, só que os valores para “size” e “fa-
mily” são obrigatórios e devem ser declarados nesta ordem respectiva. Quando um valor de uma
propriedade for ocultado assume-se o valor padrão, ou valor herdado do elemento pai.
A sintaxe para essa propriedade também é bem simples. Veja:
seletor_qualquer {font-style: valor da propriedade com a unidade escolhida por você;}
Exemplo prático:
p {
font-style: italic;
}
Font-variant
Esta propriedade converte todas as letras minúsculas em letras maiúsculas. No entanto, as letras
convertidas aparecem em um tamanho de fonte menor do que as letras maiúsculas originais.
Entenda no código a seguir:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Font variant</title>
<style type=”text/css”>
#um , #tres {font-variant:normal;}
#dois {font-variant:small-caps;}
</style>
</head>
<body>
<p id=”um”>Texto digitado com letras minúsculas e font-variant:normal.</p>
<p id=”dois”>Texto digitado com letras minúsculas e font-variant:small-caps.</p>
<p id=”tres”>TEXTO DIGITADO COM LETRAS MAIÚSCULAS E FONT-VARIANT: NORMAL.</p>
</body>
</html>
182 183
Divirta-se com a propriedade “font”. :D
Importante: neste capítulo também falamos sobre como mudar a cor da fonte.
Você lembra? Valores para a propriedade “color” não entram na declaração única
da propriedade “font”. Para mudar cor você deve declarar a parte como a seguir:
p {
font: bold italic small-caps 14px/28px arial, sans-serif;
color: #ff0000;
}
Fique atento a isso.
Outra coisa! Se decidir declarar o valor de “line-height” ele deve sempre vir depois de “font-size”
e seguido de uma barra. Exemplo:
seletor_qualquer {
font: 24px/2 “Times New Roman”;
}
A seguir usaremos um exemplo com algumas das propriedades vistas em uma declaração única.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Font - Declaração única</title>
<style type=”text/css”>
p {font: bold italic small-caps 14px/28px arial, sans-serif;}
</style>
</head>
<body>
<p>Este parágrafo contém a fonte Arial, possui um tamanho de 14 pixels, está em negrito e
em itálico, e os caracteres estão em maiúsculo devido o valor small-caps declarado na
folha de estilo.</p>
<p>Este parágrafo contém as mesmas características do parágrafo acima.</p>
</body>
</html>
Perceba que o código é bem auto explicativo. Como você já foi apresentado as propriedades e
seus possíveis valores, faça testes! Vá na folha de estilos e apague alguns valores, mude o tama-
nho de fonte e de entrelinhas, altere suas unidades.
184 185
O resultado fala por si só.
Veja como ficou:
Text-decoration
Esta propriedade descreve “decorações” que são adicionadas ao texto de um elemento. Ela pos-
sui 5 tipos de valores:
• none: produz nenhuma decoração;
• underline: coloca sublinhado no texto;
• overline: coloca um sobrelinhado no texto;
• line-through: coloca uma linha no meio do texto;
• blink: faz o texto piscar.
Entretanto quando falamos em uso o valor “none” é a que se destaca e a que queremos focar.
As outras propriedades não são de comum aplicação, somente em casos que o projeto exige.
Portanto fica como tarefa de casa que você as teste, bele?
Voltando a falar sobre “none”, ele é bastante usado quando o Designer estipula que os itens de
menu não tenham sublinhado em seus textos. Isso porque a maioria dos navegadores deixam
Text-align
Esta é a propriedade usada para determinar o tipo de alinhamento que um texto possuirá. Quem
utiliza um editor de texto como o “Word”, ou até ferramentas para edição gráfica está familiarizado
com os tipos mais comuns. São eles: alinhamento à esquerda, direita, centralizado, e justificado.
Levando isso para linguagem CSS temos:
• text-align: left;
• text-align: right;
• text-align: center;
• text-align: justify.
Vamos ver na prática?
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Text-align</title>
<style type=”text/css”>
h1 {
text-align: left;
}
h2 {
text-align: center;
}
h3 {
text-align: right;
}
h4 {
text-align: justify;
}
</style>
</head>
<body>
<h1>Texto alinhado
à esquerda</h1>
<h2>Texto centralizado</h2>
<h3>Texto alinhado
à direita</h3>
<h4>Este é um texto justificado.
Isso ocorre quando um texto está alinhado
com ambas as bordas.
O efeito da declaração “text-de-
coration: justify” força o texto a estender-se
de uma extremidade à outra.
Você pode perceber este efeito na
linha anterior.</h4>
</body>
</html>
186 187
Podemos notar que para um link fique sem sublinhado, basta colocar a declaração
“text-decoration: none”. Esta é a declaração que uso no menu principal do Chief of Design.
Outras propriedades para estilizar textos
Existem outras propriedades de uso não tão frequente e entre elas algumas que podem até for-
necer resultados incomuns. Seu uso depende muito das características e necessidades do proje-
to. Portanto, para não fugir do nosso esquema 80/20, descreverei brevemente sobre. Vou deixar
como tarefa de casa para que você pesquise posteriormente sobre elas. Mas só faça isso depois
que você dominar as propriedades apresentadas neste E-book, ou em caso de necessidade.
• text-transform: Propriedade utilizada para capitalização de textos. Com ela você
atribui valores que permitem deixar um texto com o primeiro caractere
de cada palavra em maiúscula, com todos os caracteres de cada palavra
em maiúscula, ou também com todos os caracteres das palavra em
minúscula, ou ainda sem nenhum efeito de capitalização.
• letter-spacing: Esta é uma propriedade que eventualmente você usará.
Ela serve para definir espaços entre os caracteres de um texto.
• word-spacing: Ela estipula o espaçamento entre as palavras.
• text-indent: Esta propriedade especifica o recuo da primeira linha de texto.
Já foi muito utilizada como auxiliar em substituição de textos
(melhor dizendo, esconder textos) por imagens.
• white-spacing: Declara como um espaço em branco dentro de um
elemento deve ser tratado.
• direction: Para definir direção de um texto - da direita para esquerda ou
da esquerda para direita.
como padrão dos links (elemento HTML “a”), um sublinhado.
Veja o exemplo de dois links: um setado com o valor “underline” pelo navegador e outro com o
valor “none” pelo nosso CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Text-decoration:none</title>
<style type=”text/css”>
#sem-sublinhado {
text-decoration: none;
}
</style>
</head>
<body>
<p><a href=”http://chiefofdesign.com.br/”>Texto sublinhado padrão do navegador
</a></p>
<p><a id=”sem-sublinhado” href=”http://chiefofdesign.com.br/”>Texto sem decoração
atribuído pelo seletor “#sem-sublinhado”</a></p>
</body>
</html>
Agora o resultado:
188 189
Parabéns por chegar até aqui!!!!!!
Acabamos de encerrar o tópico sobre formatação de textos com CSS. E você já deve imaginar o
que vamos propor para você agora. Dê uma pausa para descansar.
Comemore o que absorveu neste tópico com uma pausa para outras atividades.
Volte depois e pratique todas as propriedades mostradas até aqui.
O código HTML e os arquivos usados até esta
etapa se encontram neste link para download.
Como funciona o CSS?
Parte 4.3 - Considerações importantes
Chegamos a um momento crucial do E-book. Espero que esteja animado porque agora você
entenderá o porquê de todos os criativos que querem trabalhar com web devem pelo menos
entender HTML e CSS. Você compreenderá porque algumas decisões durante a criação no editor
visual podem ou não dificultar o desenvolvimento na hora de codificar.
Você terá, neste tópico, contato com propriedades CSS fundamentais para disposição e apresen-
tação de elementos numa interface digital.
Entretanto, antes você deve saber algumas informações:
1. Todo layout que você constrói no Editor gráfico de sua preferência deve ser
recortado (dividi-lo em retângulos) para depois ser unido com HTML e CSS.
Isso é necessário para:
• Formar blocos de conteúdos semânticos com o uso da tags;
• Que os navegadores consigam interpretar e apresentar a versão para web;
• Que funcionalidades básicas de um site se apresentem.
2. Exportar uma imagem inteira dentro de um HTML? Nem pensar.
Mesmo depois de recortado não é indicado. Primeiro que o HTML gerado não foi gerado pelas
suas mãos Galucho, você que já está com a mente preparada para seguir padrões WEB. E se-
gundo, mesmo após seu layout recortado, nem todas as imagens resultantes desta divisão serão
usadas.
E por quê?
http://ebookhtmlcss.com/arquivos/capitulo-4.2/arquivos-para-download-7.zip
http://ebookhtmlcss.com/arquivos/capitulo-4.2/arquivos-para-download-7.zip
190 191
(background-color), com propriedades que insere e repete uma versão minúscula de imagem.
Só este exemplo já justifica o porquê que um Designer que pretende trabalhar com Web deve
aprender HTML e CSS.
E tem mais! Existem propriedades que criam bordas, arredondam cantos, colocam sombras em
textos e blocos, entre outras coisas bacanas... Sem contar algumas que fazem animações.
3. Se você nunca desconfiou saiba que tudo o que você enxergar em uma pági-
na web, seja ele redondo, triangular, ou uma forma livre qualquer, na verdade são,
do ponto de vista de posicionamento visual, retângulos.
Uma página web é um conjunto de retângulos que servem de suporte para mídias estáticas,
como textos, fotografia entre outros elementos gráficos, e também para mídias dinâmicas, como
áudios, vídeos e animações.
O resultado final de um site pode fazer um usuário comum enxergar ou não retângulos nas pá-
ginas. Porém de uma forma geral ele pode apenas se ater ao todo, ou algum elemento que tenha
um formato livre, como um logo, por exemplo.
Mas você pode criar a forma que bem entender para um logo e salvar como png transparente
para evidenciar a forma projetada, porém este arquivo tem altura e largura, e é com estas pro-
priedades dimensionais que ele será inserido no HTML. No final, acabará sendo um retângulo.
Talvez possa ser que você não esteja habituado com editores gráficos como o Fireworks, Pho-
toshop, entre outros, e precisa de outra forma de demonstração. Então lançaremos mão da ajuda
do navegador para exemplificar melhor.
Primeiro veja esta página na figura a seguir:
Caso não saiba, o peso de uma imagem pode representar bytes a mais que pioram a performance
de um site. Você deve sempre levar em conta o quanto o uso delas podem influenciar no tempo
de carregamento de um site. Por isso, em grande parte do tempo, você deve projetar seu layout
pensando em uma forma de usar propriedades CSS que possam substituir imagens.
Hoje em dia aquele botão estilizado com gradiente que você criou no Fireworks ou Photoshop
pode ser feito com algumas propriedades CSS. Isso deixará seu site levinho. Portanto na hora que
você for recortar seu layout você deverá identificar, como prioridade, o que pode ser usado como
CSS e depois, se não tiver jeito, o que será inserido como imagem, geralmente via background.
Por falar em background... Você se lembra dessa imagem abaixo?
Você bem sabe, caso não tenha pulado a parte sobre background (hehehe), que este fundo não
foi obtido através de uma imagem gigante extraída de um editor visual. Este é um exemplo
clássico da união de uma propriedade CSS que gera cor ao fundo sem a necessidade de imagens
192 193
exemplo, também cumprem bem a missão. Optei pelo Firefox por uma questão de hábito e por
acreditar que a interface é mais amigável para a ferramenta que iremos utilizar. No caso a ferra-
mentas do desenvolvedor web.
Existem três formas de acessá-la: uma é pelo teclado pressionando as teclas Ctrl+Shift+I; outra é
clicando em algum elemento da página web com o botão direito para escolher a opção “inspe-
cionar elemento” na janela que se abrirá, e por último abrindo o menu do Firefox e escolhendo
a opção “Desenvolvedor” (enquanto este é E-ebook é desenvolvido a versão do Firefox utilizado
dispõe o menu do navegador no canto superior direito).
Com a ferramenta iremos trabalhar com a aba “inspecionar”. Com isso teremos acesso ao código
HTML do site.
E caso você não conheça esta ferramenta ainda, olha que bacana. Ao posicionar o mouse sobre
uma linha de código a ferramenta destaca na página web o elemento HTML selecionado. E o que
você verá? Um retângulo com os valores de suas dimensões.
Usaremos a ferramenta no exemplo anterior, OK?
Vamos aos resultados?
Quantos elementos nós temos nesta página?
Depende do contexto. Acredito que os usuários comuns podem dizer que a resposta é quatro.
Sendo três elementos geométricos e um logo do Chief of Design. Outros podem achar que são
seis, se considerarmos também o título da página e o texto que vem debaixo das figuras.
Mas do ponto de vista de desenvolvimento, a somatória de todos os elementos que estão dentro
do elemento HTML “body”, inclusive ele mesmo, resultam no número de elementos que a página
possui. E todos eles são retângulos.
Bom, visualmente eu até arriscaria dizer, então, que somando as três figuras geométricas, mais o
logo, mais os dois textos, com o elemento body, temos sete elementos. Só que não, hehehe!
Visualmente dá para ter uma ideia. Mas quem garante que as figuras geométricas não são na
verdade uma imagem só? Quem garante que não temos alguns elementos extras que não enxer-
gamos na interface? Está na hora de chamar o nosso novo aliado, o navegador.
O navegador em questão é o Mozilla Firefox. Outros navegadores, como o Google Chrome, por
194 195
Na imagem vemos que o título, destacado com um fundo azul claro, é suportado por um retângulo
de 1200 por 30 pixels.
Na imagens seguintes vemos que tanto as figuras geométricas, quanto o logo são suportados por
uma área retangular de 300 por 300 pixels.
196 197
Após as imagens o próximo elemento é o parágrafo:
O “body” corresponde ao elemento ancestral maior que pode ser visualizado no seu navegador
também como retângulo. Veja a seguir:
198 199
Pode parecer que encerramos por aqui, mas existe outro elemento que não é possível ver no
layout, mas que está presente. É uma “div” que vem após o “body” agrupando e posicionando a
página no centro do navegador.
Veja a seguir:
Comparado com o “body” este elemento é menor. Não o vemos sem a ajuda da ferramenta de
inspeção, porque ele não possui conteúdo direto e nenhumaspecto visual, como um background,
por exemplo. Porém é comum usarmos elementos HTML que não possuem caraterísticas visuais
que o fazem ser notados. Eles estão lá ou para dar valor semântico a um bloco de conteúdo, ou
para separar blocos.
Este elemento “invisível” abre com esta tag ‘<div id=”corpo”>’.
Segue o código utilizado no exemplo:
200 201
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Identificando retângulos em uma página web</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
#corpo {
width: 1200px;
margin: 0 auto;
}
img {
float: left;
}
p {
font-size: 20px;
padding: 0;
clear: both;
}
</style>
</head>
<body>
<div id=”corpo”>
<h1>O que vemos aqui?</h2>
<img src=”poligono.png” width=”300” heigh=”300” alt=”polígono”>
<img src=”circulo.png” width=”300” heigh=”300” alt=”círculo”>
<img src=”triangulo.png” width=”300” heigh=”300” alt=”triângulo”>
<img src=”chief-of-design-retangulo.png” width=”300” heigh=”300” alt=”Logo Chief of
Design”>
<p>Temos quatro elementos com formatos diferentes?</p>
</div>
</body>
</html>
Obs: existem algumas novas propriedades neste código acima que serão explicadas mais adiante.
Você deve ter percebido que focamos em demostrar que uma página web é formada por um
conjunto de retângulos. Pela natureza desta figura geométrica ela se mostra mais fácil de manusear
que outras figuras.
Objetos retangulares, quadrados, cubos ou cubos retangulares, que vemos no dia a dia, são mais
fáceis de posicionar, alinhar, dispor lado a lado, depositar, do que objetos redondos, circulares ou
cilíndricos. Isso devido suas arestas e faces planas.
Esta maior facilidade ocorre também com os retângulos da página web que partir de agora
chamaremos de box (em português, caixa).
202 203
Agora que você consegue enxergar que a estrutural visual de uma página web é formada por estes
boxes ficará mais fácil também de posicioná-los na interface com comandos CSS. Você será capaz
de posicionar um box para direita, para esquerda, distanciá-lo de outro box em qualquer direção,
colocar lado a lado, entre outras possibilidades. Será como se brincássemos com coordenadas.
E você poderá até organizar os boxes dentro de um grid. E como não poderia deixar de ser para
fazer tudo isso que citamos, da mesma forma que existem propriedades que formatam textos,
existe aquelas que estilizam boxes. E este assunto será tratado adiante quando falarmos sobre
box model.
4. Uma página HTML é um plano bidimensional. Só que a forma que seus ele-
mentos se posicionam exige um empilhamento em um eixo a qual podemos ima-
giná-lo atravessando o monitor (profundidade).
Simplificando, queremos dizer que os boxes podem estar empilhados uns em cima de outros,
como se fossem camadas, sendo que os últimos elementos descendentes seriam camadas mais
próximas, no eixo imaginário, em relação ao usuário. Consideremos este tipo de posicionamento
como a ordem de empilhamento dos elementos.
Veja o exemplo a seguir na próxima página.
Nota: A raiz desse contexto de empilhamento é o elemento “html”
e vai construindo este empilhamento, passando por body e até che-
gar aos últimos elementos filhos. Porém existem declarações feitas a
partir de uma propriedade CSS “z-index” capazes de interferir neste
empilhamento.
Mas para não sairmos dos trilhos, seguiremos nosso raciocínio sem
focar nesta propriedade agora.
O layout a esquerda mostra a percepção visual do usuário. Ele enxerga como um todo. O todo é
maior do que a soma das partes que o constituem. Conforme o que ele procura ele acabará fo-
cando na seção de interesse.
Agora, você Galucho, que está se acostumando com as linguagens HTML e CSS poderá “enxer-
gar” e pensar em páginas fragmentadas em boxes e camadas enquanto projeta o layout em seu
editor gráfico, wireframe ou folha de papel.
Ao definir a hierarquia HTML você praticamente já define o nível de empilhamento. Enquanto
monta as folhas de estilos já dimensiona e posiciona os boxes.
Olhe para o layout fragmentado a direita da figura anterior. Podemos ver como boxes da interfa-
ce podem ser separados e empilhados como se fossem camadas.
A sobreposição de camadas tem certa similaridade com a sobreposição de camadas organizadas
205204
no Photoshop. As diferenças é que aqui a distribuição dos elementos é via códigos, e que um box
além de sobreposto está contido em outro box (elemento pai).
Na figura temos boxes (elementos filhos) que sobrepõe em profundidades outros boxes (elementos
pais) até chegar à última camada visual na cor laranja que corresponde à estilização do elemento
HTML “body”.
Agora que você já sabe que os elementos que formam uma página são formas retangulares,
denominadas boxes, e que estes boxes estão contidos e sobrepostos em outras camadas, está na
hora de saber as propriedades CSS para construir um Box.
Para isso eu lhe apresento o box-model! Vamos conhecê-lo?
Obs: O conceito de camadas em CSS é amplamente atribuído na web ao uso
da propriedade CSS z-index em blocos posicionados. Usamos aqui essa denomi-
nação somente para exemplificar o conceito de nível de empilhamento que tem
similaridade visual as camadas no Photoshop.
Como funciona o CSS? Parte 4.4 (Box Model)
Como explicamos no tópico anterior os elementos HTML são representados por figuras retangu-
lares que denominamos de Box. Você também já sabe que um box pode conter outros boxes. Mas
o que apresentaremos agora são composições internas que formam um box.
Essas composições são divididas por quatro áreas.
Essas áreas delimitam colocando fronteiras entre elas.
Olhe para o box na imagem do navegador abaixo:
206 207
Como ele mesmo diz, é um box comum. E quais são as quatro áreas?
• Conteúdo: conteúdo é área delimitada pelo tipo de mídia apresentada, desde textos, imagens,
vídeos, entre outros. A área é composta por um comprimento e uma largura. Estes, respectiva-
mente, são apresentados em CSS através das propriedades “width” e “height” que ainda trata-
remos neste tópico.
• Espaçamento (preenchimento): é o espaço entre o conteúdo e a borda. Você também en-
contrará o termo preenchimento pela web. Ele é obtido pela propriedade “padding” ou pela
composição de suas variantes que correspondem aos lados do Boxe. São elas: “padding-top”,
“padding-right”, “padding-bottom” e “padding-left”. Por padrão ele é transparente e recebe va-
lor 0 de espessura. Quando especificamos valores para “padding” ele recebe a cor de fundo
do elemento estilizado. O espaçamento é uma área sem conteúdo usado muito como área de
respiro dentro do box.
• Borda: a fronteira que gira em torno do espaçamento e/ou conteúdo. Bordas são linhas de-
corativas. Ela é obtida pela propriedade CSS “border” ou pela composição de suas variantes
que correspondem aos lados do Boxe. São elas: “border-top”, “border-right”, “border-bottom”
e “border-left”. Você é que determina em que lado terá borda. Por padrão ele é transparente
e recebe valor 0 de espessura. Quando especificados valores para “border” ele pode receber
cores, estilos e tamanho de espessura.
• Margem: é a distância que separa um box de outro. Ela serve como área de respiro entre bo-
xes e seções. Quando você separa um elemento do outro através das propriedades CSS com
margem você também está posicionando elementos no layout. Ela é obtida pela propriedade
“margin” ou pela composição de suas variantes que correspondem aos lados do Boxe. São elas:
“margin-top”, “margin-right”, “margin-bottom” e “margin-left”. Por padrãoela é transparente e
deveria receber o valor 0 de espessura, porém alguns fabricantes de navegadores adotam val-
para “margin”. E ele, ao contrário de padding, não recebe a cor de fundo do elemento estilizado.
Ele pode receber a cor de algum elemento ancestral mais próximo que tenha recebido a cor.
Lembra-se da ferramenta do desenvolvedor web que usamos no tópico anterior para inspecionar
boxes? Com auxílio dela criamos um gráfico que mostra a figura anterior do “box comum” com
as quatro áreas do box model demarcadas.
Agora você já é capaz de identificar cada área do box-model. No gráfico a seguir você entenderá
a posição de cada propriedade CSS aplicada no box-model.
208 209
Na figura anterior vimos de dentro para fora todas as áreas e propriedades CSS. Ele sempre segui-
rá esta ordem: conteúdo, espaçamentos, bordas e margens.
Quando um elemento não for percebido ou é porque ele não foi declarado no CSS ou está rece-
bendo na propriedade o valor zero (seja por padrão ou porque assim foi setado).
É possível também que um box model não tenha conteúdo, nem elementos filhos com conteúdo.
Como princípio consideramos que todo Box tenha conteúdo, porém por uma opção do projeto,
um desenvolvedor pode criar um box vazio, especificar largura e altura, colocar um background
e usar para outro fim, como uma animação por exemplo.
Na figura a seguir, mostra de forma tri-dimensional, que as áreas do box model também seguem
níveis de empilhamento entre as quatros áreas similar ao que vimos sobre as sobreposições de
elementos HTML do tópico anterior. Neste empilhamento também existe sobreposição de back-
grounds quando fundos são inseridos.
Veja a ordem:
210 211
Esta teoria todo foi importante para você poder aplicar de forma consciente na prática. E prática
é tudo o que você quer agora, não é mesmo?
Então vamos conhecer a sintaxe para montar cada propriedade de cada área do box model. Co-
meçando pelo conteúdo com “width” e “height”.
Width
Especifica a largura da área de conteúdo de um box.
Podemos especificar a largura atribuindo valores em pixels ou outras unidades de medida de
comprimento para CSS. Exemplo:
div {width: 500px;}
A largura também pode ser especificada com porcentagem. Exemplo:
div {width: 80%;}
Quando usamos porcentagem o valor é referente a largura do elemento ancestral que tenha es-
pecificado um valor para width. No exemplo acima, se o elemento pai tem largura de 100 pixels
a “div” terá 80 pixels.
Um valor muito usado também é o “auto”:
div {width: auto;}
O auto é o valor “default” do width. Este valor é calculado levando em consideração as proprie-
dades “margin”, “border”, “padding” e a área do conteúdo. O que faz com que elementos filhos
se ajustem dentro do box pai, ou seja, este ajuste decorre do valor de “witdh” do elemento pai
menos a somatória dos valores de espessuras laterais das propriedades citadas acima.
Resumindo:
valor de width (auto) = valor de width de box pai – (valor de padding-right + valor de padding-
-left + valor de margin-right + valor de magin-left + valor de border-right + valor de border-left)
Recado importante: NÃO SE APEGUE A ESTA FÓRMULA ACIMA!
Isso é só para entender que o valor de width quando não especificado com uma unidade de
comprimento CSS ele se ajustará automaticamente dentro do elemento.
Exemplo:
#box-pai {background: #fff000; width: 400px, height; auto;}
p { background: #ff0000; width: auto; margin: 15px; padding: 30px; border: 5px solid #000000; }
<div id=”box-pai”>
<p>Este conteúdo ira se ajustar</p>
</div>
Aplicando a fórmula:
valor de width (auto) = 400px – (15px + 15px + 30px + 30px + 5 + 5)
valor de width (auto) = 300px
Todo este cálculo é para te mostrar que usar “width: 300px” ou “width: auto”, tanto faz. Só que ao
declarar “width: auto” você não precisa fazer conta.
Depende do objetivo, mas o valor “auto” é declarado quando você quer que a área de conteúdo
leve em conta o espaço deixado pelo elemento pai. Já quando usamos unidades de comprimen-
to de CSS temos a intenção de dimensionar uma área. É bastante indicado para criar seções, co-
lunas e seguir grids.
212 213
Height
Especifica a altura da área de conteúdo de um box.
Podemos especificar a altura atribuindo valores em pixels ou outras unidades de medida de com-
primento para CSS. Isso é usado em casos específicos onde se deseja que altura de um bloco não
varie. Exemplo:
div {height: 900px;}
A altura também pode ser especificada com porcentagem. Exemplo:
div {height: 50%;}
Parecido com “width” quando usamos porcentagem em “height” o valor é referente à altura do
elemento ancestral que tenha especificado um valor para “height”.
Muito mais usado que os valores acima é o valor “auto”. Auto corresponde à altura necessária
para acomodar verticalmente o conteúdo. Ele é o valor padrão do “height”.
div {height: auto;}
Margin
A propriedade “margin” determina o valor da espessura entre a margem de um elemento HTML e
seu entorno. O entorno pode ser as extremidades do navegador ou os elementos vizinhos.
O valor da espessura determina a distância entre um elemento e outro. Isso cria uma área de res-
piro “vazia” entre os elementos, porém útil dando equilíbrio ao projeto, dividindo e diferenciando
os blocos. E você pode determinar esta distância para os lados direito e esquerdo, para cima e
para baixo, com as variações da propriedade a seguir:
• margin-top - distância da margem superior do elemento em relação ao entorno;
• margin-right - distância da margem direita do elemento em relação ao entorno;
• margin-bottom - distância da margem inferior do elemento em relação ao entorno;
• margin-left - distância da margem esquerda do elemento em relação ao entorno;
Quando você deseja que todas as margens tenham valores iguais você simplesmente usa a pro-
priedade “margin”. Com isso você já dever ter concluído que no seletor universal, que usamos o
valor zero lá no tópico sobre seletores (margin: 0), recebeu este valor porque, obviamente, todas
os lados possuem valor zero, ou seja, a distância entre a margin e o entorno não existe. Equivale a
usar esta sintaxe mais longa e desnecessária:
p {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
Também equivale a usar uma versão um pouco mais simplificada:
p {margin: 0 0 0 0;}
Esta versão acima é bastante usada quando você precisa declarar todas as variantes da proprieda-
de e os seus valores não são iguais. Quando são iguais, todos os lados têm distâncias da proprie-
dade “margin” iguais, você não precisa repetir os valores quatros vezes. Usamos então a versão
abreviada.
Exemplos:
p {margin: 15px;}
div {margin: 30px;}
* {margin: 0;}
214 215
Então como interpretar os quatro valores de margens diferentes em uma declaração?
Confira o exemplo:
p {margin: 10px 20px 50px 15px;}
O primeiro valor corresponde à margem superior (magin-top: 10px).
O segundo valor corresponde à margem direita (magin-right: 20px).
O terceiro valor corresponde à margem inferior (magin-bottom: 50px).
O quarto valor corresponde à margem esquerda (magin-left: 15px).
Você pode imaginar algo assim:
#seletor_qualquer {top right bottom left}
Lembro-me que no inicio foi “dose” memorizar esta sequência. Sugiro o seguinte:
Imagine um relógio! Considere que o ponteiro apontando para o topo e para baixo (12 e 6 horas)
corresponda a “margin-top” e “margin-bottom” e que apontando para as laterais (3 e 9 horas) cor-
responda a “margin-left” e “margin-right”. Como ele gira no sentido horário seguirá a sequência:
• top (Doze, ou melhor, 0 horas);
• right (3 horas);
• bottom( 6 horas);
• left (9 horas).
Lembrando-se disso você
sabe o que vem primeiro e
será capaz de seguir a ordem
para expor os valores na de-
claração.
Existem ainda mais duas formas de abreviar ainda mais a declaração para “margin”.
A primeira forma você já viu anteriormente:
p {margin: 10px;}
A segundaforma é quando os valores da dupla “margin-top” e “margin-bottom” têm valores
iguais e a outra dupla “margin-right” e “margin-left” também têm valores iguais, só que os valores
entre as duplas são diferentes. Veja a declaração com as variações de “margin”:
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
Melhorando temos:
p {margin: 10px 20px;}
E a terceira e última forma é quando somente a dupla “margin-right” e “margin-left” tem valores
iguais. Veja abaixo:
p {margin: 0 40px 20px;}
Na declaração acima temos o primeiro valor de margin-top igual 0. O segundo valor, 40 pixels,
representa a dupla “margin-right” e “margin-left”. E para encerrar margin-bottom recebe 20 pi-
xels.
OBS: Quando um valor for igual à zero, ele não recebe nenhum tipo de unidade.
216 217
Padding
A propriedade “padding” determina o valor da espessura entre o conteúdo e a extremidade do blo-
co. Entenda-se extremidade do bloco como a área que delimita o elemento HTML.
A espessura é um preenchimento dentro do elemento HTML. Quando você determina um valor
para “padding” você distancia o conteúdo da borda elemento. Este comportamento permite que
se crie uma área de respiro dentro próprio Box. Isso ajuda a identificar o elemento como uma uni-
dade e facilita a leitura, pois o conteúdo não fica “grudado” na extremidade do bloco. E da mesma
forma que a propriedade “margin”, o “padding” também possui suas variações:
• padding-top - distância entre o conteúdo e a borda superior do elemento;
• padding-right - distância entre o conteúdo e a borda direita do elemento;
• padding-bottom - distância entre o conteúdo e a borda inferior do elemento;
• padding-left - distância entre o conteúdo e a borda esquerda do elemento;
E obviamente quando queremos determinar um valor igual para todos os lados usamos somente
a propriedade “padding”, assim como fizemos no seletor universal (padding:0).
E assim como na propriedade “margin” quando precisamos declarar todas as variações da proprie-
dade “padding” e elas têm valores diferentes é indicado usar a simplificação:
p {padding: 0 20px 15px 10px;}
Os tipos de abreviações e a ordem de expor os valores são os mesmos vistos no
tópico sobre margin.
Nota importante: Cuidado! Quando você determina um valor de padding maior que zero
para um elemento ele aumenta de tamanho. Imagine um bloco com 100 pixels. Ao atribuir
um “padding-left: 20px” o bloco aumenta para 120. Se quiser manter o bloco com 100 pixels
você terá que diminuir a largura para 80 através da propriedade “width”.
Diferenças entre margin e padding
Quando estamos aprendendo a desenvolver é normal confundirmos estas duas propriedades.
Porém com o tempo você verá que são muito diferentes. Para diferenciar tente se lembrar que
para afastar boxes vizinhos você aplica margin. E para afastar o conteúdo seja texto, imagem, ou
outro, da extremidade do Box, use padding.
A propriedade “margin” faz um Box se distanciar de blocos vizinhos e também da extremidade
do navegador.
218 219
Enquanto que a propriedade “padding” faz o conteúdo dentro do bloco se distanciar da sua ex-
tremidade.
Nota: Quando utilizamos o valor zero para as propriedades margin e padding
no seletor universal (*) estamos “limpando” os valores em elementos que já vem
padronizados pelos navegadores.
E fazemos isso, pois “resetando” podemos estabelecer os valores da forma que a
gente bem entender sem entrar em conflito com valores criados pelos navega-
dores, sacou?
Border
A propriedade “border” é responsável por especificar a espessura, o estilo e a cor
da borda do Box.
Existem várias propriedades e, consequentemente, valores para “border” que você pode usar.
Eles oferecem um grande leque de possibilidades. Isso por um lado é bom, porém pode ser uma
porta de entrada para um “mistureba” de estilos e poluições de todo tipo.
Lembre-se, menos é mais.
Border-style
Especifica o estilo da borda. E os valores para esta propriedade são:
• none;
• hidden;
• dotted;
• dashed;
• solid;
• double;
• groove;
• ridge;
• inset;
• outset.
Vamos deixar para você descobrir a aparência desses valores. Alguns são bacanas, outros nem
tanto. O mais usado, sem dúvida, e o “solid”. Ele deixa uma borda continua. Repare bem que a
maioria dos sites usa este valor.
Outros valores interessantes são o “dotted” que cria uma borda pontilhada e “dashed” que cria
uma linha tracejada. E em algumas circunstâncias usamos o valor “none” que não deixa borda
alguma.
220 221
Border-width
Especifica a espessura da borda. E os valores para esta propriedade são:
• thin: borda de espessura fina;
• medium: borda de espessura média;
• thick: borda de espessura grossa;
• length: uma medida reconhecida pelas folhas de estilo. Neste E-book usaremos pixels.
Esta propriedade não funciona sozinha. Você deve declarar o estilo da borda primeiro com
“border-style”. Veja no código abaixo:
div {
border-style: solid;
border-width: 2px;
}
Border-color
Especifica a cor da borda. Assim como na propriedade “color”, você pode determinar valores
através do nome da cor (em inglês) e até outros sistemas de cor. Neste E-book usaremos exem-
plos com o sistema hexadecimal.
Esta propriedade não funciona sozinha. Você deve declarar o estilo da borda primeiro com “bor-
der-style”. Veja no código abaixo:
div {
border-style: solid;
border-color: #000000;
}
Essas três variações da propriedade “border” coloca a borda nos quatros lados de um “Box”.
Mas ainda é possível colocar borda somente no lado que te interessa ou estilos, cores e espes-
suras diferentes, que podem ser aplicadas individualmente para cada lado do Box (Lembre-se do
mais é menos, hein!). Para isso acontecer existem também variações para essas três propriedades
apresentadas. Vamos a elas!
Para o estilo:
border-top-style, border-right-style, border-bottom-style e border-left-style.
Para a espessura:
border-top-width, border-right-width, border-bottom-width e border-left-width.
Para a cor:
border-top-color, border-right-color, border-bottom-color e border-left-color.
Nota: para cada lado que você especifica uma cor ou uma espessura, deve-se também
especificar um estilo de borda para que funcione. Veja código:
div {
border-top-style: dotted; /* Para que a espessura da borda declarada abaixo
funcione foi preciso declarar também um estilo para seu lado correspondente */
border-top-width: 10px;
border-bottom-style: solid; /* Para que a cor da borda declarada abaixo
funcione foi preciso declarar também um estilo para seu lado correspondente */
border-bottom-color: #ff0000;
}
222 223
Muito provavelmente você precisará usar algumas dessas propriedades, variantes de “border”,
apresentadas até aqui, em seus projetos. Apresentamos todas elas para que sirva de base e você
compreenda melhor o que vem a seguir. E o que vem é o 80/20 no que se refere à utilização de
estilos para borda.
E consideramos mais prático, fácil de usar e com menos chances de cometer atrocidades visuais.
Tudo consiste em você escrever a forma abreviada que engloba as regras para as propriedades
da borda, ou seja, uma declaração única. Segue exemplo:
div {border: 2px solid #000000;}
Veja que com a abreviação você consegue juntar o valor da espessura (2px) o estilo da borda (so-
lid) e a cor (#000000) tudo em uma declaração. E ainda ele fornece variações de propriedades
para você aplicar os três valores individualmente a cada lado:
• border-top;
• border-right;
• border-bottom;
• border-left.
A declaração abreviada e as variações de cada lado de um Box são as formas mais encontradas
em sites. Vamos ver como aplicá-las em um exemplo prático. Entretanto, além das bordas, vere-
mos todas a propriedades usadas no box-model em um exemplo completo.
Box-model (Exemplo completo)
O código a seguir é autoexplicativo. Disponibilizaremos em arquivo para que você possa alterar
e fazer experiênciasdiversas com as propriedades do box-model. Logo abaixo teremos algumas
outras observações.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Box-model (Exemplo completo)</title>
<style type=”text/css”>
* {
margin: 0; padding: 0;
}
body {
background-color: #ffe6a4;
}
#corpo {
background-color: #a8c8ca; width: 910px; height: auto; margin: 0 auto; padding: 0 25px;
border-left: 2px solid #f4b200; border-right: 2px solid #f4b200; overflow: hidden;
}
p {
width: auto; height:125px; padding: 25px 30px; font-size: 20px; text-align: justify;
}
.borda_quatro_lados {
background: #ddf0f1; border: 1px solid #000000; margin-top: 20px;
}
.borda_dois_lados {
background: #ffda78 url(bg2.png); border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000; margin: 20px 0;
}
.borda_tres_lados {
background: url(bg2.png); border: 1px solid #000000; border-top: none;
margin: 0 0 20px 0; height: auto;
}
</style>
224 225
Resultado:
Nota rápida: Você pode também colocar as declarações tudo em uma mesma linha em
vez de cada uma em linha própria. Foi o que fizemos com as folhas de estilo do exemplo
a seguir. A vantagem disso é que o arquivo fica mais leve e carregará mais rápido. A des-
vantagem é que demora um pouco para você procurar elementos no código.
</head>
<body>
<div id=”corpo”>
<p class=”borda_quatro_lados”>Este é um Box comum. Ele possui quatro áreas que compõe o box mo-
del. Possui especificada uma altura de 125 pixels, porém sua altura total é de 177 pixels quando somamos o
valor de height, mais os valores de padding-top e padding-bottom, e de border-top e border-bottom. Através
do “width:auto” ele se ajusta dentro da largura do elemento pai. E recebe em seu entorno uma borda sólida de
cor preta de 2 pixels de espessura. Não usamos imagem, somente uma cor de background.</p>
<p class=”borda_dois_lados”>As dimensões e características deste bloco são similares ao anterior. As
diferenças é que ele só recebe borda no topo e na base, sendo que a borda é pontilhada, e que ele possui pro-
priedades de background que insere uma imagem repetitiva, mais uma cor no fundo.</p>
<p class=”borda_tres_lados”>Este é um Box um pouco diferente em relação ao demais. Primeiro porque
não tem especificado uma altura fixa. Sua altura é influenciada pela área que o conteúdo ocupa por causa da
declaração “height:auto”. Segundo é que ele possui todos os quatro lados declarados com uma borda sólida,
porém só aparece três. Isso porque existe uma declaração “border-top:none” que impede a inserção de uma
borda no topo do Box. Mais atenção! Para isso dar certo, esta declaração tem que ser após a declaração que
insere as bordas. E por último é que, apesar de aparentar, este box não tem cor de fundo, e sim, somente uma
imagem tranparente repetida várias vezes. O azul que você vê é o fundo da div de ID “corpo”.</p>
</div>
</body>
</html>
226 227
Observações em relação à propriedade “width” aplicada no exemplo
A propriedade “width” foi utilizada em duas situações: a primeira para determinar uma largura
total de 910 pixels para o box central exercer a função de contêiner. A outra é quando ele recebe
o valor “auto” para que os três blocos filhos do contêiner se ajustem dentro da área delimitada
por ele, levando em consideração também outras propriedades CSS.
Observações em relação à propriedade “height” aplicada no exemplo
Para os dois primeiros blocos de conteúdo (azul claro, e laranja) foram estipulados valores iguais
de “height” (125 pixels). A não ser que você saiba o que está fazendo, nem sempre estipular um
valor fixo para esta propriedade é uma boa ideia, pois caso o conteúdo sobressaia à altura do
bloco teremos problemas no layout.
Quando for projetar um site onde o usuário é o responsável pela atualização do conteúdo é indi-
cado o uso da declaração “height: auto” no bloco onde aparecerá o conteúdo. O valor “auto” fará
que o bloco expanda automaticamente conforme a área do conteúdo cresça verticalmente.
O valor “auto” foi usado no contêiner e principalmente no terceiro Box filho onde visivelmente a
área de conteúdo é maior verticalmente que seus irmãos acima, ou seja, 125 pixels não seriam
suficientes.
Observações em relação à propriedade “margin” aplicada no exemplo
• Observação 1
A figura anterior mostra uma página com um box contêiner (ID “corpo”) de fundo azul e dentro
dele três boxes filhos. Ele serve para deixarmos um posicionamento do conteúdo centralizado,
muito comum em muitos sites.
Para que esta centralização ocorra você deve pegar o primeiro elemento HTML após “body” que
incorpora todos outros elementos e aplicar a declaração “margin: 0 auto” e uma largura. No nos-
so exemplo a largura é de 910 pixels.
Nesta declaração o que importa mesmo é o valor “auto”, que significa que o box alinha automa-
ticamente à margem da direita e da esquerda de “body”.
Existem outras formas de centralizar o bloco, porém esta é a mais simples e comum. Geralmente
os elementos HTML que servem de container são a “div” e o “section”.
• Observação 2
Foram usados quatros tipos de declaração da propriedade margin. Sendo:
• Uma variante de “margin” (margin-top: 20px);
• Uma que reúne todas as variantes de “margin” (margin: 0 0 20px 0);
• E duas abreviadas (margin: 0 auto) e (margin: 20px 0).
Observações em relação à propriedade “padding” aplicada no exemplo
• Observação 1
“Padding” foi usado como área de respiro para que os blocos internos não “grudassem” lateral-
mente na borda do box contêiner. Veja a declaração usada:
padding: 0 25px;
O valor zero indica que não houve a mesma preocupação com o topo e a base. Isso porque os
blocos internos criaram área de respiro nesta região através das propriedades “margin-top” e
“margin-bottom”.
228 229
• Observação 2
A propriedade “padding” também foi usada como área de respiro para que o conteúdo dos três
boxes internos não “grudassem” em suas extremidades, e resultasse em um aspecto visual inade-
quado. Veja a declaração usada:
padding: 25px 30px;
• Observação 3
As declarações usadas também foram abreviadas.
Observações em relação à propriedade “border” aplicada no exemplo
• Observação 1
A forma mais comumente usada na web é quando aplicamos a borda nos quatro cantos de um
Box. Conseguimos isso perfeitamente com a declaração única. Dois boxes receberam esta de-
claração única, o primeiro e último:
border: 1px solid #000000;
A diferença é que o último box só recebeu borda em três lados. Seu topo ficou sem borda. Para
que isso ocorra é preciso que após a declaração anterior de “border” você coloque outra decla-
ração indicando o lado que você não quer que apareça borda, usando o valor “none”.
Foi o que fizemos no exemplo:
border: 1px solid #000000;
border-top: none;
• Observação 2
O uso de variações de “border” para os lados também foram usados. No box contêiner usamos
bordas na laterais. Veja o código:
border-left: 2px solid #f4b200;
border-right: 2px solid #f4b200;
E no segundo box filho também aplicamos variações, só que desta vez, aplicamos no topo e na
base. E o estilo da borda também é diferente. Ela é pontilhada. Segue o código:
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
231230
Parabéns!!! Considere-se um campeão!!!
Estes dois últimos tópicos foram muito puxados, porém fundamentais para construção de
interfaces. É partir dos conceitos que foram apresentados nele que você terá a base para construir
blocos de conteúdo.
Sugiro que você reveja tudo que foi apresentado nestes dois tópicos e brinque com o arquivo
que deixaremos disponível. Mas antes que tal dar uma pausa para descansar?Celebre o que está conquistando, Galucho!!!
O código HTML e os arquivos usados até esta
etapa se encontram neste link para download.
Como funciona o CSS? Parte 4.5 - Outras proprie-
dades importantes
Com as propriedades que apresentadas você já possui bons recursos para estilizar grande parte
de elementos de um documento HTML, entretanto ainda é preciso apresentar-te outras proprie-
dades importantes que virá e mexe temos que aplicá-las. Então este tópico é dedicado a elas.
Começaremos com as propriedadades de posicionamento.
Position, top, right, bottom e left
“Position” é uma propriedade que permite posicionar elementos e , em alguns casos, até colocar
um elemento atrás de outro. Geralmente ele pode contar com as propriedades “top”, “right”, “bot-
tom” e “left” para deslocar os elementos.
Iremos usar a propriedade “left”, como exemplo. Se atribuirmos um valor de 20 pixels para “left”,
ele usará este valor para deslocar um elemento da esquerda para direita.
Também podemos usar valores negativos, como, por exemplo, -20 pixels. Isso permite um des-
locamento inverso ao anterior.
Imagine um sistema de coordenadas x e y dentro do seu navegador para posicionar os elemen-
tos.
Suponha agora que você quer posicionar um box em relação ao canto superior esquerdo do na-
vegador. Esse canto será o ponto da coordendada (0,0), ou seja, “left:0” e “top:0”.
Seu box ficará a 150 pixels da esquerda e 100 do topo que corresponde o ponto da coordernada
(150,100), resultando em um deslocamento CSS “left:150px” e “top:”100”. Isso reflete em um des-
locamento do bloco para direita e para baixo.
http://ebookhtmlcss.com/arquivos/capitulo-4.3-4.4/arquivos-para-download-8.zip
http://ebookhtmlcss.com/arquivos/capitulo-4.3-4.4/arquivos-para-download-8.zip
232 233
Tudo que o que descrevemos você pode ver no BLOCO 1 da figura acima.
Na mesma imagem temos o BLOCO 2. Ele se posiciona em relação ao seu elemento pai BLOCO
1. Então, imagine as coordenadas agora dentro do BLOCO 1.
O canto superior esquerdo deste bloco será o ponto da coordendada (0,0), ou seja, “left:0” e
“top:0”. Queremos que o BLOCO 2 fique a 250 pixels da esquerda e a 100 pixels do topo em rela-
ção a este ponto, portanto o ponto da coordenada é (250,100). Isso resulta em um deslocamento
CSS “left:250px” e “top:”100”.
É importante saber que esse grid com coordenadas é só para demonstrar como se comporta o
deslocamento, no caso, para as propriedades “left” e “top” e usando a declaração “position:ab-
solute” que falaremos mais a frente. Se usássemos as propriedades “right” e “bottom”, o grid se
inverteria e o ponto da coordenada (0,0) seria no canto inferior direito, com deslocamento posi-
tivos para esquerda e para cima.
Portanto quando colocamos valores positivos para as propriedades o elemento se desloca para o
sentido contrário do nome da propriedade. Veja:
• top: 20px - desloca um elemento 20 pixels para baixo;
• right: 20px - desloca um elemento 20 pixels para esquerda;
• bottom: 20px - desloca um elemento 20 pixels para cima;
• left: 20px - desloca um elemento 20 pixels para direita.
Voltando a propriedade “position”, saiba que ela possui quatro valores: static, absolute, fixed e
relative. Vamos falar sobre cada uma delas.
Posicionamento estático
Por padrão os elementos HTML já são posicionados de forma estática. Este posicionamento faz
que cada elemento siga o fluxo normal do documento. Segue exemplo de regra:
seletor_qualquer {
position: static;
}
Com ele não adianta declarar as propriedades “top”, “right”, “bottom” e “left” que não existirá des-
locamento. Veja a imagem a seguir:
234 235
A tela da imagem anterior mostra blocos que demostram exemplos dos tipo de valores da pro-
priedade “position”. Neste momento peço que foque somente no BLOCO 1 que está destacado
com a cor mais escura.
Neste bloco declaramos que ele deveria se deslocar 200 pixels do topo para baixo e também da
esquerda para direita. Porém o bloco não se moveu, ou seja, quando você declara “position:sta-
tic” ou quando você não declara nenhum dos outros tipos de valores, desta propriedade, nada
acontece.
Veja o código usado no Box:
#static {
position: static;
background-color: #272822;
width: auto;
height: auto;
padding: 20px;
top:200px;
left: 200px;
border: 4px solid #ffa200;
margin-bottom: 20px;
}
Foi inútil declarar “top” e “left”.
Importante observar é que se a intenção é manter um elemento estático não há necessidade de
declarar essa propriedade. Como já vimos antes, “static” é um valor padrão.
Posicionamento absoluto - Situação 1
Dentro do código do BLOCO 1 tem como elemento filho o BLOCO 2. Veja nessa versão resumida:
<div id=”static”>
<h2>BLOCO 1 - position: static</h2>
...
<div id=”absolute”>
<h2>BLOCO 2 - position: absolute</h2>
...
</div>
</div>
236 237
O posicionamento absoluto faz que um elemento se posicione em relação ao elemento pai. Isso
faz o bloco fique dentro do elemento ancestral. No caso BLOCO 2 dentro de BLOCO 1. Entretanto
acontece algo interessante nesta primeira situação. Veja a figura a seguir (foque no bloco escuro):
Veja que o BLOCO 2 não está dentro do BLOCO 1 como esperado.
O código indica que o elemento deva estar a zero em relação a direita e a base inferior do ele-
mento pai (canto inferior direito), mas o que vemos é que o BLOCO 2 está a zero em relação ao
navegador. Por que isso acontece?
Primeiro, vamos ver código:
#static #absolute {
position: absolute;
background-color: #272822;
width: 500px;
height: auto;
padding: 20px;
bottom: 0;
right: 0;
border: 4px solid #ff4163;
}
O próprio seletor CSS “#static #absolute” indica que o BLOCO 1 (#static) é o elemento pai do
BLOCO 2 (#absolute).
Só que o motivo pelo BLOCO 2 “escapar” do fluxo HTML é exatamente por culpa do elemento pai.
Estando o elemento pai (#static) posicionado de forma estática, faz com que o elemento filho
(#absolute) posicionado como absoluto, ignore o tipo de posicionamento do pai como referência.
Quando o elemento ancestral mais próximo estiver posicionado de forma estática ele procura-
rá o próximo ancestral que não esteja posicionado desta forma. E quando não existir este ele-
mento ele se posicionará em relação ao “viewport” representado pelo elemento raiz “HTML”.
Viewport é a parte visível do seu site em um dispositivo.
A sintaxe “seletor 1+ espaço + seletor 2” , indica hierarquia entre os elementos, onde o “seletor 1”
é o pai e o “seletor 2” é o filho. A regra CSS a seguir se aplica somente ao filho (seletor 2).
Essa é uma forma de sermos ainda mais específicos ao estilizar um elemento.
238 239
Posicionamento absoluto - Situação 2
Já sabemos que posicionamento absoluto faz que um elemento se posicione em relação ao
elemento pai. Porém isso somente ocorre quando o elemento pai não tiver um posicionamento
estático. No próximo exemplo mostraremos uma situação em que o elemento pai tem um posi-
cionamento diferente de estático:
Vemos na imagem que diferentemente da situação anterior o BLOCO 3 não “escapou” do fluxo
HTML e se posiciona dentro de seu elemento pai, o BLOCO 6. Isso ocorre porque o BLOCO 6 tem
um posicionamento relativo (falaremos mais a frente).
Veja o código:
#relative_com_deslocamento #absolute3 {
position: absolute;
background-color: #272822;
width: 450px;
height: auto;
padding: 20px;
bottom: 0;
right: 0;
border: 4px solid #ff4163;
}
O seletor CSS “#relative_com_deslocamento #absolute3” indica que o BLOCO 6 (#relative_com_
deslocamento) é o elemento pai do BLOCO 3 (#absolute3).
As propriedades right e bottom usando o valor zero faz com que o BLOCO 3 se posicione no can-
to inferior direito em relação ao BLOCO 6.
Uma das situações mais frequentes de uso (80/20) da propriedade “position” é quando usamos
o valor “absolute” em um bloco filho cujo bloco pai tenho o valor “relative”. Situação exposta no
exemplo deste subtópico.
Um elemento com posicionamento absoluto não deixa espaço vazio onde ele seria inserindo
normalmenteno documento.
Posicionamento fixo
Quando você pretende fixar um objeto na tela que independente da rolagem na página não saia
da posição, você deve usar este tipo de posicionamento.
240 241
O posicionamento “fixo” faz o elemento se posicionar em relação ao viewport. E também usa as
propriedades “top”, “right”, “bottom” e “left” para efetuar o posicionamento.
Um elemento com posicionamento fixo não deixa espaço vazio onde ele seria inserindo normal-
mente no documento.
Veja um exemplo de um elemento fixo (BLOCO 4) antes de efetuarmos uma rolagem na página:
Note que todos os blocos seguiram a rolagem mas o BLOCO 4 ficou lá na dele, “paradão”.
Segue o código usado nesse exemplo:
#fixed {
position: fixed;
background-color: #272822;
width: 580px;
height: auto;
padding: 20px;
top: 185px;
right: 0;
border: 4px solid #acff00;
}
Posicionamento relativo - Situação 1
Um elemento com posicionamento relativo pode ser movido para diferentes posições assim
como nos casos de “fixed” e “absolute”. Só que ele é posicionado em relação à sua posição normal
no fluxo da página. E a principal diferença é que sua posição original na página fica preservada
sem nenhum outro objeto ocupar seu lugar no fluxo.
Essa primeira situação mostra o posicionamento relativo com comportamento estático. Isso por-
que não foi declarado em conjunto com as propriedades de deslocamento “top”, “right”, “bottom”
e “left”.
Veja o código:
242 243
#relative_sem_deslocamento {
position: relative;
background-color: #272822!important;
width: 620px;
height: auto;
padding: 20px 20px 100px;
border: 4px solid #05f0ff;
}
Como não há deslocamento ele mantém sua posição normal que é praticamente um posiciona-
mento estático. Na imagem abaixo, o código anterior gerou o BLOCO 5.
Mesmo este bloco se comportando estaticamente é válido usar a declaração “position: relative”
,mesmo sem deslocamentos, quando o objetivo é posicionar elementos filhos com “position: ab-
solute”. Situação esta bastante comum e vista no exemplo com o bloco 3.
Posicionamento relativo - Situação 2
Agora aqui, na situação 2, efetivamente o posicionamento cumpre a função de fazer um elemen-
to se posicionar em relação a ele mesmo. Isso porque usamos as propriedades “left” e “top”.
Veja o código a seguir que representa o BLOCO 6:
#relative_com_deslocamento {
position: relative;
background-color: #272822;
width: 620px;
height: 400px;
padding: 20px;
top: -90px;
left: 30px;
border: 4px solid #05f0ff;
}
Temos algumas observações interessantes:
Usando “position: relative” e as declarações “top: -90px” e “left: 30px” o elemento se posiciona em
relação a sua colocação normal (posição sem estas declarações) e não em relação a um elemen-
to pai ou ao “viewport” como acontece com o posicionamento absoluto.
A declaração “top: -90px” faz que o BLOCO 6 tenha um deslocamento negativo para o topo em
relação sua posição normal. Este comportamento faz com que este bloco sobreponha o BLOCO
5 como você pode ver na imagem logo a seguir.
244 245
O fato de o BLOCO 6 ter um posicionamento relativo possibilitou que seu elemento filho, BLO-
CO 3, que possui posicionamento absoluto, não “escapasse” para se posicionar em relação ao
viewport, mantendo-o dentro do fluxo normal.
A seguir iremos aprender uma propriedade que também tem relação com posicionamentos.
ATENÇÃO: Trabalhar com a propriedade “position” requer planejamento, principalmente
quando desenvolvemos sites para dispositivos menores.
Z-index
Você já viu neste ebook que um elemento HTML possui uma hierarquia interna referente ao Bo-
x-model como composições internas que transmitem a sensação de sobreposições, ou podemos
dizer, empilhamentos das camadas internas no eixo Z.
Lembra-se desta imagem?
Existe um recurso CSS que possibilita sobreposições, só que agora de elementos HTML no eixo Z
(como camadas), que é a propriedade “z-index”.
De uma forma geral nos vimos, no subtópico anterior sobre posicionamentos, algumas sobrepo-
sições. Observe:
246 247
• Um elemento filho mesmo dentro de um componente ancestral está sobreposto visualmente
ao elemento pai;
• Um elemento não estático pode sobrepor um elemento com posicionamento estático;
• Elementos posicionados de forma não estática podem sobrepor um elemento que venha an-
teriormente a ele no documento HTML, independente do tipo de posicionamento.
E é nesta terceira observação que quero focar agora.
Se você criar três elementos com cor de fundos diferentes, porém com tamanhos iguais e posi-
cioná-los absolutamente no mesmo local o que irá acontecer? Veja o código:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Z-index</title>
<style type=”text/css”>
#bloco1 , #bloco2 , #bloco3 {
position: absolute;
width: 200px;
height: 200px;
font: 36px/5 sans-serif;
text-align: center;
color: #ffffff;
}
#bloco1 {
background-color: #0000ff;
top: 0;
left: 0;
}
#bloco2 {
background-color: #00ff00;
top: 0;
left: 0;
}
#bloco3 {
background-color: #ff0000;
top: 0;
left: 0;
}
</style>
</head>
</body>
<div id=”bloco1”>BLOCO 1</div>
<div id=”bloco2”>BLOCO 2</div>
<div id=”bloco3”>BLOCO 3</div>
</body>
</html>
Notamos na imagem ao lado
somente um bloco. Só que na
verdade sabemos que exis-
tem três blocos.
Vemos só um porque, como
foi dito na terceira observa-
ção, o elemento não estático
se sobrepõe ao elemento que
vem anterior no código.
E como todos estão na mesma posição visualizamos, então, somente o último elemento do fluxo
HTML que corresponde ao BLOCO 3.
248 249
Para temos certeza que todos três blocos estão na página vamos colocar no nosso código css
alguns deslocamentos.
Veja o código:
#bloco1 , #bloco2 , #bloco3 {
position: absolute;
width: 200px;
height: 200px;
font: 36px/5 sans-serif;
text-align: center;
color: #ffffff;
}
#bloco1 {
background-color: #0000ff;
top: 0;
left: 0;
}
#bloco2 {
background-color: #00ff00;
top: 100px;
left: 100px;
}
#bloco3 {
background-color: #ff0000;
top: 200px;
left: 200px;
}
Veja agora o resultado:
Conseguimos notar
a sobreposição que
ocorre e também que
o ultimo elemento
pode sobrepor os an-
teriores.
O que acontece é que
naturalmente os ele-
mentos posicionados
recebem um valor de
“z-ndex” mesmo sem
declararmos.
Então o BLOCO 1, recebe “z-index: 1”, o BLOCO 2 “z-index: 2” e o BLOCO 3 “z-index: 3”.
Só que em algum momento você pode ter a necessidade de alterar essa ordem e é aí que entra
a propriedade “z-index”.
No código anterior não declaramos esta propriedade,pois foi aplicada naturalmente pela ordem
dos blocos no HTML. Mas... Que tal interferir nesta ordem?
Então, ao inverter a ordem, os que apareceram primeiro no fluxo HTML e ficaram atrás, vão agora
sobrepor os que apareceram por ultimo no fluxo.
Veja o código (continua na próxima página):
#bloco1 , #bloco2 , #bloco3 {
position: absolute;
width: 200px;
height: 200px;
250 251
font: 36px/5 sans-serif;
text-align: center;
color: #ffffff;
}
#bloco1 {
background-color: #0000ff;
top: 0;
left: 0;
z-index: 3;
}
#bloco2 {
background-color: #00ff00;
top: 100px;
left: 100px;
z-index: 2;
}
#bloco3 {
background-color: #ff0000;
top: 200px;
left: 200px;
z-index: 1;
}
Agora o resultado:
O “z-index” traz essa possibilidade de
manipular os blocos como camadas
que se sobrepõe definindo quem ficará
na posição “mais alta” no eixo z. Vimos
como uma simples inversão, nos valores
das regras, fez com que o z-index igno-
rasse a ordem do fluxo HTML referente
a sobreposição.
Imagine quando você estiver alterando
o valor de uma camada com “z-index”
como se estivesse reposicionandocamadas (layers) no Phostoshop. O comportamento é similar.
E assim encerramos por aqui este assunto.
A seguir vamos falar de estilos de listas.
List-style
Quando fazemos uma lista ordenada (ol) ou não ordenada (ul), em um documento HTML, ela
resulta em marcadores na frente de cada item da lista. Lista ordenadas possuem uma ordem se-
quencial. E as não ordenadas podem gerar, dependendo do navegador ou dispositivos, listas com
marcadores quadrados, em formato de disco ou em círculos.
Através do CSS é possível dar mais vida a esses estilos ou até, como é normal em menus supe-
riores de navegação, eliminá-los. Isso tudo é possível através da propriedade “list-style” que é a
forma abreviada para as seguintes propriedades de listas:
• list-style-image – Que usa imagem como marcador da lista;
• list-style-position – Que indica onde o marcador da lista será posicionado, se junto ao texto ou
separado com uma indentação. As opções de valores são “inside” ou “outside”.
• list-style-type – Além do tipo do marcador da lista já citados ele mostra outras opções tanto
para ordenadas como para não ordenadas.
O uso de imagens no lugar do marcador, se sua preocupação com desempenho do site for gran-
de, pode não ser indicado.
Veja a sintaxe:
ul {
list-style-image: url(“seta.gif”);
}
252 253
Se o projeto exigir você pode usar imagens. Mas pense primeiro em uma solução usando um re-
curso que não precise delas.
Quanto ao “list-style-type” você pode optar por algum dentre uma pequena lista de valores.
Vamos focar naquelas com mais chances de você usar. Caso queira conhecer mais visite esta pá-
gina: http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list=-style-type&preval-
katakana-iroha
Agora veja este código para listas não ordenadas:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>List-style 1</title>
<style type=”text/css”>
.none {
list-style-type: none;
}
.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
li {
font-size: 18px;
}
</style>
</head>
<body>
<div>
<h1>Listas não ordenadas</h1>
<ul class=”none”>
<li>Lista sem marcador</li>
<li>Lista sem marcador</li>
</ul>
<ul class=”disc”>
<li>Marcador “disc”</li>
<li>Marcador “disc”</li>
</ul>
<ul class=”circle”>
<li>Marcador “circle”</li>
<li>Marcador “circle”</li>
</ul>
<ul class=”square”>
<li>Marcador “square”</li>
<li>Marcador “square”</li>
</ul>
</div>
</body>
</html>
http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=katakana-iroha
http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=katakana-iroha
254 255
Veja o resultado:
Agora alguns exemplos de listas ordenadas:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>List-style 2</title>
<style type=”text/css”>
.decimal {
list-style-type: decimal;
}
.decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.lower-roman {
list-style-type: lower-roman;
}
.upper-roman {
list-style-type: upper-roman;
}
. .lower-alpha {
list-style-type: lower-alpha;
}
.upper-alpha {
list-style-type: upper-alpha;
}
li {
font-size: 18px;
}
</style>
</head>
<body>
<div>
<h1>Listas ordenadas</h1>
<h2>Lista com decimal</h2>
<ol class=”decimal”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ol>
<h2>Lista com decimal-leading-zero</h2>
<ol class=”decimal-leading-zero”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ol>
<h2>Lista com lower-roman</h2>
<ol class=”lower-roman”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ol>
256 257
<h2>Lista com upper-roman</h2>
<ol class=”upper-roman”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ol>
<h2>Lista com lower-alpha</h2>
<ol class=”lower-alpha”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ol>
<h2>Lista com upper-alpha</h2>
<ol class=”upper-alpha”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 2</li>
</ol>
</div>
</body>
</html>
Veja o resultado:
258 259
Mas se tratando de listas você usará muito (muito mesmo) em menus. E geralmente o que vemos
por aí são listas sem marcadores. Isso se obtém da forma mais simples veja:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>List-style 3</title>
<style type=”text/css”>
#menu_principal ul {
list-style: none;
font-size: 18px;
}
</style>
</head>
<body>
<nav id=”menu_principal”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Portfólio</a></li>
<li><a href=”#”>Contato</a></li>
</ul>
</nav>
</body>
</html>
Veja o resultado:
No caso usamos a declaração “list-style: none;” para retirar os marcadores. A versão abreviada
“list-style” basta para essa função.
Falaremos agora da propriedade “float” e usaremos este código do menu para dar prosseguimen-
to, bele?
Float
A propriedade “float” especifica se uma elemento deve flutuar à esquerda, à direita ou não flutuar.
Os valores usados são “left”, “right” e “none”. Veja a sintaxe:
260 261
Seletor_qualquer {
float: left;
}
E o que seria este “flutuar”?
Flutuar consiste em empurrar um elemento para esquerda ou para a direita, permitindo que os
outros elementos possam organizar em torno dele. Entretanto aplica-se apenas aos elementos
que não estão posicionados de forma absoluta.
• Valor “left” - O box é empurrado para a esquerda. O conteúdo flui no lado direito, começando
no topo.
• Valor “right” - O box é empurrado para a direita. O conteúdo flui no lado esquerdo, começando
no topo.
• Valor “none” - O box não flutua para lado algum.
Usaremos o código do menu - que usamos no subtópico sobre List Style - com algumas altera-
ções. Incluiremos um “box” para telefone e outro com um link para o Facebook. Todos sem apli-
cação de float para podemos ver a situação antes e depois da flutuação.
Confira:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Float left 1</title>
<style type=”text/css”>
body {
margin: 0;
padding: 0;
}
#corpo {
width: 760px;
}
header {
display: block;
width: auto;
font-size: 18px;
}
#menu_principal ul {
list-style: none;
}
#menu_principal li {
margin-right: 10px;
}
#bloco1 {
background-color: #c8c8c8;
}
#bloco2 {
background-color: #f56e6e;
}
</style>
</head>
<body>
<div id=”corpo”>
<header>
<div id=”bloco1”>
<nav id=”menu_principal”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Portfólio</a></li>
<li><a href=”#”>Contato</a></li>
262 263
</ul>
</nav>
<p class=”fone”>Telefone: XXXX-XXXX<p>
</div>
<div id=”bloco2”>
<p class=”social”><a href=”#”>Facebook</a></p>
</div>
</header>
</div>
</body>
</html>
Veja o resultado:
Adicionamos o menu dentro de um “Box” cinza. Porém vemos, em questão de posicionamento,
que o menu continua da mesma forma e seguido logo abaixo pelo texto do telefone. Temos ainda
um “Box” vermelho com o link para a rede social.
Pois bem. O intuito agora é aplicar flutuações a direita e a esquerda. Usaremos três situações cor-
riqueiras:
Flutuando à esquerda [float-left]
Nosso menu está na posição vertical. Geralmente este tipo de posição é usada para navegação na
lateral de sites. Como queremos o menu no topo ficará mais adequado que cada item fique lado
a lado. Aplicando a declaração “float:left” os três itens da lista flutuam a esquerda se posicionando
lateralmente um após o outro. Caso você não queira que eles fiquem totalmente colados você po-
dem aplicar uma margem à direita. Foi o que fizemos:
#menu_principalli {
float: left;
margin-right: 10px;
}
Agora veja no navegador:
264 265
Flutuando à direita [float-right]
Agora o objetivo é deixar o texto do telefone à direita do menu. Como o menu, que está dentro
do elemento “nav”, recebe a declaração “float:left”, naturalmente o parágrafo que abriga o telefone
flutuou ao lado do menu. Ele está a direita do menu, porém ainda não é o que queremos. O que
queremos é que ele fique na extremidade direita do “box” cinza por efeito do “float:right” e não
empurrado à direita por consequência do “float:left”. Confira:
.fone {
float: right;
margin: 0;
}
Na imagem abaixo conseguimos colocar o texto do telefone à direita com “float:right”.
Posicionado um bloco a direita sem “float:right” [float-left + margin-left]
Por fim, você pode abdicar de posicionar um bloco o máximo possível para a extremidade direi-
ta usando “float:right”. Para isso basta que um bloco flutue à esquerda e você use a propriedade
“margin-left” com um valor que distancie o máximo possível o bloco flutuado em relação ao blo-
co à esquerda até atingir a extremidade direita do elemento pai. Foi o que fizemos com o “bloco
2” em relação ao ”bloco 1”.
Veja os códigos:
266 267
#bloco1 , #bloco2 {
float: left;
}
#bloco1 {
background-color: #c8c8c8;
width: 65%;
}
#bloco2 {
background-color: #f56e6e;
margin-left: 177px;
}
Esses blocos estão dentro de “header” que possui 760 pixels de largura. O “bloco 1” (que possui o
menu e o bloco do telefone) possui 50% deste valor. O que equilave a 380 pixels. A área do “bloco
2 “ (que possui o link para o Facebook) possui arrendondado 70 pixels.
Somando os valores das larguras dos blocos e subtraindo do valor de “header” obtemos o valor
total de quanto o “bloco 2” deve estar distante do “bloco 1”, que é 196 pixels, ou seja, “margin-left:
196px”. Confira:
Flutuações realizadas veja o código completo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Float 2</title>
<style type=”text/css”>
body {
margin: 0;
padding: 0;
}
#corpo {
width: 760px;
}
268 269
header {
display: block;
width: auto;
font-size: 18px;
}
#menu_principal {
display: block;
float:left;
}
#menu_principal ul {
list-style: none;
margin: 0;
}
#menu_principal li {
float: left;
margin-right: 10px;
}
.fone {
float: right;
margin: 0;
}
#bloco1,#bloco2 {
float: left;
}
#bloco1 {
background-color: #c8c8c8;
width: 65%;
}
#bloco2 {
background-color: #f56e6e;
margin-left: 177px;
}
</style>
</head>
<body>
<div id=”corpo”>
<header>
<div id=”bloco1”>
<nav id=”menu_principal”>
<ul>
<li>
<a href=”#”>Home</a>
</li>
<li>
<a href=”#”>Portfólio</a>
</li>
<li>
<a href=”#”>Contato</a>
</li>
</ul>
</nav>
<p class=”fone”>Telefone: XXXX-XXXX</p>
</div>
<div id=”bloco2”>
<p class=”social”>
<a href=”#”>Facebook</a>
</p>
</div>
</header>
</div>
</body>
</html>
Observação: Esse exemplo que vimos anteriormente no menu foca bastante em estruturar
blocos. De forma similar é comum vermos a propriedade “float” para estruturar layouts. Ele trou-
xe a possibilidade de substituir o método ultrapassado de estruturar layouts através de tabe-
las HTML. Contudo ele foi designado para
fazer o conteúdo fluir para o lado inverso
do elemento flutuante, ou seja, o conteú-
do flui para o lado direito de um “box” com
“float:left” e para o lado esquerdo de um
“box” com “float:right”, semelhante as dia-
gramações que vemos em revistas e jor-
nais, por exemplo. Por isso o float não é
considerado uma solução definitiva para
estruturar layouts e novas possibilidades
ainda estão sendo pesquisadas e criadas
pelos desenvolvedores.
270 271
Box-sizing
Você aprendeu na parte 4.4 que um box é formado por quatro composições que geram o box-
-model. Você já sabe também que todas essas composições podem ser controlados por nós atra-
vés das propriedades width, height, padding, margin, border e as variantes destas propriedades.
Quando você estipula um valor de 100px de largura para uma área de conteúdo a largura total
do box terá alteração devido a inserção de valores nas propriedades padding e border que serão
computados. Olhe o exemplo a seguir:
div {
width: 100px;
padding: 10px;
border: 10px solid #000;
}
Para esta div o valor da borda esquerda e direita e dos preenchimentos laterais serão computa-
dos fazendo a largura total ser de 140 pixels. E se não é exatamente isso que você quer? Você
será obrigado a fazer um cálculo compensatório onde retire, do valor de width, os 40 pixels das
bordas e dos preenchimentos laterais. Sendo assim a regra fica da seguinte maneira para atender
o esperado:
div {
width: 60px;
padding: 10px;
border: 10px solid #000;
}
Agora imagine a seguinte situação: dentro de uma div pai você tem dois elementos filhos que
você quer posicionar lado a lado utilizando float. Ambos tem 50%. E detalhe: eles possuem um
border e padding de 10 pixels. Vamos exemplificar com o seguinte código:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Verificando largura total do box-model</title>
<style type=”text/css”>
#container {
background-color:#E9E9E9;
width: 600px;
overflow: auto;
margin: 20px auto;
}
.left {
background-color: aquamarine;
}
.right {
background-color: tomato;
}
.left, .right {
width: 50%;
padding: 30px;
float: left;
}
</style>
</head>
<body>
<div id=”container”>
<div class=”left”>
Box esquerdo
</div>
<div class=”right”>
Box direito
</div>
</div>
</body>
</html>
272 273
Quando você está em dando os seus primeiros passos com CSS e deseja que dois elementos te-
nham 50% de tamanho do elemento pai, colocar um padding pode significar um respiro entre o
conteúdo e borda. Mas você consegue muito mais que isso, porque a largura total dos elementos
aumenta e não existe espaço disponível para que as caixas flutuem e fiquem lado a lado.
Segue o resultado da nossa codificação:
Foi estabelecida uma área total de 600 pixels para o contêiner pai. Como cada elemento filho
recebeu 50% de largura referente a pai, isso significa 300 pixels.
O problema que surge é a soma das larguras de padding referentes as laterais dos blocos, que
correspondem a 60 pixels, é adicionada a largura total de cada elemento resultando em 360 px.
Esse valor é maior que a metade da largura do elemento pai o que impede do box direito de flu-
tuar e se posicionar ao lado do box esquerdo.
Ao inspecionar com a ferramenta de desenvolvimento o box direito, nota-se que a largura total é
360 pixels decorrente das larguras de padding computadas, e que obviamente o espaço que sobra
é de 240 pixels, o que não é suficiente para posicioná-lo ao lado do box esquerdo.
274 275
Logicamente que você pode resolver este problema redimensionando cada box ao diminuir o
valor de width para 240 pixels. Com isso, ao somar a nova largura com as larguras das laterais de
padding, chega-se a 300 px de largura e permitindo que os boxes se ajustem perfeitamente.
Mas você não tem que fazer cálculo algum (só se quiser mesmo!). Para você não ter trabalho existe
a propriedade box-sizing.
A propriedade box-sizing
Box-sizing é uma propriedade de dimensionamento que pode alterar a propriedade padrãodo box
model. Ela efetua cálculos para largura e altura caso preenchimento e espessura da borda forem
incluídas à dimensão total do elemento.
Você pode utilizar os valores content-box e border-box.
O content-box é o valor padrão e traduz o comportamento que expusemos anteriormente.
O border-box é o valor que executa a mágica para que você não precise efetuar cálculos para
ajuste da largura total.
Com o border-box a largura e a altura do conteúdo são calculadas subtraindo as larguras das
bordas e preenchimentos dos respectivos lados onde o valor da dimensão foi especificado.
Lembra daquele exemplo onde estipulamos o valor de 100px para uma área de conteúdo? Vamos
agora entender o comportamento dele usando box-sizing com o valor border-box.
div {
width: 100px;
padding: 10px;
border: 10px solid #000;
box-sizing: border-box;
}
Como já falamos, o valor border-box calcula a largura do box subtraindo as larguras das bordas
e paddings laterais, fazendo com que a largura total seja o valor de 100 pixels. Se esta é a largura
total esperada para seu projeto, independente da presença de bordas ou preenchimentos, foi o
valor border-box que possibilitou isso.
Agora vamos recapitular aquela situação onde dois elementos devem ficar posicionados lado a
lado dentro do elemento pai.
Não vou o repetir aqui o código completo. Para seus estudos o arquivo HTML ficará disponível e
tudo que você tem que fazer é incluir a propriedade box-sizing com valor border-box na regra a
seguir.
.left, .right {
width: 50%;
padding: 30px;
float: left;
box-sizing: border-box
}
276 277
Desta vez os boxes esquerdo e direito que recebem 50% da largura do elemento pai e que resultam
em 300 pixels não tiveram valor da largura total acrescida devido aos valores de border e pad-
ding, porque esses valores foram subtraídos da largura do conteúdo. Com isso os boxes ficaram
perfeitamente, lado a lado, dentro do contêiner pai.
A grande vantagem é que nós não precisamos pensar nesse cálculo, pois o valor border-box “pen-
sou” nisso para gente.
Ao inspecionar com a ferramenta de desenvolvimento o box direito nota-se que a largura total
agora é de 300 pixels. A largura do conteúdo ficou pixels em 240 porque houve e subtração das
larguras das bordas e preenchimentos laterais.
Clear
A propriedade clear serve para controlar o comportamento de elementos flutuantes. Ele pode
“limpar” um flutuação e até eliminar comportamentos inconvenientes. O valores usados para
esta propriedade são “left”, “right” e “both”. O valor “both” aplica a propriedade simultaneamente
para o lado direito e esquerdo.
Vamos usar ,ainda, o menu anterior com o código alterado para esta situação.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Clear 1</title>
<style type=”text/css”>
body {
margin: 0; padding: 0;
}
#corpo {
width: 760px; height: auto;
}
header {
display: block; width: auto; font-size: 18px;
}
#menu_principal {
display: block; height: auto;
}
#menu_principal ul {
list-style: none; margin: 0;
}
#menu_principal li {
278 279
float: left; margin-right: 10px;
}
h1 {
background-color: #cfadbf;
}
</style>
</head>
<body>
<div id=”corpo”>
<header>
<nav id=”menu_principal”>
<ul>
<li>
<a href=”#”>Home</a>
</li>
<li>
<a href=”#”>Portfólio</a>
</li>
<li>
<a href=”#”>Contato</a>
</li>
</ul>
</nav>
</header>
<h1>Home Page</h1>
<p>Esta é a home page</p>
</div>
</body>
</html>
Veja o resultado:
Ao aplicar a regra do seletor “#menu_principal li”, para lista do menu, o conteúdo subsequente,
que é um título “h1”, deveria somente fluir ao lado direito. O conteúdo textual até está a direita,
porém se você olhar a cor de fundo que foi declarada no título dá para perceber que o “H1” envol-
veu o menu. E tem mais além de não querermos este comportamento inconveniente queremos
menos ainda o título ao lado do menu. Projetamos pensando no título logo abaixo do menu. E
como resolver essa parada?
Simples! Usaremos a propriedade “clear” com valor “left” para “limpar” esta flutuação.
Veja o código:
h1 {
background-color: #cfadbf;
clear: left;
}
280 281
Incluímos somente uma pequena linha dentro da regra. Agora vamos ao resultado:
Com isso se estabelece a ordem, porém devemos ficar atentos a sites que incluem conteúdos
dinamicamente. Nesses sites, se usássemos este exemplo e embutíssemos algum elemento antes
do título, o problema voltaria, só que neste novo elemento. Uma solução que alguns desenvol-
vedores utilizam é colocar um “div” vazia logo após aos blocos que contém dentro elementos
flutuantes. E nesse “div” um seletor para uma regra que contenha a declaração “clear: both”.
Seria algo do tipo:
• CSS:
.limpar {
clear: both;
}
• HTML:
<div class=”limpar”></div>
Display
A propriedade “display” especifica o tipo de caixa de renderização usada por um elemento ou até
desativar a exibição de um elemento. Esta propriedade dispõe de diversos valores para diferentes
finalidades. Uns são usados com bastante frequência, outras não. Vamos focar nos que atendem
nosso esquema 80/20, mas antes precisamos entender como os elementos se comportam en-
quanto Box por padrão.
A maioria dos elementos HTML se dividem em dois tipos: elementos em bloco e elementos em
linha.
Elementos em bloco:
Elementos em bloco ocupam todo o espaço horizontal disponível e iniciam uma nova linha no
documento. Este tipo cria uma divisão que separa visualmente o elemento anterior do próximo.
Veja o exemplo abaixo:
282 283
O trecho “por causa da presença de um elemento em bloco” isolou-se em um bloco próprio se
dividindo do resto do texto e tomando toda a largura disponível, como percebemos através do
“background” amarelo.
Isso acontece porque colocamos um elemento “p”, que é um elemento em bloco, no meio da
frase (<p> por causa da presença de um elemento em bloco</p>).
Alguns elementos em blocos são indicados para estruturar layouts, como por exemplo:
• div;
• section;
• aside;
• article;
• nav;
• footer;
• header.
Outros elementos em blocos que se destacam são:
• h1 até h6;
• ol;
• ul.
• p
Elementos em linha:
Ao contrário dos elementos em blocos, os em linha não ocupam todo o espaço horizontal dispo-
nível e não iniciam uma nova linha no documento. Como sugere o nome, esses elementos ficam
na mesma linha. Veja um exemplo:
284 285
Veja o que o elemento strong (<strong>um elemento em linha dentro de mim</strong>), por ser
inline, não inicia uma nova linha e somente ocupa a largura suficiente para expor o conteúdo ,
como percebemos através do “background” amarelo.
Alguns dos elementos em linhas mais usados são:
• span;
• a;
• strong;
• img;
Bom... Acabamos de conhecer os comportamentos de caixas padrão do HTML que definem ele-
mentos em bloco ou em linha. Mas se quisermos, a gente poderia mudar este comportamento
padrão?
Claro! Você pode Galucho!!!
E por isso que fizemos esta pequena introdução: para que você saiba que o CSS pode meter o
bedelho neste comportamento dos elementos HTML e que isso pode ser feito através da proprie-
dade “display”.
Para consulta posterior deixamos uma leitura complementar que relata o funcionamento de to-
dos os valores desta propriedade, neste link: http://www.maujor.com/tutorial/propriedade-css-
-display.php
Aqui iremos focar nos valores “inline”, “block”, “inline-block” e “none”. Começaremos com “inline”.
display:inline
Usamos o valor “inline” quando temos oobjetivo de deixar um elemento em linha.
Como exemplo vamos alterar o comportamento de bloco padrão de cabeçalhos atribuindo-lhes
o valor “inline”.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Display 3</title>
<style type=”text/css”>
#bloco h1 , #bloco h2, #bloco h3 {
background-color: #f2ff60;
}
#linha h1 , #linha h2, #linha h3 {
background-color: #f2ff60;
display: inline;
}
http://www.maujor.com/tutorial/propriedade-css-display.php
http://www.maujor.com/tutorial/propriedade-css-display.php
286 287
div {
margin-bottom: 60px;
}
</style>
</head>
<body>
<div id=”bloco”>
<h1>Nós permanecemos</h1>
<h2>como elementos</h2>
<h3>em bloco</h3>
</div>
<div id=”linha”>
<h1>Nosso comportamento</h1>
<h2> foi alterado para</h2>
<h3> elemento em linha</h3>
</div>
</body>
</html>
Na primeira “div” mantemos os cabeça-
lhos com sua característica padrão. Já
no segundo, mudamos todos eles para
elementos em linha através da declara-
ção “display: inline”.
Vamos ver o resultado?
Os três primeiros cabeçalhos seguiram utilizando-se da maior largura disponível. Já nos 3 últi-
mos até parecem ser um só elemento, se não fosse o fato do tamanho da fonte ser diferente. Não
existe inicialização de nova linha após cada cabeçalho. Todos ficaram na mesma linha e tudo isso
graças ao “display: inline”.
display:block
Usamos o valor “block” quando temos o objetivo de deixar um elemento em bloco.
Um exemplo de utilidade é quando precisamos usar links com uma área clicável maior do que
eles oferecem normalmente.
Entenda esta DICA MASTER: todo elemento inline não suporta width e também height. Eles igno-
ram estas propriedades. Para atendê-las só transformando os elementos em bloco.
288 289
Imagine que você precisa colocar uma chamada de ação bem chamativa, com um link tipo botão
e que ela deve ter a largura total da área disponível. Então para isso você precisará usar “display:
block”.
Achou complexo? Calma...Na prática é mais simples de entender. Veja a seguir:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Display 4</title>
<style type=”text/css”>
a {
display: block;
background-color: #ff0000;
with: 70%;
padding: 10px;
color: #ffffff;
font-size: 36px;
text-align: center;
text-decoration: none;
border-radius: 20px;
}
</style>
</head>
<body>
<a href=”#”>Clique aqui para baixar seu e-book</a>
</body>
</html>
Veja o resultado:
Exagerado não é? Eu sei... Mas é apenas um exemplo. :D
O importante é que ao se tornar um bloco, o link, conseguiu ocupar todo o espaço horizontal
disponível , que foi estabelecido pela declaração “width: 70%;”. No caso 70% em relação a “body”.
display:inline-block
Usamos o valor “inline-block” para criar elementos inline, mas preservando as características de
blocos, como a definição de largura e altura, margens superior e inferior, preenchimentos, etc.
É muito útil para colocar elementos lado a lado como em uma linha, só que com características
internas de bloco.
E como se mesclássemos uma sequência de “span” que naturalmente gera um conteúdo em li-
nha (<span></span><span></span><span></span>), porém com a possibilidade de, simultanea-
mente, definir largura, altura e outras características de elementos em bloco.
O valor inline-block possibilita colocar elementos lado a lado, por causa desta faceta inline, sem
290 291
precisarmos usar “float” e seus problemas, e nem precisar limpar nada com “clear”. Isso parece ser
muito bom.
Então agora proponho usarmos como exemplo o menu que utilizamos no subtópico sobre a pro-
priedade “clear”. Nele aplicaremos “display: inline-block” no elemento “li” em vez de “float: left;”.
Aproveitaremos também para deixar o menu com uma cara mais bacana.
Segue o código:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Display 5</title>
<style type=”text/css”>
body {
margin: 0; padding: 0;
}
#corpo {
margin: 0 auto; width: 760px; height: auto;
}
header {
display: block; width: auto; font-size: 18px;
}
#menu_principal {
display: block; height: auto;
}
#menu_principal ul {
list-style: none;
}
#menu_principal li {
display: inline-block;
}
#menu_principal li a {
background-color: #332E28;
padding: 10px 20px;
border: 1px solid #5E544A;
color: #C4B09C;
text-decoration: none;
}
.current , #menu_principal li a:hover {
background: #484037;
color: #E6D4C3;
}
#corpo section {
padding: 20px;
}
</style>
</head>
<body>
<div id=”corpo”>
<header>
<nav id=”menu_principal”>
<ul>
<li>
<a href=”#”>Home</a>
</li>
<li>
<a href=”#”>Portfólio</a>
</li>
<li>
<a href=”#”>Contato</a>
</li>
</ul>
</nav>
</header>
<section>
<h1>Home Page</h1>
<p>Esta é a home page</p>
</section>
</div>
</body>
</html>
292 293
Veja o resultado:
Não se atentando ao aspecto visual e focando no objetivo, vemos que foi cumprido a proposta
com o uso da declaração “display:inline-block” no lugar de “float:left”. E ainda economizamos
código ao retirar “clear: left” do elemento “h1”.
Cabe a você avaliar qual o melhor momento de usar “float” ou “display:inline”, testando em seu
layout e nos navegadores, pois cada um tem vantagens e desvantagens.
display:none
O valor “none” é usado quando você quer que um elemento não apareça no layout. Ele afeta
todos os elementos descendentes. É um valor muito usado para diferentes objetivos, como por
exemplo, esconder um elemento somente para uma resolução de tela, ou quando um evento
aciona uma função javascript para esconder um elemento. Seu uso é bem simples.
Veja um código de exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Display 6</title>
<style type=”text/css”>
div {
display: none;
}
</style>
</head>
<body>
<h1>Você pode me ver!</h1>
<div>
<p>Você não pode me ver e nem ao meu elemento pai.
Isso por que ele recebeu a propriedade “display:none”.</p>
<div>
</body>
</html>
Resultado:
294 295
Você pode ver o título e só. O parágrafo que vem após não é possível, porque ele está envolvido
por uma “div” que recebe a declaração “display:none” e não adianta colocar “display:block” no
parágrafo.. :)
Overflow
Traduzindo ao pé da letra o termo em inglês “overflow” temos como resultados o verbo “trans-
bordar” ou o substantivo “transbordamento”. E é assim mesmo que mais ou menos isso que
acontece algumas vezes com o conteúdo em um site. Ele pode “transbordar”, em elemento de
nível em bloco, não cabendo dentro de um box. E a propriedade “overflow” controla este “trans-
bordamento”.
Para você, Galucho, entender segue um exemplo de código:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Overflow 1</title>
<style type=”text/css”>
div {
background-color: #E6D4C3;
margin-left: 20px;
float: left;
width: 400px;
height: 200px;
padding: 20px;
font: 16px ‘sans-serif’;
text-align: justify;
}
</style>
</head>
<body>
<div class=”visible”>
<h2>Visible (padrão)</h2><p>Lorem ipsum dolor sit amet, ...
...usus legentis in iis qui facit
eorum claritatem....(continua)</p>
</div>
</body>
</html>
296 297
Veja o resultado:
Quando estipulamos, por algum motivo, uma altura fixa com a propriedade “height” estamos su-
jeitos a alguns problemas caso não tenha sido causado de modo proposital.
Na imagem acima vemos que o bloco possui uma altura delimitada pela área com cor, só que o
conteúdo transborda além da caixa, isto é, o valor de 200 pixels que foi estipulado para o box é
menor que área altura total da área de conteúdo.
Este transbordamento é algo visível. Estamos vendo e podemos dizer que o fato do navegador
possibilitar que possamos ver é que se trata de um comportamento padrão. E no CSS este com-
portamento padrão, declarado ou não, corresponde a declaração “overflow: visible”.
Visible é de visível e, no caso, deixa o transbordamento visível.
Para confirmar este comportamento padrão veja, no código anterior, que nem precisamos decla-
rar a propriedade “overflow”. É importante saber também que este padrão independe do conte-
údo caber ou não em uma caixa, porém fica mais fácil compreendê-lo com um exemplo onde o
conteúdo transborda.
Além do valor “visible”, o “overflow” possui outros valores para controlar o transbordamento do
conteúdo. São eles:
• overflow hidden:
Este valor indica que a área dos conteúdos que ultrapassarem o tamanho do box devem ser
ocultados. No caso a área que transbordou conteúdo não será vista.
• overflow: scroll:
Este valor indica que se devem mostrar barras de rolagem, para mover o conteúdo do Box
dentro de seu espaço. As barras de rolagem sempre aparecerão independente se a largura ou
altura da área de conteúdo for maior ou menor que a área do box.
• overflow: auto:
Com este valor, caso altura ou largura do bloco de conteúdo forem maiores que a do box, o
conteúdo fica oculto, porém com acesso para exibição via barras de rolagem, na vertical ou
na horizontal, que surgem automaticamente somente nestas condições. Caso o conteúdo
não ultrapasse de tamanho em alguma direção as barras de rolagem não aparecem.
Agora para entendermos melhor cada valor , vamos adaptar o ultimo exemplo exibido.
298 299
Replicaremos o código do box algumas vezes e adicionamos algumas regras CSS extras para
compreendermos todos os valores de “overflow”. Veja:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Overflow 2</title>
<style type=”text/css”>
div {
background-color: #E6D4C3;
margin-left: 20px;
float: left;
width: 200px;
height: 400px;
padding: 20px;
font: 16px ‘sans-serif’;
text-align: justify;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.scroll p , .altura p {
width: 250px;
}
.altura {
height: auto;
}
</style>
</head>
<body>
<div class=”visible”>
<h2>Visible (padrão)</h2>
<p>Lorem ipsum dolor sit amet, ...
...usus legentis in iis qui facit eorum claritatem.</p>
</div>
<div class=”hidden”>
<h2>Hidden</h2>
<p>Lorem ipsum dolor sit amet, ...
...usus legentis in iis qui facit eorum claritatem.</p>
</div>
<div class=”scroll”>
<h2>Scroll</h2>
<p>Lorem ipsum dolor sit amet, ...
...usus legentis in iis qui facit eorum claritatem.</p>
</div>
<div class=”auto”>
<h2>Auto</h2>
<p>Lorem ipsum dolor sit amet, ...
...usus legentis in iis qui facit eorum claritatem.</p>
</div>
<div class=”auto altura”>
<h2>Auto</h2>
<p>Lorem ipsum dolor sit amet, ...
...usus legentis in iis qui
facit eorum
claritatem.</p>
</div>
</body>
</html>
Veja o resultado:
300 301
Agora vemos cinco caixas:
A primeira, da esquerda para direita, percebemos que a área de conteúdo é maior que a área do
Box, portanto o conteúdo transbordou. Concluímos que foi usado aí, “overflow: visible”.
Na segunda caixa o conteúdo foi “cortado” na vertical. Isso porque usamos “overflow: hidden”
que impediu que o conteúdo transbordado na altura fosse exibido.
Na terceira caixa o conteúdo transborda tanto na horizontal como na vertical, mas mesmo que
não transbordasse o box continuaria exibindo as barras de rolagens graças ao “overflow:scroll”. E
é através delas que neste exemplo acessamos o conteúdo oculto.
Você pode usar propositalmente, dependendo do projeto, “overflow:scroll” junto com um a va-
lor fixo de altura para exibir conteúdo através de rolagem. E com isso ao invés do usuário usar a
barra de rolagem do navegador ele usará a rolagem do Box.
Na quarta caixa vemos que temos uma barra de rolagem verticalmente. Isso ocorre por causa de
duas condições: a primeira é que usamos a declaração “overflow: auto” e a segunda é que o área
de conteúdo é maior que a do box e precisamos da barra de rolagem para acessar o conteúdo
oculto.
Na quinta caixa acontece o mesmo que na caixa anterior. O que muda é que o conteúdo trans-
borda na largura e a barra de rolagem surge na horizontal.
Com isso encerramos a explicação sobre todas funções da propriedade “overflow”, porém não
poderia deixar de lado um comportamento de “overflow: hidden” que não sei o motivo (peço por
favor que me mandem e-mail quem souber) recupera layouts quebrados.
Eis o problema: Quando usamos elementos flutuantes com a propriedade “float” o contêiner an-
cestral não consegue abrigar esses rebeldes o que resulta em uma aspecto estranho no layout.
Para demostrar melhor, pegamos o código usado no exemplo sobre “display:inline-block”, demos
uma caprichada visual nele e substituímos a declaração “display:inline-block” por “float: left” para
expor o problema.
Você verá na imagem a seguir que na área do menu existe um fundo marrom que não cobre
totalmente os itens do menu. Isso porque no elemento usamos “float”. O mesmo ocorre com os
dois blocos de textos lado a lado após o título “Home Page”. Usamos o “float” nele e o box de cor
lilás que os deveria abrigar, não foi capaz.
302 303
Note que na área do menu existe um fundo marrom que não cobre totalmente os itens do menu.
Isso porque no elemento usamos “float”. O mesmo ocorre com os dois blocos de textos lado a lado
após o título “Home Page”. Usamos o “float” nele e o box de cor lilás que os deveria abrigar, não foi
capaz (para ter acesso a página clique neste link).
Certo! Mas onde é que a declaração “overflow:hidden” entra nesta história?
Poderia ser também “overflow: auto”, mas isso está sujeito a causar barras de rolagens indesejadas
se tiver algum problema no layout, então aplicamos “hidden” por ser mais garantido.
Portanto basta colocar a declaração “overflow:hidden” nos elementos que abrigam esses boxes
flutuantes. No caso, #corpo e #menu_principal.
Veja agora após a alteração:
Não é essa a função exata da propriedade “overflow”, mas que resolve este problema frequente,
isso resolve.
Então, se um dia você “trombar” com esse problema, você já sabe o que fazer! :D
Para ter acesso a página completa clique neste link.
http://ebookhtmlcss.com/arquivos/capitulo-4.5/overflow-3.html
http://ebookhtmlcss.com/arquivos/capitulo-4.5/overflow-4.html
304 305
Max-width, min-width, max-height e min-height
Estas quatros propriedades servem para restringir largura e altura em um determinado intervalo.
A seguir iremos ver como cada uma funciona.
max-width
Especifica uma largura máxima para o elemento. O valor pode ser fixo, tipo em pixels, ou relativo,
como em porcentagem.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Max-width</title><style type=”text/css”>
#um {
background-color: #5e544a;
margin: 0 auto;
width: 100%;
height: auto;
padding: 20px 0;
}
#dois {
background-color: #e6d4c3;
margin: 0 auto;
width: auto;
max-width: 900px;
height: 200px;
}
</style>
</head>
<body>
<div id=”um”>
<div id=”dois”></div>
</div>
</body>
</html>
Veja o resultado:
Temos um bloco “div” dentro de outro. O box pai (bloco escuro) possui 100% de largura em rela-
ção a “body” o que corresponde a 1308 pixels, no dispositivo usado para a construção do exem-
plo.
O bloco de cor clara tem declarado “width:auto” o que indica que ele automaticamente teria
também a largura de 1308 pixels. Porém a declaração “max-width: 900px” não permite que isso
aconteça, limitando a largura a 900 pixels, máximo valor este que a propriedade permite.
Se retirarmos a declaração “max-width: 900px” automaticamente o bloco claro assumirá a largu-
ra de 1308 pixels. Veja a seguir como o bloco claro assumiu toda a largura.
306 307
min-width
Especifica uma largura mínima para o elemento. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Min-width</title>
<style type=”text/css”>
#um {
background-color:
#5e544a;
margin: 0 auto;
width: 810px;
height: auto;
padding: 20px 0;
}
#dois {
background-color: #e6d4c3;
margin: 0 auto;
width: auto;
min-width: 900px;
height: 200px;
}
</style>
</head>
<body>
<div id=”um”>
<div id=”dois”></div>
</div>
</body>
</html>
Resultado:
Aqui o bloco escuro tem 810 pixels de largura. Como o bloco claro tem declarado “min-width:
900px” , ou seja, que ele deve possuir no mínimo 900 pixels de lagura, ele ignora os 810 pixels.
Se retiramos a declaração “min-width: 900px” automaticamente o bloco claro seguirá a declara-
ção “width: auto” e assumirá a largura de 810 pixels. Veja:
308 309
max-height
Especifica uma altura máxima para o elemento.
Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Max-height</title>
<style type=”text/css”>
#um {
background-color: #5e544a;
margin: 0 auto;
width: 70%;
height: 500px;
padding: 20px;
}
#dois {
background-color: #e6d4c3;
margin: 0 auto;
width: auto;
height: inherit;
max-height: 400px;
}
</style>
</head>
<body>
<div id=”um”>
<div id=”dois”></div>
</div>
</body>
</html>
Resultado:
Existe um valor em CSS denominado “inherit”. Quando uma propriedade usa “inherit” significa
que ela deve herdar o valor do seu elemento pai.
Neste nosso exemplo o bloco escuro tem 500 pixels de altura. Já o seu filho, bloco claro, deveria
herdar os mesmos 500 pixels porque declaramos “height:inherit”. Porém a declaração “max-hei-
ght: 400px” limita o bloco a 400 pixels de altura.
310 311
Se retiramos a declaração
“max-height: 400px” o bloco
claro herdará o valor de “hei-
ght” do elemento pai e assu-
mirá os 400 pixels de altura.
Conforme podemos ver na
imagem ao lado
min-height
Especifica uma altura mínima para o elemento. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Min-height</title>
<style type=”text/css”>
#um {
background-color: #5e544a;
margin: 0 auto;
width: 70%;
height: 400px;
padding: 20px;
}
#dois {
background-color: #e6d4c3;
margin: 0 auto;
width: auto;
height: inherit;
min-height: 500px;
}
</style>
</head>
<body>
<div id=”um”>
<div id=”dois”></div>
</div>
</body>
</html>
Resultado:
312 313
Neste caso o bloco escuro tem 400 pixels de altura. O bloco claro, deveria herdar os mesmos 400
pixels porque declaramos “height:inherit”. Porém a declaração “min-height: 500px” faz com que
o bloco ultrapasse a altura em 100 pixels, assumindo assim 500 pixels.
Se retiramos a declaração “min-height: 500px” o bloco claro assumirá a altura de 400 pixels.
Veja:
O uso desta propriedades é geralmente indicada quando trabalhamos com sites que se adaptam
a diferentes resoluções de tela e dispositivos. É o que chamamos de design responsivo, assunto
este, que trataremos mais a frente neste e-book. :)
Border-radius
É uma propriedade usada para definir “bordas arrendondadas” e dar forma a cada canto de um
elemento. E para isso é preciso do valor de comprimento do raio horizontal e do raio vertical de
um quarto de elipse.
Detalhes importantes:
• Caso um dos valores é omi-
tido os dois recebem o mes-
mo valor.
• Se qualquer comprimento
é zero o canto é quadrado.
• O background do elemento
também é arredondado mes-
mo que não seja declarado a
propriedade “border”.
Veja a seguir algumas sintaxes possíveis:
314 315
Quando os valores do comprimento do raio, tanto na horizontal, quanto na vertical são
iguais e aplicados igualmente em todos os cantos de um elemento.
seletor_qualquer {
border-radius: 100px;
width: 500px;
height: 200px
background-color: #ff0000;
}
Essa primeira situação é amplamente usada. Isso porque gera um box simples, útil e com cantos
arrendondados igualmente. Efeito muito encontrado na web.
Agora uma curiosidade. Se todos os cantos tiverem o mesmo valor, e se este valor for igual ou
maior a largura e a altura (altura e lagura com mesmos valores) de um elemento, obtemos um
círculo. Veja uma regra para isso:
seletor_qualquer {
border-radius: 300px;
width: 300px;
height: 300px
background-color: #ff0000;
}
Que tal vermos isso na prática? Segue um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Border-radius 1</title>
<style type=”text/css”>
#quadrado {background-color: #ff0000;}
#bordas-arredondadas {
border-radius: 50px;
background-color: #fff000;
}
#circulo {
border-radius: 300px;
background-color: #0000ff;
}
div {
width: 300px;
height: 300px;
display: inline-block;
margin-left: 30px;
border: 3px solid #000000;
}
</style>
</head>
<body>
<div id=”quadrado”></div>
<div id=”bordas-arredondadas”></div>
<div id=”circulo”></div>
</body>
</html>
316 317
Veja o resultado:
As três figuras da imagem acima possuem altura e largura iguais (300 pixels).
Na figura vermelha não foi declarado valor de “border-radius” por isso ela manteve as caracterís-
ticas de um quadrado. Já a figura amarela recebeu 50 pixels em cada canto do elemento o que
visualmente retorna os cantos arredondados. E como prometido vemos que na figura azul, por
usarmos valores de altura e largura iguais ao valor de “border-radius”, obtemos o círculo.
A regra para obter círculos é muito usada em conjunto com imagens de fundo quando quere-
mos, por exemplo, que uma foto nossa fique redonda.
Agora vamos continuar com mais situações e suas sintaxes.
Quando os valores do comprimento do raio na horizontal e na vertical são iguais, porém
diferentes nos quatros cantos.
seletor_qualquer {
border-radius: 40px 80px;
}
Canto superior esquerdo
e inferior direito = 40px.
Cantos superior direito
e inferior esquerdo = 80px.
Quando os valores do comprimento do raio na horizontal e na vertical são iguais, porém
diferentes em todos os cantos.
seletor_qualquer {
border-radius : 60px 0 90px 40px;
}
318 319
Quando os valores do comprimento do raio na horizontal e na vertical são diferentes,mas
aplicados igualmente em todos os cantos.
seletor_qualquer {
border-radius: 60px / 90px;
}
A regra anterior equivale a esta abaixo:
seletor_qualquer{
border-top-left-radius: 60px 90px;
border-top-right-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
border-bottom-left-radius: 60px 90px;
}
Quando os valores do comprimento do raio na horizontal e na vertical são diferentes e
aplicados igualmente em todos os cantos.
seletor_qualquer {
border-radius : 300px 80px 100px 60px / 160px 100px 80px 120px;
}
A regra anterior equivale ao código a seguir:
seletor_qualquer {
border-top-left-radius: 300px 160px;
border-top-right-radius: 80px 100px;
border-bottom-right-radius: 100px 80px;
border-bottom-left-radius: 60px 120px;
}
Existem outras possibilidades, mas para não estender o assunto aconselho que brinque com esta
propriedade e crie formas diferentes.
A seguir vamos falar sobre as “sombras” de um box ! :D
320 321
Box-shadow
A propriedade “box-shadow” possibilita efeitos de sombra em um Box. Veja a seguinte sintaxe:
Seletor_qualquer {
box-shadow: 10px 20px 5px #000000;
}
O primeiro valor é responsável pelo deslocamento horizontal da sombra. Quanto maior o valor,
mais deslocamento. No caso a sombra se desloca para direita. Valores negativos são permitidos,
o que faz a sombra deslocar para esquerda.
O segundo valor é responsável pelo deslocamento vertical da sombra. No caso a sombra se des-
loca para baixo. Valores negativos fazem a sombra deslocar para cima.
O terceiro valor é responsável pelo efeito “blur” na sombra. Alguns chamam de esfumaçado ou
borrão. Este efeito causa um desfoque que torna a sombra maior e mais leve. E se este valor não
for especificado a sombra recebe o valor zero, o que a torna mais nítida. Valores acima de zero
tornam o aspecto visual da sombra mais real. Quanto maior o valor mais leve e transparente é a
sombra.
O quarto valor é a cor da sombra. Imaginamos como sombra algo que possui cores acinzentadas
ao preto, porém você é livre para definir a cor que precisa.
Existe a possibilidade ainda de colocarmos a sombra dentro do “Box”, basta você usar também
valor “inset”. Veja:
Seletor_qualquer {
box-shadow: inset 10px 20px 5px #000000;
}
Ainda existe a possibilidade de você colocar múltiplas sombras em um mesmo “box”, para isso
basta que você separe os valores com vírgula. Para os criativos, isso possibilita obter efeitos inte-
ressantes. Veja a sintaxe:
Seletor_qualquer {
box-shadow: 10px 20px 5px #000000, -10px -20px 5px #ff0000;
}
Que tal então visualizarmos um exemplo prático? Vamos nessa?
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Box-shadow</title>
<style type=”text/css”>
#normal {
box-shadow: 7px 7px 15px #000000;
}
#negativa {
box-shadow: -7px -7px 15px #000000;
}
#inset {
box-shadow: inset 7px 7px 15px #000000;
}
#multiplas {
box-shadow:
-25px -25px #ff0000,
0 25px #00ff00,
25px -25px 0 #0000ff,
45px 45px 30px #ff0000,
0 -45px 30px #00ff00,
322 323
-45px 45px 30px #0000ff;
border-radius: 200px;
}
div {
background-color: #ffffff;
border: 2px solid #000000;
width: 200px;
height: 200px;
margin: 100px 50px; display: inline-block;
}
</style>
</head>
<body>
<div id=”normal”></div>
<div id=”negativa”></div>
<div id=”inset”></div>
<div id=”multiplas”></div>
</body>
</html>
Veja o resultado:
Podemos ver na imagem anterior quatro resultados com características diferentes.
Na primeira figura vemos a aplicação convencional da propriedade “box-shadow” usando a som-
bra externamente e com valores positivos para o deslocamento.
Na segunda figura mantemos a sombra externa só que usamos valores negativos.
Na terceira imagem destaca-se uso do valor “inset” para colocar a borda internamente.
Já a última imagem mostra como as folhas de estilos em cascatas são fantásticas.
Até um tempo atrás isso somente era possível através de um editor de imagens.
Em conjunto com a propriedade “border-radius” inserimos seis sombras diferentes variando des-
locamentos, cores, nitidez e transparência.
324 325
Essa última figura vai ficar de tarefa bônus para você avaliar o código fonte e brincar fazendo al-
terações.
A seguir continuaremos no assunto sombra, só que agora para textos.
Text-shadow
A propriedade “text-shadow” serve para adicionar uma sombra a cada letra de algum texto. É
muita parecida com a propriedade “box-shadow” só que aplicada a textos.
Vamos a sintaxe básica:
h1 {
color: #000000;
text-shadow: 2px 2px 5px #fff000;
}
O primeiro valor desloca a sombra para direita, caso usássemos um valor negativo o desloca-
mento seria para esquerda.
O segundo valor desloca a sombra para baixo, caso usássemos um valor negativo o deslocamen-
to seria para cima.
O terceiro é valor corresponde ao raio do efeito “blur” que será aplicado a sombra. Não usar este
valor ou especificar o valor zero fará que a borda seja sólida.
O quarto valor é a cor da sombra.
Esta propriedade também possibilita o uso de múltiplos valores para combinar sombras e dife-
rentes efeitos, com isso a criatividade não tem limites!
Vamos conferir agora no exemplo a seguir:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Text-shadow</title>
<style type=”text/css”>
body {
background-color: #f4f8fa;
padding-left: 30px;
}
#normal {
text-shadow: 3px 2px #001d2f;
}
#blur {
text-shadow: 3px 2px 3px #001d2f;
}
#negativa {
text-shadow: -3px -2px #001d2f;
}
#contorno {
text-shadow: 2px 0 #001d2f, 0 2px #001d2f , -2px 0 #001d2f , 0 -2px #001d2f ;
}
#multiplas {
text-shadow: 3px -3px #006db2 , 6px -6px #014068, 9px -9px #001d2f;
}
p {
font: bold 36px/40px Arial, sans-serif;
color: #009cff;
letter-spacing: 1px;
}
</style>
</head>
<body>
<p id=”normal”>Estou aprendendo CSS com o Chief.</p>
<p id=”blur”>Estou aprendendo CSS com o Chief.</p>
<p id=”negativa”>Estou aprendendo CSS com o Chief.</p>
326 327
<p id=”contorno”>Estou aprendendo CSS com o Chief.</p>
<p id=”multiplas”>Estou aprendendo CSS com o Chief.</p>
</body>
</html>
Resultado:
Conseguimos diferentes resultados em alguns casos com mudanças sutis nos valores.
No primeiro e no segundo textos usamos o mesmo valor de deslocamento e cor. A diferença
entre eles é que no primeiro não usamos “blur” o que resultou em uma sombra mais sólida em
comparação com a segunda onde desfoque deixou a sombra mais leve.
No terceiro os valores são os mesmos que o do primeiro só que negativos. Enquanto no primeiro
a borda se desloca para direita e para baixo, no terceiro se desloca para esquerda e para cima.
Já no quarto texto utilizamos múltiplos valores. Para conseguir este contorno foi preciso declarar
quatro valores sendo que em cada um deles possui um deslocamento zero em conjunto com um
deslocamento de 2 pixels para algum lado. E em nenhuma das declarações os lados se repetem.
Confira no código.
No quinto texto também usamos múltiplos valores, no caso 3. Usamos tons diferentes de azul e
para cada valor de deslocamento incrementamos 3 pixels (3, 6, 9) nas declarações para conseguir
o resultado.
Você pode testar diferentes tipos de situações com esta propriedade. É comum ,encontrar em sites,
estilizações mais discretas como no texto um e dois. Portanto sempre avalie bem. O menos é mais.
Caso você ainda tenha dúvidas sobre o uso de border-radius, box-shadow
e text-shadow, lembre-se que você, muito provavelmente, já viu algo muito
semelhante ao manusear os efeitos de algum editor visual, como por exem-
plo, o Photoshop.
O site gerador de efeitos http://layerstyles.org/builder.html mostra isso na
prática e com um layout muito parecido com o do Photoshop. Com certeza
você identificará melhor, casoainda tenha dúvidas, tudo o que dissemos até
aqui.
Existem vários geradores desse tipo na web, mas o ideal é que você não pre-
cise de algum para criar seus próprios efeitos. Não é pecado usá-los, mas é
sempre bom você saber fazer “ na unha” esses efeitos e só recorrer aos ge-
radores quando for algo muito complexo que você, mesmo sabendo, levaria
bastante tempo para fazer “na unha”.
http://layerstyles.org/builder.html
328 329
Parabéns!!!
Neste último capítulo cobrimos muitas propriedades importantes. É lógico que não foram todas.
Existem outras relevantes só que de uso restritos a algumas situações não tão frequentes. Como
você já sabe, o nosso intuito aqui é te passar o “crème de la crème” do CSS e ficar dentro do nosso
esquema 80/20.
Com a experiência você vai incorporando mais
propriedades ao seu conhecimento e seu reper-
tório aumentará, porém com o que você viu até
qui já dá para fazer muita coisa bacana.
Lembra quanto coisa interessante vimos só
nessas últimas propriedades?
Então que tal você rever tudo que foi apresen-
tados neste último capítulo e brincar com os
arquivos que deixaremos disponível?
Depois se dê uma pausa para descansar antes
de partir para o próximo capítulo. Você mere-
ce!!!
No próximo capítulo você entenderá como
construir layouts que se adaptam a diferentes
resoluções de tela.
O código HTML e os arquivos usados
até esta etapa se encontram
neste link para download
Introdução ao
Design Responsivo
http://ebookhtmlcss.com/arquivos/capitulo-4.5/arquivos-para-download-9.zip
http://ebookhtmlcss.com/arquivos/capitulo-4.5/arquivos-para-download-9.zip
http://ebookhtmlcss.com/arquivos/capitulo-4.5/arquivos-para-download-9.zip
330 331
Neste E-book construiremos um site passo a passo. Com as propriedades estudadas já seria
suficiente para isso se não fosse por um importante detalhe: hoje temos acesso a internet por
diferentes tipos de dispositivos com diferentes resoluções, e um site desenvolvido para desktop,
por exemplo, não vai ser portar bem em um celular. Por uma questão de usabilidade o site deve
adequar a estilização para esses diferentes dispositivos sem afetar o acesso conteúdo e as fun-
cionalidades.
Galucho, neste cenário devemos nos preocupar com a responsividade de nossos projetos.
O Design Responsivo consisti em garantir que os layouts projetados sejam adaptados a diferen-
tes tamanho de telas. E a forma responsiva que você projeta é uma resposta aos requisitos que
o tamanho da tela exige. O CSS, mais precisamente, as ”media queries” são as ferramentas que
farão você atender a esses requisitos. Pelo menos no que se refere a estruturar layouts.
Existem também preocupações como performance, imagens responsivas, entre outros, que fa-
zem parte do contexto do Design Responsivo e que não aprofundaremos aqui, pois o nosso foco
agora é apenas CSS.
E o que seriam “media queries”?
Ela são instruções CSS que fazem com que as páginas HTML, de acordo com as características do
dispositivo no qual estão sendo visualizadas, tenham diferentes comportamentos e estilos.
Esse é um assunto extenso que daria um livro inteiro. Portanto vamos focar mais na prática o su-
ficiente para desenvolvermos layouts responsivos. No final deste capítulo deixaremos referências
para aprofundamento, bele?
E como funciona as “media queries” na prática?
Bom.. Esse termo vem da Língua Inglesa e literalmente significa “consultas de mídia”. Usaremos
bastante este termo daqui para frente.
Um site projetado com media queries estabelece diferentes estilizações para diferentes tama-
nhos de tela. Quando este site é acessado por um dispositivo as medias queries fazem algumas
consultas ao navegador:
“ E ae navegador? Qual sua largura? Altura? Resolução? Que time que você torce? “
( Não! Esta ultima não! Hahaha)
Após esta checagem com o navegador ele compara as informações que tem declaradas em seus
parâmetros e retorna os estilos que se adaptam melhor as informações passadas pelo navegador.
Vamos explicar melhor isso com os códigos. Para usar as media queries você precisa saber as
resoluções de tela (altura e largura em pixels) dos dispositivos mais comuns. Usamos estas largu-
ras para estabelecer “breakpoints” que são pontos de quebras que determinam quando devemos
alterar as regras CSS.
Hoje em dia esta cada vez mais difícil saber o quanto de resoluções diferentes existem, porque
toda hora se lança um novo aparelho e cada vez mais parrudo. Mas para fins de estudos vamos
nos ater a estas larguras a seguir como breakpoints:
• 320 pixels
• 480 pixels
• 600 pixels
• 768 pixels
• 1024 pixels
• 1200 pixels
Teoricamente os dois valores abaixo atendem bem a alguns smartphones:
320 pixels
480 pixels
332 333
Então vamos a sintaxe:
@media only screen and (max-width: 320px){
/* Aqui dentro vai as regras CSS */
}
Como interpretamos esta sintaxe?
A sintaxe diz que as regras CSS incorporadas dentro dela só atenderão a dispositivos que tenham
monitores coloridos e no máximo 320 pixels de largura da tela.
Legal, né?
Agora outro tipo de sintaxe com outros valores.
As larguras que usaremos a seguir “teoricamente” atendem a alguns tipo de tablets:
@media only screen and (min-width: 600px) and (max-width: 760px){
/* Aqui dentro vai as regras CSS */
}
Podemos usar outras condições em nossas consultas de mídia, mas neste exemplo temos duas.
E uma delas é novidade! É a “min-width”. Ela restringe a largura a um “valor mínimo”.
No nosso exemplo ela especifica que as regras CSS incorporadas devem atender a dispositivos
que tenham no mínimo 600 pixels de largura. A outra condição restringe a tela no máximo a 760
pixels. Isso quer dizer que esta consulta se restringe entre 600 a 760 pixels.
Vale a pena reforçar que este valores de breakpoints não correspondem a verdade absoluta. Exis-
tem muitas outras resoluções intermediárias.
Uma consulta com valor máximo de largura de 1024 pixels atende a alguns tablets maiores, e
também alguns monitores de desktops e notebooks. Já uma consulta com 1200 pixels de largura
pode atender a telas largas widescreen. Portanto é preciso testar bem.
Uma forma de estabelecer um breakpoint é redimensionar a largura do seu navegador (com o
mouse clique na borda e arraste para esquerda/direita) e quando o site “quebrar” eis um novo
breakpoint. Com isso basta construir uma nova consulta de mídia , ou editar os valores de uma
já existente, para em seguida arrumar o problema, colocando uma nova regra CSS, dentro da
consulta.
Agora vamos ver o uso das media queries na prática para você entender visualmente o funcio-
namento.
Iremos construir uma página bem simples com três blocos de textos e cores de fundo diferentes.
Iremos também estabelecer três consultas de mídia. Para cada nova consulta um bloco de texto
ganhará cor de fundo. E teremos uma quarta situação onde o CSS padrão funciona para todas as
resoluções. Nesta situação todos os blocos não apresentarão suas cores de fundo.
Podemos trabalhar com consultas tanto com “max-width” quanto “min-width”. É bastante co-
mum encontrar sites que trabalham com “max-width”. Seja em projetos mobile-first (começando
a projetar para mobile) ou começando para desktop com adaptação do site para resoluções me-
nores.
Nos seguiremos o inverso do fluxo comum. Projetaremos este exemplo para mobile primeiro
com “min-width” (não conta que é segredo, mas o site que construiremos nos próximos capitulos
também :P) e adaptaremos para as outras resoluções maiores com media queries.
Por que isso? Por que somos loucos?
Sim também, mas porque acreditamos que é melhor para o usuário que você pense primeiro na
experiência dele no mobile do que no caminho inverso. Projetar para mobile faz que você não
caia no pecado de cometer excessos que projetar para uma tela maior primeiro pode causar, e
334 335
depois não saber como adaptar tanta informação visual em uma tela bem menor, sacou? Sem
contar que dá para ecomomizar muito código.
Então, com este E-book tentaremoste inserir na cultura de fazer as coisas pensando no usuário,
e o mobile first é um bom caminho a seguir. Porém no futuro cabe a você escolher.
Como usaremos “min-width” para consultas de mídia desenvolveremos o estilo padrão sem con-
sulta alguma. E conforme a tela aumente para 480 pixels a gente implementa as consultas a partir
deste valor. Ok?
Segue o código:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Media queries</title>
<style type=”text/css”>
body {
background-color: #a5c8de;
}
#largura-1 {
background-color: none;
}
p {
padding: 20px;
font: bold 18px/24px Arial, sans-serif;
color: #ffffff;
text-shadow: 3px 2px 3px #001d2f;
border: 1px dotted #000000;
}
</style>
</head>
<body>
<p id=”largura-1”>Todas as cores de fundo dos blocos desaparecem quando a largura que 480 pixels.</p>
<p id=”largura-2”>A cor de fundo verde aparece quando a largura é de no mínimo 480 pixels.</p>
<p id=”largura-3”>A cor de fundo vermelha aparece quando a largura é de no mínimo 760 pixels.</p>
<p id=”largura-4”>A cor de fundo azul aparece quando a largura é de no mínimo 900 pixels.</p>
</body>
</html>
Ainda não inserimos as media queries. Somente o CSS padrão. Ele será responsável por atribuir
regras comuns em todas as resoluções e algumas somente quando a resolução for menor que
480 pixels. Resolução esta que começamos.
Veja no HTML que afirmamos que ”no
primeiro parágrafo que todos o blocos
não terão suas cores de fundo quan-
do não tiver consulta de mídia”, o que
equivale a uma largura de tela menor
que 480 pixels em nosso caso.
Então veja visualmente, na figura ao
lado, como fica a página com o nave-
gador redimensionado abaixo de 480
pixels.
A única cor de fundo que vemos é o
azul claro de “body”. Os parágrafos es-
tão todos ainda sem cor de fundo e so-
mente com uma borda pontilhada.
Agora enfim colocaremos no final das
folhas de estilos padrão as novas media
queries.
Veja:
336 337
<style type=”text/css”>
body {
background-color: #a5c8de;
}
#largura-1 {
background-color: none;
}
p {
padding: 20px;
font: bold 18px/24px Arial, sans-serif;
color: #ffffff;
text-shadow: 3px 2px 3px #001d2f;
border: 1px dotted #000000;
}
@media only screen and (min-width: 480px) {
#largura-2 {
background-color: #297802;
}
}
@media only screen and (min-width: 760px) {
#largura-3 {
background-color: #d30000;
}
}
@media only screen and (min-width: 900px) {
#largura-4 {
background-color: #1e00d3;
}
}
</style>
Com o estilo padrão configurado para que em exatos 479 pixels de largura, que é o limite antes
da primeira media query, os blocos não tenham cor de fundo, basta agora clicar na borda lateral
esquerda do navegador e arrastar no mínimo 1 pixels para direita para que um dos blocos receba
uma cor de fundo.
Ultrapassando um pixels a direita entra-
mos na consulta de mídia que diz que
a partir de 480 pixels, o segundo blo-
co recebe um “background” verde. Isso
quer dizer que qualquer valor igual ou
acima de 480 pixels fará este bloco ter
cor no fundo.
Na próxima consulta de mídia, a partir
de 760 pixels, a cor de fundo do terceiro
bloco será vermelha.
338 339
Note que a cor de fundo do segundo bloco continua sendo verde, porque está dentro da con-
dição “no mínimo 480 pixels”. Se quisermos trocar a cor deste bloco quando estiver na faixa de
consulta de 760 pixels, isso é perfeitamente possível. Veja um exemplo:
@media only screen and (min-width: 480px) {
#largura-2 {
background-color: #297802;
}
}
@media only screen and (min-width: 760px) {
#largura-2 {
background-color: MUDAR AQUI O VALOR DA COR;
}
#largura-3 {
background-color: #d30000;
}
}
Veja que para mudar a cor de fundo do segundo bloco repetimos a regra dentro da consulta “@
media only screen and (min-width: 760px)” e alteramos a cor de fundo na declaração.
Bem simples!
Agora vamos para última media query (a que funciona a partir de 900 pixels).
Será ela que colocará a cor de fundo azul no último bloco que, até então, não tinha cor alguma
nas outras resoluções de tela.
Veja a seguir:
Este pequeno fundamento que apresentamos é para você compreender o funcionamento das
“media queries”. Quando redimensionamos a largura do navegador, tentamos simular dispositi-
vos. Caso, durante o redimensionamento, uma media query atenda à alguma resolução de tela
as novas regras CSS são aplicadas. E com isso você pode determinar o melhor layout para aquela
resolução de tela. Muito massa, né?
As possibilidades são diversas. Neste E-book iremos construir um site para atender algumas re-
soluções e tudo fará sentido.
Como exercício você pode usar este último exemplo e configurar as media queries com “max-wi-
dth” para ver o comportamento.
Também deixarei a seguir algumas referências sobre Design Responsivo, para consulta posterior:
340 341
Este artigo da Popup Design apresenta o conceito de Design responsivo e as vantagens de sua
utilização.
http://blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-por-que-usar/
Este outro é da mesma autora e é altamente indicado pois mostra como pensar em Design Res-
ponsivo antes mesmo sequer de criar uma linha de código. Ela mostra o processo de criação
focando em projetar a interface com rascunhos e wireframes, o que facilita muita a nossa vida
antes de partir para o desenvolvimento. Leitura indispensável:
http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/
Como já tido antes, pela variedade de dispositivos, não é possível estabelecer que alguns bre-
akpoints vão fazer seu site atender a todas variedades de resoluções de tela. Podemos citar tam-
bém que existem frameworks que propõem breakpoints que promovam uma experiência ao
usuário da melhor forma possível. Você pode pesquisar no Google sobre “frameworks CSS”.
Só que mesmo assim nenhum framework atenderá a todos ou algum novo dispositivo. E para
isso sugerimos uma solução mais avançada e precisa que é usar medias queries baseadas no
conteúdo da página. Por isso sugerimos a leitura deste artigo do Sérgio Lopes:
http://sergiolopes.org/media-queries-conteudo/
Enfim, encerramos uma parte importante que ajudará em muito nos próximo passos deste E-book.
Sugiro que revise este capítulo e leia as referências. Te aguardo no próximo capítulo para proje-
tarmos juntos um site.
O código HTML e os arquivos usados até esta
etapa se encontram neste link para download.
Proposta para a
construção de site
http://blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-por-que-usar/
http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/
http://sergiolopes.org/media-queries-conteudo/
http://ebookhtmlcss.com/arquivos/capitulo-5/arquivos-para-download-10.zip
http://ebookhtmlcss.com/arquivos/capitulo-5/arquivos-para-download-10.zip
342 343
Chegamos em um estágio onde é fundamental repassar o conteúdo fornecido em um contexto
mais próximo da realidade que você irá encontrar.
Por isso propomos a construção de um site onde usaremos seus conhecimentos prévios e recém
adquiridos sobre HTML, juntamente com os tópicos sobre CSS que foram apresentados e incor-
porados ao seu conhecimento, conforme o site for produzido.
Você perceberá que o esquema 80/20 faz sentido. Porém, eventualmente entrará um ou outro
elemento novo que foge ao esquema, mas que aumentará seu leque de conhecimento.
O site será um portfólio fictício do Designer “Galucho”. E contará com elementos suficientes para
divulgação dos seus trabalhos como uma página inicial, uma área de apresentação dos trabalhos
e outra para dados de contato e integração com as redes sociais.Esse seria o “briefing básico” para o nosso projeto já que não aprofundaremos em questões como
objetivo de comunicação e de marketing, público alvo, estética, entre outras.
Reforçamos que este é um livro sobre HTML/CSS. Porém para termos um site funcional e visual-
mente agradável atentaremos a alguns aspectos que garantem a usabilidade, navegabilidade e
uma boa disposição dos elementos da interface.
Você sempre pensará em todos os aspectos do Design, entretanto para esses exercícios adotare-
mos um template que foi reformulado para este fim didático e de acordo com os aspectos citados
acima.
Alguns profissionais projetam suas interfaces direto no código. Sugerimos que você defina a es-
trutura de páginas e navegação, crie um esboço, depois transporte as ideias para seu editor visual
favorito (Photoshop e Fireworks são indicados) para depois transportar o layout para codificação.
Veremos a hierarquia do site através de um diagrama e depois o Wireframe do nosso site.
Estrutura do site
Antes de começar a um criar site, é importante pensar
como será a estrutura dele (qual o caminho de tal página,
qual ação do usuário o levará para tal página, onde ficará
cada diretório, definir a hierarquia do conteúdo, etc).
Para ajudar nessa tarefa, podemos usar um diagrama sim-
ples. Você pode criar um diagrama para definir a hierar-
quia e organização do seu do seu site.
Você pode fazer com lápis e papel, em um quadro bran-
co usando postit ou em softwares e serviços online.
O importante é você planejar a sequência lógica do seu
site, estruturando-o da melhor maneira possível.
Reservar um tempo, antes de sair fazendo as coisas no Photoshop, para planejar e estruturar o
seu site, mesmo que ele seja simples, pode te facilitar a vida tanto na criação quanto no desen-
volvimento das páginas.
Você pode achar essa parte chata e trivial, mas com certeza se algo der errado durante a execu-
ção do projeto, você lembrará dela. Não que ela seja um “escudo anti-bugs”, não é isso, mas um
bom planejamento pode facilitar a sua vida te ajudando a “encontrar possíveis erros” antes mes-
mo deles se apresentarem.
Então antes de sair fazendo, pare e pense no seu projeto como um todo!
344 345
Wireframe
O wireframe é um esboço, uma simulação de como a interface deverá funcionar. Basicamente é
unir todas as informações que colhemos no briefing para o papel, de um modo estruturado pre-
vendo como será a construção.
O site do Galucho, para fins didáticos atenderá três resoluções de telas diferentes: Smartphone,
Tablet e Desktop .:
Logo, ele retrata o layout , de forma simples, da página organizando o conteúdo e os elementos
da interface no espaço que pretendemos usar. Além de fornecer toda a estrutura para o designer
elaborar o layout, ele fornece os elementos funcionais (como a navegação, por exemplo) que
serão usados por um desenvolvedor.
Existe várias ferramentas específica que auxiliam para construção do Wireframe, pode até ser
feito com lápis e papel, mas no nosso caso usaremos um editor visual.
A ideia é que o wireframe seja guiado em uma coluna única para resoluções menores que 480
pixels (celulares), e que para resoluções maiores, incluindo dispositivos como tablets e desktops
ele seja guiado em três colunas. Porém nada impediria que ele fosse guiado por 6 colunas de lar-
gura menor, ou por nove. Basta você decidir. No nosso exemplo usaremos:
• Três colunas;
• Quatros espaçamentos multiplicado por 20 pixels, isto é, 80 pixels
• Largura do site de 980 pixels, e subtraindo os 80 pixels dos espaçamentos. Teremos então 900
pixels de área.
• Para a largura de cada coluna iremos dividir 900 pixels pela quantidade de colunas que usare-
mos, no caso três(3). Chegaremos então a 300 pixels por coluna.
No nosso projeto o uso das colunas visa facilitar o alinhamento e posicionamento dos elementos
e conteúdo, como por exemplo, o posicionamento e alinhamento das três imagens que apresen-
tam trabalhos do portfólio do Galucho na versão para tablet e desktop.
Veja a seguir:
347346
Podemos ver que as imagens
terão o mesmo tamanho de-
finido pela área delimitada,
que existe um alinhamento
adequado entre os elemen-
tos, existe também dois es-
paçamentos entre as colunas
a qual chamamos de áreas
de respiro e duas nas extre-
midades. Estas áreas propor-
cionam organização e har-
monia.
Do wireframe
para o PSD
Ferramentas como Pho-
toshop e Fireworks possibi-
litam estruturar seu layout.
Para isso você precisa co-
nhecer seu conteúdo para
saber como imagens, tex-
tos, vídeos, se comportam
dentro de uma coluna ou
bloco criado por você. Você
deverá ter em mãos uma
calculadora. E utilizar as li-
nhas guias do editor.
Veja agora o layout definiti-
vo que iremos usar:
Detalhe importante: Essa divisão em colunas é apenas
para auxiliar na criação do wireframe. Com o passar do
tempo você encontrará outras fomas de diagramação para
web. Você é livre para modificar esse exemplo se achar
necessário , como por exemplo, adicionando mais colunas,
aumentando a largura do site, diminuindo ou aumentando
os espaçamentos, etc.
348 349
Codificação do
site Galucho
Agora começaremos a montar efetivamente o site do Galucho com os códigos HTML e CSS. A
primeira etapa é construir uma página modelo que possuirá somente os elementos comuns en-
tre todas as páginas. Por exemplo: o topo, com a integração das redes sociais, o menu e o slogan,
e também o rodapé, com as informações de contato.
Essa página modelo não será usada no site, entretanto ela serve de modelo para construir as ou-
tras páginas do site. O intuito é duplicá-la para não perdermos tempo construindo os mesmos
elementos em cada página. Sacou? Com isso bastará a você incluir em cada página os elementos
que não são comuns entre as páginas. Você ganhará muito tempo com isso.
Separaremos o desenvolvimento nas seguintes etapas:
1. Montar a estrutura HTML comum em todas as páginas do site dentro da página modelo;
2. Estilizar, com folhas de estilo, esta estrutura para resoluções menores que 480 pixels;
3. Estilizar a estrutura para resoluções de até no mínimo 480 pixels;
4. Estilizar a estrutura para resoluções de até no mínimo 767 pixels;
5. Estilizar a estrutura para resoluções de até no mínimo 991 pixels
6. Salvar cópias do modelo para construção da Home Page e da página de portfólio;
7. Completar o restante dos códigos HTML da Home Page;
8. Finalizar a estilização da Home Page para resoluções menores que 480 pixels;
9. Finalizar a estilização da Home Page para resoluções de até no mínimo 480 pixels;
10. Finalizar a estilização da Home Page para resoluções de até no mínimo 767 pixels;
11. Finalizar a estilização da Home Page para resoluções de até no mínimo 991 pixels;
12. Completar o restante dos códigos HTML da página de portfólio;
13. Finalizar a estilização da página de portfólio para resoluções menores que 480 pixels;
14. Finalizar a estilização da página de portfólio para resoluções de até no mínimo 480 pixels;
15. Finalizar a estilização da página de portfólio para resoluções de até no mínimo 767 pixels;
16. Finalizar a estilização da página de portfólio para resoluções de até no mínimo 991 pixels;
Então , vamos começar! Vamos nessa? :)
350 351
7.1 - Montar a estrutura HTML comum em todas
as páginas do site dentro da página modelo
Existem quatro elementos que compõe a estrutura comum entre as páginas do site. São eles:
• O corpo do site;
• O topo;
• O Box de conteúdo;
• E o rodapé.
Começaremos desenvolvendo os códigos HTML para o corpo do site.
O corpo do site
Primeiramente colocaremos uma estrutura inicial que consiste nos elementos HTML fundamental
e um box contêiner <div id=”container”></div>. Veja a seguir:
Depois de montada esta estrutura salvaremos como “modelo.html”.
Como você já bem sabe, esta codificação não é suficiente para apresenta conteúdos, nem estilos.
Somente uma página vazia com o título “modelo” na barra do topo do navegador.
O topo
O próximo passo é criar,conforme nosso layout, os códigos para o topo do site. Reforçando que
estes se repetirão nas páginas do site. Então, entre as tags “div” do contêiner insira o elemento
HTML <header></header>.
Para reforçar, sabemos que o elemento “header” surgiu com o advento do HTML5, e como já dis-
semos neste E-book, uma de suas funções é agrupar os elementos do topo do site. No caso do
site do Galucho ele abrigará:
• A área dos botões de redes sociais;
• O menu de navegação;
• A área que abriga o logo do site;
• E a área que abriga o slogan.
Vamos prosseguindo, Galucho!
352 353
Agora iremos rever conceitos de HTML que vimos no começo do E-book.
Área dos botões de redes sociais
Vamos mostrar agora entre as tags do elemento “header” os códigos necessários para a área dos
botões de redes sociais.
Como você pode ver colocamos imagens (ícones) de três redes sociais. É uma pequena lista com
três itens, por isso usamos os elementos “ul” e “li”. Como o objetivo principal desta lista e levar o
usuário para estes sites externos, as imagens ficam dentro de links.
Se você olhar esta nova página no navegador só verá três “bullets” que indicam que temos ali uma
lista. Mas cadê as imagens? As três imagens das redes sociais estão ali. Você só não enxerga, por-
que elas possuem cor branca. Quando colocarmos uma cor de fundo para o site elas aparecerão.
Nota: Estas páginas do Galucho são fictícias, portanto não tem
endereço, por isso colocamos o sinal # no lugar das urls.
O menu de navegação
Logo após o fechamento da “div” da barra social colocaremos o código abaixo:
Este bloco de códigos contém a segunda lista do site que exerce a função de menu. E como este
menu é a principal navegação do site semanticamente usamos o elemento “nav” que advém do
HTML5 para agrupar os elementos da navegação.
Os itens deste menu possuem links que apontam para a home page, para a página de portfólio e
para uma seção interna de cada página que fica no rodapé e que apresenta os dados de contato.
Um ponto estranho neste código é uma “div” vazia que vem dentro do elemento “nav”. Veja:
<div id=”combo-holder”></div>
Vou deixar para explicá-la mais a frente. Eu só antecipo que ela serve para inserir dinamicamente
outra forma de navegar pelas páginas do site e mostrar essa forma quando acessado por dispo-
sitivos com resoluções abaixo de 480 pixels. Agora vamos cuidar da área do logo.
A área que abriga o logo do site
Após o fechamento da tag </nav>, é hora de inserir os códigos para criação da área e inserção
do logo. Veja a seguir:
354 355
Neste código colocamos uma “div” que servirá de bloco contêiner para centralizar o logo.
A imagem do logo está dentro de link que aponta para a Home Page, por questão de usabilidade.
Geralmente o usuário espera que ao clicar no logo de um site ele seja direcionado para página
inicial. E por uma questão de acessibilidade não podemos esquecer-nos de colocar o atributo
“alt” que indica aos leitores de tela a denominação da imagem. No nosso caso “Logo do Galucho”.
A área que abriga o slogan
Para encerrar a área do topo colocaremos os códigos responsáveis pela área do slogan.
Veja a seguir:
Para abrigar o slogan, criaremos através de HTML e CSS um laço de fita que atravessa o corpo do
site. Para isso colocamos dentro um box contêiner (<div id=”slogan”></div>) códigos que inse-
rem dois boxes vazios (sem conteúdo) e que visualmente serão as extremidades da fita, e um box
que abriga o título do slogan. O termo “ribbon” quer dizer fita, laço de fita, faixa.
Você compreenderá como funcionará o laço de fita quando aplicarmos as folhas de estilos.
Encerramos por aqui os códigos para o topo.
O Box de conteúdo
O box de conteúdo será uma área logo após a tag de fechamento </header> do topo. Esta é a
área que pode apresentar elementos diferentes entre as páginas do site. Como nem sempre o
conteúdo entre páginas de qualquer site é parecido não é conveniente, ao construir uma página,
inserir elementos que não vão se repetir em outras páginas. Portanto a única coisa que coloca-
remos aqui é um box que demarca toda a área de conteúdo. Simples assim:
<div id=”main”>
</div>
Quando formos construir as páginas individualmente, tudo que temos que fazer é inserir os ele-
mentos HTML e conteúdos das respectivas páginas dentre deste código anterior.
O termo “main” é muito usado em alguns sites. Você verá isso em algumas manutenções. Está
relacionado com “principal”. No contexto podemos entender a área de conteúdo como sendo a
principal.
O Rodapé
Usamos o rodapé do site para passar informações de contato fictícios do Galucho e também para
informar sobre direitos autorais.
Para a área do rodapé é comum usar o elemento HTML “footer” em documentos HTML5. Usamos
aqui, porém reforçamos que você pode usá-lo em outras seções do site.
356 357
Para o cabeçalho H2 usamos um ID chamado “cabeçalho” que serve tanto de seletor para o CSS,
como também para destino de seção, para aquele link do menu contato que inserimos lá no topo,
se lembra?
Os dados de contatos estão inseridos através de listas com links e os direitos autorais em um pa-
rágrafo. Com isso já montamos a estrutura padrão do site. Veja o código na íntegra, na imagem
a seguir.
Depois o próximo passo será estilizar esta estrutura para resoluções menores que 480 pixels.
Nota: podemos notar também que vários atributos “class”, que podem ser-
vir tanto para estilização dos elementos quanto para uma função que não
faz parte do escopo deste e-book, e que deixaremos como lição de casa
para você pesquisar em outro momento.
Os atributos class=”vcard” , class=”fn”, class=”tel” e class=”email” fazem par-
te de uma forma de fornecer conteúdo semântico através de uma série de
especificações chamadas de Microformatos (Microformats). Estes servem
para representar coisas comumente publicadas em sites como pessoas, or-
ganizações, eventos, reviews, entre outras.
Para saber mais visite este link: http://webinsider.com.br/2006/01/16/mi-
croformats-aprenda-a-descrever-seus-dados/
http://webinsider.com.br/2006/01/16/microformats-aprenda-a-descrever-seus-dados/
http://webinsider.com.br/2006/01/16/microformats-aprenda-a-descrever-seus-dados/
358 359
7.2 - Estilizar, com folhas de estilo, a estrutura pa-
drão do site para resoluções menores que 480 pixels
Finalmente chegamos a uma das partes mais legais de trabalhar. Vamos usar o CSS para dar apa-
rência ao site do Galucho que até este momento se encontra assim:
Como planejado vamos estilizar a página modelo para resoluções até 480 pixels.
Geralmente o que se vê são sites que
começam com resoluções maiores e
consultas de mídia (medias queries) “ma-
x-width” até atingir a menor resolução
planejada. Isso funciona, porém exige
muita repetição de códigos de proprie-
dades para cada breakpoint.
Como nosso esquema se baseia no
80/20 vamos inverter este paradigma
e usar consultas de mídia “min-width”
até atingir a maior resolução planejada
que é 991 pixels.
E sabe que isso quer dizer?
Isso quer dizer que começaremos da
menor resolução para a maior. Cons-
truiremos nossa página modelo pri-
meiro para mobile, e para este momen-
to não precisaremos usar a consultas
de mídia.
Desenvolveremos um site normal, só que o corpo do site terá uma largura de 252 pixels somente.
Conforme subimos de resolução, no caso “min-width: 480px” (toda resolução que tenha no mí-
nimo 480 pixels, ou melhor, dizendo, de 480 pixels para cima) informamos que a largura máxima
não pode passar de 980 pixels (max-with:980px). E partir daí nós estabelecemos valores de “wid-
th” em porcentagem para as resoluções maiores. Mas isso você compreenderá melhor depois de
terminarmos a versão mobile.
Agora seguiremos as seguintes etapas. Estilizaremos:
• A “body” e o corpo do site;
• O topo;
• O Box de conteúdo;
• E o rodapé.
A “body” e o corpo do site
Trabalharemos com a linkagem externa. Para isso use seu editor e crie um novo arquivo para
salvar com a extensão “.css”. Vamosnomeá-lo de “estilos.css” e por enquanto o deixaremos vazio.
Salve no mesmo diretório do arquivo HTML da página modelo.
Agora voltaremos ao documento HTML. Nele faremos duas linkagens externas.
A primeira é para inserir o arquivo recém-criado “estilos.css”. Como você já sabe, para isso nós
utilizaremos o elemento HTML “link” entre as tags do elemento “head”.
<link rel=”stylesheet” href=”estilos.css” media=”all”>
Em seguida linkaremos uma fonte CSS de um site externo e a posicionaremos antes da linha de
código do arquivo “estilos.css”. No caso é uma fonte do Google fonts.
360 361
Colocaremos antes porque não queremos que regras externas prevaleçam às regras locais. Esta
fonte é específica para algumas partes do site, e possivelmente não se encontra na maior parte
das máquinas dos usuários.
Veja como estas linkagens ficarão no código HTML:
Feito isso deixaremos o documento HTML da página modelo de lado um pouco e nos dedicare-
mos a estilizar os elementos desta página no arquivo CSS externo “estilos.css”.
As primeiras tarefas dentro do arquivo CSS são colocar um reset e estilizar o fundo do site (um
velho conhecido nosso). Veja o CSS:
Veja o resultado na imagem a seguir:
Como você pode ver, na figura acima, o fundo do site é mesmo um velho conhecido nosso. Aliás,
o código usado em “body” é bem similar ao usado nos exemplos antigos, propositalmente para
já começarmos a estilização desta página de forma familiar. Da mesma forma que o utilizamos
antes, colocamos em “body” propriedades que podem ser herdadas pelos seus descendentes,
como propriedades de cor de fontes.
O uso deste fundo possibilitou que enfim enxergássemos os botões das redes sociais Facebook,
Google Plus e Twitter.
Outro detalhe importante é que inserimos uma declaração “display:block” para alguns elementos
do HTML5. Eles naturalmente são elementos em bloco, entretanto versões atingas do Internet
Explorer não sabem disso, daí o motivo da inserção.
Agora centralizaremos a div “corpo” da página e também colocaremos um fundo especial para
ela. Para isso vamos para a regra a seguir, após a regra aplicada em “body”.
362 363
Resultado:
Ficou tudo meio apertado, mas ajustaremos isso. Porém o importante, a saber agora, é que o cor-
po do site está centralizado (margin: 0 auto) e dentro da largura adequada (252px) para quando
o site se apresentar para dispositivos móveis.
As outras propriedades, que você já conhecer bem, serviram para colocar um fundo, bordas nas
laterais e posicionar o “box” relativamente.
Galucho, com isso cumprimos um importante passo. O corpo da página modelo está estilizado.
Vamos agora ao topo.
O topo
Dentro do bloco do topo estilizaremos por etapas seguindo esta ordem:
• A área dos botões de redes sociais;
• O menu de navegação;
• A área que abriga o logo do site;
• E a área que abriga o slogan.
Então, vamos ao bloco que abriga os botões de redes sociais:
Nota Importante: pode parecer estranho você vendo um site de largura pequena em um
navegador de dimensões bem superiores, mas a partir do momento que colocarmos o pri-
meiro valor de “media query” (@media only screen and (min-width: 480px)), você não con-
seguirá ver mais este layout desta forma. Somente se redimensionar a largura do navegador
para menos que 480 pixels.
364 365
A área dos botões de redes sociais
Para começar, sabemos que não é preciso declarar largura para o elemento “header”, que não
será estilizado, e nem para a “div #social-bar” porque eles devem se adequar automaticamente
dentro da largura do corpo (252px). Isso equivaleria a declarar “width:auto”, mas como é default,
não é necessário.
Esclarecido isso, seguem os códigos para inserirmos após “.container”:
Resultado:
Para a barra colocamos um fundo com uma imagem “png” repetida que trás um tom de cinza
médio. Usamos também preenchimentos no topo e na base através de “padding”. Para o elemen-
to “ul” especificamos um valor de largura de 126 pixels, que é a somatória das larguras dos ícones
(32 + 32+ 32) com as margens direita e esquerda do elemento “li” (30). Depois centralizamos o
box de “ul” com a declaração “margin: 0 auto;”.
Destacamos nesta estilização o uso de “float:left” em “li” para que as os ícones ficassem lado a
lado, e o uso de “display: block” no elemento “a” para que a área dos ícones ficassem clicáveis por
completo.
Partimos agora para o menu de navegação.
O menu de navegação
Primeiro item que vamos estilizar no menu é o elemento “nav:
Com “nav” estilizado ele se enquadra na largura total de “corpo” que é 252 pixels de maneira au-
tomática. Você verá um tipo de borda especial no topo de Box, entretanto é só um efeito visual
causado pela imagem que colocamos na propriedade “background”. Borda mesmo, somente na
base do bloco. E o padding nós usamos como área de respiro dentro do bloco.
Agora o próximo objetivo é algo interessante. Se você recorda, no nosso wireframe vimos que o
menu para o celular e para o tablet é diferente do menu do desktop.
366 367
O menu no desktop é formado por esta lista tradicional que temos no código com os elementos
HTML “ul”, ‘li” e “a”. Só que para nosso projeto acreditamos que em resoluções menores os botões
do menu iriam ficar com um tamanho pequeno o que dificultaria o usuário de efetuar cliques. E
não queremos que ele tenha este tipo de problema.
A solução que adotaremos é substituir este menu feito com listas por uma lista de seleção “dro-
p-down” onde o usuário pode escolher que página quer navegar.
Você pode estar se perguntando: “Que raios! Como faremos isso se já temos o código HTML para
colocar? E de onde sairá este formulário? ”.
Calma que chegaremos lá. A primeira coisa que temos que fazer é garantir que a lista atual não
apareça para a resolução que estamos trabalhando. Faremos isso colocando a declaração “dis-
play:none” para o elemento “ul”.
Observação: Não confunda o seletor “nav” com seletor “#nav”.
Veja o resultado:
E ,como vimos, temos o bloco “nav” estilizado com o visual que falamos anteriormente e com o
menu oculto pela declaração “display:none” que colocamos no elemento “ul” com identificador
“#nav”.
Agora vem a mágica que traz a tal lista de seleção para acesso da página. Ela é formada basica-
mente por dois elementos HTML que tem frequência moderada de aplicação na web em compa-
ração com 80/20 que dispusemos até aqui no E-book.
Apesar da frequência não ser alta, você poderá ver bastante estes elementos em páginas de ca-
dastros. Tem aumentado seu uso significativamente em dispositivos móveis que precisam de
navegação alternativa como esta que usaremos. Os elementos HTML são “select” e “option”. Eles
trabalham unidos e no nosso caso formam este código a seguir:
<select id=”comboNav”>
<option selected=”selected” value=””>Navegação</option>
<option value=”index.html”>HOME</option>
<option value=”portfolio.html”>PORTFÓLIO</option>
<option value=”#contato”>CONTATO</option>
</select>.
O elemento “select” indica que se trata de uma lista de seleção e o “option” determina os valores
a serem selecionados. O elemento “option” determina vários tipos de valores, que você determi-
na conforme o projeto. No caso ,do site do Galucho, os valores se referem às páginas do site que
queremos que usuário use para navegar. A primeira opção de “option” tem valor vazio porque a
intenção é não direcionar para lugar algum. Nesta opção também temos o atributo ‘selected=”-
selected”’ que indica que “Navegação” será selecionado como padrão.
Agora uma coisa intrigante: este código deve estar obrigatoriamente entre as tags <div id=”com-
bo-holder”></div>, só que a gente não colocará. Mas como isso é possível?
É possível através de “javascript”. Caso você não conheça, javascript é uma linguagem de progra-
mação baseada em script que roda na máquina do cliente, chamamos de client-side.
368 369
É diferente da maioria das linguagens que rodam no servidor.
Foge do escopo desta ebook explicar o funcionamento desta linguagem.Entretanto para peque-
nas funcionalidades e efeitos chamaremos através do elemento HTML “script” alguns códigos
javascript. Muitos efeitos que você vê em páginas são decorrentes do javascript, como por exem-
plo, uma foto que se expande em um box. Nem sempre é preciso ter conhecimentos avançados
para colocar estes efeitos em seu site. Basta que você pesquise no site do desenvolvedor o efeito
desejado, baixar os arquivos e colocar os códigos necessários onde a documentação do produtor
indicar.
Para que nossa lista de seleção seja “colocada” entre as tags <div id=”combo-holder”></div> pre-
cisamos voltar ao nosso documento HTML e colocar dois códigos javascript antes da tag de fe-
chamento do elemento “body”, local este geralmente indicado para inserir códigos javascript.
Veja a seguir como proceder:
<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/combo-navi.js”></script>
Perceba que a sintaxe HTML é comum a maioria dos elementos que você conhece. Existem tags
de abertura e fechamento <script></script>. E dentro da tag de abertura tem o atributo “src” que
procura um arquivo de extensão “.js” (javascript) no caminho do diretório indicado.
Os arquivos “jquery-1.7.1.min.js” e “combo-na-
vi.js” são os responsáveis por inserir dinamica-
mente a lista de seleção dentro do documento
HTML. Apesar de não vermos esta inserção no
código fonte o inspetor, encontrado nas ferra-
mentas de desenvolvedores de navegadores,
mostra o código da lista incorporado ao docu-
mento HTML (veja na imagem ao lado).
A ferramenta mostra a lista de seleção dentro de
<div id=”combo-holder”></div>.
Ferramentas de inspeção auxiliam muito quando precisamos estilizar elementos ocultos no có-
digo.
E as declarações que usaremos para estes elementos são:
370 371
Agora o resultado:
O identificador #comboNav foi o seletor usado para estilizar o elemento HTML “select” incorpo-
rado dentro do documento via javascript. Para estilizar colocamos um fundo cinza, uma cor de
fonte branca e um preenchimento de 4 pixels. Para centralizar esta lista de seleção dentro do box
de navegação usamos “margin: 10 auto”. Todas as propriedades que usamos para estilizar os itens
citados você conheceu no capítulo sobre CSS. Não é mais segredo para você. Mas esporadica-
mente iremos te apresentar algumas propriedades novas. Em “#comboNav” usamos duas:
1. text-indent – Esta propriedade determina um recuo de texto. Determinamos um valor de 15
pixels para que se comparando com os textos das opções da lista ele se diferencie pelo recuo.
2. border-radius – Ela permite colocar bordas arredondadas na extremidades de um elemento.
Perceba em “#comboNav” colocamos sutilmente bordas arredondadas em cada canto do Box.
Elas possuem de 3 pixels.
Veja como se comporta a lista de seleção quando selecionamos um item de destino:
Nota: Existem outros jeitos de se fazer um menu de navegação para reso-
luções menores, com outros elementos HTML e até sem JavaScript.
Porém esse template, que estamos usando no site Galucho, originalmente
foi pensado e criado assim. Então mantivemos o menu afim de respeitar a
ideia do autor e também para que você já se familiarize aos poucos com a
tag <script>.
372 373
A área que abriga o logo do site
Nesta parte a nossa preocupação é centralizar o logo dentro do Box dedicado a ele, e também
que suas dimensões fiquem adequadas ao espaço reservado. Segue o código CSS:
Resultado:
Colocamos uma área de preenchimento ,através do padding, no topo e na base de 20 e 30 pixels
respectivamente dentro da “div” de ID “#logo”. Centralizamos o logo dentro desta “div” com “mar-
gin: 0 auto” e diminuímos o tamanho a largura do logo para 80% do valor total.
Falando em diminuir tamanho de imagens via CSS... Não consideramos a melhor maneira para
trabalhar com imagens em sites responsivos. Na verdade, para um site estático como esse temos
poucas opções de oferecer imagens para dispositivos mobile sem comprometer a performance
do site.
O problema reside no fato que a imagem do logo, assim como todas as imagens do site na reso-
lução mais baixa, tem o mesmo peso que as imagens do site para desktop. Mesmo diminuindo
com CSS a porcentagem da imagem, esta diminuição é somente visual. Este é um problema, que
até a época em que escrevemos este livro, web designers e desenvolvedores estão enfrentando.
Existem técnicas que amenizam e estão fora do escopo do E-book. Ainda mais porque muitas
requerem ferramentas que vão além do HTML e CSS.
Se quiser saber mais sobre este assunto visite este excelente material: http://tableless.com.br/
imagens-responsivas-de-alta-performance/.
Voltando a estilização do site, entraremos agora no último item do topo, o slogan. Vamos nessa?
A área que abriga o slogan
Quando estávamos montando o HTML da área do slogan, falamos que sua área teria formato de
laço de fita. Você se lembra?
O código tem muitos detalhes. Como você já tem uma boa base de CSS vamos explicar, por par-
tes, os detalhes que fizeram a diferença na construção do laço de fita:
Primeira ação é definir uma declaração “position:relative” para o box “<div id=”slogan”></div>”.
http://tableless.com.br/imagens-responsivas-de-alta-performance/
http://tableless.com.br/imagens-responsivas-de-alta-performance/
374 375
Isso para garantir que as extremidades das fitas, as “divs” filhas “ribbon-lleft” e “ribbon-right”, se-
jam posicionadas de forma absoluta em relação ao Box pai. Em seguida, nos preocuparemos em
posicionar as “divs” filhas “ribbon-lleft” e “ribbon-right”. Para isso inseriremos uma imagem de
fundo específica para cada div. Veja como fica o CSS:
Veja na figura a seguir que as imagens de fundo ficaram no quanto esquerdo do conteúdo do
slogan.
Então o próximo passo será colocá-las nas laterais do corpo do site de forma que ultrapassasse
além da largura. Isso só é possível através de um posicionamento absoluto negativo. Como estas
imagens de extremidade de fita tem 56 pixels de largura declaramos -56px para ambos os lados.
Resultado:
Para dar o aspecto de laço essas imagens teriam que se posicionar acima do box de conteúdo.
Para referência estilizaremos este “box” antes de posicioná-las. A regra você pode consultar lá no
código completo nos seletores “#slogan .ribbon” e “#slogan h1”. Veja como ficará:
376 377
E com isso alcançamos o objetivo:
Agora falando das propriedades usadas, destacamos o uso de “text-shadow” que proporciona um
sombreamento para textos e o uso da fonte “Josefin Sans” que linkamos do Google.
text-shadow: 0px 1px 0 #9d9b92;
font: 400 20px/normal ‘Josefin Sans’, sans-serif;
E com isso acabamos de dar forma para o topo do site.
Próximo passo é estilizar a área do conteúdo.
O Box de conteúdo
Não precisamos de muita coisa para estilizar o Box de conteúdo que para esta página modelo
somente contém uma “div”. Quando construirmos as páginas individuais os conteúdos serão
diferentes e o visual também, mas por enquanto só temos que nos preocuparmos em estipular
uma largura e uma altura para este box.
O valor da largura será automático e decidimos colocar um valor provisório de 200 pixels para
altura, já que não colocamos conteúdo ainda. Provisório porque sua altura será determinada pela
altura que o conteúdo proporcionará somada a possíveis valores de margens, paddings e bordas.
Aí usaremos a declaração “height:auto”.
Então tudo o que temos a fazer é colocar esta regra:
378 379
Colocaremos também um pequeno parágrafo com o texto “Aguardando conteúdo!”.
Veja o resultado:
Então é só isso mesmo, Galucho. Nossa página para baixas resoluções já está quase pronta!
A seguir iremos estilizar o rodapé. Vamos à próxima etapa?
Nossa função é dar um jeito nisso. Vamos ao CSS:
O rodapé
O rodapé do jeito que está é uma poluição só. Os textos estão todos grudados em uma área aper-
tada. Veja na imagem:
380 381
Salve o arquivo e veja o resultado no navegador:
Uma coisa que caracteriza um rodapé nãoé somente o fato de ele estar no final do site, também
as informações ali presentes, como as de “Copyright”, e em alguns casos uma cor de fundo que
contrasta com grande parte do site. Lógico que isso não é uma regra, porém ajuda a dar destaque
ao rodapé.
O site do Galucho usa tons de cinza. Então decidimos usar um esquema monocromático em al-
guns itens do site, resultando para o rodapé um cinza mais escuro.
382 383
Quanto às folhas de estilos usadas não tem muito segredo. Todas foram apresentadas no Capí-
tulo sobre CSS. A grande sacada aqui para deixar o rodapé melhor foi criar áreas de respiro com
uso das propriedades “margin” e “padding” nos elementos e deixar o texto centralizado.
A única novidade aqui foi o uso do seletor “: hover” nos links amarelados para que eles ganhem
uma decoração sublinhada ao colocar o mouse sob eles.
Enfim finalizamos a página modelo para resoluções até 480 pixels. Você já deve ter percebido
que a página ficou bacana e não parece em nada com aquele amontoado de informações joga-
das sem apresentação visual, lembra?
E antes de finalizar esta parte do rodapé, podemos fazer uma comparação entre o modelo sem
CSS e com CSS para vermos o poder das folhas de estilos.
Qual destas versões
você gostaria de
apresentar para seu
cliente?
Parabéns!!! Você estilizou sua primeira página!!!
Lógico que você sabe que foi só para uma resolução, entretanto grande parte do trabalho já foi
feito. Agora dê uma pausa para descansar e comemore. Encontramo-nos no próximo tópico.
384 385
7.3 - Estilizar a estrutura para resoluções de no
mínimo 480 pixels
Antes de começarmos, vamos incluir alguns pequenos códigos no HTML do site do Galucho.
Estamos cientes que a versão que construímos no tópico anterior foi dedicada para um site mo-
bile, pelo menos na sua largura de corpo. Só que ele não está totalmente adequado. Isso porque
todo o CSS que construímos facilita a visualização no Desktop.
Só que no celular nós ainda vemos do mesmo modo que vemos no Desktop. Com isso somos
obrigados a ampliar a tela com o zoom.
Veja nas imagens a seguir como o site se comporta da mesma forma, em um celular e um tablet
na posição paisagem, e em um Desktop.
Para dizer que o site atende a dispositivos móveis temos que executar três pequenas tarefas. Va-
mos à primeira.
1. Para que nossa página modelo seja exibida corretamente em dispositivos móveis vamos
incluir uma meta tag no cabeçalho (entre a tags do elemento “head”) do documento,
especificando “width=device-width” e “initial-scale=1”. Segue o código:
<meta name=viewport content=”width=device-width, initial-scale=1”>
386 387
Esta meta-tag fornece ao navegador instruções de como controlar as dimensões e o redimensio-
namento da página. O primeiro valor content “width=device-width” determina automaticamente
um valor igual a largura da tela do dispositivo. Isso permite que a página redistribua o conteúdo
para corresponder a diferentes tamanhos de tela.
O segundo define a escala inicial. Ela permite que a página exiba corretamente quando muda-
mos a orientação (paisagem/retrato) de nosso dispositivo.
2. Inserir script “CSS3-mediaqueries.js” para que dispositivos que não suportam consultas de
mídia nativamente compreendam as folhas de estilo.
Nem todos os dispositivos “compreendem” as media queries. Por isso colocaremos no final do
documento um script que chama o arquivo “css3-mediaqueries.js” para que elas sejam interpre-
tadas por estes dispositivos.
<script src=”js/css3-mediaqueries.js”></script>
3. Definir uma largura para corpo do site dentro desta consulta de mídia: “@media only
screen and (min-width: 480px)”.
Ao definirmos este valor, a versão que construímos no tópico anterior, cuja largura de corpo é
de 252 pixels, só poderá ser vista em dispositivos com resolução inferiores a 480 pixels. E este é
o nosso objetivo. Então para isso acontecer basta colocar o código a seguir no final do CSS atual.
Para você entender na prática como tudo funciona vamos pedir auxílio ao nosso navegador.
Pode ser o Google Chrome ou o Mozilla Firefox. Veja na imagem a seguir, que chamarei de figura
1, o que aconteceu com a largura da tela após as três modificações (principalmente a última).
O que aconteceu com aquele layout de lagura fina? Pois é, segunda a nova consulta de mídia ele
não pode aparecer em resoluções de tela que tenha no mínimo 480 pixels de largura (min-wid-
th:480px). E a resolução do desktop usado na figua tem 1366 pixels de largura.
388 389
Por isso que prevalece a nova largura descrita na regra para o corpo que encontramos dentro da
media query, ou seja:
O corpo tem 93% (witdh: 93%) da largura do dispositivo (1366 pixels). Descontando a bar-
ra de rolagem do navegador e multiplicando pela largura do corpo em porcentagem ((1366
do desktop – 17 da largura da barra de rolagem) * 93%), resulta em 1255 pixels que é um
valor dentro da nova regra.
Veja a seguir na figura 2:
Só que 1255 pixels deixaram o corpo largo demais e se acessado em resoluções maiores ainda,
mais largo ficará dificultando a leiturabilidade de textos.
Por isso que entra também a declaração “max-width: 980px”, para que limite a largura não per-
mitindo que o corpo ultrapasse os 980 pixels. Este limite permite que o site fique como planeja-
mos, ou seja, dentro das dimensões que vimos na figura 1. Entendeu?
Você já viu como ficou o site para desktop baseado neste novo valor de consulta de mídia. Agora
veja o resultado para o celular e o tablet na posição:
Nota importante:
Considere nas imagens acima somente a largura do corpo do site em
relação ao que era antes da aplicação da media query. Os outros ele-
mentos internos estão sujeitos às modificações a partir das folhas de
estilos, neste e nos próximos valores de consultas de mídia.
390 391
Bom... Você ainda está curioso para saber como ficou e onde você pode ver todo aquele trabalho
que você realizou para a página modelo para a resolução inferior a 480 pixels, não é mesmo? Se
você tiver instalado o Google Chrome em sua máquina, abra o inspetor da ferramenta de desen-
volvedor e se o navegador estiver maximizado, clique no botão para você desativá-lo. Isso per-
mitirá que você redimensione a janela.
Agora vá com o mouse até a extremidade direita do navegador e posicione a seta até que ele
tome a forma de uma seta bidirecional (igual a esta ).
Clique e arraste para esquerda para que diminua a largura da tela. Ao fazer isso, a página que tem
a largura do corpo definida em porcentagem procurará se adaptar automaticamente. Você verá
também que enquanto você arrasta o mouse aparecerá, no canto superior direito da página os
valores da largura que estarão em ordem decrescente.
Quando você chegar a 480 pixels de largura você ainda estará dentro da consulta de mídia “min-
-width: 480px” e a largura do corpo do site será de aproximadamente 432 pixels.
Porém quando você diminuir
um pixel, chegando assim a
479 pixels, a página estará fora
da consulta de mídia “min-
-width: 480px” e voltamos ao
conhecido layout com largu-
ra de corpo que cai para 252
pixels.
A imagem ao lado indica que a
página está dentro da consulta
de mídia “min-width: 480px” e
a um pixel de sair dela se redi-
mensionarmos o navegador à
esquerda.
E é o que exatamente acontece na imagem seguir. Com este processo você consegue simular bre-
akpoints e resoluções de dispositivos enquanto desenvolve as folhas de estilo com media queries.
Você acaba de rever o layout para resoluções abaixo de 480 pixels no nave-
gador de um desktop. Comparando com a outra imagem notamos como é
visível a diferença entre eles. Ele deverá funcionar também para dispositivos
dentro desta faixa de resolução.
Olha a figura, à sua esquerda, de um simulador para ver como ele se adéqua
perfeitamente, conforme o projetado, ao smartphone.
392 393
Agora que cumprimos as três pequenas tarefas, e que você já entendeu, de forma prática, a im-
portância do uso das media queries,vamos seguir o fluxo normal da montagem do nosso CSS
para consulta de mídia atual (min-width: 480px).
Seguiremos o esquema que fizemos anteriormente.
• O corpo do site;
• O topo;
• O Box de conteúdo;
• E o rodapé.
O corpo do site já foi. Partiremos para o topo e verificaremos apenas o que mudará no css .
O interessante desta fase é que o código tende a diminuir porque muita coisa declarada no CSS
para resoluções abaixo de 480 pixels será mantida e não haverá necessidade de duplicar decla-
rações.
O topo
O menu de navegação
A única mudança será na largura da lista de seleção que aumenta de 212 pixels para 396 pixels.
Colocaremos a declaração dentro na consulta de mídia e após a regra de “.container”.
A área que abriga o logo do site
Mudaremos somente a porcentagem das dimensões da imagem:
E a área que abriga o slogan
Aqui aumentamos o tamanho da fonte, por consequência é indicado diminuir o tamanho do
preenchimento do topo.
E com isso terminamos as regras do topo para esta comsulta de mídia. Você deve estar estra-
nhando a quantidade reduzida de códigos. É porque grande parte das regras usadas para as
resoluções inferiores a 480 pixels são reaproveitadas aqui também. O mesmo acontecerá no
Box de conteúdo.
O rodapé
394 395
O rodapé foi o ponto com maiores alterações. Mesmo assim o código anterior é bastante rea-
proveitado. Veja:
A novidade que mais se destacou é o uso da propriedade “letter-spacing” que usamos para au-
mentar o espaçamento entre letras.
E com isso rapidamente terminamos os códigos para a media-query “min-width: 480px”.
Veja na imagem a seguir os códigos utilizados:
Você quer como o layout ficou, certo?
396 397
Vamos primeiro entrar para a próxima consulta de mídia que limita certas mudanças atuais até a
largura de 766 pixels. Aí nós mostraremos o comportamento da página modelo com 480 pixels e
766 pixels, que são os limites de atuação da media query que acabamos de trabalhar.
7.4 - Estilizar a estrutura para resoluções de até
no mínimo 767 pixels
Começamos direto inserindo a instrução media query para atender resoluções de até no mínimo
767 pixels.
@media only screen and (min-width: 767px){ }
Como já vimos o corpo do site mantém a declaração da consulta de mídia anterior que indica
“width: 93%”. Vamos ao topo, então!
O topo
Menu de navegação
Aqui surgirá uma grande mudança. O menu baseado em lista de seleção será substituído por
uma lista ordenada. Seguem as regras:
Agora o resultado:
398 399
Imagino que você percebeu a mudança radical. Temos aqui um menu tradicional onde basta ao
usuário efetuar um clique para acessar as páginas.
Um fator importante para mudança foi ocultar a lista antiga e mostrar a nova outrora oculta.
Tudo isso foi possível através da propriedade “display” e dos valores “block” e “none”.
Ocultamos o menu feito com lista de
seleção:
E revelamos o menu feito com lista or-
denada:
Agora que mostramos o fator determi-
nante para mudança de menus. Vamos
ver alguns detalhes interessantes na es-
tilização:
No seletor “#nav li”, para colocarmos os itens lado a lado, usamos a declaração “display: inline-blo-
ck”, ao contrário do que fizemos anteriormente na barra de rede social onde usamos “float: left”.
E chegamos ao que pode ser o ponto mais complexo do menu: quando posicionamos o mouse
sobre um item do menu ele forma um background com formato similar ao laço de fita com ex-
tremidades pontiagudas. A própria indicação da página do menu possui este background.
Veja na imagem a seguir:
Os códigos responsáveis pelo efeito estão abaixo:
400 401
Note que a imagem usada é a mesma. Só que o posicionamento é diferente. Veja, a seguir, a ima-
gem usada. Ela pouco lembra o que vemos no menu:
A primeira regra faz que o menu mostre a extremidade esquerda quando posicionamos a ima-
gem 37 pixels negativos para o topo. Veja na imagem a seguir que este deslocamento negativo
para o topo faz com que a parte em que hachuramos não fique visível, mostrando o que inte-
ressa dentro do elemento “li”:
Já simultaneamente dentro da “span” filha de “li” mostra o inverso. Porém somente cerca de 90pi-
xels que é a largura deste elemento. Aqui o posicionamento faz com que a imagem se desloque
para a o topo e para direita, como podemos ver na imagem a seguir:
Quanto aos outros códigos usados são autoexplicativos com propriedades que você conhece.
Destaque para a propriedade “line-height” com o valor de 37pixels usado dentro da declaração
de “#nav li a” para que caiba dentro da altura do bloco.
Área que abriga o logo do site
A partir daqui o logo irá usar as dimensões originais de sua imagem. Em outras circunstancias os
valores de suas dimensões declaradas no documento HTML já seriam o suficientes, porém para
que não haja influencia das consultas de mídias anteriores colocaremos estes valores também
nas regras CSS:
Área que abriga o slogan
Temos duas pequenas mudanças dentro do título do slogan. Usaremos unidades em pixels para
o preenchimento o topo e o tamanho da fonte aumentará para se adequar as telas maiores que
a consulta de mídia atual possa a vir atender:
402 403
E com isso terminamos as regras do topo. As grandes mudanças foram relacionadas ao menu, mas
também podemos nos aproveitar de grande parte das regras usadas para as resoluções inferiores
a 480 pixels e até 480 pixels. Esse reaproveitamento também acontecerá no box de conteúdo.
O rodapé
O rodapé novamente foi o ponto com maiores alterações. Com uma dimensão maior optamos
por distribuir as informações lateralmente substituindo o aspecto centralizado. Veja como ficou:
Feito! Terminamos a nossa estilização para a consulta de mídia “min-width:767px”. Sabemos que
a próxima consulta é “mim-width:991px”, sendo assim, uma largura de 990 pixels está dentro da
consulta de mídia deste tópico que acabamos.
Que tal vermos como está nossa página modelo para esta largura?
Olhando para esta imagem você consegue se lembrar da página quando só tínhamos o HTML? :)
404 405
7.5 - Estilizar a estrutura para resoluções de até
no mínimo 991 pixels
Finalmente chegamos à última consulta de mídia. Acredito que o conceito sobre media queries
esteja mais solidificado em sua mente. Procuramos atender a alguns breakpoints durante todas
as etapas para que o layout da página modelo ficasse o mais agradável e flexível possível.
A partir desta nova consulta o layout terá um comportamento fixo, ou seja, dispositivos de 991
pixels para cima receberão o mesmo estilo sempre. A largura do corpo deste site (.container) foi
projetado para ter diferentes larguras em quatro diferentes tipos de situações. E uma condição
especial a de que não ultrapasse a máxima largura de 980 pixels (max-width:980px).
Os dispositivos que atendem a nova consulta de mídia superam o valor de 980 pixels. Nós o pro-
jetamos para que a partir daí a largura fique fixa em 980 pixels. Portanto nossa primeira regra será:
No atual momento em que este E-book é criado esta largura trabalha tranquilamente para a
maioria dos desktops. Entretanto é necessário estar sempre atento para as novas necessidades
que surgirão no mercado, através de dispositivos com resoluções ainda maiores.
Não teremos grandes mudanças nesta resolução, pelo menos para esta página modelo. Além de
setar a largura da página vamos também aumentar o tamanho da fonte do slogan e pronto. To-
dos outros elementos necessários já foram estilados nas consultas anteriores.
Entretanto quando montarmos as páginas individuais, que praticamente se concentrará dentro
do “Box de conteúdo”, podemos vir a ter um bom trabalho desta resolução.
Vamos agora ao código do slogan:
O trabalho na página modelo esta encerrado. Vamos ao resultado para este resolução?
406 407
Agora temos uma base para construir as duas páginas do site. Apesar da existência do menu
“Contato”, você já deve ter percebido que a função dele é direcionar para o rodapé das páginas
do site, local onde encontramos os dados de contato do Galucho.Próximo passo agora é, a partir da página modelo, salvar cópias de seu conteúdo, renomeando
os nomes dos arquivos e executando pequenas alterações. Preparado?
7.6 - Salvar cópias do modelo para construção
das Páginas Home e Portfólio
É hora de abandonar a página modelo. Afinal a função dela era, como seu nome mesmo diz, ser-
vir de modelo. Caso sua página modelo não esteja aberta no seu editor, abra. Agora salve uma
versão como “index.html”. Essa será a página inicial.
Talvez Galucho você possa pensar que cometi um erro grave. Será que o nome do arquivo não
deveria ser “home.html”? A resposta é não. Tanto que colocamos o menu “home” com “index.
html”. O serviço de hospedagem costuma interpretar os arquivos iniciados com o termo “index”,
para certos tipos de linguagem de construção de sites (index.html, index.htm, index.php) como
páginas iniciais.
O “index.html” é bastante usado para um site 100% HTML como o do Galucho. E ao usá-lo será
redirecionado para o domínio do site. Veja:
www.galucho.com.br/index.html = www.galucho.com.br
www.galucho.com.br/home.html = www.galucho.com.br/home.html
Já a versão “home.html” não é interpretado como página inicial. Por isso usamos o nome “home”
ou “página inicial” entre as tags do elemento “a”, entretanto no atributo “href” usamos “index.html”.
Próximo passo é tomar pequenas ações que diferenciem a Home da página de Portfólio. Come-
çamos mudando o título, no nosso arquivo index.html, dentro do elemento “title”. Veja:
<title>Galucho - Designer</title>
Em seguida apagaremos a mensagem “Aguardando conteúdo!” que está dentro das tags ‘<div
id=”main”></div>’. Afinal, não tem mais motivos para ela está em nossas páginas. Concorda?
Agora daremos uma pausa na home para voltarmos a página modelo. Vamos salvar a segunda
cópia como “portfolio.html”. Também faremos pequenas ações para diferenciar as páginas.
Mude o título atual para este:
<title>Portfólio do Galucho</title>
Outra mudança importante é trocar uma “class” na lista de menu da navegação principal. Refiro-
-me a este item, class=”current-menu-item”, que promove um background ao menu e tema fun-
ção de indicar em que página o usuário esta. Neste momento ele está indicando a home page.
<ul id=”nav”>
<li class=”current-menu-item”><a href=”index.html”><span>HOME</span></a></li>
<li><a href=”portfolio.html”><span>PORTFÓLIO</span></a></li>
<li><a href=”#contato”><span>CONTATO</span></a></li>
</ul>
408 409
Não é o que queremos. Devemos trocar para a página de portfólio:
<ul id=”nav”>
<li>a href=”index.html”><span>HOME</span></a></li>
<li class=”current-menu-item”><a href=”portfolio.html”><span>PORTFÓLIO</span></a></li>
<li><a href=”#contato”><span>CONTATO</span></a></li>
</ul>
Aproveitamos também para fazer as mesmas mudanças fizemos na Home referente ao conteúdo
dentro da tag <div id=”main”></div>.
E agora que tal navegar pelo site? Isso já é possível!!! Cliques nos menus, redimensione as telas,
brinque com o trabalho que você acabou de executar!!! :D
Feito as devidas alterações. Deixaremos o arquivo da página modelo de lado, fecharemos o arqui-
vo “portfolio.html” e trabalharemos com o “index.html”.
Mas antes de finalizarmos essa parte substituiremos, na nossa folha de CSS, o código que limita
a altura desta “div” em 200 pixels...
... Por esta que permite a altura expanda conforme o conteúdo cresça.
E assim fechamos essa parte por aqui!
410 411
Você está de Parabéns!!!
Surgiremos um novo descanso antes de seguir com este capítulo que é um dos mais longos.
Você terá tarefas importantes! Dê uma pausa e volte renovado.
7.7 - Completar o restante dos códigos HTML da
Home Page
Agora meu amigo Galucho é hora de colocar o conteúdo nas páginas. E todo conteúdo será colo-
cado entre as tags “<div id=”main”></div>”. Como estamos na página inicial o intuito é apresentar
uma prévia sobre os trabalhos realizados pelo Galucho a fim que os visitantes cliquem nos atalhos
que levam a página de portfólio.
Começaremos com este código:
Observação: o E-book é destinado fundamentalmente a apresentar meios para usar
as linguagens HTML e CSS de forma mais precisa possível e dentro do esquema 80/20.
É natural que alguns sintam falta de páginas extras tipo; “sobre o Galucho” entre outras
que poderiam estar presentes. Entretanto estas ausências não fazem o conteúdo fugir
ao objetivo do E-book e até serve de sugestão de exercício extra para que você incre-
mente com mais páginas.
412 413
Trata-se de um slideshow. Ele tem a função de mostrar uma lista de imagens através de uma
apresentação com efeitos. O efeito que aplicaremos dependerá de códigos javascript prontos
específicos e algumas declarações CSS.
No elemento “ul” temos o atributo class=”bxslider”. Ele será usado automaticamente pelo CSS do
slideshow, escolhido para estilizar a apresentação.
Para conhecer melhor este slideshow visite http://bxslider.com/.
Esta apresentação também servirá como atalho para seções encontradas na outra página.
Você se lembra da ligação para uma parte específica dentro de uma mesma página?
Aqui nos faremos esta ligação só que para partes específicas dentro da página de portfólio (por-
tfolio.html#fotografia, portfolio.html#web-design, portfolio.html#grafico).
Enquanto aplicamos somente o HTML é assim que nossa lista de imagens se apresenta:
Observação: Você não precisa aprender agora javascript para inserir este tipo de
apresentação animada, e nem é objetivo do E-book. Entretanto queremos mostrar que
sabendo HTML e CSS e lendo a documentação de alguns “plugins” javascript, que en-
contramos na web, você pode colocar efeitos diversos em seu site sem a necessidade
de saber programar. Basta saber o local certo de inserir este plugins.
E também tenha cuidado para não abusar em efeitos e plugins para que o seu site não
fique pesado. Também fique ligado para não colocar animações e transições desneces-
sárias que geram possíveis conflitos. Com o tempo você pode aprender esta lingua-
gem para otimizar seus códigos, ok?
http://bxslider.com/
414 415
Após o slideshow colocamos um código que mostra a missão do site:
E agora para finalizar colocaremos códigos para uma pequena galeria que também serve de
atalho para a página de portfólio:
Esta galeria é formada por uma lista que contém três imagens clicáveis. Cada imagem serve de
atalho e também representa cada categoria presente na página de portfólio. E a lista também
fornece uma pequena descrição sobre a categoria em forma de link.
Este código foi suficiente para estender demais a tela verticalmente. Por isso deixaremos uma
imagem da galeria quando aplicarmos o CSS e estilizar é o que faremos no próximo tópico. Final-
mente veremos como ficará a Home Page para resoluções abaixo de 480 pixels.
Vamos nessa?
7.8 - Finalizar a estilização da Home Page para
resoluções menores que 480 pixels
A sequência lógica indica que devemos estilizar os elementos entre as tags do elemento “aside”,
inclusive ele mesmo se for necessário. Porém, antes, como trabalharemos com um plugin exter-
no (Bxslider) e grande parte de sua funcionalidade já vem pronta, devemos instalá-lo primeiro.
E sabe por quê? Por que todo e qualquer elemento deste tipo está sujeito a possuir estilo próprio,
regras CSS próprias que estilizam o código que a gente criou. Lembra-se da class “bxslider” que
colocamos no elemento “ul”? Sem contar que ele também pode embutir dinamicamente códigos
HTML extras, consequentemente mais estilos.
Por isso ao fazer a instalação primeiro, podermos descobrir quais regras queremos manter e quais
iremos subscrever, sacou?
Então já que não tem outro caminho vamos à tarefa!
416 417
Estilizando o slideshow
Primeiro baixaremos o pacote de arquivos do site do desenvolvedor (http://bxslider.com) para
nosso computador e enviaremos os arquivos para o diretório do site.
Então colocaremos uma linha de código que “linka” os estilos do slidershow. Esta linha deve estar
acima do código que linka o CSS do sitedo Galucho. Veja:
<link rel=”stylesheet” href=”jquery.bxslider.css” media=”all”>
<link rel=”stylesheet” href=”estilos.css” media=”all”>
Próximo passo é colocar o código javascript do slidershow antes do fechamento da tag “body” ,
juntos com os outros scripts.
<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/combo-navi.js”></script>
<script src=”js/css3-mediaqueries.js”></script>
<script src=”s/jquery.bxslider.js”></script>
E para finalizar, segundo a documentação do produtor do Bxslider, devemos iniciar o slideshow
através de um código javascript extra que vem após o código anterior. Segue:
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.bxslider’).bxSlider({
auto: true,
autoControls: true
});
});
</script>
Um especialista em javascript pode otimizar e até criar seu próprio slideshow do zero. Mas nem
por isso, você que não tem familiaridade com a linguagem, deve excluir o uso. Desenvolvedores
do mundo todo constroem e documentam plugins javascripts com diferentes funções para uso
da comunidade web. Alguns são gratuitos, outros pagos. O que você tem que avaliar é se real-
mente seu projeto necessita, o custo, o desempenho do site, a facilidade de uso, e por questão de
segurança, se o recurso tem boas avaliações da comunidade. Bom, que tal ver o resultado?
“Aew!” Obtivemos um resultado satis-
fatório, ele funciona bem, mas não é o
que queremos ainda.
É bem provável que você já tenha visto
um slideshow em algum site.
No caso deste, as imagens aparecem e
desaparecem do box movimentando-se
para esquerda. Em suas extremidades
possui setas para avançar ou voltar uma
imagem. No canto esquerdo inferior
possui pequenos círculos que indicam
a quantidade de imagens que são apre-
sentadas e no lado inverso um botão
para pausar e outro para acionar o slide.
Alguns destes elementos decidimos
alterá-los com CSS para se adequar ao
layout do site. Para executar esta tarefa
exige de você, Galucho, determinação
de investigador.
Usaremos para isso o inspetor das fer-
ramentas para desenvolvedores de seu
http://bxslider.com/
418 419
navegador. Para isso você deve clicar em cima do objeto que você pretender investigar com o
botão direito e inspecionar o elemento.
Geralmente no canto direito inferior do seu navegador apresentará um quadro com as regras
CSS que o elemento usa. Você pode editá-lo fornecendo valores para as propriedades e visualizar
alterações na interface do site. Conforme a aparência fica como você quer, você usa os valores
para alterar seu CSS.
Neste slideshow decidimos eliminar a borda branca e os botões play e pause. Decidimos também
centralizar os três círculos, aumentar de tamanho, mudar as cores e posicioná-los dentro do sli-
deshow. E para finalizar alterar a imagem dos botões de avançar e voltar e outras alterações.
Vou deixar como exercício para você identificar, no código anterior, quais regras foram respon-
sáveis pelas mudanças que decidimos praticar. Mas como sou bonzinho vou deixar uma dica:
Quando falo em eliminar algo, quero dizer ocultar, com isso o valor “none” estará sempre presen-
te. Ok?
Outra coisa nova referente a propriedade “background-position” é o uso da técnica CSS Sprites.
Ele consiste em unir imagens que poderiam estar separadas e inseridas individualmente via
“background” em um só arquivo. E depois através de “background-position” cada elemento terá
como fundo uma parte da nova imagem formada pelo arquivo. Foi o que fizemos com os fundos
dos menus. Lembra-se desta imagem?
No slideshow o processo é similar e acontece nos botões de avançar e voltar. Como temos dois
botões e ainda o efeito “:hover” sobre eles, precisaríamos de quatros imagens o que proporciona
quatro requisições ao servidor deixando o carregamento do site mais lento. Com CSS Sprites
unimos as quatros imagens em usa só e posicionamos com background-position. Isso proporciona
uma só requisição ao servidor.
Veja a imagem usada:
Os círculos debaixo representam o estado normal. O valor de posicionamento
-32px no background garante que elas fiquem visíveis. Quando posicionamos
o mouse sobre elas o posicionamento muda para 0 fazendo que as imagens de
cima apareçam.
Para saber mais sobre CSS Sprites visite: http://www.maujor.com/tutorial/css-sprites.php
http://www.maujor.com/tutorial/css-sprites.php
420 421
Vamos ver como ficou nosso slideshow após as alterações nas regras?
A borda sumiu, os botões play
pause também, os botões de
avançar e voltar mudaram
de cor (fundo), só faltando
os três círculos que ficariam
dentro do slideshow. Na ver-
dade eles estão ocultos de-
vido o pouco espaço nesta
resolução. Eles aparecerão
em ouras consultas de mídia.
Encerramos o slideshow para
esta consulta de mídia!
Próximo passo é estilizar o
texto da missão do site.
Estilizando o texto da missão do site
O texto da missão do site e o texto que vem logo após o slideshow. Vamos às regras:
As regras já são bem conhecidas. Um diferencial que podemos destacar é um adereço especial
que é inserido como imagem de fundo no topo do elemento “h2” de class “headline”.
Veja o resultado:
422 423
Estilizando a galeria de imagens
Agora é hora de estilizar a mini galeria. Ela é formada por listas com imagens e textos clicáveis e
com a função de levar o usuário para as seções na página de portfólio. Veja o código:
Resultado:
Apesar de você não ver na figura logo
após a miniatura da camiseta, vem uma
miniatura que representa a categoria so-
bre o portfólio de Fotografia, que é uma
habilidade do Galucho.
Grande parte das declarações usadas
nesta mini galeria você já conhece. O
que temos de novidade é a propriedade
“opacity” que mexe com o nível de opa-
cidade, ou se você preferir, de transpa-
rência dos elementos.
Quando mais próximo de zero(0) mais
transparente é o elemento. Zero corres-
ponde a 100% de transparência. O valor 1
não confere transparência ao elemento.
Na nossa declaração temos um valor de
0.5 que é ativada quando o mouse é po-
sicionado em cima da primeira área de
link onde reside a imagem e o elemento
“span” de cor alaranjada. Este valor pro-
move 50% de transparência à imagem:
.feature li .thumb:hover img {
opacity: 0.5;
background: #000;
}
424 425
Com isso terminamos a estilização do conteúdo da página inicial para resoluções abaixo de 480
pixels. Próximo objetivo é fazer os ajustes para resoluções de no mínimo até 480 pixels.
7.9 - Finalizar a estilização da Home Page para
resoluções de até no mínimo 480 pixels
Olha só que bacana! Os ajustes que faremos para as próximas consultas mídias diminuem bas-
tante a partir de agora. Para você ter uma ideia o slideshow não sofre alterações para esta media
query. Então só mexeremos em duas regras. Segue a primeira:
Com ela aumentamos o tamanho do texto e a entrelinhas da missão do site e fazemos ajustes
nas margens.
Na outra regra colocamos margins de 20 pixels nas laterais. Veja:
E é isso aí, Galucho!
Vamos para a próxima
consulta de mídia. Bora?
426 427
7.10 - Finalizar a estilização da Home Page para
resoluções de até no mínimo 767 pixels
Para esta faixa de resoluções mexeremos no slideshow e na mini galeria. Vamos a primeira regra:
A regra anterior estava oculta para as resoluções menores que 767 pixels devido a declaração
“display:none”, o que tornava seus descendentes ocultos também. Com a aplicação da declara-
ção “display:block” enfim conseguimos ver o formato circular dos elementos descendentes esti-
lizados no tópico sobre as resoluções inferiores a 480 pixels.
Segunda regra:
Com esta regra colocamos os círculos a 20 pixels da base inferior.
Você pode fazer testes com a propriedade “bottom” alterando os valores.
Veja o resultado:
O intuito desta regra é distribuir a lista de imagens em larguras iguais dentro da área disponível.
Para isso precisamos usar um pouco de matemática básica.
Primeiro, vamos posicioná-las lateralmente com “float:left”.
Terceira regra:
428 429
Depoisusaremos valores em porcentagem para que as larguras de cada imagem fiquem iguais e
que somadas com as larguras de suas margens laterais cheguem a 100% (ou próximo disso).
Estipulamos então o valor de 1.5% para cada margem lateral.
Então se você somar as margens esquerda e direita de um item da lista teremos 3%. Como são
três itens o resultado da multiplicação resultará em 9%. Esta é a largura total das margens.
Com isso concluímos que o total da área dedicadas as listas de imagem é igual à área disponível
(100%) menos a largura total das margens (9%). O que resulta em 91% de largura para serem divi-
didas entre as três listas com imagens. Portanto: 91 dividido por 3 resulta em aproximadamente
30.3. Valor este que usaremos como porcentagem para a largura “width: 30.3%”.
Viu como a mini galeria ficou bacana com as imagens lado a lado? E assim elas permanecerão
para as resoluções acima de 991 pixels. Vamos ver?
7.11 - Finalizar a estilização da Home Page para
resoluções de até no mínimo 991 pixels
Também mexeremos em poucos itens para esta consulta de mídia. Segue a primeira regra:
Na imagem acima aumentaremos o tamanho do texto da missão do site e o espaço entrelinhas.
Segunda regra:
Esta segunda você conhece bem. Setaremos zero para todas as margens do bloco.
Terceira:
430 431
Até poderíamos manter as declarações da consulta da mídia anterior, mas optamos por deixar
valores de largura e margens fixos para que os espaços de respiro entre as imagens fiquem se-
melhantes.
E assim terminamos a nossa Home! :D
Parabéns Galucho!!!
Você está de parabéns Galucho por chegar até aqui.
A Home Page para todas as resoluções está pronta.
Estamos a poucos passos de encerrar a construção do site do Galucho. E para você chegar com
toda energia sugiro aquele descanso para refrescar a mente.
Vemo-nos na página de portfólio. Até!
Home Page completa:
http://ebookhtmlcss.com/site-
-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
432 433
7.12 - Completar o restante dos códigos HTML da
página de portfólio
Para a página de portfólio usaremos códigos similares aos usados na mini galeria da Home Page.
Cada mini galeria representará um seção do portfólio, cada seção mostrará três trabalhos, sendo
que as seções serão Web Design, Design Gráfico e Fotografia.
Vamos ao código da seção Web Designer:
Veja o resultado:
Veja que coisa bacana: estamos falando de HTML, mas pelo visual da figura acima não teremos
tanto trabalho com CSS. A página de portfólio, por repetir alguns seletores usados na Home
page, tem boa parte dos elementos estilizados. Isso tanto para as menores resoluções (imagem
à esquerda) quanto nas maiores (imagem à direita). Só estão faltando pequenos ajustes, é claro.
Porém, em termos de conteúdo, ainda não está bacana. Não está do jeito que o Galucho quer. Ele
deseja que seu portfólio tenha o título de cada trabalho junto com uma descrição.
Como sabemos que todos Galuchos e Galuchas são pessoas espertas ele já pensou em uma so-
lução bacana para exibir o que pretende.
Você reparou bem neste código?
<a href=”#test-popup1” class=”open-popup-link thumb”>
434 435
Primeiro temos a class “thumb”, já apresentada a nós, que serve para estilizar o link. Entretanto
temos duas novidades. Uma é a outra class “open-popup-link”. Com ela a nossa intenção é que
quando o usuário “clique em uma imagem da mini galeria se abra uma caixa sobre a interface do
site”. Esta caixa terá a imagem completa de cada trabalho do Galucho mais o título e a descrição
do projeto, sacou?
E aí sim, vai ficar do jeito que o Galucho quer. E os visitantes poderão ver e entender os trabalhos
do Galucho.
E o que a class “open-popup-link” tem a ver com isso? Muita coisa!
A caixa que se abre acima da interface do site é decorrente de um efeito chamado “lightbox”. Este
é um efeito muito comum na web e com certeza você já viu. E ele é possível através de javascript.
A class “open-popup-link” chama uma função específica de um script quando clicamos na ima-
gem e esta função abre a caixa. E nessa hora que entra em ação a segunda novidade.
O “#test-popup1” encontrado dentro do atributo “href” indica que haverá um acesso para alguma
parte dentro da página. E que parte seria essa?
Bom, cada link do código acima tem seu próprio “#test-popup...”, #test-popup1, #test-popup2,
#test-popup3, e consequentemente eles acessarão elementos com IDs correspondentes (id=tes-
t-popup1”) e assim por diante. O mais bacana é que os conteúdos destes elementos aparecerão
dentro da caixa lightbox.
Então está na hora de inserir mais código no documento logo após o fechamento de “ul”. Veja:
<div id=”test-popup1” class=”white-popup mfp-hide”>
<img src=”img/chief-of-design-blog.jpg” alt=”Chief of Design” width=”898” height=”444”>
<h3>Descrição do projeto</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tin...</p>
<button title=”Close (Esc)” type=”button” class=”mfp-close”>×</button>
</div>
Não coloquei o código completo. Sabemos que se trata de 3 trabalhos por seção, então tudo
que temos que fazer é repetir mais duas vezes o código acima. Aí, nós mudaremos o número do
“#test-popup1”, o endereço e o tamanho da imagem.
Como o site do Galucho é fictício e para fins didáticos, manteremos os textos dos cabeçalhos “h3”
e dos parágrafos em todas as caixas. Entretanto sabemos que em condições normais estes textos
seriam diferentes e retratariam cada trabalho de forma personalizada. Veja a seguir a imagem dos
códigos para os três trabalhos da seção “Web Design”.
Temos um elemento
HTML até aqui não
usado. É o “button”.
Ele cria um botão
clicável e terá a fun-
ção de fechar a caixa
lightbox quando o
usuário clicar em “x”.
O nome do plugin
javascript que fará a
mágica toda se cha-
ma “Magnific Popup”
(http://dimseme-
nov.com/plugins/
magnific-popup/).
Quando ele tiver instalado e configurado em nosso documento todo o conteúdo apresentado no
código anterior ficará oculto e você só verá as mini galerias, porém enquanto isso não acontece
o que temos é um verdadeiro caos de imagens e textos. Então vamos ao que interessa que é ins-
talar o plugin.
436 437
Primeiro baixaremos o pacote de arquivos no site do desenvolvedor do plugin e os colocaremos
dentro do nosso diretório. Importante ler a documentação do site. Em seguida, digitaremos antes
de nossa folha de estilo, o código que linka para o CSS do plugin e aproveitamos para deletar a
linha de código do plugin Bxslider que não será usado nesta página:
<link rel=”stylesheet” href=”magnific-popup.css”>
<link rel=”stylesheet” href=”estilos.css” media=”all”>
Agora é hora de ir antes da tag de fechamento do elemento “body” para colocar os códigos javas-
cript do plugin. Aproveitaremos e deletaremos também o script do Bxslider. Veja:
<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/combo-navi.js”></script>
<script src=”js/css3-mediaqueries.js”></script>
<script src=”js/jquery.magnific-popup.js”></script>
<script type=”text/javascript”>
$(‘.open-popup-link’).magnificPopup({
type:’inline’,
midClick: true
});
</script>
</body>
Agora com tudo devidamente instalado é hora de testar. Vamos clicar na primeira imagem do
portfólio do Galucho para ver o resultado:
Bom, podemos dizer que
o efeito funcionou parcial-
mente, isso porque estetica-
mente falando e em termos
de usabilidade não chega-
mos ao resultado que espe-
rávamos.
Mal conseguimos ler os tex-
tos e a imagem do trabalho
do Galucho extrapola as di-
mensões do dispositivo...
Imagino que você já deva sa-
ber o motivo.
Tudo isso acontece porque
estamos usando as folhas de
estilos do plugin e precisa-
mos mudar algumas decla-
rações para que se adéque
ao nosso layout.
É o que faremos logo, logo...
Primeiro vamos completar o
restante do código HTML. Fal-
ta inserirmos os trabalhos deDesign Gráfico e de Fotografia
do Galucho.
438 439
Como o código é extenso e repetitivo não vamos reproduzir aqui. Porém como instrução basta
copiar todos os códigos que estão entre as tags “<section></section>” referente à seção sobre
“Web Design”. Depois cole duas vezes e substitua os títulos dos cabeçalhos “h3” pelos títulos das
seções correspondentes (Design gráfico e Fotografia).
Outras mudanças serão necessárias:
As âncoras “#test-popup...” deverão ter sequencias ate atingir o número 9 de “#test-popup9”,
porque temos um total de 9 trabalhos no portfólio do Galucho. Três por seção. O mesmo deverá
acontecer com <div id=”test-popup1” class=”white-popup mfp-hide”>. Os IDs de cada “div” de-
verão seguir a sequencia de 1 até 9, ou seja até <div id=”test-popup9” class=”white-popup mfp-
-hide”>.
E para encerrar cada imagem (maior) dentro do caixa lightbox deve corresponder, óbvio, a cada
imagem clicável encontrada na lista da galeria.
Agora finalmente já podemos partir para a estilização da página portfólio.
Vamos nessa Galuchos!!!
7.13 - Finalizar a estilização da página de portfó-
lio para resoluções menores que 480 pixels
A primeira coisa que iremos nos preocupar é dar uma aparência decente a caixa lightbox que
montamos na etapa anterior. São poucas regras CSS que usaremos.
Veja a seguir:
440 441
Vamos ver o resultado? Veja o antes e o depois:
Procuramos usar o mesmo background do corpo do site e o mesmo tipo de fonte para os textos.
As propriedades já são bem conhecidas por você. E o mais bacana é que não precisamos mudar
nada nas próximas consultas de mídia. Veja esta imagem para resoluções acima de 990 pixels.
Agora os trabalhos do Galucho podem ser vistos sem problemas, entretanto ainda temos re-
gras para esta consulta de mídia.
Lembra quando eu falei que a página estava bacana, mas precisava de uns pequenos ajustes?
Um detalhe que não pode passar desapercebido é que a mini galeria usada nas duas páginas
apesar de terem, até agora, os mesmos estilos, elas não são iguais. Em comparação com a
galeria da Home Page a galeria do portfólio não tem os botões alaranjados e nem a descrição
logo abaixo deles. Isso faz com que as imagens de cada seção fiquem “grudadas” uma nas ou-
tras nas resoluções menores.
Parece que a solução é fácil, bastando colocar um valor de “margin-bottom”. Porém se fizer-
mos isso alteramos o layout da Home. E agora?
442 443
Outra coisa que pretendemos fazer é eliminar também aquele adereço que fica acima dos subtí-
tulos de cada seção, mas isso também alteraria o layout da Home Page. E agora?
Quando você quer alterar algum coisa em comum entre páginas sem bagunçar o estilos, uma
sugestão é usar um seletor extra, em um elemento, na pagina que você quer fazer a alteração.
Mas como proceder? Veja um exemplo:
O código CSS usado faz as imagens “grudarem” nesta página, mas não na Home Page é este:
Vemos que temos margens superior e inferior de valor zero. Na Home page não fez diferença,
porque tem mais elementos HTML com estilos que promovem uma área de respiro. Como na
página de portfólio não possui esses elementos o ideal seria declarar, por exemplo, uma margem
inferior de 20 pixels. Então vamos a mágica!
Procuraremos um elemento ancestral bem acima desta lista. No caso, decidimos usar a div de
class “container”. Agora colocaremos uma nova class. A chamaremos de “portfólio”:
<div class=”container portfolio”>
Com isso basta apenas adicionar na frente do seletor que você quer mudar uma declaração o
seletor no elemento ancestral. Veja:
Note que não foi necessário colocar a declaração “width:auto”, pois a regra anterior já assume.
Nosso novo seletor só vai mudar a declaração que nos interessa. E como ná Home Page não
possui ‘<div class=”container portfolio”>’, qualquer alteração que fizermos usando o seletor do
elemento ancestral não danificará seu layout.
Agora veja os códigos restantes.
Praticamente a página de portfólio tem poucas alterações porque recebe grande parte dos estilos
já declarados no arquivo “estilos.css”. Teremos apenas pequenos ajustes:
No código acima um pequeno ajuste na margem inferior do laço da fita. E as próximas regras são
ajustes na área de conteúdo:
E é só isso mesmo! Mexemos mais na caixa de lightbox do que no layout da página propriamente
dito. Vamos para a próxima consulta de mídia?
444 445
7.14 - Finalizar a estilização da página de portfó-
lio para resoluções de até no mínimo 481 pixels
Sinto decepcionar você, mas se você
esperava uma chuva de regras CSS, mas
isso é tudo que temos que acrescentar:
E agora veja ao lado como a página está
ficando:
7.15 - Finalizar a estilização da página de portfó-
lio para resoluções de até no mínimo 767 pixels
E a redução de códigos só
tende a diminuir. Na verda-
de a única coisa que faremos
aqui é acrescentar o seletor
“portfolio .feature li” para so-
brescrever as regras da con-
sulta de mídia anterior.
Este código nós criamos
quando estávamos estilizan-
do a Home Page.
447446
7.16 - Finalizar a estilização da página de portfó-
lio para resoluções de até no mínimo 991 pixels
Da mesma forma que o tópi-
co anterior, a única coisa que
faremos aqui é acrescentar o
seletor “portfolio .feature li”
para sobrescrever as regras
da consulta de mídia anterior.
Este código também foi criado
quando estávamos estilizando
a Home Page para esta con-
sulta de mídia.
Parabéns!!! Terminamos o site do Galucho!!!
Seguimos todas as etapas do processo começando pelo o wireframe, passando pela codifica-
ção HTML e finalizando com estilização dos elementos para diferentes consultas de mídia.
Comemore! Você está habilitado a desenvolver páginas web com HTML e CSS usando as tags e
propriedades mais usadas. O próximo passado e ir aumentando seu repertório conforme adqui-
re experiência.
Sucesso para você, Galucho!
Site completo:
http://ebookhtmlcss.com/
site-galucho/index.html
Arquivos completo do site:
http://ebookhtmlcss.com/
site-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
http://ebookhtmlcss.com/site-galucho/index.html
http://ebookhtmlcss.com//arquivos/capitulo-7/arquivos-site-galucho.rar
http://ebookhtmlcss.com//arquivos/capitulo-7/arquivos-site-galucho.rar
http://ebookhtmlcss.com//arquivos/capitulo-7/arquivos-site-galucho.rar
http://ebookhtmlcss.com//arquivos/capitulo-7/arquivos-site-galucho.rar
448 449
O mundo começa agora.
Apenas começamos...
Tomei a liberdade de usar este trecho final de uma canção da famosa banda Brasileira Legião
Urbana para iniciar os trechos finais deste E-book.
Apesar de concluído, a leitura deste E-book, seu mundo no desenvolvimento web começa agora.
Você apenas começou!
Entretanto, você começou em vantagem em relação a muitos que por não saberem que o come-
ço é difícil tentam abraçar o mundo querendo aprender de uma vez tudo o que existe de técnicas
e ferramentas. Nossa intenção foi de abrir sua cabeça para o buscar primeiro essencial, o “crème
de la crème”: focar no que é primordial para você conseguir escrever o seu próprio código e as-
sim “sair do zero”.
“É fazendo que se aprende a fazer aquilo que se deve aprender a fazer.”
Aristóteles
Espero, de todo coração, que você perceba que este E-book cumpriu sua missão. Posso afirmar
que em números ele cumpriu. Lembra de nossa promessa inicial? Focar nos fundamentos que
trazem efetivamente a maior parte dos resultados, que já podem ser aplicados em poucos dias
até que lhe traga a “fluência” necessária para assumir seus primeiros projetos? Traduzindo o tão
falado esquema 80/20?
Pois bem, numericamente falando, trabalhamos aproximadamente dentro deste esquema. Você
pode até não ter percebido, mas foi que aconteceu.
Se minha contagem não estiver errada existem, para todas as versões de HTML, 131 elementos
(fonte: http://www.w3schools.com/tags/default.asp).
Nós conseguimos montar o site do GaluchoMais conteúdos dessa disciplina
QUESTOES DE PROVA PROGRAMAÇÃO ORIENTADA A OBJETOS II- Introdução ao novo Data Factory no Microsoft Fabric - Resumo
- Amarração Dinâmica em Python
- Escopo de Variáveis em Python
- Calculadora de Soma com While
- Captura de tela 2025-19
- Saída do Código Python
- Python Basico
- No contexto da atividade de Inteligência de Segurança Pública, assinale a alternativa que NÃO contempla sua finalidade precípua: Questão 13Escolha...
- Dentre os exemplos citados, qual setor é tido historicamente como monopólio natural? Questão 6Resposta a. Aviação comercial b. Saneamento e Abastecime
- Verificamos que: Observe a página retirada de um material didático de 4o ano escolar, de exercício sobre verbo: a. A metodologia de ensino focaliza ap
- A empresa “SolarTech” está desenvolvendo um projeto para implantação de uma nova fábrica de painéis solares. Antes de iniciar a execução, a equipe ...
- No contexto de uma parceria estratégica, a empresa "TecnoSoluções" celebrou um contrato de prestação de serviços com a "InovaCorp" para o desenvolv...
- A construção de triângulos constitui uma das práticas fundamentais da geometria plana, pois permite compreender de maneira concreta os critérios de...
- A jurisprudência tem admitido as capturas de tela de aplicativos de mensagens como meio de prova, cabendo à parte contrária o ônus de demonstrar event
- iuma empresa do setor de biotecnologia está avaliando a eficácia de seus investimentos recentes em pesquisa e desenvolvimento. Apesar de apresentar fo
- Considera-se uma barreira de implementação típica de políticas públicas, relacionada à capacidade operacional, o seguinte problema: (A) autorização le
- Qual abordagem de pesquisa de mercado é especialmente útil para estabelecer relações de causa e efeito, observando as consequências de alterações i...
- O planejamento financeiro é um aspecto essencial para a sustentabilidade de clínicas e serviços de Terapia Ocupacional, sobretudo em modelos digita...
- Com um site Wordpress podemos definir perfis de usuários. Sendo assim, qual das funções de usuários abaixo é a que tem o menor número de permissões...
- Marque a alternativa que apresenta uma vantagem de se utilizar a Linguagem Python a. Multiplataforma. b. Python é usado no desenvolvimento da Web. C.
- Gestão de Sala de Aula (1)
- My List De Doramas