Apostila de CSS

CSS
Versão 1.0.0
Sumário
I Sobre essa apostila 2
II Informações Básicas 4
III CSS 9
1 O que é o CSS 10
2 Plano de ensino 11
2.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 Público Alvo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3 Pré-requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.4 Descrição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.6 Cronograma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.7 Programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.8 Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.9 Bibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3 Lição 1 - Conheçendo o CSS 14

3.1 Como Funciona o CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.1 A sintaxe básica das CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.1.2 Tabela de Referência . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Aplicando CSS a um documento HTML . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.1 Interno (a tag style) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.2 Estilos In-line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.3 Utilizando estilos externamente . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4 Lição 2 - Cores e Fundos 19

4.1 Cor e CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.1 Cores Hexadecimais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.2 Abreviações em Hexadecimal . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.1.3 Valores em RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1.4 Porcentagens em RGB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.1.5 Nome da Cor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Adicionando cor de fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.3 Juntar Imagem ao Fundo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
4.4 Controlando a orientação das imagens de fundo . . . . . . . . . . . . . . . . . . . . 22

4.4.1 Imagens ao longo do eixo horizontal . . . . . . . . . . . . . . . . . . . . . . . 22
4.4.2 Imagens ao longo do eixo vertical . . . . . . . . . . . . . . . . . . . . . . . . 22
4.4.3 Posicionando a imagem de Fundo . . . . . . . . . . . . . . . . . . . . . . . . 23
4.5 Fixando e Rolando imagens de fundo . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5 Lição 3 - Fontes, Textos e Links 24

5.1 Escolhendo a Fonte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.1.1 Aplicando "font-family"aos textos . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.1.2 Grupo de Fontes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.1.3 Nomes Múltiplos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2 Textos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.1 Indentação de texto [text-indent] . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.2.2 Alinhamento de textos [text-align] . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2.3 Decoração de textos [text-decoration] . . . . . . . . . . . . . . . . . . . . . . 27
5.2.4 Espaço entre letras [letter-spacing] . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2.5 Transformação de textos [text-transform] . . . . . . . . . . . . . . . . . . . . . 27
5.3 Trabalhando com Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6 Lição 4 - Indentificando elementos e caixas 30

6.1 Classes[class] e id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6.1.1 Seletor Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6.1.2 Seletor ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2 Caixas (Box-model) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2.1 Box-model em ação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7 Lição 5 - Posicionamento e Elementos Flutuantes 34

7.1 Posicionando Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.1.1 Fluxo Normal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.1.2 Posicionamento Absoluto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.1.3 Posição Relativa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7.1.4 Posição Fixa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7.2 Elementos Flutuantes [floats] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.2.1 A propriedade clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
7.3 Z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2
Parte I
Sobre essa apostila
3
Conteúdo
O conteúdo dessa apostila é fruto da compilação de diversos materiais livres publicados na in-
ternet, disponíveis em diversos sites ou originalmente produzido no CDTC em http://www.cdtc.org.br.
O formato original deste material bem como sua atualização está disponível dentro da licença
GNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seção de
mesmo nome, tendo inclusive uma versão traduzida (não oficial).
A revisão e alteração vem sendo realizada pelo CDTC (suporte@cdtc.org.br), desde outubro
de 2006. Criticas e sugestões construtivas são bem-vindas a qualquer tempo.
Autores
A autoria deste conteúdo, atividades e avaliações é de responsabilidade de Helmuth Duarte
Saatkamp (helmuth@cdtc.org.br) .
O texto original faz parte do projeto Centro de Difusão de Tecnolgia e Conhecimento, que vem
sendo realizado pelo ITI em conjunto com outros parceiros institucionais, atuando em conjunto
com as universidades federais brasileiras que tem produzido e utilizado Software Livre, apoiando
inclusive a comunidade Free Software junto a outras entidades no país.
Informações adicionais podem ser obtidas atráves do email ouvidoria@cdtc.org.br, ou da

home page da entidade, atráves da URL http://www.cdtc.org.br.
Garantias
O material contido nesta apostila é isento de garantias e o seu uso é de inteira responsabi-
lidade do usuário/leitor. Os autores, bem como o ITI e seus parceiros, não se responsabilizam
direta ou indiretamente por qualquer prejuízo oriundo da utilização do material aqui contido.
Licença
Copyright ©2006,Helmuth Duarte Saatkamp (helmuth@cdtc.org.br) .
Permission is granted to copy, distribute and/or modify this document under the terms
of the GNU Free Documentation License, Version 1.1 or any later version published by
the Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOS-
TILA. A copy of the license is included in the section entitled GNU Free Documentation
License.
4
Parte II
Informações Básicas
5
Sobre o CDTC
Objetivo Geral
O Projeto CDTC visa a promoção e o desenvolvimento de ações que incentivem a dissemina-

ção de soluções que utilizem padrões abertos e não proprietários de tecnologia, em proveito do
desenvolvimento social, cultural, político, tecnológico e econômico da sociedade brasileira.
Objetivo Específico
Auxiliar o Governo Federal na implantação do plano nacional de software não-proprietário e

de código fonte aberto, identificando e mobilizando grupos de formadores de opinião dentre os
servidores públicos e agentes políticos da União Federal, estimulando e incentivando o mercado
nacional a adotar novos modelos de negócio da tecnologia da informação e de novos negócios
de comunicação com base em software não-proprietário e de código fonte aberto, oferecendo
treinamento específico para técnicos, profissionais de suporte e funcionários públicos usuários,
criando grupos de funcionários públicos que irão treinar outros funcionários públicos e atuar como
incentivadores e defensores de produtos de software não proprietários e código fonte aberto, ofe-
recendo conteúdo técnico on-line para serviços de suporte, ferramentas para desenvolvimento de
produtos de software não proprietários e de seu código fonte livre, articulando redes de terceiros
(dentro e fora do governo) fornecedoras de educação, pesquisa, desenvolvimento e teste de pro-
dutos de software livre.
Guia do aluno
Neste guia, você terá reunidas uma série de informações importantes para que você comece
seu curso. São elas:
• Licenças para cópia de material disponível
• Os 10 mandamentos do aluno de Educação a Distância
• Como participar dos foruns e da wikipédia
• Primeiros passos
É muito importante que você entre em contato com TODAS estas informações, seguindo o
roteiro acima.
Licença
Copyright ©2006, Helmuth Duarte Saatkamp (helmuth@cdtc.org.br) .
6
É dada permissão para copiar, distribuir e/ou modificar este documento sob os termos
da Licença de Documentação Livre GNU, Versão 1.1 ou qualquer versão posterior
públicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA
APOSTILA. Uma cópia da licença está inclusa na seção entitulada "Licença de Docu-
mentação Livre GNU".
Os 10 mandamentos do aluno de educação online
• 1. Acesso à Internet: ter endereço eletrônico, um provedor e um equipamento adequado é

pré-requisito para a participação nos cursos a distância.
• 2. Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá-

tica é necessário para poder executar as tarefas.
• 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distân-

cia conta muitos pontos, pois irá colaborar para o processo ensino-aprendizagem pessoal,
dos colegas e dos professores.
• 4. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seus

colegas de turma respeitando-os e fazendo ser respeitado pelo mesmo.
• 5. Organização pessoal: planejar e organizar tudo é fundamental para facilitar a sua revisão
e a sua recuperação de materiais.
• 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigações e
realizá-las em tempo real.
• 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre.
• 8. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica, aprendizagens

e descobertas.
• 9. Objetividade em sua comunicação: comunicar-se de forma clara, breve e transparente é

ponto - chave na comunicação pela Internet.
• 10. Responsabilidade: ser responsável por seu próprio aprendizado. O ambiente virtual não
controla a sua dedicação, mas reflete os resultados do seu esforço e da sua colaboração.
Como participar dos fóruns e Wikipédia
Você tem um problema e precisa de ajuda?
Podemos te ajudar de 2 formas:
A primeira é o uso dos fóruns de notícias e de dúvidas gerais que se distinguem pelo uso:
. O fórum de notícias tem por objetivo disponibilizar um meio de acesso rápido a informações
que sejam pertinentes ao curso (avisos, notícias). As mensagens postadas nele são enviadas a
7
todos participantes. Assim, se o monitor ou algum outro participante tiver uma informação que
interesse ao grupo, favor postá-la aqui.
Porém, se o que você deseja é resolver alguma dúvida ou discutir algum tópico específico do
curso. É recomendado que você faça uso do Forum de dúvidas gerais que lhe dá recursos mais
efetivos para esta prática.
. O fórum de dúvidas gerais tem por objetivo disponibilizar um meio fácil, rápido e interativo
para solucionar suas dúvidas e trocar experiências. As mensagens postadas nele são enviadas
a todos participantes do curso. Assim, fica muito mais fácil obter respostas, já que todos podem
ajudar.
Se você receber uma mensagem com algum tópico que saiba responder, não se preocupe com a
formalização ou a gramática. Responda! E não se esqueça de que antes de abrir um novo tópico
é recomendável ver se a sua pergunta já foi feita por outro participante.
A segunda forma se dá pelas Wikis:
. Uma wiki é uma página web que pode ser editada colaborativamente, ou seja, qualquer par-
ticipante pode inserir, editar, apagar textos. As versões antigas vão sendo arquivadas e podem
ser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece um
ótimo suporte a processos de aprendizagem colaborativa. A maior wiki na web é o site "Wikipé-
dia", uma experiência grandiosa de construção de uma enciclopédia de forma colaborativa, por
pessoas de todas as partes do mundo. Acesse-a em português pelos links:
• Página principal da Wiki - http://pt.wikipedia.org/wiki/
Agradecemos antecipadamente a sua colaboração com a aprendizagem do grupo!
Primeiros Passos
Para uma melhor aprendizagem é recomendável que você siga os seguintes passos:
• Ler o Plano de Ensino e entender a que seu curso se dispõe a ensinar;
• Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar das
ferramentas básicas do mesmo;
• Entrar nas lições seguindo a seqüência descrita no Plano de Ensino;
• Qualquer dúvida, reporte ao Fórum de Dúvidas Gerais.
Perfil do Tutor
Segue-se uma descrição do tutor ideal, baseada no feedback de alunos e de tutores.
O tutor ideal é um modelo de excelência: é consistente, justo e profissional nos respectivos

valores e atitudes, incentiva mas é honesto, imparcial, amável, positivo, respeitador, aceita as
idéias dos estudantes, é paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.
8
A classificação por um tutor desta natureza proporciona o melhor feedback possível, é crucial, e,
para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem.’ Este tutor
ou instrutor:
• fornece explicações claras acerca do que ele espera, e do estilo de classificação que irá
utilizar;
• gosta que lhe façam perguntas adicionais;
• identifica as nossas falhas, mas corrige-as amavelmente’, diz um estudante, ’e explica por-
que motivo a classificação foi ou não foi atribuída’;
• tece comentários completos e construtivos, mas de forma agradável (em contraste com um
reparo de um estudante: ’os comentários deixam-nos com uma sensação de crítica, de
ameaça e de nervossismo’)
• dá uma ajuda complementar para encorajar um estudante em dificuldade;
• esclarece pontos que não foram entendidos, ou corretamente aprendidos anteriormente;
• ajuda o estudante a alcançar os seus objetivos;
• é flexível quando necessário;
• mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e, por isso,

talvez numa fase menos interessante para o tutor);
• escreve todas as correções de forma legível e com um nível de pormenorização adequado;
• acima de tudo, devolve os trabalhos rapidamente;
9
Parte III
CSS
10
Capítulo 1
O que é o CSS
Sejam bem-vindos ao fantástico mundo do "Cascading Style Sheets"(CSS),com ele você será
capaz de projetar páginas eficientes e atraentes. O CSS oferece um grande pontêncial e flexibi-
lidade, na hora de editar e alterar, sendo possível uma total restruturação no layout do site mu-
dando apenas o CSS. Este curso mostrará como você pode trazer vida a suas páginas na Web.
Sendo uma linguagem de simples abordagem e divertida, você encontrará grande facilidade na
aprendizagem e uma vasta utilidade para seus futuros projetos! Para usar CSS é necessário
primeiro um conhecimento básico de HTML. Se você não está familiarizado com HTML, faça um
de nossos cursos de HTML antes de começar com CSS.
11
Capítulo 2
Plano de ensino
2.1 Objetivo
Capacitar o usuário para o uso autônomo do CSS bem como suas aplicações e suas ferra-
mentas mais utilizadas.
2.2 Público Alvo

Usuários finais ou novatos que desejam aprender ou aprimorar seus conhecimentos em de-
senvolvimentos de sites.
2.3 Pré-requisitos
Os usuários deverão ser, necessariamente, funcionários de empresas públicas e ter conheci-
mentos básicos de HTML.
2.4 Descrição
O curso será realizado na modalidade Educação a Distância e utilizará a Plataforma Moodle
como ferramenta de aprendizagem. Ele será dividido em tópicos e cada um deles é composto
por um conjunto de atividades (lições, fóruns, glossários, questionários e outros) que deverão ser
executadas de acordo com as instruções fornecidas. O material didático está disponível on-line
de acordo com as datas pré-estabelecidas em cada tópico. A versão adotada do CSS é a 1.2.3,
caso possua outra versão instalada, podem ocorrer poucas diferenças.
Todo o material está no formato de lições, e estará disponível ao longo do curso. As lições
poderão ser acessadas quantas vezes forem necessárias. Aconselhamos a leitura de "Ambien-
tação do Moodle", para que você conheça o produto de Ensino a Distância, evitando dificuldades
advindas do "desconhecimento"sobre o mesmo.
Ao final de cada semana do curso será disponibilizada a prova referente ao módulo estudado
anteriormente que também conterá perguntas sobre os textos indicados. Utilize o material de
cada semana e os exemplos disponibilizados para se preparar para prova.
12
Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deve ser
disponibilizada no fórum ou enviada por e-mail. Diariamente os monitores darão respostas e
esclarecimentos.
2.5 Metodologia
O curso está dividido da seguinte maneira:
2.6 Cronograma
• Lição 1 - Conhecendo o CSS;
• Lição 2 - Cores e Fundos;
• Lição 3 - Fontes, Textos e Links;
• Lição 4 - Identificando Elementos e Caixas;
• Lição 5 - Posicionamento e Elementos Flutuantes.
As lições contém o conteúdo principal. Elas poderão ser acessadas quantas vezes forem neces-
sárias, desde que esteja dentro da semana programada. Ao final de uma lição, você receberá
uma nota de acordo com o seu desempenho. Responda com atenção às perguntas de cada li-
ção, pois elas serão consideradas na sua nota final. Caso sua nota numa determinada lição seja
menor do que 6.0, sugerimos que você faça novamente esta lição.
Ao final do curso será disponibilizada a avaliação referente ao curso. Tanto as notas das lições
quanto a da avaliação serão consideradas para a nota final. Todos os módulos ficarão visíveis
para que possam ser consultados durante a avaliação final.
Aconselhamos a leitura da "Ambientação do Moodle"para que você conheça a plataforma de
Ensino a Distância, evitando dificuldades advindas do "desconhecimento"sobre a mesma.
Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deverá ser
enviada no fórum. Diariamente os monitores darão respostas e esclarecimentos.
2.7 Programa
O curso de CSS oferecerá o seguinte conteúdo:
• Conhecendo o CSS:
– Como funciona o CSS?;

– Tabela de Referencia;
– Aplicando CSS.
• Cores e Fundos:
– Cor e CSS;
– Adicionando cor ao Fundo;
– Juntar Imagem ao Fundo;
13
– Controlar a orientação de uma imagem de fundo;

– Fixando e rolando imagens de fundo.
• Fontes, Textos e Links:
– Escolhendo a Fonte;
– Textos;
– Trabalhando com Links.
• Identificando Elementos e Caixas:
– Classes e Id’s;
– Caixas.
• Posicionamento e Elementos Flutuantes:
– Posicionamento de Elementos;
– Elementos flutuantes;
– Z-index.
2.8 Avaliação
Toda a avaliação será feita on-line.
Aspectos a serem considerados na avaliação:
• iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento;
• capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.
Instrumentos de avaliação:
• participação ativa nas atividades programadas;
• avaliação ao final do curso;
• o participante fará várias avaliações referente ao conteúdo do curso. Para a aprovação e

obtenção do certificado o participante deverá obter nota final maior ou igual a 6.0 de acordo
com a fórmula abaixo:
• Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições
• AF = Avaliações
2.9 Bibliografia
• Livro: Web Design in a Nutshell - A Desktop Quick Reference
• Site: http://pt-br.html.net/tutorials/css/
14
Capítulo 3
Lição 1 - Conheçendo o CSS
Conheça um pouco da sintese e como funciona o CSS.
3.1 Como Funciona o CSS?

No curso de CSS você verá como funciona o css e aprennderá a desenvolver sua própria
folha de estilos. Conhecerá o básico sobre o modelo CSS e que código é necessário para usar
CSS em um documento HTML.
Muitas das propriedades usadas em Cascading Style Sheets (CSS) se assemelham àquelas
utilizadas no HTML. Se você já está acostumado a usar HTML para layout irá ter grande facilidade
em muitos dos códigos que usaremos.
3.1.1 A sintaxe básica das CSS

Suponha que desejamos uma cor de fundo preta para a página web:
Usando HTML podemos fazer assim:
<body bgcolor="#FFFFFF">
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FFFFFF;}
Como você pode notar os códigos HTML e CSS são mais ou menos parecidos. O exemplo
acima serve também para demonstrar o fundamento do modelo CSS:
Seletor {propriedade: valor;}

O seletor será a tag(s) HTML que será aplicada uma propriedade, na proxima página será
apresentado uma tabela com as propriedades e seus valores, aconselho a você que imprima
essa tabela para ser como um manual na hora da criação de sua página utilizando o CSS.
15
3.1.2 Tabela de Referência

Segue uma tabela com as principais propriedades e valores do CSS
16
Mas, onde colocar o código CSS? É isto que veremos a seguir.
17
3.2 Aplicando CSS a um documento HTML

Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de
aplicação estão exemplificados a seguir. Recomendamos que você foque no terceiro método, ou
seja, o método externo.
3.2.1 Interno (a tag style)

Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro
das tags <head></head> do nosso código (x)HTML. Você pode ver um exemplo logo abaixo:
<html>
<head>
<title></title>
<style type="text/css">
"Aqui você coloca o CSS"
</style>
</head>
<body>
</body>
</html>
Nesse método cada página (x)HTML terá seu respectivo código CSS para a formatação da
página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no
assunto.
3.2.2 Estilos In-line

Os estilos in-line são definidos ao longo do elemento (x)HTML que você denominou:
<p style="color: #ffffff;">Esse parágrafo terá a cor branca</p>
As desvantagens de se usar estilos in-line é que você só irá poder fazer alterações nos ele-
mentos em que você formatou.
3.2.3 Utilizando estilos externamente

Utilizar CSS externamente é tão fácil quanto internamente, o que muda aqui é que você irá
criar um arquivo com a extensão .css e colocar em seu (x)HTML uma chamada para esse arquivo.
Ficando da seguinte forma:
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
Ou também utilizando o método @import:
<style type="text/css">@import url(nome_do_arquivo.css)</style>
O nosso código (x)HTML ficaria da seguinte forma:
18
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
</head>
<body>
</body>
</html>
Agora com @import:
<html>
<head>
<title></title>
<style type="text/css">@import url(nome_do_arquivo.css)</style>
</head>
<body>
</body>
</html>
A vantagem de se usar CSS externamente é que quando você precisar ou for fazer algumas
mudanças em seu site, basta fazer as alterações no arquivo CSS que é ocorrida uma alteração
global em todo o seu site. Por exemplo, se você tem 100 páginas com um título <h2> em azul,
caso queira alterar a cor para preto, é só alterar uma linha em seu arquivo CSS que todas as 100
páginas terão os títulos alterados.
Como no esquema Abaixo:
Figura 1 - Exemplificação do CSS em modo Externo
Como pode ver a estilização torna o processo de criação de sites algo dinâmica, facilitando
também a manutenção e diminuindo o tamanho do mesmo.
19
Capítulo 4
Lição 2 - Cores e Fundos
Familiarize-se com a interface do CSS. Você irá perceber que ela é bem intuitiva.
4.1 Cor e CSS

Para usar bem as cores no CSS, você precisa saber das diversas maneiras que uma cor pode
ser definida. Embora uma cor possa ser aplicada usando qualquer número, existe uma seqüência
de valores e opções que você precisa saber.
4.1.1 Cores Hexadecimais

Hexadecimal (hex) é um sistema básico de 16 números, sendo muito útil em computadores
pois 8 bits (1 byte na memória) pode ser representado por um único número ou letra. O sis-
tema usa os números de 0 a 9 e as letras de a a f em qualquer combinação de seis elementos
(começando primeiro com #) para representar uma correlação com o vermelho, verde e azul
(#RRGGBB).
#FFFFFF = 255,255,255 = white
Qualquer combinação hexadecimal é permitida no HTML e CSS para representar uma cor.
Exemplo:
body {color: #FFCC99; background-color: #808080;}
a {color: #66CC33;}
Se você aplicar esses estilos a um documento, a cor de fundo seria cinza, o texto cor pêssego,
e no link a cor verde brilhante.
4.1.2 Abreviações em Hexadecimal

Abreviações em hexadecimal permite a você encurtar qualquer cor hexadecimal que tenha
valores pares. Isto significa que cada valor de RR, GG, BB têm de ser as mesmas, tais como
#00CC33 ou #888888. Abreviação em hexadecimal, você toma um dígito de cada valor par, de
modo que o resultado seria #0C3 e #888. Num caso como no #808080, os valores não estão
emparelhados, de forma que você não pode fazer isso em abreviação.
Exemplo:
20
body {color: #FC9; background-color: #808080;}

a {color: #6C3;}
NOTA
Você pode usar hexadecimal abreviação em qualquer documento CSS, mas não em um con-
teúdo HTML.
4.1.3 Valores em RGB

Outro meio de representação de cor no CSS está em usar os próprios valores de RGB. Estes
podem ser encontrados em um programa como o Agave.
Figura 1 - Agave
4.1.4 Porcentagens em RGB

Você também pode usar porcentagens de vermelho, verde e azul. A 0% valor é preto, e um
100% o valor é branco. Portanto, se você definir uma cor como segue:
color: rgb(50%, 100%, 30%);
A cor será aplicado um brilhante verde.
21
4.1.5 Nome da Cor

Você pode usar 17 cores nomes para descrever cores. As cores são aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, and orange (orange
foi introduzido no CSS 2.1):
{color: orange;}
Você provavelmente já se perguntou qual tipo de valor de cor que você deve usar. Qual a
melhor resposta? Todos eles! Provavelmente você irá se encontrar utilizando combinações de
palavras chave, abreviação hexadecimal, e hexadecimais mais freqüentes.
NOTA
Na versão 3.0 do CSS, muitas cores foram adicionadas.
4.2 Adicionando cor de fundo

Adicionando cor de fundo é muito fácil e muito útil. Você pode adicionar à sua página cor de
fundo e qualquer elemento de fundo. Cor e o fundo do documento
Cor é adicionado ao fundo do documento, selecionando o elemento do corpo e utilizando a
propriedade e o valor de coloração:
Exemplo:
body {background-color: \#999;}
Aqui você vê eu escolhi um fundo de cinza escuro para todo o corpo. Quando visto em um
browser, esta transforma completamente a cor de fundo cinza.
NOTA
Você sempre deve definir uma página a cor, mesmo se tiver a intenção de usar gráficos e
outros elementos fundos em sua concepção. Isso ocorre porque as cores são interpretadas rapi-
damente pelos navegadores que as renderiza bem antes que qualquer gráficos, proporcionando
uma experiência visual mais simples para os visitantes. Cor e o fundo dos elementos.
Com o CSS, você pode adicionar cor para cada elemento de origem. Para isso, basta seleci-
onar o elemento e criar uma regra. Farei isso para a <h1> para construir uma folha de estilo em
nosso simples documento:
Exemplo:
body {background-color: #999;}
h1 {background-color: #ccc;}
p {background-color: #fff;}
a {background-color: #ccc;}
4.3 Juntar Imagem ao Fundo

Você pode anexar um imagem de fundo para o documento ou qualquer elemento. Existem
outras maneiras de controlar fundos com CSS, porém, dando-lhe um vasto leque de opções
quando se trata de aplicar design visual ao seu site. Ao combinar uma página com elementos de
fundo, você pode criar múltiplas camadas de imagens e efeitos especiais.
Primeiro, vamos ter que anexar a imagem de fundo ao documento. Isto é feito selecionando
o corpo e criando uma regra usando a background-image com o valor da imagem do local e o
nome:
22
body {
background-image: url(imagem_que_você_que_utilizar.jpg);
}
NOTA
As imagens em um fundo ficam ladrilhadas(repetidas) o que é um comportamento normal
para o navegador. Com HTML, você não tem nenhum controle sobre como uma imagem. Como
você vai ver em breve, CSS lhe dá muito mais controle sobre como imagens de fundo pode ser
manipuladas.
Você também pode adicionar imagens a elementos. Se você quis esta imagem para aparecer
no fundo de todas as suas posições, você poderia criar a seguinte regra:
H1, h2, h3, h4, h5, h6 {

background-image: url(imagem_que_você_que_utilizar.jpg);
}
4.4 Controlando a orientação das imagens de fundo

CSS lhe permite controlar a orientação e modo como a imagem irá se comportar. Isto é feito
usando o background-repeat juntamente com o valor apropriado.
4.4.1 Imagens ao longo do eixo horizontal

O eixo horizontal ou x, é usado para que a imagem se repita ao longo do eixo horizontal
usando a propriedade background-repeat com o valor de repeat-x
body {
background-image: url(imagem_que_você_quer_usar.jpg);
background-repeat: repeat-x;
}
4.4.2 Imagens ao longo do eixo vertical

O eixo vertical ou y, é usado para que a imagem se repita ao longo do eixo vertical usando a
propriedade background-repeat com o valor de repeat-y:
body {
background-repeat: repeat-y;
}
você também pode não querer repetir as imagens, então use o valor no-repeat:
body {
background-repeat: no-repeat;
}
Isto mostrará a imagem aparecendo no canto superior esquerdo uma vez, sem repetir.
23
4.4.3 Posicionando a imagem de Fundo

Você pode posicionar uma imagem de fundo no documento ou qualquer elemento que quiser.
Você tem que definir primeiro as propriedades background-repeat com o valor no-repeat. Então
você pode posicionar usando qualquer um dos valores descritos na tabela abaixo:
NOTA
Você pode combinar valores de porcentagem com os outros valores numéricos no background-
position, com exceção de palavras, podendo ter valores como 80% 50px, mas não pode ter valo-
res de 100% left.
Se somente um valor de porcentagem ou comprimento for dado, ele será aplicado somente a
posição horizontal, e a vertical ficará com seu valor padrão de 50%.
Exemplo:
h1 {
background-image: url(imagem_que_você_quer_usar.gif);
background-position: 0% 0%;
}
h2 {
background-position: 100px 4px;
}
h3 {
background-position: bottom right;
}
Note que já ajustei, não só a imagem, mas também o valor de no-repeat, para garantir que a
posição da imagem de fundo e seus valores vão funcionar corretamente.
4.5 Fixando e Rolando imagens de fundo

Você pode ter uma imagem de fundo fixa na tela de seu navegador, ou permitir que ela role
com o documento usando a propriedade background-attachment com um desses dois valores
fixed ou scroll.
Normalmente, este é usado tanto para o corpo inteiro ou áreas de conteúdo dentro do docu-
mento. No entanto, como você viu até agora, você pode usá-lo em qualquer elemento que faz
sentido fazê-lo.
Exemplo:
body {
background-position: right;
background-attachment: scroll;
}
24
Capítulo 5
Lição 3 - Fontes, Textos e Links
Conheça como são e como utilizar as fontes e a estilizar seus textos e links.
5.1 Escolhendo a Fonte

Escolhendo fontes para um documento pode ser confuso para aqueles que têm pouca expo-
sição a tipografia. Felizmente, existem algumas boas regras de ouro para retroceder.
Fonts têm sido, tradicionalmente, subdivididos em grupos, referido como fonte ou categorias,
como em CSS, font-family. As fontes são agrupados com base em suas características. Em CSS,
existem cinco categorias gerais:
• Serif - a fonte serif é aquela que tem floresce sobre a carta, referidos como, você adivinhou,
serifs. Estas fontes foram pensadas para servirem com excelência no corpo do texto, es-
pecialmente na mídia impressa, e são muito apropriadas para cabeçalho e outros textos,
como legendas. Serif fontes que podem ser familiares para você incluir Times e a Geórgia,
que são largamente utilizados na web;
• Sans-serif - o termo sans-serif significa "sem serifa"e descreve, literalmente, fontes que não
têm floresces. Em vez disso, fontes sem-serifa costumam ser arredondadas, e letras largas.
Tipicamente o que se pensa ser melhor para cabeçalhos de impressão. No entanto, nem
sempre são a melhor escolha para textos muito pequenos ou em itálico. Conhecer fontes
dentro desta categoria incluem Arial, Helvetica, e Verdana;
• Monospace - fontes Monospace são fontes cujas letras são todas da mesma largura. Eles
são tipicamente usadas para descrever programação código amostras. Nos últimos anos,
elas foram populares na concepção, dando um "grunge"no olhar para os desenhos em que
são utilizados. No entanto, você deve limitar uso de fontes monospace. O mais comum
monospace fonte em computação é Courier;
• Fantasy - fontes Fantasy, também conhecido como fontes decorativas, são fontes com ca-
racterísticas invulgares. Eles tendem a ser elaborados e útil para cabeçalhos ou pequenas
áreas de texto, e não são muito úteis para o corpo do texto, porque as suas decorações tor-
nam difíceis de ler. Você raramente usará uma fantasia fonte em CSS, pois eles são muito
numerosos e não são encontradas com alguma consistência na maioria dos computadores.
Um exemplo é o Western fonte;
25
• Cursive - fontes cursivas são também referidos como fontes de escrita manual. Eles imitam
cursiva manuscrita e são freqüentemente preenchidas com floresce. Tal como acontece
com fontes fantasia, fontes cursivas são raramente aplicados com CSS. Muitos criadores
usam em conjunto fontes fantasia ou cursiva nos desenhos, usando-as como elementos
tipográficos decorativos. Uma fonte comum cursiva é Lucida Handwriting.
As Fontes que são comuns em quase todos do sistema hoje em dia são a Arial, Helvetica,
Verdana, Times, Geórgia e Courier. Tahoma, Trebuchet, e Lucida fontes são bastante generali-
zadas porque foram inicialmente incluídas no Microsoft’s Web Font Pack, um conjunto de fontes
livres que a Microsoft relativamente distribuídas no início da Web.
Se você estiver começando a lidar com fontes, é melhor se ater a um sistema muito simples
de fontes. Você pode fazer um dos seguintes procedimentos:
• escolha uma fonte, preferencialmente use fontes serif ou sans-serif, tornando-a padrão em
seu documento. Modifique o tamanho, peso, cor, e outros estilos para ganhar um certo
interesse;
• escolha duas fontes, preferencialmente use fontes serif ou sans-serif. Use fontes serif para
todos os cabeçalhos, titulos e outros textos; a sans-serif para o corpo de texto (Essa é uma
opção muito comum utilizada na Web hoje em dia).
O mesmo esquema citado acima mas invertendo as fontes serif por sans-serif, e vice-versa
A medida em que você vai se habituando ao uso de fontes, você irá criar padrões mais criati-
vos, mas tente sempre ter em mente essas dicas que foram aqui dadas.
Você pode instalar o pacote de fontes do windows no Debian/Ubuntu execute o seguinte co-
mando:
#apt-get install msttcorefonts
5.1.1 Aplicando "font-family"aos textos

Com uma idéia do que você pode escolher, é hora de ir em frente e aplicar "font-family"a
seu texto. Para fazer isso, escolha o seletor para o texto em questão e, em seguida, utilize a
propriedade font-family e um valor associado.
O valor que você usa para a grupo de fontes pode ser um único ou vários. Único nome de
fonte
Escolha esta técnica só quando você está absolutamente certo de que seu público tem a fonte
em questão (instalada no computador).
body {font-family: Arial;}
Essa configuração irá atribuir a fonte arial a todo o seu documento. O problema dessa tecnica
é que se o usuário não tiver instalado essa fonte no seu computador o navegador irá assumir o
valor padrão de fonte, geralmente é a Times New Roman, o que irá acarretar em um visual um
pouco diferente daquele elaborado por você.
5.1.2 Grupo de Fontes

Você pode atribuir um grupo de família de fontes para formatar um texto, título ou outro, os
grupos são: serif, sans-serif, monospace, fantasy, and cursive.
26
h1 {font-family: fantasy;}
No entanto, esse valor irá refletir-se em qual é a fonte "fantasy"padrão do computador do

usúario para todo cabeçalho <h1>.
O problema de usar esse valor é que você não terá controle sobre o que será exibido no
computador do usuário final. No entanto ela é usada como um sistema de apoio. Então, se você
usar uma única fonte, você poderá usar um grupo de fontes relacionado àquela primeira que você
escolheu:
h1 {font-family: Arial, sans-serif;}
Caso o computador do usúario não tenha a fonte arial, ele irá aprensentar uma fonte derivada
daquela família.
5.1.3 Nomes Múltiplos

Uma técnica usada para ter mais controle sobre a apresentação usando-se fontes do mesmo
grupo em uma ordem específica:
body {font-family: Arial, Helvetica, Verdana, sans-serif;}
Caso a fonte arial não exista no computador do usuário ele imediatamente irá tentar usar a
segunda fonte, helvetica, e assim por diante.
5.2 Textos
Formatar e estilizar textos é essencial para qualquer web designer. Nesta lição você verá os
efeitos que o CSS é capaz de dar aos textos. As propriedades que serão usadas são:
• text-indent;
• text-align;
• text-decoration;
• letter-spacing;
• text-transform.
5.2.1 Indentação de texto [text-indent]

A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo.
p {text-indent: 25px;}
27
5.2.2 Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos
podem ser alinhados à esquerda (left), à direita (right), centralizados (centred) ou justificados
(justify) que faz com que o texto contido em uma linha se estenda às margens esquerda e direita.
Este tipo de alinhamento é usado em jornais e revistas.
h1 {text-align: right;} h2 {text-align: center;}

p {text-align: justify;}
5.2.3 Decoração de textos [text-decoration]

A propriedade text-decoration possibilita adicionar "efeitos"ou "decoração"em textos. Você
pode sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No
exemplo a seguir os cabeçalhos <h1><h2> levam um linha em cima e os cabeçalhos <h3> são
cortados por uma linha. são sublinhados, os cabeçalhos.
Exemplo:
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
5.2.4 Espaço entre letras [letter-spacing]

A propriedade letter-spacing define o o espaço entre os caracteres. Por exemplo, se você
deseja um espaço de 4px entre as letras do texto de um parágrafo <p> e de 5px entre as letras
do texto de um cabeçalho <h1>:
Exemplo:
h1 {letter-spacing: 4px;}
p {letter-spacing: 5px;}
5.2.5 Transformação de textos [text-transform]

A propriedade text-transform controla a capitalização (maiúscula/minúsucla) do texto. Você
pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito
no código HTML.
capitalize
Capitaliza a primeira letra de cada palavra.
exemplo: "josé maria"para "José Maria".
uppercase
Converte todas as letras para maiúscula.
exemplo: "josé maria"para"JOSÉ MARIA".
lowercase
Converte todas as letras para minúscula.
exemplo: "JOSÉ MARIA"para"josé maria".
28
none
Sem trasformações - o texto fica como foi escrito no código HTML.
Exemplo:
h1 {text-transform: uppercase;}
li {text-transform: capitalize;}
5.3 Trabalhando com Links

Os elementos dos links são padrão para todos os navegadores:
• link - mostra como o link irá aparecer antes de ser clicado;
• hover - mostra como o link irá aparecer quando o mouse passar por cima dele;
• active - mostra como o link irá aparecer quando você clicar nele.
NOTA
Ainda há outro atributo, o focus. Ele é utilizado sempre que um elemento for capaz de receber
a entrada de teclado, como por exemplo como a de um formulário. Não é normalmente utilizado
com links, mas é bom você estar ciente. Para aplicarmos essa propriedade usamos a pseudo
classes, são classes dinâmicas, que tem a capacidade de interagir com o documento.
Exemplo:
a {color: orange;}a:link {color: orange;}

a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}
NOTA
Para que o efeito dos links apareça de forma correta é necessário seguir essa ordem: link,
visited, hover, active. Pois você pode causar algumas incoerências no seu documento. Lembre-se
da ordem LVHA, ou LoVe/HAte. Múltiplos Estilos em Links usando Classes
Uma outra opção fantástica do CSS é a capacidade de se usar mais de um estilo para os links
e até mesmo outras propriedades. Isso irá ajudar quando você teiver áreas diferentes em seu
documento que precisam ser feitas com uma estilização única.
Veja como fazer no exemplo abaixo:
/* default link styles, apropriado para área de conteúdo */
a {color: orange; text-decoration: none;}

a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}
/* classed link styles, apropriado para área de navegação */
a.nav {color: white; text-decoration: none;}
29
a.nav:link {color: white;}

a.nav:visited {color: yellow;}
a.nav:hover {color: orange;}
a.nav:active {color: fuschia;}
Você ira aplicar a classe class="nav" ao link que você deseja atribuir outro parâmetro:
<a class="nav" href="http://www.cdtc.org.br/">ITI - CDTC</a>
Você pode fazer quantas classes você quiser para seu documento, use sua imaginação.
30
Capítulo 6
Lição 4 - Indentificando elementos e

caixas
Como usar os identificadores para definir elementos e também as classes, também, como
os modelos em caixa nos permitem fazer ajuste de margens[margin], bordas[border], espaça-
mento[padding] e no conteúdo para cada elemento.
6.1 Classes[class] e id
Até agora, todos os seletores que vimos foram amarrados a elementos específicos. Seletores
de classe e ID nos dão a capacidade de aplicar um estilo a elementos diferentes em nosso
documento.
Elementos são nomeados utilizando a classe e atributos id. Eles podem ser aplicados a
todos os elementos XHTML exceto ao cabeçalho<head>, <html>, <meta>, <script>, estilo<style>
e título<title>. Além disso, a classe não pode ser utilizado em basefont e param. Classe e ID
trabalham de maneiras ligeiramente diferentes.
6.1.1 Seletor Class

Use o atributo class para identificar uma série de elementos como sendo parte de um grupo
conceitual. Elementos de uma classe podem então ser modificados com um único estilo regra.
Por exemplo, você pode identificar todos os itens em um documento que você classifica como
"especial":
<h1 Class="special">Atenção!</h1>
<p Class="special"> Estás maravilhosa hoje. </p>
Para especificar os estilos para os elementos de uma determinada classe, adicione o nome à
classe tipo seletor, separados por um ponto (.).
Exemplo:
h1.special (color: red;)
p.special (color: red;)
Para aplicar uma propriedade a todos os elementos da mesma classe, omitir a tag nome no
seletor (não se esqueça de deixar o "personagem"que indica uma classe):
Exemplo:
31
.special (color: red;)

Note que a classe nomes não pode conter espaços, hífens ou usar sublinhados(sublinhados
são desencorajados por falta de suporte em alguns navegadores).
6.1.2 Seletor ID
A id atributo é utilizado semelhante a class, mas é usada para direcionar a um único elemento,
em vez de um grupo. Id deve ser usado para nomear um elemento exclusivo (em outras palavras,
dois elementos não podem ter o mesmo id nome no mesmo documento). Não é um problema
para um valor id ser usada em vários documentos em um site, ele só precisa ser único dentro de
cada documento. Se você tem vários elementos que necessitam de um tratamento similar, utilize
class.
O exemplo a seguir dá um parágrafo e um determinado ID (observe que o valor de um atributo
id sempre deve começar com uma letra):
<p Id="juxituy"> Novo item adicionado hoje </p>
Seletores ID são indicados pelo símbolo de "jogo-da-velha"(#) dentro da folha de estilo como
segue:
P #juxituy (color: red;)
O nome do elemento pode ser omitido:
#juxituy (color: red;)
Na web design moderno, id atributos são freqüentemente usados para identificar seções prin-
cipais (geralmente divs) dentro de uma página. Alguns valores comuns id para este fim são os
conteúdos, cabeçalho sidebar, navegação e rodapé. Cria seções da página, é mais fácil criar
seletores de elementos para que possa ser baseada no estilo em que eles aparecem na página,
sem a necessidade de criar extra classes.
Gostou do classe atributos, id nomes devem ser escolhidos com base na semântica papel do
elemento, e não a sua apresentação. Por exemplo, para uma barra lateral no lado esquerdo da
página que contém notícias, é preferível dar um nome a div id = "sidebar-news", em vez de id =
"lateral-esquerdo".
6.2 Caixas (Box-model)

No CSS, cada elemento de um documento, gera uma caixa retangular denominado elemento
caixa. A figura abaixo mostra todas as áreas e limites definidas pelo CSS no modelo de caixa ou
box-model.
32
Figura 1 - Esquema do box-model
No centro do box-model é o conteúdo propriamente dito. Seus lados são referidos como as
arestas interiores dos elementos da caixa. A largura[width] e altura[heigth] de um elemento é
calculado como a distância entre as arestas interiores. O padding é a área realizada entre o
conteúdo e a borda. A borda[border] é uma ou mais linhas que circunda o elemento do conteúdo
. Por último, a margen [margin], que gera uma quantidade opcional de espaçamento entre o
objeto e seu exterior. A margem é uma área sempre transparente, o que significa que o fundo do
elemento principal sempre será visto.
Lembre-se de que quando você especificar o valor da largura[width] ou altura[height] de um
elemento, faça as contas para saber quanto seu objeto irá precisar com padding, border e magin.
Este cálculo pode ser crucial para o posicionamento de elementos precisamente em uma página.
33
6.2.1 Box-model em ação

<h1>Trituris</h1> <p>ja ti cum irichi ono paoisue ovjlsou jslu jouuekel poiupoi kfoi kjofiejelm
laisjiieuei lajishiuiue jkjoiuklhoixheoeue kh kjhl jliulje lkjel</p>
Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:
Figura 2 - <h1> e <p> com margin, border e padding.
O exemplo contém dois elementos: <h1> e <p>. O box model para os dois elementos é
mostrado a seguir:
Figura 3 - Visualização da figura 2
Embora possa parecer um pouco complicado, a ilustração mostra como cada um dos elementos
é contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.
34
Capítulo 7
Lição 5 - Posicionamento e Elementos

Flutuantes
Veja como posicionar diversos elementos no site para formar o layout que você planejou.
7.1 Posicionando Elementos

O posicionamento de elementos é a peça que lhe dá o controle sobre o resultado visual de
uma página. O CSS nos permite fazer quatro tipos de posicionamento, os quais são:
• Absolute;
• Relative;
• Static;
• Fixed.
Todos os exemplos sitados nesta parte da lição serão empregados em <div>
7.1.1 Fluxo Normal

O termo fluxo normal refere-se ao comportamento padrão do navegador. Como você certa-
mente percebeu, todo posicionamento "defaults"geralmente esta à esquerda do navegador salvo
aqueles modificados pela HTML ou CSS.
Os elementos "in-line"seguem com o fluxo. Se você redimensionar o navegador ou a reso-
lução do monitor eles simplesmente irão se realocar mas permanecerão no mesmo fluxo sem
quebrar a linha, no caso, o parágrafo.
7.1.2 Posicionamento Absoluto

Bem, está na hora de nos divertirmos um pouco e realmente colocar os posicionamentos para
trabalhar! Um elemento posicionado de forma absoluta não ocupará um espaço no documento.
Exemplo:
35
#content {
position: absolute;
background-color: orange;
left: 100px;
top: 50px;
border: 1px solid red;
}
Figura 1 - <div> com posição absoluta de 25px ao topo e a esquerda
7.1.3 Posição Relativa

A terminologia utilizada no posicionamento em CSS é um pouco vaga. Posicionamento rela-
tivo é muitas vezes confuso, em primeira porque levanta a questão: relativo a quê? A maioria das
pessoas acham que a posição seria algo relativo a um outro elemento.
Posicionamento relativo em caixas são para o fluxo normal. Isto significa que elas não são
removidas do fluxo normal de maneira absoluta na caixa onde está posicionado.
Aqui, eu removi todas as margens usando o seletor universal (*), isto é para se livrar de todos
os padrões em branco para que você possa ver exatamente como a posicionamento relativo está
sendo usado.
Exemplo:
* {
margin: 0;
}
#content {
position: relative;
left: 45px;
top: 10px;
width: 400px;
border: 1px solid red;
}
Portanto, a <div> está afastada 10 pixels a partir do elemento anterior, e 45 pixels à esquerda
do fluxo exato do mesmo local onde o texto começa, pois é no fluxo normal, também. Você vê
que é o fluxo contínuo pelo posicionamento; daí o conteúdo flui como deveria, tanto antes como
depois da caixa relativamente posicionada.
36
NOTA
Posicionamento relativo é utilizado quando o fluxo normal não deve ser quebrado. O posicio-
namento absoluto é melhor usado para itens que devem ser posicionados muito especificamente.
Muitas vezes, os dois são combinados, como tendo uma <div> com posicionamento relativo e
outro com absoluto dentro dele, ou vice-versa.
7.1.4 Posição Fixa

A posição fixa é uma peça brilhante no CSS. Mas infelizmente não é suportada pelo internet
explorer, podendo ser usada somente com Mozilla, Konqueror, Opera, Safari e outro que por
ventura venha a oferecer esse suporte.
O posicionamento Fixo permite a você colocar uma caixa em qualquer lugar na pagína, atuará
quase como que uma janela flutuante. Diferente do posicionamento absoluto em que elementos
fixos são posicionandos em relação a sua área de visão.
Exemplo:
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
background: #ccc;
width: 100%;
}
37
Figura 1 - <div> com posição fixo
7.2 Elementos Flutuantes [floats]

A propriedade float é aplicada a tag <img> do HTML, dois valores podem ser aplicados: Left
e Right. Ela é usada por causa de sua característica singular de poder colocar o conteúdo ao seu
redor, é possível adicionar margin e padding.
Exemplo:
#picture { float:right;}
Figura 1 - Imagem no Início do Texto com float a direita
Mas a propriedade float não se limita às imagens, ela pode ser aplicada a qualquer elemento.
Como em uma <div> por exemplo.
Exemplo:
#columa1 { float:left; width: 33%; }

Figura 2 - Float distribuido forma igual na página
Tome cuidado quanto ao tamanho do objeto que você vai usar o float, pois ele se for maior do
que a área do conteúdo os elementos irão para baixo uns dos outros e não para o lado como no
exemplo anterior.
38
Figura 3 - Exemplificação de Float com imagens maiores do que o campo visual
7.2.1 A propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem
aos elementos floats no documento.
Por padrão, o elemento subseqüente a um float, ocupa o espaço livre ao lado do elemento
flutuado.
A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se
clear, for por exemplo definido both para um box, a margem superior deste box será posicionada
sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.
Para evitar que o texto se posicione no espaço livre deixado pela imagem faremos da seguinte
forma:
Exemplo:
img {float: left; margin-right: 10px; }

h1 {clear: left; top-margin: 2em;}
Figura 4 - Exemplificação de uma imagem e título juntos com a propriedade clear
39
7.3 Z-index
O z-index é simplesmente a ordem que os elementos podem ser apresentados no documento.
#box1 {
position: absolute;
top: 10px;
left: 10px;
background: #000;
width: 300px;
height: 200px;
z-index: 1;
}
#box2 {
position: absolute;
top: 20px;
left: 20px;
background: #999;
width: 300px;
height: 200px;
z-index: 2;
}
#box3 {
position: absolute;
top: 30px;
left: 30px;
background: #ccc;
width: 300px;
height: 200px;
z-index: 3;
}
40

Apostila de CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila de CSS

Uploaded by

Copyright:

Available Formats

CSS

I Sobre essa apostila 2

3 Lição 1 - Conheçendo o CSS 14

4 Lição 2 - Cores e Fundos 19

4.4 Controlando a orientação das imagens de fundo . . . . . . . . . . . . . . . . . . . . 22

5 Lição 3 - Fontes, Textos e Links 24

6 Lição 4 - Indentificando elementos e caixas 30

7 Lição 5 - Posicionamento e Elementos Flutuantes 34

Sobre essa apostila

Informações adicionais podem ser obtidas atráves do email ouvidoria@cdtc.org.br, ou da

O Projeto CDTC visa a promoção e o desenvolvimento de ações que incentivem a dissemina-

Auxiliar o Governo Federal na implantação do plano nacional de software não-proprietário e

• Licenças para cópia de material disponível

• Os 10 mandamentos do aluno de Educação a Distância

• Como participar dos foruns e da wikipédia

Copyright ©2006, Helmuth Duarte Saatkamp (helmuth@cdtc.org.br) .

Os 10 mandamentos do aluno de educação online

• 1. Acesso à Internet: ter endereço eletrônico, um provedor e um equipamento adequado é

• 2. Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá-

• 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distân-

• 4. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seus

• 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre.

• 8. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica, aprendizagens

• 9. Objetividade em sua comunicação: comunicar-se de forma clara, breve e transparente é

Como participar dos fóruns e Wikipédia

Você tem um problema e precisa de ajuda?

Podemos te ajudar de 2 formas:

A segunda forma se dá pelas Wikis:

• Página principal da Wiki - http://pt.wikipedia.org/wiki/

Agradecemos antecipadamente a sua colaboração com a aprendizagem do grupo!

• Ler o Plano de Ensino e entender a que seu curso se dispõe a ensinar;

• Entrar nas lições seguindo a seqüência descrita no Plano de Ensino;

• Qualquer dúvida, reporte ao Fórum de Dúvidas Gerais.

Segue-se uma descrição do tutor ideal, baseada no feedback de alunos e de tutores.

O tutor ideal é um modelo de excelência: é consistente, justo e profissional nos respectivos

• gosta que lhe façam perguntas adicionais;

• dá uma ajuda complementar para encorajar um estudante em dificuldade;

• esclarece pontos que não foram entendidos, ou corretamente aprendidos anteriormente;

• ajuda o estudante a alcançar os seus objetivos;

• é flexível quando necessário;

• mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e, por isso,

• escreve todas as correções de forma legível e com um nível de pormenorização adequado;

• acima de tudo, devolve os trabalhos rapidamente;

2.2 Público Alvo

• Lição 2 - Cores e Fundos;

• Lição 3 - Fontes, Textos e Links;

• Lição 4 - Identificando Elementos e Caixas;

• Lição 5 - Posicionamento e Elementos Flutuantes.

– Como funciona o CSS?;

– Controlar a orientação de uma imagem de fundo;

• Fontes, Textos e Links:

• Identificando Elementos e Caixas:

• Posicionamento e Elementos Flutuantes:

• iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento;

• capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.

• participação ativa nas atividades programadas;

• avaliação ao final do curso;

• o participante fará várias avaliações referente ao conteúdo do curso. Para a aprovação e

• Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições

Lição 1 - Conheçendo o CSS

Conheça um pouco da sintese e como funciona o CSS.

3.1 Como Funciona o CSS?

3.1.1 A sintaxe básica das CSS

Com CSS o mesmo resultado será obtido assim: