css - basic intro

8/7/2019 CSS - Basic Intro

1/53

Rael Gugelmin Cunha raelgc@gmailcom

CSS

Cascade Style Sheets

Conceitos Bsicos


2/53

CSS

CSS a sigla para Cascade Style Sheets, ou

Folha de Estilos em Cascata.

uma linguagem que usamos para definir o

layout (aparncia) de uma pgina HTML.

suportada, em sua verso bsica, por todos

os navegadores atuais.

Como qualquer linguagem, recursos mais novosno so suportados por todos os navegadores.


3/53

CSS

Com CSS, controlamos coisas como:

Tipos e tamanhos de fontes

Cores

Margens e bordas

Linhas

Alturas, Larguras

Imagens de fundo Posicionamentos

e muito mais


4/53

CSS

Devemos usar HTML para definir somente a

estrutura de nossa pgina.

possvel definir layout em HTML, mas:

HTML no foi (em sua origem) projetado para isso

Isso est em desuso

Nosso cdigo HTML ficar poludo

Os recursos so poucos

Ficaremos presos sempre ao mesmo layout (comoveremos mais adiante)


5/53

CSS

Usando CSS, temos as seguintes vantagens:

Maior preciso no controle do layout

Deixar o layout de uma pgina em arquivos

separados do HTML Poder usar a mesma definio de layout para vrias

pginas

Recursos mais avanados, como por exemplo,blocos flutuantes


6/53

Como usar

Primeiro, vamos ver um exemplo, de como

seria alterarmos a cor de fundo de nossapgina:

Usando HTML

Usando CSS body { background-color: #FF0000; }


7/53

Como usar

Repare na estrutura do comando CSS:

body { background-color: #FF0000; }

Aqui identificamoso elemento quequeremos formatar

Aqui identificamosqual propriedade

Aqui identificamosqual o valor


8/53

Como usar

Mas onde colocar isso?

Existem 3 lugares possveis:

Dentro do prprio elemento (inline)

No incio da pgina (usando a tag style)

Em um arquivo externo - recomendado


9/53

Inline

Podemos aplicar CSS, usando o atributo STYLE

dentro do elemento HTML:

Exemplo

Esta uma pgina com fundo vermelho


10/53

Tag Style

Podemos aplicar CSS, usando a tag STYLE do HTML:

Exemplo

body { background-color: #FF0000; }



11/53

Arquivo externo

Para usar CSS como um arquivo externo,criamos um arquivo de texto com a extenso.css

Este arquivo ir conter tudo que o que havia natag STYLE.

Com isso, podemos usar o mesmo arquivo paravrias pginas diferentes.


12/53

Arquivo externo

Para utilizarmos este arquivo, colocamos um

link em nossa pgina HTML:

Exemplo



13/53

Arquivo externo

Como j dito, podemos usar o mesmo arquivopara vrias pginas diferentes.

Uma alterao neste arquivo, e todo o layout

de nosso site pode ser alterado:

O layout fica centralizado em um arquivo

O cdigo HTML fica mais limpo Menos trabalho (imagina trocar o layout de todas as

pginas, uma a uma)


14/53

Exerccio

Crie um arquivo de CSS externo, e nele definaa cor de fundo para seu layout, conforme vistoanteriormente.

Chame este arquivo em sua pgina.

Teste no navegador.


15/53

Altura e largura

Podemos definir as dimenses de nossos

elementos, respectivamente, altura e largura.

width: 100px;

height: 80px;

Toda medida em CSS pode ser relativa(expressa em %, por exemplo), ou absoluta(valor preciso).

So utilizadas vrias unidades, como px(pixels), cm (centrmetros), pt(pontos), etc.


16/53

Background

Alm da cor, podemos alterar vrias outraspropriedades do fundo dos elementos(background), como usar imagens ou no,posicionamento, etc.

Background no existe apenas no elementobody, mas sim em vrios outros elementos,

como clulas de tabelas, blocos, etc.


17/53

Background

As principais propriedades de background so:

background-color: cor do fundo

background-image: imagem de fundo

background-repeat: maneira como a imagem defundo posicionada

background-attachment: se a imagem de fundo"rola" ou no com a tela

background-position: como e onde a imagem defundo posicionada

background: maneira abreviada para todas aspropriedades


18/53

Fontes

Vamos tambm, alterar a fonte de texto

utilizada nos pargrafos

Repare que podemos definir mais de uma fonteutilizada, caso a primeira da lista no exista:

p {

font-family: Tahoma,Arial, Verdana;

font-size: 11px;

color: #CCCCCC;

}


19/53

Fontes

preciso cuidado com o tipo de fonteescolhida: cada sistema operacional tem umconjunto de fontes pequeno que o acompanha

Ou seja, voc pode utilizar uma fonte deaspecto muito bonito, mas que quase ningum

a possua, causando uma visualizao diferentedo seu site em outros computadores


20/53

Fontes

As principais propriedades das fontes so:

color: cor da fonte

font-family: fontes utilizadas

font-size: tamanho de fonte (fixo ou em %) font-style: estilo de fonte (normal, itlica)

font-weight: negrito

font: maneira abreviada para todas as propriedades


21/53

Textos

Alm das fontes, tambm temos as seguintes

principais propriedades para os textos:

letter-spacing: espaamento entre letras

word-spacing: espaamento entre palavras

text-align: alinhamento (esq, dir, centro, justificado)

text-decoration: decorao (normal ou sublinhado)

text-indent: recuo do texto

text-transform: forar maisculas ou minsculas

white-space: como o browser trata os espaos embranco


22/53

Links

Podemos aplicar todas as propriedades vistasat agora aos links HTML em nossas pginas

Mas podemos ainda, definir os atributos CSS

para cada um dos estados de um link:

a:link: link no visitado

a:visited: link j visitado a:active: link ativo (acabou de ser clicado)

a:hover: quando o mouse est sobre o link


23/53

Links

Exemplo: colocaremos cores diferentes paracada estado, e o link ser sublinhado apenasquando o mouse estiver sobre ele:

a:link: { color: red; text-decoration: none; } a:visited: { color: purple; text-decoration: none; }

a:active: { color: green; text-decoration: none;}

a:hover: { text-decoration: underline; }


24/53

Margens

Todo elemento sempre tem 4 margens:

Superior

Inferior

Direita Esquerda

Em CSS, podemos definir cada margemindividualmente, ou todas de uma vez s.


25/53

Margens

Todo elemento sempre tem 4 margens:

Superior

Direita

Inferior Esquerda

Em CSS, podemos definir cada margemindividualmente, ou todas de uma vez s.


26/53

Margens

Para definir cada margem individualmente,temos as seguintes propriedades:

margin-top

margin-right

margin-bottom margin-left

Ou, como j dito, definimos apenas umamargem que funcione nos 4 lados:

margin


27/53

Margens

Exemplo:

margin-top: 30px;

margin-right: 10px;

margin-bottom: 30px;

margin-left: 10px;

Ou:

margin: 30px 10px 30px 10px;


28/53

Padding

Padding uma margem interna.

Ou seja, uma distncia que fica entre a bordade um elemento e seu contedo.

O funcionamento o mesmo que paramargens: temos 4 paddings (superior, direita,

inferior, esquerdo), que podem ser definidosseparadamente ou apenas em uma declaraonica.


29/53

Padding

Exemplo:

padding-top: 30px;

padding-right: 10px;

padding-bottom: 30px; padding-left: 10px;

Ou:

padding: 30px 10px 30px 10px;


30/53

Bordas

As bordas podem ser usadas como elemento

decorativo ou para separar um contedo deoutro.

Podemos definir muitas propriedades ecombinao para as bordas.

As bordas tambm so definidas ou para os 4lados (superior, direita, inferior, esquerda), ouapenas um estilo para as 4 bordas.


31/53

Bordas

Alm da espessura da borda, podemos definir

tambm:

o tipo de borda: pontilhada, tracejada, linha, etc

cor da borda

E tambm, podemos definir essas propriedadesindividualmente para cada lado, ou para todosos lados em uma s propriedade.


32/53

Bordas

Vamos supor que estamos definindo a margem

direita de um elemento:

border-right-width: 1px;

border-right-style: solid; border-right-color: red;

Poderamos fazer em apenas um comando:

border-right: 1px solid red;


33/53

Bordas O mesmo vale para os outro lados.

Se quisssemos definir as propriedades para todas asbordas:

border-width: 1px;

border-style: solid; border-color: red;

Tambm poderamos definir todas as propriedades

(espessura, estilo e cor) para todas as bordas em umcomando s:

border: 1px solid red;


34/53

Bordas

Se no quisermos bordas, utilizamos como stylea palavra none:

border-right-style: none;

Que tambm pode ser usada para os 4 lados:

border-style: none;

i


35/53

Exerccio

Crie uma lista no ordenada (ul), contendo osmembros da sua famlia.

Coloque os seguinte estilos nesta lista: Cor de fundo: amarelo;

Texto: escolha uma fonte, e coloque tamanho 14;

Altere o caracter usado na tag li;

Crie uma tabela com o mesmo contedo (membros dasua famlia), e usando CSS: Coloque uma borda vermelha e pontilhada; Altere a cor de fundo das clulas;

Altere o texto de cada clula para que fique centralizado;

A d l


36/53

Agrupando elementos

Em alguns casos, necessrio aplicar estilos

diferentes para alguns elementos.

Por exemplo, podemos querer que um

cabealho formatado diferentemente emdeterminadas ocasies.

Para isso, podemos criar um estilo que noesteja associado a nenhum elemento do nossoHTML.

A d l t


37/53

Agrupando elementos

Por exemplo:

.introducao {

text-family: Tahoma,Arial, Verdana;

font-size: 11px;

color: #CCCCCC;}

No elemento em que quisermos aplicar estesestilos, usamos o comando class:

Este texto...

A d l t


38/53

Agrupando elementos

Tambm podemos agrupar elementos e fazer

com que este estilo que definimos seja aplicadoa todo este grupo.

Podemos agrupar os elementos de duas formasem CSS:

atravs do elemento SPAM

atravs do elemento DIV

A d l t


39/53

Agrupando elementos

Quando agrupamos elementos com div, tudo

que est dentro deste agrupamento secomportar como um bloco (inclusive comquebra de linha aps o fechamento do bloco).

Quando agrupamos elementos com spam, notemos nenhuma alterao visual, o grupo no

se comporta visualmente como um bloco.

Cada um tem sua aplicao.

A d l t


40/53

Agrupando elementos

Exemplo:

.Simpsons { background-color: red; }

.Flintstones { background-color: blue; }

Homer

MargieBartLisaMeggie

Fred

VilmaPedritaDino

O t l t


41/53

Outros elementos

Ainda existem muitas outras opes de

formatao em CSS.

Podemos por exemplo, definir quando um div

ser mostrado ou ficar oculto.

Podemos alterar o smbolo usado nos itens de

uma lista no ordenada, etc

E i


42/53

Exerccio

Repetindo este exemplo, deixe as duas listas

com aparncia bem diferentes entre si,alterando:

fonte de texto; cor do texto;

bordas;

margens.

Floating


43/53

Floating

Podemos fazer com que alguns elementos

fiquem automaticamente posicionados em umadireo da tela.

Por exemplo, podemos pedir que uma imagemfique posicionada esquerda de todos oselementos, automaticamente.

Para isso, usamos a propriedade float.

Floating


44/53

Floating

Por exemplo:

.picture { float: left; }

Podemos usar como valor para float: left, rightounone (nenhum).

Floating


45/53

Floating

A propriedade clear usada para controlar ocomportamento dos elementos que vem depoisdos elementos floats no documento.

Por padro, o elemento seguinte ao float,ocupa o espao livre ao lado do elemento

flutuado. No exemplo anterior, o textodeslocou-se automaticamente para a direita dafoto.

Floating


46/53

Floating

A propriedade clear pode assumir os valores

left, right, both ou none.

Quando usamos both, significa que queremos

que nosso bloco no contenha nenhum outrobloco sua direita ou sua esquerda.

Se no exemplo anterior, definssemos que obloco com o texto tivesse o valor de clear comoboth, o texto viria abaixo da imagem.

Posicionando elementos


47/53


Com float fazemos com que nossos elementos

fiquem posicionandos automaticamente.

Porm, podemos definir posies fixas para

nossos elementos.

Essas posies podem ser especificadas com

coordenadas X,Y(onde o topo esquerdo acoordenada (0,0), ou podem ser posiesrelativas.



48/53


Por exemplo, se quisssemos posicionar uma

foto na posio (100,

200):

.picture {

position: absolute;

top: 100px;

left: 200px;

}



49/53


Podemos tambm, alm de top e right, definiras posies em funo de bottom e left.

Para posicionar um elemento de forma relativa,usamos position como relative. A diferena

entre os dois tipos de posicionamento amaneira como o posicionamento calculado.

A posio relativa calculada com base na

posio original do elemento no documento.Isto significa que deslocamos o elemento paraa esquerda, para a direita, para cima ou parabaixo.

Layers


50/53

Layers

Utilizando os posicionamentos vistos at agora,

podemos fazer com que blocos sejamsobrepostos.

Atravs do uso de layers (camadas),conseguimos definir qual a ordem doselementos sobrepostos: qual elemento vai

aparecer acima, e qual vai aparecer abaixo.

Layers


51/53

Layers

Exemplo:

.camada1 { position: absolute; left: 100px; bottom: 100px; z-index: 1; }

.camada2 { position: absolute; left: 115px; bottom: 115px; z-index: 2; }

As camadas com nmero menor aparecem maisembaixo, enquanto as com nmero maior aparecemacima.

As camadas comeam no nmero 1, mas noprecisamos seguir uma seqncia: podemos ter umacamada 1, depois uma camada 5, por exemplo.

CSS - Concluindo


52/53

CSS- Concluindo

Utilizando CSS temos uma possibilidade quaseinfinita de formatar nossa pgina HTML.

Embora exista um padro definido pela W3C,navegadores diferentes muitas vezesinterpretam algumas propriedades CSS de

maneira diferente. Pode ser muito desgastante fazer uma pgina

que funcione corretamente em todos osnavegadores.

Algumas vezes acabamos abrindo mo de umlayout mais trabalhoso, ou ento abrimos mode que este layout funcione em determinado

navegador (no recomendado).

Bibliografia


53/53

Bibliografia

CSS para WebDesign

http://wwwmaujorcom/tutorial/fonttutphp

Dave Raggett's Introduction to CSS

http://wwww3org/MarkUp/Guide/Style

HTMLnet CSS Tutorial

http://pt-brhtmlnet/tutorials/css/

UFSCAR Desenvolvimento para Web

http://www.dc.ufscar.br:8080/latosensu/index.j

sp?site=calendario/index.html

css - basic intro

Documents