8/7/2019 CSS - Basic Intro
1/53
Rael Gugelmin Cunha raelgc@gmailcom
CSS
Cascade Style Sheets
Conceitos Bsicos
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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)
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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; }
8/7/2019 CSS - Basic Intro
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/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
9/53
Inline
Podemos aplicar CSS, usando o atributo STYLE
dentro do elemento HTML:
Exemplo
Esta uma pgina com fundo vermelho
8/7/2019 CSS - Basic Intro
10/53
Tag Style
Podemos aplicar CSS, usando a tag STYLE do HTML:
Exemplo
body { background-color: #FF0000; }
Esta uma pgina com fundo vermelho
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
12/53
Arquivo externo
Para utilizarmos este arquivo, colocamos um
link em nossa pgina HTML:
Exemplo
Esta uma pgina com fundo vermelho
8/7/2019 CSS - Basic Intro
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)
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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;
}
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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; }
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
27/53
Margens
Exemplo:
margin-top: 30px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 10px;
Ou:
margin: 30px 10px 30px 10px;
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
29/53
Padding
Exemplo:
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px; padding-left: 10px;
Ou:
padding: 30px 10px 30px 10px;
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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.
8/7/2019 CSS - Basic Intro
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;
8/7/2019 CSS - Basic Intro
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;
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
40/53
Agrupando elementos
Exemplo:
.Simpsons { background-color: red; }
.Flintstones { background-color: blue; }
Homer
MargieBartLisaMeggie
Fred
VilmaPedritaDino
O t l t
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
44/53
Floating
Por exemplo:
.picture { float: left; }
Podemos usar como valor para float: left, rightounone (nenhum).
Floating
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
47/53
Posicionando elementos
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.
Posicionando elementos
8/7/2019 CSS - Basic Intro
48/53
Posicionando elementos
Por exemplo, se quisssemos posicionar uma
foto na posio (100,
200):
.picture {
position: absolute;
top: 100px;
left: 200px;
}
Posicionando elementos
8/7/2019 CSS - Basic Intro
49/53
Posicionando elementos
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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
8/7/2019 CSS - Basic Intro
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