Dados do Aluno

Nome: _________________________________________________
Número da matrícula: _____________________________________
Endereço: ______________________________________________
Bairro: _________________________________________________
Cidade: ________________________________________________
Telefone: _______________________________________________
Anotações Gerais: ________________________________________
_______________________________________________________
_______________________________________________________

CSS
 Apresentação do CSS
Cascading Style Sheets (ou simplesmente CSS) é uma
linguagem de estilo utilizada para definir a apresentação de
documentos escritos em uma linguagem de marcação, como HTML ou
XML. Seu principal benefício é prover a separação entre o formato e o
conteúdo de um documento.
Em vez de colocar a formatação dentro do documento, o
desenvolvedor cria um link (ligação) para uma página que contém os
estilos, procedendo de forma idêntica para todas as páginas de um
portal. Quando quiser alterar a aparência do portal basta portanto
modificar apenas um arquivo.
Fonte: http://pt.wikipedia.org/wiki/Cascading_Style_Sheets

Marcas Registradas:
Todas as marcas e nomes de produtos apresentados nesta apostila
são de responsabilidade de seus respectivos proprietários, não
estando a editora associada a nenhum fornecedor ou produto
apresentado nesta apostila.

Método CGD® - Todos os direitos reservados.

Protegidos pela Lei 5988 de 14/12/1973.
Nenhuma parte desta apostila poderá ser copiada sem prévia autorização.
O Método CGD é um produto da Editora CGD.
 Controle de Presença

Data Lição e Passo Anotações

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

 Índice
LIÇÃO 1 - INICIANDO NO CSS ............................................................5
● O QUE É O CSS .............................................................................5
● OS TIPOS DE FOLHA DE ESTILO .............................................................6
● AS DEFINIÇÕES EXISTENTES DO CSS...................................................... 7
● A PROPRIEDADE BACKGROUND..............................................................9
● A PROPRIEDADE MARGIN .................................................................. 11
● AS PROPRIEDADES WIDTH E HEIGHT ..................................................... 12
● EDITANDO TEXTOS ......................................................................... 13
LIÇÃO 2 - PROPRIEDADES PARTE 1 ..................................................16
● A PROPRIEDADE FLOAT .................................................................... 16
● A PROPRIEDADE CLEAR .................................................................... 18
● A PROPRIEDADE PADDING ................................................................. 21
● A PROPRIEDADE BORDER .................................................................. 22
● A PROPRIEDADE POSITION ................................................................ 25
LIÇÃO 3 - ARQUIVO CSS ................................................................... 26
● ARQUIVO CSS ............................................................................. 26
● A PROPRIEDADE DISPLAY .................................................................. 28
● EDITANDO LINKS........................................................................... 29
● CENTRALIZAÇÃO DE DIVS E OUTROS ELEMENTOS EM CAIXA ............................ 32
● A PROPRIEDADE BACKGROUND-POSITION ................................................ 34
● A PROPRIEDADE BACKGROUND-REPEAT .................................................. 35
● A PROPRIEDADE Z-INDEX ............................................................... 39
LIÇÃO 4 - SIMPLIFICANDO ............................................................... 42
● A PROPRIEDADE CURSOR ................................................................. 42
LIÇÃO 5 - PROPRIEDADES PARTE 2 ..................................................43
● A PROPRIEDADE OVERFLOW .............................................................. 43
● LISTA DE PROPRIEDADES .................................................................. 44
Lição 1 - Iniciando No CSS
● O que é o CSS

● Um arquivo CSS (Cascading Style Sheets) ou folha de estilos em cascata

é uma linguagem utilizada para a definição de layouts em documentos
HTML, controlando tamanho, margens, cores, bordas.
● Assim como no HTML qualquer alteração no código CSS deve ser salva
para que, então, possa ser visualizada no navegador.
● O HTML também pode ser utilizado para a definição do layout (como era
feito antigamente, através do uso de tabelas), porém esse uso é
incorreto, hoje em dia temos a presença das normas de
desenvolvimento para web, e você deve segui-las para que assim possa
obter um resultado parecido nos navegadores existentes.

● Esses padrões para desenvolvimentos são definidos pelo W3C, um

consórcio internacional no qual organizações filiadas, uma equipe em
tempo integral e o público trabalham juntos para desenvolver padrões
para a Web.

● Veja abaixo um exemplo do que o CSS permite fazer em uma página da

internet, esta é uma página que foi criada com formatação CSS e nós
retiramos o código para que você veja do que ele é capaz.

CSS 5
● Temos agora a mesma página, porém, com a formatação CSS inserida.

● Veja a diferença entre as duas versões da página, ou seja, através do

código CSS você pode definir toda a aparência do site, ajustando
posição, cor e outras características, tanto de texto como de imagens.

● Os tipos de folha de estilo

● Atualmente existem três (3) tipos de folhas de estilo, a INLINE, a

EXTERNA e a INTERNA, veja a seguir a diferença entre as três.

● INLINE: Utilizando o estilo inline, você irá inserir os códigos CSS junto
com o código HTML, dentro da própria tag alvo, utilizando o atributo
style, ou seja, se você deseja por exemplo, deixar um div com fundo
preto e texto branco, seu código ficaria assim:

6 CSS
● EXTERNA: Utilizando uma folha de estilo externa, você deverá "linka-la"
na página através de uma tag própria que deve ser inserida entre as
tags <head> e </head>:

● INTERNA: Utilizando uma folha de estilo interna, você deverá criar um

arquivo css normalmente, porém ele será inserido na própria página
entre as tags <head> e </head>, utilizando a tag <style>, todas as
propriedades CSS devem ir dentro da tag style:

● As definições existentes do CSS

● Uma folha de estilo CSS pode ser composta através de quatro possíveis
definições, e você pode utilizá-las juntas em uma mesma folha de estilo.
● A CLASSE pode ser aplicada em vários elementos HTML, quantas vezes
forem necessárias, a criação de uma classe ocorre na definição do
nome antecedido por um ponto final, veja a seguir a criação de uma
classe, onde definiremos a fonte do texto, a cor e o tamanho:

CSS 7
● A aplicação desta classe, poderia ser feita em um div, em um parágrafo
em um span, onde fosse necessário, podendo ser repetida no
documento, sua aplicação em um parágrafo seria feita da seguinte
maneira:

● O ID ao contrário da classe só pode ser aplicado em um elemento

determinado da página, uma única vez, ou seja, deve ser único, não
pode se repetir, a criação de um id ocorre na definição do nome
antecedido por um sustenido (#), veja a seguir a criação de um id,
onde definiremos a cor de fundo, a largura e as margens do objeto:

● O id é geralmente utilizado em áreas importantes da página, como a

definição do corpo, do menu, do cabeçalho e etc, no exemplo acima nós
criamos uma definição para o corpo da página, ela deve ser aplicada em
um div, já que este por sua vez é uma espécie de container do HTML,
veja a aplicação a seguir:

● A TAG serve basicamente para redefinir uma determinada tag HTML, ou

seja, define a formação de uma tag, aplicando-a em todas as tags da
página, para a definição de uma tag, basta inserir seu nome, e
todas as tags da página seguirão sua formatação, veja a seguir a
definição de uma imagem de fundo para a página, uma fonte padrão,
uma cor e um tamanho de texto:

8 CSS
● Como a tag redefine um elemento HTML, ela não precisa ser aplicada, o
exemplo acima iria definir a formatação da tag body, ou seja do corpo
da página, definindo uma fonte padrão e uma imagem de fundo.

● A COMPOSIÇÃO serve para definir a formatação de um determinado

item que deve estar dentro de outro determinado item, para a
definição de uma composição, você deve inserir primeiro o
elemento principal e em seguida o elemento que realmente
deseja editar, veja a seguir a definição de um parágrafo que deve estar
dentro de uma tag com a id #conteudo.

● A aplicação desta composição seria feita em um div com a id #conteudo

e ela iria alterar todos os parágrafos presentes dentro deste div, ou seja,
qualquer texto presente no div, só seria realmente alterado se estivesse
dentro de um parágrafo:

● A propriedade background

● A propriedade background é responsável pela definição das propriedades

do fundo da página. Ela se divide em pequenas propriedades, como:
color, image, repeat entre outras, veja mais detalhes a seguir.

● background-color: - Define a cor que será utilizada no fundo da página

através do código hexadecimal (#ffffff).

● background-image: - Define a imagem que será utilizada no fundo da

página, através do valor url(local da imagem).

● background-repeat: - Define se a imagem aplicada no fundo da página

irá ou não se repetir, os valores possíveis são:
 no-repeat (para que a imagem não seja repetida).
 repeat (para que a imagem seja repetida em todo o fundo).
 repeat-x (para que a imagem seja repetida apenas horizontalmente).
 repeat-y (para que a imagem seja repetida apenas verticalmente).

CSS 9
● background-position: - Define o posicionamento da figura no fundo da
página, os valores possíveis são:
 bottom (insere a imagem na área inferior da página).
 center (insere a imagem centralizada na página).
 left (insere a imagem na área esquerda da página).
 right (insere a imagem na área direita da página).
 top (insere a imagem na área superior da página).

● Veja um exemplo de aplicação da propriedade background em uma

página.

● A propriedade background também pode ser aplicada em DIVs, H1, H2,

H3, tables e outras tags do HTML, você também pode utilizá-la através
de classe ou id.
● Abaixo temos um exemplo de classe com a aplicação da propriedade
background.

10 CSS
● Se a classe fosse aplicada acima fosse aplicada a um div, esse seria o
resultado dela:

● A propriedade margin

● A maior parte dos elementos HTML possuem uma margem própria,

através do CSS você pode aumentá-la, reduzi-la e também adicionar
margem aos itens que não possuem uma margem padrão, para isso
você deve utilizar a propriedade MARGIN.

● A propriedade MARGIM pode ser aplicada em todos os lados do

elemento, você pode aplicar a margem na parte superior utilizando a
propriedade margin-top, para aplicar margem à direita do elemento
você pode utilizar a propriedade margin-right, para a parte inferior
você pode utilizar a propriedade margin-bottom e para a parte
esquerda do elemento você pode utilizar a propriedade margin-left.
● Para definir o mesmo valor para todos os lados, basta utilizar a
propriedade margin.
● Veja alguns exemplos abaixo:

● No exemplo acima o cabeçalho H1 terá 10px de margem superior,

inferior e terá 20px de margem à esquerda e à direita.

CSS 11
● Para aplicar 10px de margem em todos os lados, bastaria ajustar o CSS
da seguinte maneira:

● Existe uma maneira de aplicar uma borda com valores diferentes em

apenas uma linha, dessa seguinte maneira:

● As propriedades width e height

● O CSS permite que você ajuste a altura e a largura de um determinado

objeto, existe uma propriedade para cada ajuste, para modificar a
largura de um objeto você deve utilizar a propriedade width, já
para alterar a altura do objeto a propriedade a ser utilizara é a
height.

● Essas propriedades também podem ser trabalhadas com porcentagem

(%) ou seja, você pode personalizar um div para que ele ocupe 50% da
tela do usuário, ou seja, o valor irá variar de um computador para o
outro, pois o tamanho da tela nem sempre é o mesmo.

● Veja abaixo alguns exemplos de utilização das propriedades width e

height.

12 CSS
● Abaixo temos o resultado caso o CSS acima fosse aplicado em um div:

● Bastaria inverter o valor das propriedades width e height, para que o

retângulo criado fosse verticalmente:

● Editando textos

● O CSS permite que você altere a formatação de textos, você pode fazer
isso criando uma classe que será inserida em divs e parágrafos ou editar
os parágrafos e os cabeçalhos diretamente (h1, h2, h3...).

● Para a edição de textos o css apresenta diversas propriedades, veja

algumas delas a seguir:
● color: define a cor do texto através do código hexadecimal, exemplo:
#ff00ff.

● font-family: define a fonte que será utilizada no objeto, fontes que

tenham espaço no nome, devem ser inseridas entre "aspas", e após o
nome da fonte você poderá especificar se a fonte é ou não serifada (o
CSS 13
 que é fonte serifada?), para fontes serifadas utiliza-se o termo "serif"
para fontes não serifadas, utiliza-se o termo "sans-serif" exemplo:
"Lucida Sans", sans-serif.

● font-size: define o tamanho da fonte em px, exemplo: 12px.

● text-align: define o alinhamento do texto, seu valor pode ser: center

para centralizar o texto, left para inserir o texto à esquerda, right para
inserir à direita ou justify para justificar.

● text-decoration: define o estilo de decoração do texto, seu valor pode

ser: line-through para que uma linha passe no meio do texto, none
para que nenhuma decoração seja aplicada (útil para remover o
sublinhado de links), overline para que uma linha passe acima do texto
ou underline para o efeito sublinhado.

● Abaixo temos um cabeçalho H1 (<h1>) padrão, sem formatação CSS.

● No CSS criamos uma regra do tipo TAG, que iria modificar todos os
cabeçalhos do tipo H1.

● Esse é o resultado da formatação do CSS.

14 CSS
● A formatação de texto também pode ser feita através de um outro
container, não sendo aplicada apenas aos parágrafos e cabeçalhos, como
no caso abaixo (classe div_propaganda), todo texto inserido dentro de
um div com esta classe irá seguir a formatação determinada, ou seja,
fonte “Trebuchet MS”, tamanho 15px e cor branca.

● Esse é o exemplo de um DIV com a classe “div_propaganda”.

CSS 15
● Você também pode inserir uma aparência padrão para todos os textos
da página, através da formatação da tag <body> no seu CSS, veja o
exemplo abaixo.

● Dessa maneira, todos os textos da página que não possuíssem uma

formatação, teriam a fonte definida como “Trebuchet MS” no tamanho
14px e a cor preta (#000000).

Lição 2 - Propriedades Parte 1

● A propriedade float

● A propriedade float é a responsável por determinar a posição do objeto,

float quer dizer "flutuar" ou seja, ela é responsável pela "flutuação" do
elemento, seus valores são:
 left (para que o objeto fique à esquerda).
 right(para que o objeto fique à direita).
 none (para que o objeto não flutue).
 inherit (para que o objeto herde o float do objeto anterior).

● Ao definir o valor da propriedade FLOAT como LEFT o elemento, ficará à

esquerda da página, veja o exemplo abaixo.

16 CSS
● Ao definir o valor da propriedade FLOAT como RIGHT o elemento,
ficará à esquerda da página, veja o exemplo abaixo.

● Se o espaço disponível for suficiente para os dois objetos, eles serão

exibidos lado a lado, veja o CSS abaixo

CSS 17
● Os divs ficariam assim:

● A propriedade clear

● Quando um objeto não for "flutuar" ao lado de nenhum outro, você deve
"bloquear" a propriedade float, essa é a função da propriedade clear,
bloquear o float no objeto em que for adicionada, os valores da
classe podem ser:
 left (para bloquear float à esquerda do objeto).
 right(para bloquear float à direita do objeto).
 both (ara bloquear float em ambos os lados).

● No exemplo abaixo nós inserimos dos dois divs criados anteriormente.

18 CSS
● Eles ficam assim:

● Basta adicionar a propriedade clear ao div da direita, para indicar que ele
não deverá ter nenhum item flutuando a esquerda, ou seja, basta inserir
a propriedade clear:left para que ele seja criado abaixo do div da
esquerda.

CSS 19
● Fica assim:

● Criamos uma nova classe para adicionar mais um div a página.

● Adicionamos o div criado (div_esquerda2) abaixo do div_esquerda

● Como o div da direita está com a propriedade clear, o div foi inserido
logo a esquerda do primeiro div.

20 CSS
● A propriedade padding

● A propriedade padding adiciona uma margem interna ao objeto, ou

seja, se você aplicar um padding em um parágrafo, o texto ficará um
pouco menor que a caixa de texto, deixando uma “margem interna”,
para criar essa margem, o objeto onde o padding for adicionado irá
aumentar o tamanho de acordo com o valor inserido, por exemplo,
você tem um div com 50px de altura e de largura, ao adicionar
um padding de 10px o div ficará com 70px de altura e de largura,
pois ele terá 10px adicionado a cada lado.

● Veja um exemplo de aplicação de padding abaixo.

● O div fica assim, veja que existe um espaço entre o texto e a borda do
div, esse é o resultado do padding:10px

CSS 21
● A propriedade border

● A propriedade border é responsável por inserir borda ao conteúdo onde

ela for aplicada, abaixo temos um div, com 180px de largura e altura
com 10px de espaçamento (padding) (o que totaliza 200px de largura e
altura) com o preenchimento cinza claro (#eaeaea) texto preto e uma
borda preta.

● A propriedade border pode ser aplicada separadamente, ou seja, em

apenas um dos lados do objeto, para isso você deve utilizar a
propriedade adequada:
 border-left
 border-right
 border-top
 border-bottom

● Para aplicar uma borda apenas na parte superior de uma classe, por
exemplo, você iria cria-la da seguinte maneira:

22 CSS
● Note que a propriedade border faz a união de todas as propriedades de
borda:
 1px = largura da borda
 solid = estilo da borda
 #0000ff; = cor da borda

● Esses atributos também podem ser definidos individualmente, assim:

 border-width:1px;
 border-style:solid;
 border-color:#0000ff;

● Ou seja, para inserir uma borda ao redor de todo o elemento, você pode
criar o css de duas maneiras.
● Da forma extensa:

● Da forma resumida:

● A propriedade border possui vários estilos, veja-os abaixo:

CSS 23
● Veja abaixo uma classe criada para inserir uma borda inferior em um
elemento

● Aplicamos a classe à um cabeçalho de nível H2, veja o resultado abaixo:

● O modelo abaixo usa o estilo de borda dotted

● O modelo abaixo usa o estilo de borda dashed

24 CSS
● A propriedade position

● A propriedade position serve para especificar o posicionamento de um

objeto, ele possui quatro valores possíveis, eles são:
 absolute: O posicionamento absolute, utiliza como base o último
elemento que foi posicionado através de qualquer outro valor.
 fixed: O posicionamento fixed, deixa o elemento fixo na tela, sempre no
mesmo local, independente do scroll da página e etc.
 relative: O posicionamento relative, deixa o objeto posicionado
conforme sua determinação através dos valores left, top, right e
bottom.
 static: O posicionamento static, deixa o objeto seguir o fluxo da página,
esse na verdade é o posicionamento padrão de qualquer objeto, sendo
assim, não se torna necessário declará-lo no CSS.

CSS 25
Lição 3 - Arquivo CSS
● Arquivo CSS
● Os arquivos do tipo .CSS devem ser utilizados para formatar os arquivos
.HTML, para isso você deve ligar (linkar) o css ao arquivo html através
da tag <link>

● O arquivo CSS não precisa ficar na mesma pasta do arquivo HTML, você
pode indicar a pasta como feito no exemplo acima, o arquivo css
(estilos.css) está dentro da pasta CSS

26 CSS
● Você pode ter mais de um arquivo .css na mesma pasta, pois, apenas o
arquivo indicado através da tag <link> será utilizado, os arquivos .css
servem basicamente para organizar o código da sua página, permitindo
assim que o arquivo .html utilize apenas códigos dedicados ao HTML.
● Se o arquivo CSS estivesse na mesma pasta do arquivo HTML

● O código para linkar o CSS ao HTML seria assim:

● A tag <link> deverá sempre indicar onde o arquivo CSS está, esteja ele
dentro de uma pasta ou na mesma pasta do arquivo HTML.

● Os atributos “rel” e “type” sempre deverão ser preenchidos como

no exemplo acima (rel=”stylesheet” type=”text/css”).

● O atributo rel indica a relação entre os dois arquivos, ou seja, o arquivo

linkado é uma folha de estilo (stylesheet).
● Já o atributo type indica o tipo do arquivo, no caso, texto/css.

● Você pode obter maiores detalhes sobre a tag <link> no seguinte

site: http://www.w3schools.com/tags/tag_link.asp

CSS 27
● A propriedade display

● A propriedade display permite a definição da maneira que o elemento

html será apresentado na página, existem 4 principais valores para essa
propriedade veja-os a seguir:
 block: faz com que o objeto seja exibido em forma de bloco, assim
como acontece com os parágrafos e os cabeçalhos, um bloco contém
espaços em branco em todos os cantos e não permite que um outro
objeto html fique ao seu lado.
 inline: faz com que o objeto seja exibido em linha, ou seja, no mesmo
local, podendo transformar uma lista em uma única linha.
 none: deixa o objeto oculto, ou seja, ele não é exibido pelo navegador.
 inline-block: é uma mistura dos dois primeiros valores, ou seja, insere
um objeto em linha, porém deixando-o se comportar como um bloco.

● Veja a lista criada abaixo:

● Ela é uma lista não ordenada, criada em HTML através das tags <ul> e
<li>, agora veja a composição que foi criada para editar todas as tags
<li> que estiverem dentro da classe .lista_menu:

● Agora basta aplicar a classe lista_menu na tag <ul> para que ela
altere todos os <li> que estiverem dentro dela.

28 CSS
● A lista agora será exibida em uma única linha sem os marcadores

● Basta inserir os links em cada item da lista para criar uma espécie de
menu horizontal para um site.

● Se a propriedade display fosse modificada para none, a lista deixaria

de ser exibida na página.

● Editando links

● Assim como no HTML, o CSS permite alterar os estados dos links, cada
um pode utilizar uma formatação própria, por exemplo, o link será
verde, quando o mouse estiver sobre ele, então sua cor será azul,
quando clicado ficará vermelho... e assim por diante, veja agora como
modificar os estados dos links:
 a:link: responsável por editar o estado inicial do link
 a:hover: responsável por editar o link quando o mouse está posicionado
sobre ele
 a:visited: responsável por editar os links já visitados
 a:active: responsável por editar o link quando ele estiver ativo

● Veja abaixo como editar a aparência de um link que está dentro de uma
tag <li> para definir a aparência de um menu horizontal.

● A lista foi criada utilizando a tag <ul> e a tag <li>.

CSS 29
● Ela está utilizando a classe lista_menu

● Essa classe está deixando o display da lista no modo block para que
ela ocupe toda a página horizontalmente assim como acontece com os
cabeçalhos (H1, H2...) define que ela terá um padding no valor de 5px,
não terá margem e possuirá um fundo em um tom de cinza escuro
(#666666).

● Basta inserir uma composição que deixe todos os elementos <li> que
estiverem dentro da classe lista_menu sendo exibidos em linha
(display:inline), ficaria assim:

● Para formatar os links que estão dentro dos elementos <li> você precisa
criar uma nova composição.

● Esta composição define que a fonte do link será “Trebuchet MS”, eles
deverão ter um espaçamento de 5px entre eles (padding), a cor do
link deverá ser branco (#ffffff) e ele não deverá ter nenhuma
30 CSS
 decoração (text-decoration:none) desta forma o sublinhado que fica
abaixo dos links será retirado.

● Para alterar a aparência do link quando o mouse estiver posicionado

sobre ele, você deverá alterar o estado a:hover.

● Ao posicionar o mouse sobre algum dos links, ele ficará assim:

● Após visitar (clicar) em um link, ele irá mudar de aparência para indicar
que ele já foi visitado, ficando assim:

● Para alterar a aparência do link quando o mouse estiver posicionado

sobre ele, você deverá alterar o estado a:visited.

● Os links que já foram visitados agora terão a mesma aparência dos links
que ainda não foram visitados.

● O status :hover deve sempre ser o último a ser definido, o resultado

final do menu é o seguinte.

CSS 31
● O CSS deve ficar assim:

● Centralização de divs e outros elementos em caixa

● A centralização de uma página que trabalha sua medida de forma

ajustável, em porcentagem (%) é feita através de uma conta simples,
suponha que o corpo da página ocupa 60% da janela, ou seja, 100% da
janela menos 60% do corpo, restando 40%, os 40% restantes devem
ser divididos por 2, afinal temos duas laterais, a esquerda e a direita,
sendo assim, nossa página teria 20% de margem em cada lateral.

● Lembre-se de como utilizar a propriedade margin nas páginas 11/12.

32 CSS
● Quando estamos trabalhando com uma página de largura fixa, definida
em pixels (px), não sabemos a porcentagem que ela ocupará da tela,
pois ela irá variar de acordo com a resolução do computador do usuário,
então a centralização deve ser feita através da propriedade "margin"
com o valor "0 auto", como você pode ver no exemplo abaixo.

● A página sem a propriedade margin está assim:

● O CSS deverá ser feito assim:

● A página ficará assim:

CSS 33
● A propriedade background-position

● A propriedade background position permite que você ajuste a posição da

imagem de fundo, seja ela da página, de um div, ou de qualquer outro
elemento HTML.
● Veja o div abaixo, ele será utilizado para demonstrar como funciona o
background-position.

● A propriedade background-position serve para ajustar o posicionamento

da imagem, ela pode ter os valores:
 left top
 left center
 left bottom
 right top
 right center
 right bottom
 center top
 center center
 center bottom

● Se você especificar uma posição apenas com uma palavra a segunda

será center, ou seja, se você definir o background-position como
left, ele na verdade será left center, se você especificar como top ele
será top-center.

● Você também pode posicionar a imagem através de % como no exemplo

abaixo:
 background-position:0% 50% - O posicionamento aqui seria 0% na
horizontal e 50% na vertical.

● E até mesmo através de px, como no exemplo:

 background-position:10px 25px - O posicionamento aqui seria 10px na
horizontal e 25px na vertical.
34 CSS
● A imagem bob.png será utilizada no fundo do div.

● A imagem é aplicada e repetida várias vezes para preencher

completamente o tamanho do div, essa é a configuração padrão do
background no css, ele sempre é repetido, porém, você pode modificar
esse comportamento.

● A propriedade background-repeat

● A propriedade background-repeat permite que você ajuste a repetição

do background, através dessa propriedade você pode limitar a repetição
horizontalmente, verticalmente ou não permitir sua repetição, veja os
valores da propriedade.
 repeat: faz com que o fundo seja repetido em todo o fundo, esse é o
valor padrão do CSS.
 repeat-x: faz o fundo ser repetido apenas horizontalmente.
 repeat-y: faz o fundo ser repetido apenas verticalmente.
 no-repeat: não permite que o fundo seja repetido.

CSS 35
● Ao aplicar o background-repeat: repeat-x; o fundo ficará assim:

● Ao aplicar o background-repeat: repeat-y; o fundo ficará assim:

● Ao aplicar o background-repeat: no-repeat; o fundo ficará assim:

36 CSS
● Para utilizar a propriedade background-position, você precisa definir a
propriedade background-repeat como no-repeat, para que o fundo
seja inserido apenas uma vez e não seja repetido em todo o fundo.

● Abaixo temos alguns resultados da aplicação do background-position e

seus diferentes valores.

● Background-position: center;

● Background-position: top;

CSS 37
● Background-position: top right;

● Background-position: bottom left;

● Background-position: center right;

38 CSS
● Como você pode ver nos exemplos anteriores, a primeira palavra do
valor indica o posicionamento vertical, já a segunda palavra o
posicionamento horizontal.

● A propriedade Z-INDEX

● O CSS permite que você trabalhe com "camadas", ou seja, você pode
sobrepor objetos, isso pode ser feito através da propriedade z-index, o
valor da propriedade deverá ser numérico, assim ele representará a
camada em que o objeto está, por exemplo, um objeto com o z-index
definido em 2 (z-index:2) ficará sobre um objeto com o z-index no valor
1, ou seja, o objeto com o maior z-index ficará posicionado sobre o
restante.

● Para utilizar a propriedade z-index você precisa definir também a

propriedade position.

● Veja as imagens abaixo, elas foram inseridas sem nenhum ajuste CSS.

CSS 39
● Veja agora as classes criadas (uma para cada imagem).

● As classes foram aplicadas nas imagens.

● Esse foi o resultado obtido.

● A imagem do Lula Molusco está sobre as outras duas pois ela possui o z-
index com o maior valor (z-index:3).

40 CSS
● Basta alterar o valor do z-index da classe .bob para um número maior
que 3 para que a imagem que utiliza essa classe fique sobre a imagem
do Lula molusco.

● Ao posicionar as imagens através dos valores de top e left você pode

obter o seguinte resultado

CSS 41
Lição 4 - Simplificando
● A propriedade Cursor

● O CSS permite que você edite a aparência do cursor do mouse, a

propriedade responsável por isto é chamada de cursor, você pode
aplicar esta propriedade para modificar o cursor em toda página, ou
apenas em um único objeto, veja agora alguns dos valores que você
pode utilizar para a propriedade.

42 CSS
Lição 5 - Propriedades Parte 2
● A propriedade Overflow

● A propriedade overflow serve para indicar como o container irá agir se o

conteúdo ultrapassar suas medidas especificadas (altura e largura), a
propriedade pode ser:

● overflow:hidden que esconderá o conteúdo restante como você pode

ver abaixo.

● overflow:scroll que criará as barras de rolagem, mesmo que elas não

sejam necessárias:

CSS 43
● overflow:auto que criará as barras de rolagem, quando elas forem
necessárias.

● Lista de propriedades

● Abaixo temos um resumo das propriedades básicas do CSS.

● background-color: utilizado para definir uma cor de fundo na página

e/ou elemento.
● background-image: utilizado para definir uma imagem de fundo na
página e/ou elemento.
● background-repeat: utilizado para definir a repetição da imagem de
fundo da página e/ou elemento.
● background-position: utilizado para definir a posição da imagem no
fundo da página e/ou elemento.

● color: utilizado para definir a cor do texto.

44 CSS
● text-align: utilizado para definir o alinhamento do texto.
● text-decoration: utilizado para definir se o texto terá ou não
decoração, sublinhado e etc.
● font-family: utilizado para definir a fonte que será utilizada no texto.
● font-size: utilizado para definir o tamanho do texto.

● Os links podem ser editados através dos quatro estados abaixo, lembre-
se que eles podem ser adicionados a classes específicas, por exemplo,
.cabecalho a:link, dessa maneira apenas os links que estiverem dentro
da classe .cabecalho seriam editados.
● a:link: utilizado para editar a aparência dos links em seus estados
iniciais.
● a:visited: utilizado para editar a aparência dos links que já foram
visitados (clicados).
● a:hover: utilizado para editar a aparência dos links quando o mouse
estiver sobre eles
● a:active: utilizado para definir a aparência do link na hora do clique.

● list-style-type: permite que você altere o formato dos marcadores das

listas ordenada e não ordenadas

● margin: permite que você defina a distância externa de um elemento

para outro ou para a página.
● margin-top: define a margem existente na parte superior do elemento.
● margin-right: define a margem existente na lateral direita do
elemento.
● margin-bottom: define a margem existente na parte inferior do
elemento.
● margin-left: define a margem existente na lateral esquerda do
elemento.

● border: permite que você defina se o elemento terá uma borda, ela
pode ser um risco sólido, ou uma linha tracejada por exemplo e
também pode ter a espessura que você desejar.
● border-style: define o estilo da borda, linha fixa, tracejada e etc.
● border-color: define a cor da borda.
● border-width: define a espessura da borda.

● padding: define a distância existente entre o conteúdo do elemento e

sua borda, uma espécie de espaçamento interno.

CSS 45
● padding-top: define o espaçamento interno existente na parte superior
do elemento.
● padding-right: define o espaçamento interno existente na lateral direita
do elemento.
● padding-bottom: define o espaçamento interno existente na parte
inferior do elemento.
● padding-left: define o espaçamento interno existente na lateral
esquerda do elemento.

● position: permite posicionar o elemento escolhido em relação a página

ou a outro objeto.

● z-index: permite o ajuste do posicionamento do elemento em uma

espécie de camada, o elemento com o maior valor na propriedade será
exibido sobre os demais.

● cursor: permite a alteração do cursor que será utilizado.

FIM DA APOSTILA
Método CGD ® - Todos os direitos reservados.
Protegidos pela Lei 5988 de 14/12/1973.
Nenhuma parte desta apostila poderá ser copiada sem prévia
autorização.

46 CSS
 Anotações

CSS 47
48 CSS