Versão 1.0.0
Sumário
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
1
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
2
Parte I
3
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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.
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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Sobre o CDTC
Objetivo Geral
Objetivo Específico
Guia do aluno
Neste guia, você terá reunidas uma série de informações importantes para que você comece
seu curso. São elas:
• Primeiros passos
É muito importante que você entre em contato com TODAS estas informações, seguindo o
roteiro acima.
Licença
6
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
É 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".
• 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.
• 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.
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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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.
. 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:
Primeiros Passos
Para uma melhor aprendizagem é recomendável que você siga os seguintes passos:
• Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar das
ferramentas básicas do mesmo;
Perfil do Tutor
8
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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;
• 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’)
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.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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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;
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:
• Cores e Fundos:
– Cor e CSS;
– Adicionando cor ao Fundo;
– Juntar Imagem ao Fundo;
13
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
– Escolhendo a Fonte;
– Textos;
– Trabalhando com Links.
– Classes e Id’s;
– Caixas.
– 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:
Instrumentos de avaliação:
• 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
<body bgcolor="#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:
15
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
16
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
17
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
<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.
As desvantagens de se usar estilos in-line é que você só irá poder fazer alterações nos ele-
mentos em que você formatou.
18
CDTC Centro de Difusão 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>
<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:
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
Familiarize-se com a interface do CSS. Você irá perceber que ela é bem intuitiva.
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.
Exemplo:
20
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Figura 1 - Agave
21
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
22
CDTC Centro de Difusão 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ê 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:
body {
background-image: url(imagem_que_você_quer_usar.jpg);
background-repeat: repeat-x;
}
body {
background-image: url(imagem_que_você_quer_usar.jpg);
background-repeat: repeat-y;
}
você também pode não querer repetir as imagens, então 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 Difusão de Tecnologia e Conhecimento Brasil/DF
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, 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.
body {
background-image: url(imagem_que_você_quer_usar.gif);
background-position: right;
background-repeat: no-repeat;
background-attachment: scroll;
}
24
Capítulo 5
Conheça como são e como utilizar as fontes e a estilizar seus textos e links.
• 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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• 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
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ê.
26
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
h1 {font-family: fantasy;}
Caso o computador do usúario não tenha a fonte arial, ele irá aprensentar uma fonte derivada
daquela família.
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.
p {text-indent: 25px;}
27
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
h1 {letter-spacing: 4px;}
p {letter-spacing: 5px;}
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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
none
Sem trasformações - o texto fica como foi escrito no código HTML.
Exemplo:
h1 {text-transform: uppercase;}
li {text-transform: capitalize;}
• 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:
29
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Você ira aplicar a classe class="nav" ao link que você deseja atribuir outro parâmetro:
Você pode fazer quantas classes você quiser para seu documento, use sua imaginação.
30
Capítulo 6
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.
<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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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):
Seletores ID são indicados pelo símbolo de "jogo-da-velha"(#) dentro da folha de estilo como
segue:
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".
32
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
O exemplo contém dois elementos: <h1> e <p>. O box model para os dois elementos é
mostrado a seguir:
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
Veja como posicionar diversos elementos no site para formar o layout que você planejou.
• Absolute;
• Relative;
• Static;
• Fixed.
35
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
#content {
position: absolute;
background-color: orange;
left: 100px;
top: 50px;
border: 1px solid red;
}
* {
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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
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.
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
background: #ccc;
width: 100%;
}
37
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
#picture { float:right;}
Mas a propriedade float não se limita às imagens, ela pode ser aplicada a qualquer elemento.
Como em uma <div> por exemplo.
Exemplo:
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
CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
39
CDTC Centro de Difusão 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