CSS

Verso 1.0.0

Sumrio
I

Sobre essa apostila

II Informaes Bsicas

III CSS

1 O que o CSS
2 Plano de ensino
2.1 Objetivo . . .
2.2 Pblico Alvo .
2.3 Pr-requisitos
2.4 Descrio . .
2.5 Metodologia .
2.6 Cronograma
2.7 Programa . .
2.8 Avaliao . .
2.9 Bibliografia .

10
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

11
11
11
11
11
12
12
12
13
13

3 Lio 1 - Conheendo o CSS

3.1 Como Funciona o CSS? . . . . . . . . .
3.1.1 A sintaxe bsica das CSS . . . .
3.1.2 Tabela de Referncia . . . . . .
3.2 Aplicando CSS a um documento HTML
3.2.1 Interno (a tag style) . . . . . . .
3.2.2 Estilos In-line . . . . . . . . . . .
3.2.3 Utilizando estilos externamente .

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.
.
.

14
14
14
15
17
17
17
17

.
.
.
.
.
.
.
.

19
19
19
19
20
20
21
21
21

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.

4 Lio 2 - Cores e Fundos

4.1 Cor e CSS . . . . . . . . . . . . . .
4.1.1 Cores Hexadecimais . . . . .
4.1.2 Abreviaes em Hexadecimal
4.1.3 Valores em RGB . . . . . . .
4.1.4 Porcentagens em RGB . . .
4.1.5 Nome da Cor . . . . . . . . .
4.2 Adicionando cor de fundo . . . . . .
4.3 Juntar Imagem ao Fundo . . . . . .

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
1

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

CDTC

Centro de Difuso de Tecnologia e Conhecimento

4.4 Controlando a orientao das imagens de fundo

4.4.1 Imagens ao longo do eixo horizontal . . .
4.4.2 Imagens ao longo do eixo vertical . . . .
4.4.3 Posicionando a imagem de Fundo . . . .
4.5 Fixando e Rolando imagens de fundo . . . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

Brasil/DF
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

22
22
22
23
23

5 Lio 3 - Fontes, Textos e Links

5.1 Escolhendo a Fonte . . . . . . . . . . . . . . . .
5.1.1 Aplicando "font-family"aos textos . . . . .
5.1.2 Grupo de Fontes . . . . . . . . . . . . . .
5.1.3 Nomes Mltiplos . . . . . . . . . . . . . .
5.2 Textos . . . . . . . . . . . . . . . . . . . . . . . .
5.2.1 Indentao de texto [text-indent] . . . . .
5.2.2 Alinhamento de textos [text-align] . . . . .
5.2.3 Decorao de textos [text-decoration] . .
5.2.4 Espao entre letras [letter-spacing] . . . .
5.2.5 Transformao de textos [text-transform] .
5.3 Trabalhando com Links . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

24
24
25
25
26
26
26
27
27
27
27
28

6 Lio 4 - Indentificando elementos e caixas

6.1 Classes[class] e id . . . . . . . . . . . . .
6.1.1 Seletor Class . . . . . . . . . . . .
6.1.2 Seletor ID . . . . . . . . . . . . . .
6.2 Caixas (Box-model) . . . . . . . . . . . .
6.2.1 Box-model em ao . . . . . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

30
30
30
31
31
33

7 Lio 5 - Posicionamento e Elementos Flutuantes

7.1 Posicionando Elementos . . . . . . . . . . . . . .
7.1.1 Fluxo Normal . . . . . . . . . . . . . . . .
7.1.2 Posicionamento Absoluto . . . . . . . . .
7.1.3 Posio Relativa . . . . . . . . . . . . . .
7.1.4 Posio Fixa . . . . . . . . . . . . . . . .
7.2 Elementos Flutuantes [floats] . . . . . . . . . . .
7.2.1 A propriedade clear . . . . . . . . . . . .
7.3 Z-index . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

34
34
34
34
35
36
37
38
39

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

Parte I

Sobre essa apostila

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Contedo
O contedo dessa apostila fruto da compilao de diversos materiais livres publicados na internet, disponveis em diversos sites ou originalmente produzido no CDTC em http://www.cdtc.org.br.
O formato original deste material bem como sua atualizao est disponvel dentro da licena
GNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seo de
mesmo nome, tendo inclusive uma verso traduzida (no oficial).
A reviso e alterao vem sendo realizada pelo CDTC (suporte@cdtc.org.br), desde outubro
de 2006. Criticas e sugestes construtivas so bem-vindas a qualquer tempo.

Autores
A autoria deste contedo, atividades e avaliaes de responsabilidade de Helmuth Duarte
Saatkamp (helmuth@cdtc.org.br) .
O texto original faz parte do projeto Centro de Difuso 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 pas.
Informaes adicionais podem ser obtidas atrves do email ouvidoria@cdtc.org.br, ou da
home page da entidade, atrves da URL http://www.cdtc.org.br.

Garantias
O material contido nesta apostila isento de garantias e o seu uso de inteira responsabilidade do usurio/leitor. Os autores, bem como o ITI e seus parceiros, no se responsabilizam
direta ou indiretamente por qualquer prejuzo oriundo da utilizao do material aqui contido.

Licena
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 APOSTILA. A copy of the license is included in the section entitled GNU Free Documentation
License.

Parte II

Informaes Bsicas

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Sobre o CDTC
Objetivo Geral
O Projeto CDTC visa a promoo e o desenvolvimento de aes que incentivem a disseminao de solues que utilizem padres abertos e no proprietrios de tecnologia, em proveito do
desenvolvimento social, cultural, poltico, tecnolgico e econmico da sociedade brasileira.
Objetivo Especfico
Auxiliar o Governo Federal na implantao do plano nacional de software no-proprietrio e
de cdigo fonte aberto, identificando e mobilizando grupos de formadores de opinio dentre os
servidores pblicos e agentes polticos da Unio Federal, estimulando e incentivando o mercado
nacional a adotar novos modelos de negcio da tecnologia da informao e de novos negcios
de comunicao com base em software no-proprietrio e de cdigo fonte aberto, oferecendo
treinamento especfico para tcnicos, profissionais de suporte e funcionrios pblicos usurios,
criando grupos de funcionrios pblicos que iro treinar outros funcionrios pblicos e atuar como
incentivadores e defensores de produtos de software no proprietrios e cdigo fonte aberto, oferecendo contedo tcnico on-line para servios de suporte, ferramentas para desenvolvimento de
produtos de software no proprietrios e de seu cdigo fonte livre, articulando redes de terceiros
(dentro e fora do governo) fornecedoras de educao, pesquisa, desenvolvimento e teste de produtos de software livre.

Guia do aluno
Neste guia, voc ter reunidas uma srie de informaes importantes para que voc comece
seu curso. So elas:
Licenas para cpia de material disponvel
Os 10 mandamentos do aluno de Educao a Distncia
Como participar dos foruns e da wikipdia
Primeiros passos
muito importante que voc entre em contato com TODAS estas informaes, seguindo o
roteiro acima.

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

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

dada permisso para copiar, distribuir e/ou modificar este documento sob os termos
da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior
pblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA
APOSTILA. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU".

Os 10 mandamentos do aluno de educao online

1. Acesso Internet: ter endereo eletrnico, um provedor e um equipamento adequado

pr-requisito para a participao nos cursos a distncia.
2. Habilidade e disposio para operar programas: ter conhecimentos bsicos de Informtica necessrio para poder executar as tarefas.
3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distncia conta muitos pontos, pois ir colaborar para o processo ensino-aprendizagem pessoal,
dos colegas e dos professores.
4. Comportamentos compatveis com a etiqueta: mostrar-se interessado em conhecer seus
colegas de turma respeitando-os e fazendo ser respeitado pelo mesmo.
5. Organizao pessoal: planejar e organizar tudo fundamental para facilitar a sua reviso
e a sua recuperao de materiais.
6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigaes e
realiz-las em tempo real.
7. Curiosidade e abertura para inovaes: aceitar novas idias e inovar sempre.
8. Flexibilidade e adaptao: requisitos necessrio mudana tecnolgica, aprendizagens
e descobertas.
9. Objetividade em sua comunicao: comunicar-se de forma clara, breve e transparente
ponto - chave na comunicao pela Internet.
10. Responsabilidade: ser responsvel por seu prprio aprendizado. O ambiente virtual no
controla a sua dedicao, mas reflete os resultados do seu esforo e da sua colaborao.

Como participar dos fruns e Wikipdia

Voc tem um problema e precisa de ajuda?
Podemos te ajudar de 2 formas:
A primeira o uso dos fruns de notcias e de dvidas gerais que se distinguem pelo uso:
. O frum de notcias tem por objetivo disponibilizar um meio de acesso rpido a informaes
que sejam pertinentes ao curso (avisos, notcias). As mensagens postadas nele so enviadas a
7

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

todos participantes. Assim, se o monitor ou algum outro participante tiver uma informao que
interesse ao grupo, favor post-la aqui.
Porm, se o que voc deseja resolver alguma dvida ou discutir algum tpico especfico do
curso. recomendado que voc faa uso do Forum de dvidas gerais que lhe d recursos mais
efetivos para esta prtica.
. O frum de dvidas gerais tem por objetivo disponibilizar um meio fcil, rpido e interativo
para solucionar suas dvidas e trocar experincias. As mensagens postadas nele so enviadas
a todos participantes do curso. Assim, fica muito mais fcil obter respostas, j que todos podem
ajudar.
Se voc receber uma mensagem com algum tpico que saiba responder, no se preocupe com a
formalizao ou a gramtica. Responda! E no se esquea de que antes de abrir um novo tpico
recomendvel ver se a sua pergunta j foi feita por outro participante.
A segunda forma se d pelas Wikis:
. Uma wiki uma pgina web que pode ser editada colaborativamente, ou seja, qualquer participante pode inserir, editar, apagar textos. As verses antigas vo 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 "Wikipdia", uma experincia grandiosa de construo de uma enciclopdia de forma colaborativa, por
pessoas de todas as partes do mundo. Acesse-a em portugus pelos links:
Pgina principal da Wiki - http://pt.wikipedia.org/wiki/
Agradecemos antecipadamente a sua colaborao com a aprendizagem do grupo!

Primeiros Passos
Para uma melhor aprendizagem recomendvel que voc siga os seguintes passos:
Ler o Plano de Ensino e entender a que seu curso se dispe a ensinar;
Ler a Ambientao do Moodle para aprender a navegar neste ambiente e se utilizar das
ferramentas bsicas do mesmo;
Entrar nas lies seguindo a seqncia descrita no Plano de Ensino;
Qualquer dvida, reporte ao Frum de Dvidas Gerais.

Perfil do Tutor
Segue-se uma descrio do tutor ideal, baseada no feedback de alunos e de tutores.
O tutor ideal um modelo de excelncia: consistente, justo e profissional nos respectivos
valores e atitudes, incentiva mas honesto, imparcial, amvel, positivo, respeitador, aceita as
idias dos estudantes, paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.
8

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

A classificao por um tutor desta natureza proporciona o melhor feedback possvel, crucial, e,
para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem. Este tutor
ou instrutor:
fornece explicaes claras acerca do que ele espera, e do estilo de classificao que ir
utilizar;
gosta que lhe faam perguntas adicionais;
identifica as nossas falhas, mas corrige-as amavelmente, diz um estudante, e explica porque motivo a classificao foi ou no foi atribuda;
tece comentrios completos e construtivos, mas de forma agradvel (em contraste com um
reparo de um estudante: os comentrios deixam-nos com uma sensao de crtica, de
ameaa e de nervossismo)
d uma ajuda complementar para encorajar um estudante em dificuldade;
esclarece pontos que no foram entendidos, ou corretamente aprendidos anteriormente;
ajuda o estudante a alcanar os seus objetivos;
flexvel quando necessrio;
mostra um interesse genuno em motivar os alunos (mesmo os principiantes e, por isso,
talvez numa fase menos interessante para o tutor);
escreve todas as correes de forma legvel e com um nvel de pormenorizao adequado;
acima de tudo, devolve os trabalhos rapidamente;

Parte III

CSS

10

Captulo 1

O que o CSS
Sejam bem-vindos ao fantstico mundo do "Cascading Style Sheets"(CSS),com ele voc ser
capaz de projetar pginas eficientes e atraentes. O CSS oferece um grande pontncial e flexibilidade, na hora de editar e alterar, sendo possvel uma total restruturao no layout do site mudando apenas o CSS. Este curso mostrar como voc pode trazer vida a suas pginas 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 necessrio
primeiro um conhecimento bsico de HTML. Se voc no est familiarizado com HTML, faa um
de nossos cursos de HTML antes de comear com CSS.

11

Captulo 2

Plano de ensino
2.1 Objetivo
Capacitar o usurio para o uso autnomo do CSS bem como suas aplicaes e suas ferramentas mais utilizadas.

2.2 Pblico Alvo

Usurios finais ou novatos que desejam aprender ou aprimorar seus conhecimentos em desenvolvimentos de sites.

2.3 Pr-requisitos
Os usurios devero ser, necessariamente, funcionrios de empresas pblicas e ter conhecimentos bsicos de HTML.

2.4 Descrio
O curso ser realizado na modalidade Educao a Distncia e utilizar a Plataforma Moodle
como ferramenta de aprendizagem. Ele ser dividido em tpicos e cada um deles composto
por um conjunto de atividades (lies, fruns, glossrios, questionrios e outros) que devero ser
executadas de acordo com as instrues fornecidas. O material didtico est disponvel on-line
de acordo com as datas pr-estabelecidas em cada tpico. A verso adotada do CSS a 1.2.3,
caso possua outra verso instalada, podem ocorrer poucas diferenas.
Todo o material est no formato de lies, e estar disponvel ao longo do curso. As lies
podero ser acessadas quantas vezes forem necessrias. Aconselhamos a leitura de "Ambientao do Moodle", para que voc conhea o produto de Ensino a Distncia, evitando dificuldades
advindas do "desconhecimento"sobre o mesmo.
Ao final de cada semana do curso ser disponibilizada a prova referente ao mdulo estudado
anteriormente que tambm conter perguntas sobre os textos indicados. Utilize o material de
cada semana e os exemplos disponibilizados para se preparar para prova.

12

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida deve ser
disponibilizada no frum ou enviada por e-mail. Diariamente os monitores daro respostas e
esclarecimentos.

2.5 Metodologia
O curso est dividido da seguinte maneira:

2.6 Cronograma
Lio 1 - Conhecendo o CSS;
Lio 2 - Cores e Fundos;
Lio 3 - Fontes, Textos e Links;
Lio 4 - Identificando Elementos e Caixas;
Lio 5 - Posicionamento e Elementos Flutuantes.
As lies contm o contedo principal. Elas podero ser acessadas quantas vezes forem necessrias, desde que esteja dentro da semana programada. Ao final de uma lio, voc receber
uma nota de acordo com o seu desempenho. Responda com ateno s perguntas de cada lio, pois elas sero consideradas na sua nota final. Caso sua nota numa determinada lio seja
menor do que 6.0, sugerimos que voc faa novamente esta lio.
Ao final do curso ser disponibilizada a avaliao referente ao curso. Tanto as notas das lies
quanto a da avaliao sero consideradas para a nota final. Todos os mdulos ficaro visveis
para que possam ser consultados durante a avaliao final.
Aconselhamos a leitura da "Ambientao do Moodle"para que voc conhea a plataforma de
Ensino a Distncia, evitando dificuldades advindas do "desconhecimento"sobre a mesma.
Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida dever ser
enviada no frum. Diariamente os monitores daro respostas e esclarecimentos.

2.7 Programa
O curso de CSS oferecer o seguinte contedo:
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

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Controlar a orientao 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 Ids;
Caixas.
Posicionamento e Elementos Flutuantes:
Posicionamento de Elementos;
Elementos flutuantes;
Z-index.

2.8 Avaliao
Toda a avaliao ser feita on-line.
Aspectos a serem considerados na avaliao:
iniciativa e autonomia no processo de aprendizagem e de produo de conhecimento;
capacidade de pesquisa e abordagem criativa na soluo dos problemas apresentados.
Instrumentos de avaliao:
participao ativa nas atividades programadas;
avaliao ao final do curso;
o participante far vrias avaliaes referente ao contedo do curso. Para a aprovao e
obteno do certificado o participante dever obter nota final maior ou igual a 6.0 de acordo
com a frmula abaixo:
Nota Final = ((ML x 7) + (AF x 3)) / 10 = Mdia aritmtica das lies
AF = Avaliaes

2.9 Bibliografia
Livro: Web Design in a Nutshell - A Desktop Quick Reference
Site: http://pt-br.html.net/tutorials/css/

14

Captulo 3

Lio 1 - Conheendo o CSS

Conhea 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 prpria
folha de estilos. Conhecer o bsico sobre o modelo CSS e que cdigo necessrio 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 cdigos que usaremos.

3.1.1 A sintaxe bsica das CSS

Suponha que desejamos uma cor de fundo preta para a pgina 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 cdigos HTML e CSS so mais ou menos parecidos. O exemplo
acima serve tambm para demonstrar o fundamento do modelo CSS:

Seletor {propriedade: valor;}

O seletor ser a tag(s) HTML que ser aplicada uma propriedade, na proxima pgina 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 criao de sua pgina utilizando o CSS.

15

CDTC

Centro de Difuso de Tecnologia e Conhecimento

3.1.2 Tabela de Referncia

Segue uma tabela com as principais propriedades e valores do CSS

16

Brasil/DF

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Mas, onde colocar o cdigo CSS? isto que veremos a seguir.

17

Brasil/DF

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

3.2 Aplicando CSS a um documento HTML

Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos de
aplicao esto exemplificados a seguir. Recomendamos que voc foque no terceiro mtodo, ou
seja, o mtodo externo.

3.2.1 Interno (a tag style)

Quando estamos usando estilos internos, ns simplesmente colocamos o nosso CSS dentro
das tags <head></head> do nosso cdigo (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 mtodo cada pgina (x)HTML ter seu respectivo cdigo CSS para a formatao da
pgina. Esse mtodo ideal para aqueles sites de uma pgina ou para quem est iniciando no
assunto.

3.2.2 Estilos In-line

Os estilos in-line so definidos ao longo do elemento (x)HTML que voc denominou:

<p style="color: #ffffff;">Esse pargrafo ter a cor branca</p>

As desvantagens de se usar estilos in-line que voc s ir poder fazer alteraes nos elementos em que voc formatou.

3.2.3 Utilizando estilos externamente

Utilizar CSS externamente to fcil quanto internamente, o que muda aqui que voc ir
criar um arquivo com a extenso .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 tambm utilizando o mtodo @import:

<style type="text/css">@import url(nome_do_arquivo.css)</style>

O nosso cdigo (x)HTML ficaria da seguinte forma:

18

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

<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
mudanas em seu site, basta fazer as alteraes no arquivo CSS que ocorrida uma alterao
global em todo o seu site. Por exemplo, se voc tem 100 pginas com um ttulo <h2> em azul,
caso queira alterar a cor para preto, s alterar uma linha em seu arquivo CSS que todas as 100
pginas tero os ttulos alterados.
Como no esquema Abaixo:

Figura 1 - Exemplificao do CSS em modo Externo

Como pode ver a estilizao torna o processo de criao de sites algo dinmica, facilitando
tambm a manuteno e diminuindo o tamanho do mesmo.

19

Captulo 4

Lio 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 nmero, existe uma seqncia
de valores e opes que voc precisa saber.

4.1.1 Cores Hexadecimais

Hexadecimal (hex) um sistema bsico de 16 nmeros, sendo muito til em computadores
pois 8 bits (1 byte na memria) pode ser representado por um nico nmero ou letra. O sistema usa os nmeros de 0 a 9 e as letras de a a f em qualquer combinao de seis elementos
(comeando primeiro com #) para representar uma correlao com o vermelho, verde e azul
(#RRGGBB).

#FFFFFF = 255,255,255 = white

Qualquer combinao 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 pssego,
e no link a cor verde brilhante.

4.1.2 Abreviaes em Hexadecimal

Abreviaes em hexadecimal permite a voc encurtar qualquer cor hexadecimal que tenha
valores pares. Isto significa que cada valor de RR, GG, BB tm de ser as mesmas, tais como
#00CC33 ou #888888. Abreviao em hexadecimal, voc toma um dgito de cada valor par, de
modo que o resultado seria #0C3 e #888. Num caso como no #808080, os valores no esto
emparelhados, de forma que voc no pode fazer isso em abreviao.
Exemplo:
20

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

body {color: #FC9; background-color: #808080;}

a {color: #6C3;}
NOTA
Voc pode usar hexadecimal abreviao em qualquer documento CSS, mas no em um contedo HTML.

4.1.3 Valores em RGB

Outro meio de representao de cor no CSS est em usar os prprios valores de RGB. Estes
podem ser encontrados em um programa como o Agave.

Figura 1 - Agave

4.1.4 Porcentagens em RGB

Voc tambm 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

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

4.1.5 Nome da Cor

Voc pode usar 17 cores nomes para descrever cores. As cores so 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 combinaes de
palavras chave, abreviao hexadecimal, e hexadecimais mais freqentes.
NOTA
Na verso 3.0 do CSS, muitas cores foram adicionadas.

4.2 Adicionando cor de fundo

Adicionando cor de fundo muito fcil e muito til. Voc pode adicionar sua pgina 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 colorao:
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 pgina a cor, mesmo se tiver a inteno de usar grficos e
outros elementos fundos em sua concepo. Isso ocorre porque as cores so interpretadas rapidamente pelos navegadores que as renderiza bem antes que qualquer grficos, proporcionando
uma experincia 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 selecionar 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, porm, dando-lhe um vasto leque de opes
quando se trata de aplicar design visual ao seu site. Ao combinar uma pgina com elementos de
fundo, voc pode criar mltiplas 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

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

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 no 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 tambm pode adicionar imagens a elementos. Se voc quis esta imagem para aparecer
no fundo de todas as suas posies, 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 orientao das imagens de fundo

CSS lhe permite controlar a orientao 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-image: url(imagem_que_voc_quer_usar.jpg);
background-repeat: repeat-y;
}
voc tambm pode no querer repetir as imagens, ento use o valor no-repeat:

body {
background-image: url(imagem_que_voc_quer_usar.jpg);
background-repeat: no-repeat;
}
Isto mostrar a imagem aparecendo no canto superior esquerdo uma vez, sem repetir.
23

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

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. Ento
voc pode posicionar usando qualquer um dos valores descritos na tabela abaixo:
NOTA
Voc pode combinar valores de porcentagem com os outros valores numricos no backgroundposition, com exceo de palavras, podendo ter valores como 80% 50px, mas no pode ter valores de 100% left.
Se somente um valor de porcentagem ou comprimento for dado, ele ser aplicado somente a
posio horizontal, e a vertical ficar com seu valor padro de 50%.
Exemplo:

h1 {
background-image: url(imagem_que_voc_quer_usar.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
}
h2 {
background-image: url(imagem_que_voc_quer_usar.gif);
background-repeat: no-repeat;
background-position: 100px 4px;
}
h3 {
background-image: url(imagem_que_voc_quer_usar.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
Note que j ajustei, no s a imagem, mas tambm o valor de no-repeat, para garantir que a
posio da imagem de fundo e seus valores vo 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 contedo dentro do documento. No entanto, como voc viu at agora, voc pode us-lo em qualquer elemento que faz
sentido faz-lo.
Exemplo:

body {
background-image: url(imagem_que_voc_quer_usar.gif);
background-position: right;
background-repeat: no-repeat;
background-attachment: scroll;
}

24

Captulo 5

Lio 3 - Fontes, Textos e Links

Conhea como so 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 tm pouca exposio a tipografia. Felizmente, existem algumas boas regras de ouro para retroceder.
Fonts tm sido, tradicionalmente, subdivididos em grupos, referido como fonte ou categorias,
como em CSS, font-family. As fontes so agrupados com base em suas caractersticas. 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 excelncia no corpo do texto, especialmente na mdia impressa, e so muito apropriadas para cabealho e outros textos,
como legendas. Serif fontes que podem ser familiares para voc incluir Times e a Gergia,
que so largamente utilizados na web;
Sans-serif - o termo sans-serif significa "sem serifa"e descreve, literalmente, fontes que no
tm floresces. Em vez disso, fontes sem-serifa costumam ser arredondadas, e letras largas.
Tipicamente o que se pensa ser melhor para cabealhos de impresso. No entanto, nem
sempre so a melhor escolha para textos muito pequenos ou em itlico. Conhecer fontes
dentro desta categoria incluem Arial, Helvetica, e Verdana;
Monospace - fontes Monospace so fontes cujas letras so todas da mesma largura. Eles
so tipicamente usadas para descrever programao cdigo amostras. Nos ltimos anos,
elas foram populares na concepo, dando um "grunge"no olhar para os desenhos em que
so utilizados. No entanto, voc deve limitar uso de fontes monospace. O mais comum
monospace fonte em computao Courier;
Fantasy - fontes Fantasy, tambm conhecido como fontes decorativas, so fontes com caractersticas invulgares. Eles tendem a ser elaborados e til para cabealhos ou pequenas
reas de texto, e no so muito teis para o corpo do texto, porque as suas decoraes tornam difceis de ler. Voc raramente usar uma fantasia fonte em CSS, pois eles so muito
numerosos e no so encontradas com alguma consistncia na maioria dos computadores.
Um exemplo o Western fonte;

25

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Cursive - fontes cursivas so tambm referidos como fontes de escrita manual. Eles imitam
cursiva manuscrita e so freqentemente preenchidas com floresce. Tal como acontece
com fontes fantasia, fontes cursivas so raramente aplicados com CSS. Muitos criadores
usam em conjunto fontes fantasia ou cursiva nos desenhos, usando-as como elementos
tipogrficos decorativos. Uma fonte comum cursiva Lucida Handwriting.
As Fontes que so comuns em quase todos do sistema hoje em dia so a Arial, Helvetica,
Verdana, Times, Gergia e Courier. Tahoma, Trebuchet, e Lucida fontes so bastante generalizadas porque foram inicialmente includas no Microsofts Web Font Pack, um conjunto de fontes
livres que a Microsoft relativamente distribudas no incio da Web.
Se voc estiver comeando 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 padro 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 cabealhos, titulos e outros textos; a sans-serif para o corpo de texto (Essa uma
opo 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 padres mais criativos, 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 comando:
#apt-get install msttcorefonts

5.1.1 Aplicando "font-family"aos textos

Com uma idia 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 questo 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 vrios. nico nome de
fonte
Escolha esta tcnica s quando voc est absolutamente certo de que seu pblico tem a fonte
em questo (instalada no computador).

body {font-family: Arial;}

Essa configurao ir atribuir a fonte arial a todo o seu documento. O problema dessa tecnica
que se o usurio no tiver instalado essa fonte no seu computador o navegador ir assumir o
valor padro 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 famlia de fontes para formatar um texto, ttulo ou outro, os
grupos so: serif, sans-serif, monospace, fantasy, and cursive.
26

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

h1 {font-family: fantasy;}
No entanto, esse valor ir refletir-se em qual a fonte "fantasy"padro do computador do
usario para todo cabealho <h1>.
O problema de usar esse valor que voc no ter controle sobre o que ser exibido no
computador do usurio final. No entanto ela usada como um sistema de apoio. Ento, 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 usario no tenha a fonte arial, ele ir aprensentar uma fonte derivada
daquela famlia.

5.1.3 Nomes Mltiplos

Uma tcnica usada para ter mais controle sobre a apresentao usando-se fontes do mesmo
grupo em uma ordem especfica:

body {font-family: Arial, Helvetica, Verdana, sans-serif;}

Caso a fonte arial no exista no computador do usurio 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 lio voc ver os
efeitos que o CSS capaz de dar aos textos. As propriedades que sero usadas so:
text-indent;
text-align;
text-decoration;
letter-spacing;
text-transform.

5.2.1 Indentao de texto [text-indent]

A propriedade text-indent permite que voc aplique um recuo primeira linha de um pargrafo.

p {text-indent: 25px;}

27

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

5.2.2 Alinhamento de textos [text-align]

A propriedade text-align corresponde ao atributo align das antigas verses 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 Decorao de textos [text-decoration]

A propriedade text-decoration possibilita adicionar "efeitos"ou "decorao"em textos. Voc
pode sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No
exemplo a seguir os cabealhos <h1><h2> levam um linha em cima e os cabealhos <h3> so
cortados por uma linha. so sublinhados, os cabealhos.
Exemplo:

h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}

5.2.4 Espao entre letras [letter-spacing]

A propriedade letter-spacing define o o espao entre os caracteres. Por exemplo, se voc
deseja um espao de 4px entre as letras do texto de um pargrafo <p> e de 5px entre as letras
do texto de um cabealho <h1>:
Exemplo:

h1 {letter-spacing: 4px;}
p {letter-spacing: 5px;}

5.2.5 Transformao de textos [text-transform]

A propriedade text-transform controla a capitalizao (maiscula/minsucla) do texto. Voc
pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito
no cdigo HTML.
capitalize
Capitaliza a primeira letra de cada palavra.
exemplo: "jos maria"para "Jos Maria".
uppercase
Converte todas as letras para maiscula.
exemplo: "jos maria"para"JOS MARIA".
lowercase
Converte todas as letras para minscula.
exemplo: "JOS MARIA"para"jos maria".

28

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

none
Sem trasformaes - o texto fica como foi escrito no cdigo HTML.
Exemplo:

h1 {text-transform: uppercase;}
li {text-transform: capitalize;}

5.3 Trabalhando com Links

Os elementos dos links so padro 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 formulrio. No normalmente utilizado
com links, mas bom voc estar ciente. Para aplicarmos essa propriedade usamos a pseudo
classes, so classes dinmicas, 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 aparea de forma correta necessrio seguir essa ordem: link,
visited, hover, active. Pois voc pode causar algumas incoerncias no seu documento. Lembre-se
da ordem LVHA, ou LoVe/HAte. Mltiplos Estilos em Links usando Classes
Uma outra opo fantstica 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 estilizao nica.
Veja como fazer no exemplo abaixo:

/* default link styles, apropriado para rea de contedo */

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 navegao */
a.nav {color: white; text-decoration: none;}
29

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

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 parmetro:

<a class="nav" href="http://www.cdtc.org.br/">ITI - CDTC</a>

Voc pode fazer quantas classes voc quiser para seu documento, use sua imaginao.

30

Captulo 6

Lio 4 - Indentificando elementos e

caixas
Como usar os identificadores para definir elementos e tambm as classes, tambm, como
os modelos em caixa nos permitem fazer ajuste de margens[margin], bordas[border], espaamento[padding] e no contedo para cada elemento.

6.1 Classes[class] e id
At agora, todos os seletores que vimos foram amarrados a elementos especficos. Seletores
de classe e ID nos do a capacidade de aplicar um estilo a elementos diferentes em nosso
documento.
Elementos so nomeados utilizando a classe e atributos id. Eles podem ser aplicados a
todos os elementos XHTML exceto ao cabealho<head>, <html>, <meta>, <script>, estilo<style>
e ttulo<title>. Alm disso, a classe no 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 srie de elementos como sendo parte de um grupo
conceitual. Elementos de uma classe podem ento 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">Ateno!</h1>
<p Class="special"> Ests 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 (no se esquea de deixar o "personagem"que indica uma classe):
Exemplo:
31

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

.special (color: red;)

Note que a classe nomes no pode conter espaos, hfens ou usar sublinhados(sublinhados
so 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 no podem ter o mesmo id nome no mesmo documento). No um problema
para um valor id ser usada em vrios documentos em um site, ele s precisa ser nico dentro de
cada documento. Se voc tem vrios elementos que necessitam de um tratamento similar, utilize
class.
O exemplo a seguir d um pargrafo e um determinado ID (observe que o valor de um atributo
id sempre deve comear com uma letra):

<p Id="juxituy"> Novo item adicionado hoje </p>

Seletores ID so indicados pelo smbolo 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 so freqentemente usados para identificar sees principais (geralmente divs) dentro de uma pgina. Alguns valores comuns id para este fim so os
contedos, cabealho sidebar, navegao e rodap. Cria sees da pgina, mais fcil criar
seletores de elementos para que possa ser baseada no estilo em que eles aparecem na pgina,
sem a necessidade de criar extra classes.
Gostou do classe atributos, id nomes devem ser escolhidos com base na semntica papel do
elemento, e no a sua apresentao. Por exemplo, para uma barra lateral no lado esquerdo da
pgina que contm notcias, prefervel 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

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Figura 1 - Esquema do box-model

No centro do box-model o contedo propriamente dito. Seus lados so referidos como as
arestas interiores dos elementos da caixa. A largura[width] e altura[heigth] de um elemento
calculado como a distncia entre as arestas interiores. O padding a rea realizada entre o
contedo e a borda. A borda[border] uma ou mais linhas que circunda o elemento do contedo
. Por ltimo, a margen [margin], que gera uma quantidade opcional de espaamento 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, faa as contas para saber quanto seu objeto ir precisar com padding, border e magin.
Este clculo pode ser crucial para o posicionamento de elementos precisamente em uma pgina.

33

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

6.2.1 Box-model em ao
<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 contm dois elementos: <h1> e <p>. O box model para os dois elementos
mostrado a seguir:

Figura 3 - Visualizao da figura 2

Embora possa parecer um pouco complicado, a ilustrao mostra como cada um dos elementos
contido em um box (uma caixa). Boxes que podem ser ajustados e controlados via CSS.

34

Captulo 7

Lio 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 pea que lhe d o controle sobre o resultado visual de
uma pgina. O CSS nos permite fazer quatro tipos de posicionamento, os quais so:
Absolute;
Relative;
Static;
Fixed.
Todos os exemplos sitados nesta parte da lio sero empregados em <div>

7.1.1 Fluxo Normal

O termo fluxo normal refere-se ao comportamento padro do navegador. Como voc certamente 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 resoluo do monitor eles simplesmente iro se realocar mas permanecero no mesmo fluxo sem
quebrar a linha, no caso, o pargrafo.

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 no ocupar um espao no documento.
Exemplo:

35

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

#content {
position: absolute;
background-color: orange;
left: 100px;
top: 50px;
border: 1px solid red;
}

Figura 1 - <div> com posio absoluta de 25px ao topo e a esquerda

7.1.3 Posio Relativa

A terminologia utilizada no posicionamento em CSS um pouco vaga. Posicionamento relativo muitas vezes confuso, em primeira porque levanta a questo: relativo a qu? A maioria das
pessoas acham que a posio seria algo relativo a um outro elemento.
Posicionamento relativo em caixas so para o fluxo normal. Isto significa que elas no so
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 padres 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 comea, pois no fluxo normal, tambm. Voc v
que o fluxo contnuo pelo posicionamento; da o contedo flui como deveria, tanto antes como
depois da caixa relativamente posicionada.
36

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

NOTA
Posicionamento relativo utilizado quando o fluxo normal no deve ser quebrado. O posicionamento absoluto melhor usado para itens que devem ser posicionados muito especificamente.
Muitas vezes, os dois so combinados, como tendo uma <div> com posicionamento relativo e
outro com absoluto dentro dele, ou vice-versa.

7.1.4 Posio Fixa

A posio fixa uma pea brilhante no CSS. Mas infelizmente no 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 pagna, atuar
quase como que uma janela flutuante. Diferente do posicionamento absoluto em que elementos
fixos so posicionandos em relao a sua rea de viso.
Exemplo:

<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
background: #ccc;
width: 100%;
}

37

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Figura 1 - <div> com posio 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 caracterstica singular de poder colocar o contedo ao seu
redor, possvel adicionar margin e padding.
Exemplo:

#picture { float:right;}

Figura 1 - Imagem no Incio do Texto com float a direita

Mas a propriedade float no se limita s imagens, ela pode ser aplicada a qualquer elemento.
Como em uma <div> por exemplo.
Exemplo:

#columa1 { float:left; width: 33%; }

#columa2 { float:left; width: 33%; }
#columa3 { float:left; width: 33%; }

Figura 2 - Float distribuido forma igual na pgina

Tome cuidado quanto ao tamanho do objeto que voc vai usar o float, pois ele se for maior do
que a rea do contedo os elementos iro para baixo uns dos outros e no para o lado como no
exemplo anterior.

38

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Figura 3 - Exemplificao 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 padro, o elemento subseqente a um float, ocupa o espao 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 cdigo.
Para evitar que o texto se posicione no espao livre deixado pela imagem faremos da seguinte
forma:
Exemplo:

img {float: left; margin-right: 10px; }

h1 {clear: left; top-margin: 2em;}

Figura 4 - Exemplificao de uma imagem e ttulo juntos com a propriedade clear

39

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

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