Você está na página 1de 48

CSS

Arthur Emanuel de O. Carosia


CSS O que ?
CSS
Cascading Style Sheets
Folhas de Estilo em Cascata

CSS define como elementos HTML devem ser


exibidos

Adicionados ao HTML 4.0

Folhas de Estilo externas so armazenados em


arquivos CSS
CSS Resolvendo
Problemas
HTML nunca foi destinado a conter tags para a
formatao de um documento.

HTML destinava-se a definir o contedo de um


documento, como:
<h1> Este um cabealho </ h1>
<p> Este um pargrafo. </ p>
CSS Resolvendo
Problemas
Quando tags como <font> e atributos de cor foram
adicionados especificao HTML 3.2, comeou um
problema para os desenvolvedores web.
Desenvolvimento de grandes web sites, onde
informaes de fontes e cor foram adicionadas a cada
pgina individual, tornou-se um processo longo e custoso.

Para resolver este problema, o World Wide Web


Consortium (W3C) criou o CSS.

Em HTML 4.0 e 5.0, toda a formatao pode ser


removido do documento HTML, e armazenado em
um arquivo CSS separado.
CSS Economizando
Trabalho
As definies de estilo so normalmente
guardados em arquivos .css externos.

Com um arquivo de folha de estilo externa,


possvel alterar a aparncia de um site
inteiro, alterando apenas um arquivo.
CSS - Sintaxe
Uma regra CSS consiste de um seletor e um bloco de declarao.

O seletor indica o elemento HTML que voc quer aplicar o estilo.

O bloco de declarao contm uma ou mais declaraes


separadas por ponto e vrgula.

Cada declarao inclui um nome de propriedade e um valor,


separados por dois pontos.
CSS - Exemplo
Todos os elementos <p> tero fonte
vermelha e texto centralizado.
CSS - Comentrios
Comentrios so utilizados para explicar o
cdigo e so ignorados pelos navegadores.
Comentrios em CSS so feitos com o uso

de /* e */ e podem aparecer tanto em uma


como em vrias linhas.
CSS - Seletores
Seletores CSS permitem selecionar e
manipular elementos HTML.

Seletores CSS so usados para encontrar


elementos HTML com base em seu id,
classe, tipo, atributo, etc.
CSS - Seletores
Seleciona elementos por meio do seu nome.
Pode ser aplicado para um elemento apenas

ou um grupo de elementos.
CSS - Seletores
Elementos tambm podem ser selecionados
com base no seu id
O id deve ser nico para um elemento

dentro da pgina

<p id="para1">Hello World!</p>


CSS - Seletores
Elementos tambm podem ser selecionados
com base na sua classe.
A classe pode ser aplicada a mais de um

elemento dentro da mesma pgina.

<h1 class="center">Cabealho vermelho e


centralizado.</h1>
<p class="center">Pargrafo Vermelho e Centralizado.</p>
CSS - Seletores
Elementos tambm podem ser selecionados
com base na sua classe.
A classe pode ser aplicada a mais de um

elemento dentro da mesma pgina.

<h1 class="center">Cabealho vermelho e


centralizado.</h1>
<p class="center">Pargrafo Vermelho
Se aplica a todos e Centralizado.</p>
elementos com
class center
CSS - Seletores
Elementos tambm podem ser selecionados
com base na sua classe.
A classe pode ser aplicada a mais de um

elemento dentro da mesma pgina.

<h1 class="center">Cabealho vermelho e


centralizado.</h1>
<p class="center">Pargrafo Vermelho e Centralizado.</p>

Se aplica somente tag <p> com


class center
CSS Como utilizar
H trs maneiras de inserir uma folha de
estilo:

Folha de estilo externa


Folha de estilo interna
Inline
CSS Inline
Para usar estilos inline, adicione o atributo
style para a marca relevante.
No recomendado utilizar estilos inline.

Exemplo
<h1 style = "color: blue; margin-left: 30px;"> Cabealho
</ h1>.
CSS Folha de Estilo
Interna
Uma folha de estilo interna deve ser usada
quando um nico documento tem um estilo
nico.
Define-se estilos internos na seo <head> de
uma pgina HTML, dentro da tag <style>.
CSS Folha de Estilo
Externa
Uma folha de estilo externa ideal quando
o estilo aplicado a muitas pginas.

Com uma folha de estilo externa, voc pode


alterar a aparncia de um site inteiro,
alterando apenas um arquivo.

O arquivo de folha de estilo deve ser salvo


com a extenso .css.
CSS Folha de Estilo
Externa
Arquivo HTML fazendo referncia ao arquivo CSS

Arquivo CSS
Exerccios
Faa uma pgina principal de um portal de
notcias esportivas que possua um arquivo
css externo definindo o seu estilo.
A pgina deve possuir as seguintes sees:
Cabealho:
ttulo do portal com sua imagem
barra de links de navegao entre categorias de
notcias (futebol, basquete, volei, etc.),
Seo de notcias
Trs notcias resumidas com suas respectivas imagens,
links para notcias completas e vdeos relacionados
Rodap
Dados para contato do portal
Background
Background-image

Background-Color

background-position:
Define a posio inicial de uma imagem de fundo
background-repeat
Define como uma imagem de fundo ser repetido
Texto
Color: cor do texto
Text-Align: alinhamento
Text-decoration: decorao
Text-indent: indentao
Fonte
Font-family: nome da fonte
Font-style: estilo da fonte
Font-size: tamanho da fonte
Font-weight: especifica o peso (negrito) da

fonte
Links
Pode-se utilizar qualquer propriedade CSS
com links
Links podem ser estilizados diferentemente,

dependendo do estado em que esto


Listas
Diferentes marcadores de lista
Utilizar uma imagem como marcador de

lista
Pode-se tambm utilizar as demais

propriedades CSS
Tabelas
Bordas
Colar as bordas
Tamanho da Tabela
Alinhamento do texto
Tabelas
Espao interno s bordas
Cor da letra e cor de fundo
Exerccio
Use a pgina de notcias criada no exerccio
anterior e faa as seguintes alteraes no
arquivo CSS:
Use fonte Arial de tamanho 15px e cor preta para
as notcias
Use uma imagem de fundo no cabealho
Adicione diferentes efeitos aos eventos em cada
um dos links
Faa da barra de links uma lista no-ordenada e
formate essa barra no arquivo CSS
Insira uma tabela no texto contendo os resultados
dos ltimos jogos de futebol e formate essa tabela
no arquivo CSS
Box Model
Todos elementos HTML
podem ser considerados
caixas.
Contedo - O contedo
da caixa, em que o texto
e as imagens aparecem
Padding - rea em torno
do contedo.
Border O limite em
torno do contedo
Margin - rea fora dos
limites
Box Model
Bordas
Border: define as bordas dos elementos
HTML
Border-Style: Estilo da borda. Pode

assumir os valores a seguir:


Bordas
Border-Width: Largura da Borda.
Determinada em pixels ou medidas thin,
medium, ou thick
Border-Color: Cor da Borda. Pode ser

determinada pelo nome da cor, valor em


RGB ou Hexadecimal
Margem
Margin: propriedade que define o espao
ao redor dos elementos. Pode ser definida
automaticamente (auto), por um tamanho
(pixels) determinado, ou em porcentagem.
Padding
Padding: define o espao entre a borda do
elemento e o contedo do elemento. Pode
ser usado um tamanho determinado ou
porcentagem.
Exerccio
Use a pgina de notcias criada no exerccio
anterior e faa as seguintes alteraes no
arquivo CSS:
Insira bordas diferenciadas em cada uma das
notcias e tambm em cada seo da pgina.
Adicione margens e use a propriedade padding
em cada uma das notcias e no cabealho.
Visibilidade dos
Elementos
Display: especifica como um elemento
exibido.
Visibility: especifica se um elemento deve

ser visvel ou oculto.


Display: Elementos Inline e de
Bloco
Elemento de bloco
ocupa toda a largura disponvel e tem uma quebra de
linha antes e depois dele.
<h1>
<p>
<li>
<div>
Elemento inline
ocupa apenas o mximo de largura, se necessrio, e
no fora quebras de linha.
<span>
<a>
Posicionamento
Positioning: permite posicionar um
elemento na pgina. Usa top, bottom, left,
right.
Fixo: posiciona o elemento relativo janela do
navegador
Relativo: posiciona o elemento relativo sua
posio normal
Absoluto: posiciona o elemento relativamente ao
seu elemento pai
Posicionamento
Positioning: permite posicionar um
elemento na pgina. Usa top, bottom, left,
right.
Fixo: posiciona o elemento relativo janela do
navegador

Relativo: posiciona o elemento relativo sua


posio normal
Absoluto: posiciona o elemento relativamente ao
seu elemento pai
Posicionamento
Positioning: permite posicionar um elemento
na pgina. Usa top, bottom, left, right.
Fixo: posiciona o elemento relativo janela do
navegador
Relativo: posiciona o elemento relativo sua posio
normal

Absoluto: posiciona o elemento relativamente ao


seu elemento pai
Posicionamento
Positioning: permite posicionar um
elemento na pgina. Usa top, bottom, left,
right.
Fixo: posiciona o elemento relativo janela do
navegador
Relativo: posiciona o elemento relativo sua
posio normal
Absoluto: posiciona o elemento relativamente ao
seu elemento pai
Flutuaes
Float: os elementos podem ser colocados
esquerda ou direita
Clear: Especifica em quais lados de um

elemento outros elementos flutuando no


so permitidos.
Alinhamento Horizontal
Alinhamento de elementos de bloco
Pode ser feito com o uso de margens ou
flutuaes.
Opacidade/Transparncia
Opacity: nvel de opacidade em um
elemento HTML.
Tipos de Mdia
O uso de @media torna possvel definir diferentes estilos
para diferentes tipos de mdia na mesma folha de estilo
Handheld:
usado para dispositivos pequenos ou portteis
Print:
usado para impressoras
Projection:
usado para apresentaes projetadas, como slides
Screen:
usada para telas de computador
Tty:
Usado para mdia usando uma grade de caracteres de passo
fixo, como teletypes e terminais
Tv:
usado para dispositivos tipo televiso.
Tipos de Mdia
Exerccio
Pesquisar e montar uma pgina web
contendo os seguintes tpicos
Navigation bar
DropDown
Transio
Animao
CSS
Arthur Emanuel de O. Carosia