CSS

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
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

centralizado.</h1>
<p class="center">Pargrafo Vermelho
Se aplica a todos e Centralizado.</p>
elementos com
class center
CSS - Seletores

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
right.
navegador

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

seu elemento pai
Posicionamento
right.
navegador
posio normal
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

CSS - Introdução

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS - Introdução

Încărcat de

Drepturi de autor:

Formate disponibile

Arthur Emanuel de O. Carosia

CSS define como elementos HTML devem ser

Adicionados ao HTML 4.0

Folhas de Estilo externas so armazenados em

HTML destinava-se a definir o contedo de um

Para resolver este problema, o World Wide Web

Em HTML 4.0 e 5.0, toda a formatao pode ser

Com um arquivo de folha de estilo externa,

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

O bloco de declarao contm uma ou mais declaraes

Cada declarao inclui um nome de propriedade e um valor,

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

Seletores CSS so usados para encontrar

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

elemento dentro da mesma pgina.

<h1 class="center">Cabealho vermelho e

elemento dentro da mesma pgina.

<h1 class="center">Cabealho vermelho e

elemento dentro da mesma pgina.

<h1 class="center">Cabealho vermelho e

Se aplica somente tag <p> com

Folha de estilo externa

Com uma folha de estilo externa, voc pode

O arquivo de folha de estilo deve ser salvo

dependendo do estado em que esto

assumir os valores a seguir:

determinada pelo nome da cor, valor em

ser visvel ou oculto.

Relativo: posiciona o elemento relativo sua

Absoluto: posiciona o elemento relativamente ao

elemento outros elementos flutuando no

S-ar putea să vă placă și